<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>sviluppo temi wordpress - Web Design | Creazione Siti Internet</title>
	<atom:link href="https://www.mrtux.it/tag/sviluppo-temi-wordpress/feed" rel="self" type="application/rss+xml" />
	<link>https://www.mrtux.it</link>
	<description>Sviluppo Siti Web - Assistenza WordPress</description>
	<lastBuildDate>Tue, 26 May 2026 12:56:11 +0000</lastBuildDate>
	<language>it-IT</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://www.mrtux.it/wp-content/uploads/2022/06/favicon-150x150.png</url>
	<title>sviluppo temi wordpress - Web Design | Creazione Siti Internet</title>
	<link>https://www.mrtux.it</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>OpenCode per temi WordPress: ambiente LAMP, ottimizzazione AGENTS.md, server MCP</title>
		<link>https://www.mrtux.it/opencode-per-lo-sviluppo-di-temi-wordpress-ambiente-lamp-locale-ottimizzazione-agents-md-e-server-mcp</link>
					<comments>https://www.mrtux.it/opencode-per-lo-sviluppo-di-temi-wordpress-ambiente-lamp-locale-ottimizzazione-agents-md-e-server-mcp#respond</comments>
		
		<dc:creator><![CDATA[Emilio Petrozzi]]></dc:creator>
		<pubDate>Tue, 26 May 2026 11:46:34 +0000</pubDate>
				<category><![CDATA[sviluppo-web]]></category>
		<category><![CDATA[lamp locale wordpress]]></category>
		<category><![CDATA[mcp server wordpress]]></category>
		<category><![CDATA[openclaw agents]]></category>
		<category><![CDATA[opencode wordpress]]></category>
		<category><![CDATA[opencode wordpress theme development]]></category>
		<category><![CDATA[sviluppo temi wordpress]]></category>
		<category><![CDATA[wordpress dev environment]]></category>
		<category><![CDATA[wordpress theme development]]></category>
		<guid isPermaLink="false">https://www.mrtux.it/?p=3408</guid>

					<description><![CDATA[Scopri come configurare un ambiente LAMP locale, ottimizzare AGENTS.md e usare i server MCP per sviluppare temi WordPress professionali con OpenCode.]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading">Setup LAMP locale per sviluppo WordPress con OpenCode</h2>


<p class="wp-block-paragraph">Quando si tratta di sviluppare temi WordPress con un agente AI come OpenCode, l&#x27;ambiente di lavoro fa la differenza tra un flusso fluido e una sequela di intoppi. Un server LAMP locale — Linux, Apache, MySQL, PHP — ti dà il controllo completo senza dipendere da connessioni remote durante la generazione del codice. È il setup che i developer WordPress professionisti usano da anni, e che si integra naturalmente con strumenti come OpenCode.</p>


<p class="wp-block-paragraph">Se lavori già con AI e WordPress, sai che il grosso del tempo non sta nel scrivere codice, ma nel configurare l&#x27;ambiente, gestire le dipendenze e tenere il ambiente di staging allineato con la produzione. Per questo motivo, prima di entrare nei dettagli su OpenCode e i server MCP, partiamo dalla base: come montare un ambiente LAMP solido su Ubuntu o tramite Docker.</p>


<p class="wp-block-paragraph">Per chi arriva da un approccio più visuale e vuole capire come l&#x27;AI si inserisce nel workflow WordPress, abbiamo analizzato nel dettaglio l&#x27;approccio con <a href="https://www.mrtux.it/web-design-wordpress-novamira-ai" data-wpel-link="internal" target="_self" rel="noopener">Novamira.ai per il web design WordPress</a>, che condivide molti principi di integrazione con agenti AI che applicheremo qui.</p>


<h2 class="wp-block-heading">Perché un ambiente LAMP locale per WordPress theme development</h2>


<p class="wp-block-paragraph">Un ambiente LAMP locale ti dà un&#x27;istanza WordPress completa — database MySQL, PHP engine, web server Apache — tutto sul tuo机器. Non servono upload FTP, non c&#x27;è latenza di rete, non dipendi da un hosting provider. OpenCode può leggere e scrivere file direttamente sul filesystem, interrogare il database, attivare e disattivare plugin via WP-CLI, il tutto senza uscire dal tuo terminale.</p>


<p class="wp-block-paragraph">I vantaggi concreti:</p>


<ul class="wp-block-list"><li><strong>Velocità</strong>: nessuna round-trip verso un server remoto. OpenCode legge <code>style.css</code> o <code>theme.json</code> in millisecondi.</li><li><strong>Sicurezza</strong>: esperimenti e refactoring restano in locale finché non decidi tu cosa promuovere in staging.</li><li><strong>Riproducibilità</strong>: Docker Compose o Lando ti permettono di ricostruire l&#x27;ambiente identico su qualsiasi机器.</li><li><strong>WP-CLI nativo</strong>: puoi lanciare comandi WordPress da terminale senza passare per l&#x27;interfaccia admin.</li></ul>


<h3 class="wp-block-heading">Ubuntu: installazione manuale LAMP</h3>


<p class="wp-block-paragraph">Su Ubuntu 22.04 o 24.04, un setup LAMP completo per WordPress si installa in pochi passaggi. Il vantaggio rispetto a soluzioni pre-confezionate è che hai il pieno controllo delle versioni di PHP e MySQL.</p>


<pre class="wp-block-code"><code># Installazione pacchetti Apache, MySQL e PHP
sudo apt update &amp;&amp; sudo apt install -y apache2 mysql-server php8.2 \
  php8.2-mysql php8.2-cli php8.2-curl php8.2-gd php8.2-mbstring \
  php8.2-xml php8.2-zip php8.2-bcmath php8.2-intl

# Abilitare mod Apache necessari
sudo a2enmod rewrite headers ssl

# Avviare Apache e MySQL
sudo systemctl enable --now apache2 mysql

# Proteggere installazione MySQL (password root)
sudo mysql_secure_installation</code></pre>


<p class="wp-block-paragraph">Dopo l&#x27;installazione, crea il database WordPress. Il comando MySQL seguente imposta tutto in una volta:</p>


<pre class="wp-block-code"><code>-- Creazione database e utente per WordPress locale
CREATE DATABASE wordpress_dev CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'wpuser'@'localhost' IDENTIFIED BY 'wppassword';
GRANT ALL PRIVILEGES ON wordpress_dev.* TO 'wpuser'@'localhost';
FLUSH PRIVILEGES;</code></pre>


<p class="wp-block-paragraph">A questo punto scarica WordPress e puntando il browser su <code>http://localhost</code> partirà l&#x27;installazione guidata classica. Per un workflow più rapido con OpenCode, usa WP-CLI:</p>


<pre class="wp-block-code"><code># Download e configurazione WordPress via WP-CLI
wp core download --locale=it_IT
wp config create --dbname=wordpress_dev --dbuser=wpuser --dbpass=wppassword
wp core install --url="http://localhost" --title="Sviluppo WP" --admin_user=admin --admin_password=admin --admin_email=dev@local.it</code></pre>


<p class="wp-block-paragraph">La combinazione Ubuntu LAMP + WP-CLI ti dà un ambiente dove OpenCode può operare con i server MCP descritti più avanti. Per chi preferisce un setup pre-configurato con staging automatico, consulta la nostra guida agli <a href="https://www.mrtux.it/web-design-per-wordpress-tool-essenziali-per-creare-temi-efficaci-nel-2026" data-wpel-link="internal" target="_self" rel="noopener">strumenti essenziali per il web design WordPress</a> che include configurazioni LAMP alternative.</p>


<h3 class="wp-block-heading">Docker: ambiente LAMP containerizzato</h3>


<p class="wp-block-paragraph">Se preferisci la containerizzazione, Docker elimina la necessità di installare pacchetti nativi e garantisce portabilità. Il file <code>docker-compose.yml</code> seguente definisce un ambiente LAMP completo per WordPress theme development:</p>


<pre class="wp-block-code"><code># docker-compose.yml per WordPress theme dev con LAMP
version: '3.9'
services:
  wordpress:
    image: wordpress:6.6-php8.2-apache
    container_name: wp_theme_dev
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: wp_theme
      WORDPRESS_DB_USER: wpuser
      WORDPRESS_DB_PASSWORD: wppassword
    volumes:
      - ./wp-content:/var/www/html/wp-content
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
    depends_on:
      db:
        condition: service_healthy

  db:
    image: mysql:8.0
    container_name: wp_theme_db
    environment:
      MYSQL_DATABASE: wp_theme
      MYSQL_USER: wpuser
      MYSQL_PASSWORD: wppassword
      MYSQL_ROOT_PASSWORD: rootpassword
    volumes:
      - db_data:/var/lib/mysql
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
      timeout: 10s
      retries: 5

volumes:
  db_data:</code></pre>


<p class="wp-block-paragraph">Il mount di <code>./wp-content</code> sul container è strategico: i file del tema che OpenCode genera o modifica sono accessibili sia dal container che dal host, senza bisogno di rsync o FTP. Lancia l&#x27;ambiente con:</p>


<pre class="wp-block-code"><code># Avvio ambiente Docker LAMP per WordPress
docker compose up -d

# Verifica che WordPress risponda
curl -s -o /dev/null -w "%{http_code}" http://localhost:8080</code></pre>


<p class="wp-block-paragraph">Questa configurazione è identica per tutti i membri del team: chiunque abbia Docker installato può replicare l&#x27;ambiente con un singolo comando.</p>


<h2 class="wp-block-heading">Configurazione e ottimizzazione di AGENTS.md per WordPress</h2>


<p class="wp-block-paragraph">Il file <code>AGENTS.md</code> nel workspace di OpenClaw è il cuore della configurazione dell&#x27;agente AI. Per lo sviluppo WordPress, una configurazione mirata rende OpenCode significativamente più efficace: invece di generare codice generico, rispetta le convenzioni del progetto, conosce la struttura del tema, sa quali plugin sono attivi.</p>


<h3 class="wp-block-heading">Struttura base di AGENTS.md ottimizzato per WordPress</h3>


<p class="wp-block-paragraph">Una configurazione AGENTS.md efficace per WordPress theme development contiene alcune sezioni chiave. La prima è il context del progetto:</p>


<pre class="wp-block-code"><code># AGENTS.md — WordPress Theme Development

## Progetto
- Tipo: Tema WordPress custom (child theme / block theme / classic)
- CMS: WordPress 6.4+ con PHP 8.2
- Theme slug: __THEME_SLUG__
- Text domain: __TEXT_DOMAIN__
- Plugin previsti: Rank Math SEO, Contact Form 7, WooCommerce (se ecommerce)

## Struttura tema attesa

mytheme/
├── style.css              # Header + CSS principale
├── functions.php          # Setup, hook, enqueue
├── theme.json              # Full Site Editing (se block theme)
├── index.php               # Fallback template
├── header.php              # Head + header markup
├── footer.php              # Footer + script closing
├── front-page.php          # Homepage
├── singular.php            # Single post / page
├── archive.php             # Archivio post
├── search.php              # Risultati ricerca
├── 404.php                 # Pagina errore
├── screenshot.png          # 880x660px
├── assets/
│   ├── css/style.css
│   ├── js/main.js
│   └── images/
└── parts/
    ├── navbar.php
    ├── loop.php
    └── footer-content.php</code></pre>


<p class="wp-block-paragraph">Questa struttura rispecchia lo standard WordPress e permette a OpenCode disap dove collocare ogni file generato.</p>


<h3 class="wp-block-heading">Regole e vincoli per il codice WordPress</h3>


<p class="wp-block-paragraph">AGENTS.md deve includere anche i vincoli tecnici che OpenCode deve rispettare. Questo evita che generi codice incompatibile con il resto dell&#x27;installazione:</p>


<pre class="wp-block-code"><code>## Vincoli tecnici WordPress

### PHP
- Sempre <code>&lt;?php</code> opening tag, mai <code>&lt;?</code> short open tag
- Sempre <code>if ( ! defined( &#039;ABSPATH&#039; ) ) exit;</code> all'inizio di ogni file
- Prefix tutte le funzioni con lo slug del tema: <code>mytheme_enqueue_assets()</code>
- Non usare funzioni deprecate (cerca <code>WP_DEPRECATED</code> in documentazione)

### CSS
- BEM naming convention: <code>.mytheme-block__element--modifier</code>
- Mobile-first responsive: <code>@media (min-width: 768px)</code> breakpoint tablet
- Nessun <code>!important</code> se non strettamente necessario e commentato
- Variabili CSS per colori e spacing: <code>--mytheme-color-primary</code>

### Hook WordPress
- Priorità standard <code>10</code>, specificare se diversa
- Usare <code>__return_false</code> / <code>__return_true</code> per filtri booleani
- I hook personalizzati del tema: <code>do_action( &#039;mytheme_before_header&#039; )</code>

### Sicurezza output
- Tutti gli output HTML: <code>esc_html()</code>, <code>esc_attr()</code>, <code>esc_url()</code>
- Tutti gli output JS: <code>wp_json_encode()</code> + <code>esc_html()</code>
- Tutti gli input utente: <code>sanitize_text_field()</code>, <code>intval()</code>, <code>absint()</code>
- Non usare mai <code>eval()</code> né <code>extract()</code> con input non validato

### theme.json (block theme)
- Versione schema: "2" per WordPress 6.1+
- Colori custom: usare sempre <code>slug</code> minuscolo con trattino
- Tipografia: unità <code>px</code> o <code>rem</code>, mai <code>em</code> per scale fix</code></pre>


<h3 class="wp-block-heading">Prompt e comandi personalizzati</h3>


<p class="wp-block-paragraph">Una sezione spesso trascurata è quella dei comandi rapidi che accelerano il workflow con OpenCode. Definirli in AGENTS.md significa non doverli riscrivere ogni volta:</p>


<pre class="wp-block-code"><code>## Comandi rapidi WordPress (usare con OpenCode)

### Scaffolding
/create-theme name=mytheme type=classic|block|child parent=twentytwentyfour
/generate-template-part name=newsletter-bar location=footer
/add-block-pattern category=hero name=hero-home title="Hero Homepage"

### Debug locale
/wp-cli db export  # esporta database locale
/wp-cli theme list # lista temi installati con status
/wp-cli post list --post_type=page --fields=ID,post_title,post_status

### Hook utility
/show-hooks         # mostra tutti i filtri e azioni registrati
/list-sidebars      # elenca sidebars registrati con ID e descrizione
/check-theme-deps   # verifica dipendenze plugin del tema</code></pre>


<p class="wp-block-paragraph">Aggiornare AGENTS.md con la configurazione WordPress specifica del progetto è un investimento iniziale che si ripaga in ogni sessione successiva. OpenCode avrà il contesto necessario per generare codice coerente con la struttura esistente, rispettando le convenzioni definite, senza doverle ripetere nei prompt.</p>


<h2 class="wp-block-heading">Server MCP essenziali per lo sviluppo WordPress con OpenCode</h2>


<p class="wp-block-paragraph">Il protocollo MCP (Model Context Protocol) è il layer che permette a OpenCode di interagire con l&#x27;ecosistema WordPress: leggere file del tema, interrogare il database, cercare nella directory WordPress.org, usare WP-CLI. Ogni server MCP copre un&#x27;area operativa specifica.</p>


<h3 class="wp-block-heading">Server MCP Filesystem</h3>


<p class="wp-block-paragraph">Il server MCP Filesystem è probabilmente il più importante per lo sviluppo WordPress. Ti dà accesso completo al filesystem del progetto, permettendo a OpenCode di leggere template esistenti, modificare <code>functions.php</code>, creare nuovi file del tema, e navigare la struttura delle directory.</p>


<pre class="wp-block-code"><code># Avvio del server MCP filesystem
# Configurazione tipica in openclaw config o .mcp.json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem",
               "/home/user/wordpress-dev/wp-content/themes",
               "/home/user/wordpress-dev/wp-content/plugins"]
    }
  }
}</code></pre>


<p class="wp-block-paragraph">Con questo server attivo, OpenCode può navigare la struttura del tema, leggere file esistenti prima di proporne modifiche, e scrivere nuovi file direttamente nella directory del progetto. Il vantaggio rispetto a prompt generici è che il contesto è sempre il codice reale del progetto, non un&#x27;astrazione.</p>


<h3 class="wp-block-heading">Server MCP WordPress.org</h3>


<p class="wp-block-paragraph">Il server MCP WordPress.org permette di cercare nella directory dei plugin e dei temi ufficiali, leggere recensioni, verificare compatibilità e scaricare informazioni su pacchetti specifici. È utile quando si valutano plugin da includere nel tema o quando si vuole verificare che una funzionalità non esista già in un plugin maturo.</p>


<pre class="wp-block-code"><code># Ricerca plugin WordPress.org via MCP
mcp__wordpress__search_plugins query="seo meta description" per_page=10

# Ottenere dettagli plugin specifico
mcp__wordpress__get_plugin plugin_slug="wordpress-seo"</code></pre>


<p class="wp-block-paragraph">La ricerca nella directory ufficiale è particolarmente utile per verificare se un plugin copre già una funzionalità che altrimenti implementeresti da zero. Sviluppare funzionalità native quando esiste un plugin maturo è spesso uno spreco di tempo e manutenzione.</p>


<h3 class="wp-block-heading">Server MCP WordPress Studio / WP-CLI</h3>


<p class="wp-block-paragraph">Il server MCP WordPress Studio espone WP-CLI e l&#x27;istanza WordPress completa all&#x27;agente AI. Con questo server, OpenCode può eseguire comandi WP-CLI, attivare e disattivare plugin, generare contenuto di test, resettare il database, e gestire aspetti runtime dell&#x27;installazione WordPress.</p>


<pre class="wp-block-code"><code># Comandi WP-CLI accessibili via MCP
mcp__wpcli__run command="theme list --format=table"
mcp__wpcli__run command="plugin list --status=active --format=json"
mcp__wpcli__run command="post create --post_type=page --post_title="Test Page" --post_status=draft"

# Reset database locale (utile tra un test e l'altro)
mcp__wpcli__run command="db reset --yes"</code></pre>


<p class="wp-block-paragraph">Questo è il server che collega OpenCode al lato runtime di WordPress: non solo il codice statico, ma il comportamento effettivo del CMS con plugin attivi, post esistenti, opzioni configurate.</p>


<h3 class="wp-block-heading">Server MCP Database</h3>


<p class="wp-block-paragraph">Per operazioni dirette sul database MySQL, il server MCP Database ti dà accesso SQL completo. È meno frequente da usare direttamente, ma diventa essenziale quando servono query di massa, export dati, o verifiche sulla struttura delle tabelle del sito.</p>


<pre class="wp-block-code"><code>-- Verificare struttura tabella postmeta prima di una query personalizzata
DESCRIBE wp_postmeta;

-- Conteggio post per stato (utile dopo un import massiccio)
SELECT post_status, COUNT(*) FROM wp_posts GROUP BY post_status;

-- Verificare opzioni del tema (customizer data)
SELECT option_name, option_value FROM wp_options WHERE option_name LIKE '%mytheme%';</code></pre>


<p class="wp-block-paragraph">Il rischio di operare direttamente sul database è alto: una query <code>UPDATE</code> o <code>DELETE</code> senza <code>WHERE</code> può distruggere dati. Usa questo server solo quando sai esattamente cosa stai facendo, e sempre su ambiente locale o di staging, mai su produzione.</p>


<h2 class="wp-block-heading">Workflow pratico: creare un tema WordPress completo da zero con OpenCode</h2>


<p class="wp-block-paragraph">Messe in fila tutte le configurazioni, il workflow reale con OpenCode e WordPress è iterativo. Non si tratta di generare un tema intero in un singolo prompt, ma di costruirlo progressivamente: struttura, template, funzionalità, test, raffinamento.</p>


<h3 class="wp-block-heading">Step 1 — Brief iniziale e scaffolding</h3>


<p class="wp-block-paragraph">Il prompt iniziale imposta il progetto. Invece di descrivere genericamente &quot;voglio un tema per blog&quot;, siamo specifici: funzionalità richieste, plugin da supportare, style guide se esistono, breakpoint responsivi.</p>


<pre class="wp-block-code"><code># Prompt iniziale per OpenCode
/create-wordpress-theme
  name=mythemeblog
  domain=mythemeblog
  description="Tema blog personale con focus leggibilità"
  features=post-grid,related-posts,dark-mode,cookie-banner,amp
  plugins=rank-math-seo,contact-form-7,wp-optimize
  breakpoints=mobile:375,tablet:768,desktop:1200
  style=groove-retro-light</code></pre>


<p class="wp-block-paragraph">OpenCode analizza il brief e produce la struttura base: <code>style.css</code> con header completo, <code>functions.php</code> con setup iniziale, <code>theme.json</code> se richiesto per block theme, e i template PHP essenziali.</p>


<h3 class="wp-block-heading">Step 2 — Configurazione functions.php</h3>


<p class="wp-block-paragraph">Dopo lo scaffolding, il file <code>functions.php</code> va arricchito con le funzionalità specifiche del progetto. OpenCode può generare blocchi mirati per ogni necessità:</p>


<pre class="wp-block-code"><code>&lt;?php
/**
 * MyThemeBlog functions and definitions
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 */

if ( ! defined( 'ABSPATH' ) ) exit;

/** === Enqueue Scripts e Styles === */
function mythemeblog_enqueue_assets() {
    // CSS principale del tema
    wp_enqueue_style( 'mythemeblog-style', get_stylesheet_uri(), [], wp_get_theme()-&gt;get( 'Version' ) );
    // JavaScript con defer per performance
    wp_enqueue_script( 'mythemeblog-main', get_template_directory_uri() . '/assets/js/main.js', [], '1.0.0', true );
    // Google Fonts (async)
    wp_enqueue_style( 'mythemeblog-fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap [], null );
}
add_action( 'wp_enqueue_scripts', 'mythemeblog_enqueue_assets' );

/** === Theme Support === */
function mythemeblog_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'custom-logo', [
        'height' =&gt; 100,
        'width' =&gt; 300,
        'flex-height' =&gt; true,
        'flex-width'  =&gt; true,
    ] );
    add_theme_support( 'post-thumbnails', ['post', 'page'] );
    add_theme_support( 'html5', ['search-form', 'comment-form', 'comment-list', 'gallery', 'caption'] );
    add_theme_support( 'editor-styles' );
    add_theme_support( 'responsive-embeds' );
}
add_action( 'after_setup_theme', 'mythemeblog_setup' );

/** === Register Nav Menus === */
function mythemeblog_menus() {
    register_nav_menus( [
        'primary' =&gt; 'Primary Menu',
        'footer'  =&gt; 'Footer Menu',
        'mobile'  =&gt; 'Mobile Menu',
    ] );
}
add_action( 'init', 'mythemeblog_menus' );

/** === Content Width === */
function mythemeblog_content_width() {
    $GLOBALS['content_width'] = apply_filters( 'mythemeblog_content_width', 1200 );
}
add_action( 'after_setup_theme', 'mythemeblog_content_width', 0 );</code></pre>


<p class="wp-block-paragraph">Questo snippet è un punto di partenza solido. OpenCode lo genera tenendo conto di <code>theme.json</code> se presente, rispettando le variabili CSS definite nella style guide, e includendo i hook essenziali per WordPress.</p>


<h3 class="wp-block-heading">Step 3 — Template partials e Loop</h3>


<p class="wp-block-paragraph">Il loop WordPress è il cuore di qualsiasi tema. OpenCode può generare template partials modulari che rispettano la Single Responsibility Principle:</p>


<pre class="wp-block-code"><code>&lt;?php
/**
 * Loop dei post — partial da includere in archive.php o index.php
 * @package MyThemeBlog
 */

if ( have_posts() ) : ?&gt;

    &lt;div class="mythemeblog-grid"&gt;
        &lt;?php
        while ( have_posts() ) :
            the_post();
            $category = get_the_category();
            $first_cat = $category ? $category[0]-&gt;name : '';
        ?&gt;
            &lt;article id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class( 'mythemeblog-card' ); ?&gt;&gt;
                &lt;?php if ( has_post_thumbnail() ) : ?&gt;
                    &lt;div class="mythemeblog-card__thumbnail"&gt;
                        &lt;a href="&lt;?php the_permalink(); ?&gt;" aria-hidden="true" tabindex="-1"&gt;
                            &lt;?php the_post_thumbnail( 'medium_large', ['loading' =&gt; 'lazy'] ); ?&gt;
                        &lt;/a&gt;
                    &lt;/div&gt;
                &lt;?php endif; ?&gt;

                &lt;div class="mythemeblog-card__content"&gt;
                    &lt;?php if ( $first_cat ) : ?&gt;
                        &lt;span class="mythemeblog-card__category"&gt;
                            &lt;?php echo esc_html( $first_cat ); ?&gt;
                        &lt;/span&gt;
                    &lt;?php endif; ?&gt;

                    &lt;h2 class="mythemeblog-card__title"&gt;
                        &lt;a href="&lt;?php the_permalink(); ?&gt;" rel="bookmark"&gt;
                            &lt;?php the_title( '&lt;span&gt;', '&lt;/span&gt;' ); ?&gt;
                        &lt;/a&gt;
                    &lt;/h2&gt;

                    &lt;div class="mythemeblog-card__excerpt"&gt;
                        &lt;?php echo esc_html( wp_trim_words( get_the_excerpt(), 20, '...' ) ); ?&gt;
                    &lt;/div&gt;

                    &lt;time class="mythemeblog-card__date" datetime="&lt;?php echo esc_attr( get_the_date( 'c' ) ); ?&gt;"&gt;
                        &lt;?php echo esc_html( get_the_date() ); ?&gt;
                    &lt;/time&gt;
                &lt;/div&gt;
            &lt;/article&gt;
        &lt;?php endwhile; ?&gt;
    &lt;/div&gt;

    &lt;?php
    the_posts_pagination( [
        'mid_size'  =&gt; 2,
        'prev_text' =&gt; __( '← Precedente', 'mythemeblog' ),
        'next_text' =&gt; __( 'Successivo →', 'mythemeblog' ),
    ] );

else :
    ?&gt;
    &lt;p class="mythemeblog-empty"&gt;&lt;?php esc_html_e( 'Nessun articolo trovato.', 'mythemeblog' ); ?&gt;&lt;/p&gt;
    &lt;?php
endif;</code></pre>


<p class="wp-block-paragraph">Il markup usa classi BEM (<code>mythemeblog-card__title</code>), escaping sistematico (<code>esc_html</code>, <code>esc_attr</code>, <code>esc_url</code>), e lazy loading per le immagini. Sono dettagli che fanno la differenza in termini di performance e sicurezza.</p>


<h3 class="wp-block-heading">Step 4 — Customizer: opzioni del tema</h3>


<p class="wp-block-paragraph">Per un blog con esigenze specifiche, le opzioni del Customizer danno ai redattori controllo diretto sul branding senza toccare codice:</p>


<pre class="wp-block-code"><code>&lt;?php
/**
 * Opzioni Customizer per MyThemeBlog
 * @link https://developer.wordpress.org/themes/customize-api/
 */

function mythemeblog_customize_register( $wp_customize ) {

    // Sezione: Colori del brand
    $wp_customize-&gt;add_section( 'mythemeblog_colors', [
        'title'    =&gt; __( 'Colori Brand', 'mythemeblog' ),
        'priority' =&gt; 30,
    ] );

    // Colore primario
    $wp_customize-&gt;add_setting( 'mythemeblog_color_primary', [
        'default'           =&gt; '#2563eb',
        'sanitize_callback' =&gt; 'sanitize_hex_color',
        'transport'         =&gt; 'refresh',
    ] );

    $wp_customize-&gt;add_control( new WP_Customize_Color_Control( $wp_customize, 'mythemeblog_color_primary', [
        'label'    =&gt; __( 'Colore Primario', 'mythemeblog' ),
        'section'  =&gt; 'mythemeblog_colors',
        'settings' =&gt; 'mythemeblog_color_primary',
    ] ) );

    // Logo homepage
    $wp_customize-&gt;add_setting( 'mythemeblog_logo_home_url', [
        'sanitize_callback' =&gt; 'esc_url_raw',
    ] );

    $wp_customize-&gt;add_control( 'mythemeblog_logo_home_url', [
        'type'        =&gt; 'url',
        'section'     =&gt; 'mythemeblog_colors',
        'label'       =&gt; __( 'URL logo per homepage', 'mythemeblog' ),
        'description' =&gt; __( 'Se impostato, mostra questo logo invece del titolo del sito sulla homepage.', 'mythemeblog' ),
    ] );
}
add_action( 'customize_register', 'mythemeblog_customize_register' );

/** === CSS dinamico dal Customizer === */
function mythemeblog_customizer_css() {
    $primary = get_theme_mod( 'mythemeblog_color_primary', '#2563eb' );
    ?&gt;
    &lt;style type="text/css"&gt;
        :root {
            --mythemeblog-color-primary: &lt;?php echo esc_attr( $primary ); ?&gt;;
        }
        .mythemeblog-card__category,
        .mythemeblog-btn {
            background-color: &lt;?php echo esc_attr( $primary ); ?&gt;;
        }
    &lt;/style&gt;
    &lt;?php
}
add_action( 'wp_head', 'mythemeblog_customizer_css' );</code></pre>


<p class="wp-block-paragraph">Il customizer espone opzioni concrete — colore primario, URL logo — che i redattori possono modificare senza intervento dello sviluppatore. Il CSS dinamico genera le variabili che i componenti del tema consumano.</p>


<h3 class="wp-block-heading">Step 5 — Dark mode con CSS custom properties</h3>


<p class="wp-block-paragraph">La dark mode è una funzionalità che molti blog richiedono. Il pattern moderno sfrutta le CSS custom properties con un selettore <code>data-theme</code>:</p>


<pre class="wp-block-code"><code>/* assets/css/dark-mode.css */
/* Dark mode: definisce variabili alternative al tema chiaro */

[data-theme="dark"] {
    --mythemeblog-bg-primary: #0f172a;
    --mythemeblog-bg-secondary: #1e293b;
    --mythemeblog-text-primary: #f1f5f9;
    --mythemeblog-text-secondary: #94a3b8;
    --mythemeblog-border: #334155;
}

[data-theme="dark"] .mythemeblog-card {
    background-color: var( --mythemeblog-bg-secondary );
    border-color: var( --mythemeblog-border );
}

[data-theme="dark"] .mythemeblog-card__title a {
    color: var( --mythemeblog-text-primary );
}</code></pre>


<p class="wp-block-paragraph">L&#x27;interruttore JavaScript per la dark mode è altrettanto semplice:</p>


<pre class="wp-block-code"><code>/* assets/js/main.js */
// Interruttore dark mode — legge preferenza sistema e salva scelta utente
(function() {
    const toggle = document.getElementById('theme-toggle');
    if (!toggle) return;

    const saved = localStorage.getItem('mythemeblog-theme');
    const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    const current = saved || preferred;

    document.documentElement.setAttribute('data-theme', current);

    toggle.addEventListener('click', () =&gt; {
        const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
        document.documentElement.setAttribute('data-theme', next);
        localStorage.setItem('mythemeblog-theme', next);
    });
})();</code></pre>


<p class="wp-block-paragraph">Questo pattern è resiliente: se JavaScript non carica per qualche motivo, il sito cade nella preferenza di sistema o nel tema chiaro, mai in uno stato rotto. Per approfondire le best practice di accessibilità e performance WordPress, vedi il nostro articolo sugli <a href="https://www.mrtux.it/web-design-per-wordpress-tool-essenziali-per-creare-temi-efficaci-nel-2026" data-wpel-link="internal" target="_self" rel="noopener">strumenti essenziali per web design WordPress</a>., il sito cade nella preferenza di sistema o nel tema chiaro, mai in uno stato rotto.</p>


<h2 class="wp-block-heading">Confronto rapido: Docker vs installazione Ubuntu LAMP</h2>


<p class="wp-block-paragraph">Sia Docker che l&#x27;installazione nativa su Ubuntu hanno pro e contro. Per uno sviluppatore WordPress che lavora con OpenCode, la scelta dipende dal contesto.</p>



<figure class="wp-block-table"><table><thead><tr><th>Aspetto</th><th>Docker Compose</th><th>Ubuntu LAMP nativo</th></tr></thead><tbody><tr><td>Setup iniziale</td><td>5-10 minuti con file YAML</td><td>20-40 minuti con apt</td></tr><tr><td>Portabilità</td><td>Trasportabile su qualsiasi OS con Docker</td><td>Limitato a Linux (o WSL su Windows/Mac)</td></tr><tr><td>Versioni PHP/MySQL</td><td>Immagini ufficiali, installazione rapida</td><td>Dipende da distro, più rigido</td></tr><tr><td>Performance</td><td>Overhead container (~5-10%)</td><td>Nessun overhead</td></tr><tr><td>Gestione file</td><td>Mount diretto via volume</td><td>Accesso filesystem nativo</td></tr><tr><td>WP-CLI</td><td>Già nel container ufficiale</td><td>Da installare a parte</td></tr><tr><td>Risorse sistema</td><td>Maggior footprint</td><td>Più leggero</td></tr><tr><td>Multi-progetto</td><td>Compose separati per ogni progetto</td><td>VirtualHost Apache multipli</td></tr></tbody></table></figure>



<p class="wp-block-paragraph">Per progetti singoli o team che usano Linux come ambiente primario, l&#x27;installazione Ubuntu LAMP è la scelta più performante. Se invece vuoi un confronto più ampio su tutti gli strumenti a disposizione dello sviluppatore WordPress, consulta la nostra guida su <a href="https://www.mrtux.it/web-design-per-wordpress-tool-essenziali-per-creare-temi-efficaci-nel-2026" data-wpel-link="internal" target="_self" rel="noopener">strumenti essenziali per web design WordPress</a>, che copre anche Lando, Valet e soluzioni containerizzate. Per team con ambienti misti (Windows, Mac, Linux) o chi lavora su più progetti contemporaneamente, Docker Compose offre la portabilità necessaria.</p>


<h2 class="wp-block-heading">Checklist operativa per sviluppo WordPress con OpenCode</h2>


<p class="wp-block-paragraph">Prima di ogni sessione di sviluppo, verifica questi punti (per un approccio strutturato alla sicurezza WordPress consulta anche la nostra guida agli <a href="https://www.mrtux.it/web-design-per-wordpress-tool-essenziali-per-creare-temi-efficaci-nel-2026" data-wpel-link="internal" target="_self" rel="noopener">strumenti essenziali per web design WordPress</a>):</p>


<ul class="wp-block-list"><li><strong>Ambiente locale attivo</strong>: Apache e MySQL in esecuzione, WordPress raggiungibile su <code>localhost</code></li><li><strong>OpenCode configurato con server MCP</strong>: filesystem, WP-CLI, WordPress.org, database attivi</li><li><strong>AGENTS.md aggiornato</strong>: struttura tema, vincoli PHP/CSS, comandi rapidi presenti</li><li><strong>Git init completato</strong>: il tema è versionato, almeno un commit iniziale esiste</li><li><strong>WP_DEBUG disattivato in locale</strong> (o attivato consapevolmente): <code>define(&#x27;WP_DEBUG&#x27;, false);</code> in <code>wp-config.php</code></li><li><strong>Plugin di sviluppo attivi</strong>: Query Monitor, WP-CLI, Developer (o equivalenti)</li><li><strong>Staging allineato</strong>: se esiste staging, le modifiche dal locale ci arrivano via Git o rsync, non via admin</li></ul>


<h2 class="wp-block-heading">FAQ — Domande frequenti su OpenCode e sviluppo temi WordPress</h2>


<p class="wp-block-paragraph"><strong>OpenCode può generare block theme completi per WordPress 6.x?</strong> Sì, OpenCode può generare <code>theme.json</code> completo e template HTML per block theme. Il supporto per block personalizzati (custom blocks con JavaScript/React) richiede ancora scrittura manuala del codice, ma la struttura base del block theme viene prodotta correttamente seguendo lo schema v2.</p>


<p class="wp-block-paragraph"><strong>Come si integra Rank Math SEO con il tema generato da OpenCode?</strong> OpenCode può aggiungere hook per Rank Math nel <code>functions.php</code>, come filtri per meta title e description dinamici. Tuttavia la configurazione SEO rimane un&#x27;operazione manuale via admin: nessun server MCP attuale modifica le opzioni Rank Math nel database in modo sicuro.</p>


<p class="wp-block-paragraph"><strong>È sicuro usare i server MCP in produzione?</strong> Mai. I server MCP danno accesso operativo reale al filesystem e al database. Usa sempre ambiente locale o di staging. Se OpenCode deve operare su produzione, l&#x27;unico server accettabile è quello read-only (filesystem in sola lettura), e solo dopo backup completo verificato.</p>


<p class="wp-block-paragraph"><strong>Posso usare OpenCode con Local by Flywheel o Valet invece di LAMP?</strong> Sì. Local by Flywheel e Valet sono wrapper che semplificano la gestione dell&#x27;ambiente WordPress locale. I server MCP funzionano con qualsiasi ambiente che esponga il filesystem e WP-CLI. Il file <code>wp-config.php</code> deve puntare al database corretto, indipendentemente dallo stack.</p>


<p class="wp-block-paragraph"><strong>Come faccio a far rispettare a OpenCode le linee guida di sicurezza del mio team?</strong> Inseriscile esplicitamente nella sezione vincoli di <code>AGENTS.md</code>. Più sono specifiche, più OpenCode le rispetta. Esempi: &quot;nessun file creato senza escaping <code>esc_html</code>&quot;, &quot;nessun <code>eval()</code>&quot;, &quot;tutti i form devono usare <code>wp_nonce_field()</code>&quot;. OpenCode è un modello linguistico: i vincoli scritti funzionano meglio delle aspettative implicite.</p>


<p class="wp-block-paragraph"><strong>Quali server MCP servono per uno workflow WordPress minimo?</strong> Il minimo sindacale è filesystem + WP-CLI. Per un riferimento completo sui tool WordPress disponibili, consulta la nostra guida agli <a href="https://www.mrtux.it/web-design-per-wordpress-tool-essenziali-per-creare-temi-efficaci-nel-2026" data-wpel-link="internal" target="_self" rel="noopener">strumenti essenziali per creare temi WordPress efficaci</a>. Il primo legge e scrive i file del tema. Il secondo gestisce aspetti runtime come attivazione plugin, reset database e generazione contenuto di test. Se hai bisogno di cercare plugin su WordPress.org, aggiungi il server WordPress.org. Il server database è opzionale e va usato con cautela.</p>


<h2 class="wp-block-heading">Conclusione</h2>


<p class="wp-block-paragraph">OpenCode trasforma lo sviluppo di temi WordPress da processo manuale e ripetitivo a workflow iterativo e controllato. Ma solo se l&#x27;ambiente sottostante è configurato correttamente: un LAMP locale funzionante, un <code>AGENTS.md</code> che codifica le convenzioni del progetto, e i server MCP giusti per ogni area operativa.</p>


<p class="wp-block-paragraph">La somma di questi elementi — ambiente, configurazione agente, protocollo MCP — ti dà un setup dove OpenCode opera con il contesto pieno del progetto WordPress. Per chi vuole approfondire anche il lato SEO e AI nella gestione WordPress, consigliamo la lettura di <a href="https://www.mrtux.it/articoli-wordpress-ottimizzati-seo-con-ai-metodo-pratico-passo-passo" data-wpel-link="internal" target="_self" rel="noopener">articoli WordPress ottimizzati SEO con AI</a>., non in modalità cieca. Il codice che ne risulta è migliore, più coerente, e richiede meno revisione.</p>


<p class="wp-block-paragraph"><strong>Prossimo passo concreto</strong>: configura il tuo <code>AGENTS.md</code> WordPress con la struttura del tema, i vincoli di sicurezza e i comandi rapidi che usi più spesso. Poi lancia OpenCode e chiedi di generare il primo template partial del tuo progetto. Dal primo output allarevisione al commit Git, in meno di mezz&#x27;ora.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrtux.it/opencode-per-lo-sviluppo-di-temi-wordpress-ambiente-lamp-locale-ottimizzazione-agents-md-e-server-mcp/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Creare Tema WordPress: Guida 101 allo Sviluppo Completo</title>
		<link>https://www.mrtux.it/creare-tema-wordpress-guida-101-allo-sviluppo-completo</link>
					<comments>https://www.mrtux.it/creare-tema-wordpress-guida-101-allo-sviluppo-completo#respond</comments>
		
		<dc:creator><![CDATA[Emilio Petrozzi]]></dc:creator>
		<pubDate>Fri, 22 May 2026 19:13:22 +0000</pubDate>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[creare tema wordpress]]></category>
		<category><![CDATA[css wordpress]]></category>
		<category><![CDATA[guida wordpress]]></category>
		<category><![CDATA[php wordpress]]></category>
		<category><![CDATA[sviluppo temi wordpress]]></category>
		<category><![CDATA[Sviluppo WordPress]]></category>
		<category><![CDATA[tema wordpress]]></category>
		<category><![CDATA[template wordpress]]></category>
		<category><![CDATA[wordpress cms]]></category>
		<category><![CDATA[WordPress Development]]></category>
		<guid isPermaLink="false">https://www.mrtux.it/?p=3406</guid>

					<description><![CDATA[Creare un tema WordPress da zero è più semplice di quanto pensi, e in questa guida ti mostrerò passo dopo passo tutto ciò che devi sapere per sviluppare il tuo primo tema professionale e funzionante. Che tu sia un principiante curioso o uno sviluppatore in cerca di nuove competenze, lo sviluppo temi WP ti aprirà porte verso un controllo totale sul design e sulle funzionalità del tuo sito.]]></description>
										<content:encoded><![CDATA[<h2>Come Creare un Tema WordPress: Guida Completa per Principianti</h2>
<p>Creare un <strong>tema WordPress</strong> da zero è una delle competenze più gratificanti che uno sviluppatore web possa acquisire. Non solo ti permette di avere il pieno controllo sul design e sulle funzionalità del tuo sito, ma ti offre anche una comprensione profonda di come funziona WordPress internamente.</p>
<p>In questa guida ti accompagnerò passo dopo passo nel processo di sviluppo di un tema WordPress funzionale, partendo dalle basi fino ad arrivare alla creazione di un tema completo e professionale.</p>
<hr>
<h2>Perché Creare un Tema WordPress Personalizzato</h2>
<p>Prima di immergerci nel codice, è importante capire perché potresti voler creare il tuo tema WordPress invece di utilizzarne uno preesistente.</p>
<p>Un tema personalizzato ti offre:</p>
<ul>
<li><strong>Controllo totale</strong> sull’aspetto e sul comportamento del sito</li>
<li><strong>Codice pulito</strong> senza funzionalità superflue che rallentano il caricamento</li>
<li><strong>Possibilità di branding</strong> per creare un’identità unica</li>
<li><strong>Apprendimento approfondito</strong> del funzionamento di WordPress</li>
<li><strong>Manutenzione semplificata</strong> perché conosci ogni parte del codice</li>
</ul>
<p>Se stai cercando di entrare nel mondo dello sviluppo WordPress o vuoi creare un sito web professionale, imparare a sviluppare temi è un investimento che vale sicuramente il tempo dedicato.</p>
<hr>
<h2>Prerequisiti per lo Sviluppo di Temi WordPress</h2>
<p>Prima di iniziare, assicurati di avere una buona comprensione dei seguenti concetti:</p>
<h3>Competenze Tecniche Necessarie</h3>
<ul>
<li><strong>HTML e CSS</strong>: La base di qualsiasi sito web. Devi sapere come strutturare una pagina e stilizzarla.</li>
<li><strong>PHP</strong>: WordPress è costruito su PHP, quindi una conoscenza base è essenziale per comprendere come funziona il sistema di template.</li>
<li><strong>JavaScript</strong>: Utile per aggiungere interattività, anche se non strettamente necessario per un tema base.</li>
</ul>
<h3>Strumenti di Sviluppo</h3>
<ul>
<li>Un <strong>server locale</strong> come XAMPP, MAMP o Local by Flywheel</li>
<li>Un <strong>editor di codice</strong> come Visual Studio Code, PhpStorm o Sublime Text</li>
<li>Un <strong>browser moderno</strong> con strumenti di sviluppo (Chrome DevTools)</li>
<li>Accesso a un’<strong>installazione WordPress</strong> locale</li>
</ul>
<hr>
<h2>Configurare l’Ambiente di Sviluppo Locale</h2>
<p>Il primo passo concreto è configurare un ambiente di sviluppo locale dove poter testare il tuo tema senza compromettere un sito live.</p>
<h3>Installare Local by Flywheel</h3>
<p><strong>Local</strong> è una delle opzioni più semplici per creare un ambiente WordPress locale:</p>
<ol>
<li>Scarica e installa Local dal sito ufficiale</li>
<li>Crea un nuovo sito WordPress</li>
<li>Assegna un nome al progetto</li>
<li>Attendi che l’installazione venga completata</li>
<li>Accedi alla bacheca WordPress</li>
</ol>
<p>Una volta completata l’installazione, avrai un sito WordPress funzionante su cui testare il tuo tema in tempo reale.</p>
<h3>Struttura delle Cartelle dei Temi</h3>
<p>WordPress cerca i temi in una struttura specifica. I temi si trovano in:</p>
<pre><code>wp-content/themes/nome-del-tuo-tema/
</code></pre>
<p>Questa cartella sarà la tua area di lavoro principale. Al suo interno creerai tutti i file necessari per il tuo tema.</p>
<hr>
<h2>Creare i File Essenziali del Tema</h2>
<p>Ogni tema WordPress richiede alcuni file fondamentali per funzionare. Iniziamo creando la struttura base.</p>
<h3>1. Il File style.css</h3>
<p>Il file <code>style.css</code> è il cuore del tuo tema. Non contiene solo CSS, ma anche le informazioni necessarie a WordPress per riconoscere e visualizzare il tema nel pannello di amministrazione.</p>
<pre><code class="language-css">/<em>
Theme Name: Il Mio Primo Tema
Theme URI: https://esempio.com
Author: Il Tuo Nome
Author URI: https://esempio.com
Description: Un tema WordPress personalizzato creato da zero
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mio-primo-tema
</em>/
</code></pre>
<p>Questo commento iniziale è obbligatorio. Senza di esso, WordPress non sarà in grado di riconoscere il tuo tema.</p>
<h3>2. Il File functions.php</h3>
<p>Il file <code>functions.php</code> è dove definisci le funzionalità del tema, registri script, stili, menu, widget e molto altro.</p>
<pre><code class="language-php">&lt;?php
// Aggiungiamo il supporto per vari elementi di WordPress
function mio_tema_setup() {
    // Supporto per il titolo del sito
    add_theme_support('title-tag');

    // Supporto per le immagini in evidenza
    add_theme_support('post-thumbnails');

    // Supporto per il logo personalizzato
    add_theme_support('custom-logo');

    // Registriamo un menu di navigazione
    register_nav_menus(array(
        'primary' =&gt; __('Menu Principale', 'mio-primo-tema'),
        'footer' =&gt; __('Menu Footer', 'mio-primo-tema'),
    ));
}
add_action('after_setup_theme', 'mio_tema_setup');

// Carichiamo gli stili e gli script
function mio_tema_scripts() {
    wp_enqueue_style('mio-tema-style', get_stylesheet_uri());
    wp_enqueue_script('mio-tema-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'mio_tema_scripts');
</code></pre>
<h3>3. Il File index.php</h3>
<p>Il file <code>index.php</code> è il template di fallback di WordPress. Viene utilizzato quando non esiste un template più specifico per un determinato contenuto.</p>
<pre><code class="language-php">&lt;?php get_header(); ?&gt;

&lt;main class="site-main"&gt;
    &lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;

        &lt;article id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class(); ?&gt;&gt;
            &lt;header class="entry-header"&gt;
                &lt;h2 class="entry-title"&gt;
                    &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;
                &lt;/h2&gt;
                &lt;div class="entry-meta"&gt;
                    &lt;span class="posted-on"&gt;&lt;?php echo get_the_date(); ?&gt;&lt;/span&gt;
                &lt;/div&gt;
            &lt;/header&gt;

            &lt;div class="entry-content"&gt;
                &lt;?php the_content(); ?&gt;
            &lt;/div&gt;
        &lt;/article&gt;

    &lt;?php endwhile; else : ?&gt;
        &lt;p&gt;&lt;?php esc_html_e('Nessun contenuto trovato.', 'mio-primo-tema'); ?&gt;&lt;/p&gt;
    &lt;?php endif; ?&gt;
&lt;/main&gt;

&lt;?php get_footer(); ?&gt;
</code></pre>
<hr>
<h2>Comprendere la Gerarchia dei Template</h2>
<p>WordPress utilizza un sistema di <strong>gerarchia dei template</strong> per determinare quale file PHP visualizzare per ogni tipo di contenuto. Comprendere questo sistema è fondamentale per creare un tema completo.</p>
<h3>Ordine di Priorità dei Template</h3>
<p>Ecco l’ordine in cui WordPress cerca i template:</p>
<table>
<thead>
<tr>
<th>Tipo di Contenuto</th>
<th>Template Principale</th>
<th>Fallback</th>
</tr>
</thead>
<tbody>
<tr>
<td>Homepage</td>
<td>front-page.php</td>
<td>home.php → index.php</td>
</tr>
<tr>
<td>Articoli</td>
<td>single.php</td>
<td>singular.php → index.php</td>
</tr>
<tr>
<td>Pagine</td>
<td>page-{slug}.php → page-{id}.php</td>
<td>page.php → index.php</td>
</tr>
<tr>
<td>Categorie</td>
<td>category-{slug}.php → category-{id}.php</td>
<td>archive.php → index.php</td>
</tr>
<tr>
<td>Tag</td>
<td>tag-{slug}.php → tag-{id}.php</td>
<td>archive.php → index.php</td>
</tr>
<tr>
<td>Archive autore</td>
<td>author-{nicename}.php → author-{id}.php</td>
<td>archive.php → index.php</td>
</tr>
<tr>
<td>Ricerca</td>
<td>search.php</td>
<td>index.php</td>
</tr>
<tr>
<td>404</td>
<td>404.php</td>
<td>index.php</td>
</tr>
</tbody>
</table>
<h3>Esempio Pratico: Creare header.php e footer.php</h3>
<p>Per evitare di ripetere il codice in ogni template, WordPress permette di creare file parziali riutilizzabili.</p>
<p><strong>header.php</strong></p>
<pre><code class="language-php">&lt;!DOCTYPE html&gt;
&lt;html &lt;?php language_attributes(); ?&gt;&gt;
&lt;head&gt;
    &lt;meta charset="&lt;?php bloginfo('charset'); ?&gt;"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;?php wp_head(); ?&gt;
&lt;/head&gt;
&lt;body &lt;?php body_class(); ?&gt;&gt;
&lt;?php wp_body_open(); ?&gt;

&lt;header class="site-header"&gt;
    &lt;div class="container"&gt;
        &lt;?php if (has_custom_logo()) : ?&gt;
            &lt;?php the_custom_logo(); ?&gt;
        &lt;?php else : ?&gt;
            &lt;h1 class="site-title"&gt;
                &lt;a href="&lt;?php echo esc_url(home_url('/')); ?&gt;"&gt;
                    &lt;?php bloginfo('name'); ?&gt;
                &lt;/a&gt;
            &lt;/h1&gt;
        &lt;?php endif; ?&gt;

        &lt;nav class="main-navigation"&gt;
            &lt;?php wp_nav_menu(array(
                'theme_location' =&gt; 'primary',
                'container' =&gt; false,
                'menu_class' =&gt; 'nav-menu',
            )); ?&gt;
        &lt;/nav&gt;
    &lt;/div&gt;
&lt;/header&gt;

&lt;main class="site-content"&gt;
</code></pre>
<p><strong>footer.php</strong></p>
<pre><code class="language-php">&lt;/main&gt;

&lt;footer class="site-footer"&gt;
    &lt;div class="container"&gt;
        &lt;p&gt;&amp;copy; &lt;?php echo date('Y'); ?&gt; &lt;?php bloginfo('name'); ?&gt;. Tutti i diritti riservati.&lt;/p&gt;
        &lt;?php wp_nav_menu(array('theme_location' =&gt; 'footer')); ?&gt;
    &lt;/div&gt;
&lt;/footer&gt;

&lt;?php wp_footer(); ?&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<hr>
<h2>Il Loop di WordPress: Cuore del Sistema</h2>
<p>Il <strong>Loop</strong> è il meccanismo fondamentale attraverso cui WordPress recupera e visualizza i contenuti. Comprenderlo è essenziale per qualsiasi sviluppatore di temi.</p>
<h3>Struttura Base del Loop</h3>
<pre><code class="language-php">&lt;?php
// Verifichiamo se ci sono post da visualizzare
if (have_posts()) :

    // Iteriamo attraverso ogni post
    while (have_posts()) : the_post();

        // Contenuto del singolo post ?&gt;
        &lt;article id="post-&lt;?php the_ID(); ?&gt;"&gt;
            &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;
            &lt;div class="post-thumbnail"&gt;
                &lt;?php if (has_post_thumbnail()) : ?&gt;
                    &lt;?php the_post_thumbnail('medium'); ?&gt;
                &lt;?php endif; ?&gt;
            &lt;/div&gt;
            &lt;div class="post-excerpt"&gt;
                &lt;?php the_excerpt(); ?&gt;
            &lt;/div&gt;
            &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;Leggi tutto&lt;/a&gt;
        &lt;/article&gt;
        &lt;?php

    endwhile;

    // Paginazione
    the_posts_pagination();

else :
    // Messaggio se non ci sono post
    echo '&lt;p&gt;Nessun contenuto disponibile.&lt;/p&gt;';

endif;
?&gt;
</code></pre>
<h3>Funzioni Utili all’Interno del Loop</h3>
<p>All’interno del Loop hai accesso a numerose funzioni:</p>
<ul>
<li><code>the_title()</code> - Visualizza il titolo del post</li>
<li><code>the_content()</code> - Visualizza il contenuto completo</li>
<li><code>the_excerpt()</code> - Visualizza un riassunto</li>
<li><code>the_permalink()</code> - Restituisce l’URL del post</li>
<li><code>the_post_thumbnail()</code> - Visualizza l’immagine in evidenza</li>
<li><code>the_date()</code> - Visualizza la data di pubblicazione</li>
<li><code>the_author()</code> - Visualizza l’autore</li>
<li><code>get_the_category()</code> - Recupera le categorie</li>
</ul>
<hr>
<h2>Template Parts: Riutilizzare il Codice</h2>
<p>I <strong>template parts</strong> sono frammenti di template che puoi includere in diversi punti del tuo tema. Questo approccio promuove il riutilizzo del codice e la manutenzione più semplice.</p>
<h3>Creare Template Parts</h3>
<p>Puoi creare template parts per elementi ripetitivi come card di articoli, header di sezioni, o qualsiasi altro componente.</p>
<p><strong>template-parts/content.php</strong></p>
<pre><code class="language-php">&lt;article id="post-&lt;?php the_ID(); ?&gt;" &lt;?php post_class('article-card'); ?&gt;&gt;
    &lt;?php if (has_post_thumbnail()) : ?&gt;
        &lt;div class="card-image"&gt;
            &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;
                &lt;?php the_post_thumbnail('large'); ?&gt;
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;?php endif; ?&gt;

    &lt;div class="card-content"&gt;
        &lt;h3 class="card-title"&gt;
            &lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;
        &lt;/h3&gt;

        &lt;div class="card-meta"&gt;
            &lt;span class="card-date"&gt;&lt;?php echo get_the_date(); ?&gt;&lt;/span&gt;
            &lt;span class="card-author"&gt;di &lt;?php the_author(); ?&gt;&lt;/span&gt;
        &lt;/div&gt;

        &lt;div class="card-excerpt"&gt;
            &lt;?php the_excerpt(); ?&gt;
        &lt;/div&gt;

        &lt;a href="&lt;?php the_permalink(); ?&gt;" class="card-link"&gt;
            Continua a leggere →
        &lt;/a&gt;
    &lt;/div&gt;
&lt;/article&gt;
</code></pre>
<h3>Includere Template Parts nel Template</h3>
<pre><code class="language-php">&lt;?php get_template_part('template-parts/content', 'page'); ?&gt;
</code></pre>
<p>Il secondo parametro (‘page’) permette di specificare un suffisso. WordPress cercherà prima <code>content-page.php</code> e, se non esiste, ricorrerà a <code>content.php</code>.</p>
<hr>
<h2>Aggiungere Stili e Script Correttamente</h2>
<p>Un aspetto cruciale dello sviluppo temi è la gestione corretta di CSS e JavaScript. WordPress fornisce un sistema integrato per caricare risorse in modo sicuro e.performante.</p>
<h3>Best Practices per CSS e JavaScript</h3>
<pre><code class="language-php">function mio_tema_enqueue_assets() {
    // CSS principale del tema
    wp_enqueue_style(
        'mio-tema-main',
        get_stylesheet_directory_uri() . '/css/main.css',
        array(),
        '1.0.0'
    );

    // Font Google (dipendenza per main.css)
    wp_enqueue_style(
        'google-fonts',
        'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap',
        array(),
        null
    );

    // JavaScript con dipendenze
    wp_enqueue_script(
        'mio-tema-navigation',
        get_template_directory_uri() . '/js/navigation.js',
        array(),
        '1.0.0',
        true
    );

    // JavaScript condizionale (es. solo per IE)
    wp_enqueue_script(
        'html5shiv',
        'https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js',
        array(),
        '3.7.3',
        false
    );
    wp_script_add_data('html5shiv', 'conditional', 'lt IE 9');
}
add_action('wp_enqueue_scripts', 'mio_tema_enqueue_assets');
</code></pre>
<h3>Creare il File CSS Principale</h3>
<p><strong>css/main.css</strong></p>
<pre><code class="language-css">/<em> Reset di base </em>/
<em> {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/</em> Variabili CSS <em>/
:root {
    --color-primary: #2563eb;
    --color-secondary: #1e40af;
    --color-text: #1f2937;
    --color-bg: #ffffff;
    --font-main: 'Inter', sans-serif;
    --spacing-md: 1.5rem;
    --spacing-lg: 3rem;
}

/</em> Stili globali <em>/
body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
}

/</em> Container <em>/
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/</em> Header <em>/
.site-header {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid #e5e7eb;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/</em> Navigazione <em>/
.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-md);
}

.nav-menu a {
    text-decoration: none;
    color: var(--color-text);
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: var(--color-primary);
}

/</em> Articoli <em>/
.article-card {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: 8px;
    background: #f9fafb;
}

.card-title a {
    text-decoration: none;
    color: var(--color-text);
}

/</em> Responsive */
@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .nav-menu {
        flex-direction: column;
        align-items: center;
    }
}
</code></pre>
<hr>
<h2>Personalizzare il Tema con il Customizer</h2>
<p>Il <strong>Customizer di WordPress</strong> permette agli utenti di modificare aspeketti del tema in tempo reale. Implementare il Customizer rende il tuo tema più flessibile e user-friendly.</p>
<h3>Aggiungere Opzioni al Customizer</h3>
<pre><code class="language-php">function mio_tema_customize_register($wp_customize) {
    // Sezione Colori
    $wp_customize-&gt;add_section('mio_tema_colors', array(
        'title' =&gt; __('Colori del Sito', 'mio-primo-tema'),
        'priority' =&gt; 30,
    ));

    // Impostazione colore primario
    $wp_customize-&gt;add_setting('primary_color', array(
        'default' =&gt; '#2563eb',
        'sanitize_callback' =&gt; 'sanitize_hex_color',
    ));

    $wp_customize-&gt;add_control(new WP_Customize_Color_Control($wp_customize, 'primary_color', array(
        'label' =&gt; __('Colore Primario', 'mio-primo-tema'),
        'section' =&gt; 'mio_tema_colors',
        'settings' =&gt; 'primary_color',
    )));

    // Sezione Layout
    $wp_customize-&gt;add_section('mio_tema_layout', array(
        'title' =&gt; __('Layout', 'mio-primo-tema'),
        'priority' =&gt; 35,
    ));

    // Impostazione container width
    $wp_customize-&gt;add_setting('container_width', array(
        'default' =&gt; '1200',
        'sanitize_callback' =&gt; 'absint',
    ));

    $wp_customize-&gt;add_control('container_width', array(
        'type' =&gt; 'number',
        'section' =&gt; 'mio_tema_layout',
        'label' =&gt; __('Larghezza Container (px)', 'mio-primo-tema'),
        'input_attrs' =&gt; array(
            'min' =&gt; 800,
            'max' =&gt; 1920,
            'step' =&gt; 20,
        ),
    ));
}
add_action('customize_register', 'mio_tema_customize_register');

// Applicare le impostazioni nel CSS
function mio_tema_customizer_css() {
    $primary_color = get_theme_mod('primary_color', '#2563eb');
    $container_width = get_theme_mod('container_width', '1200');
    ?&gt;
    &lt;style type="text/css"&gt;
        :root {
            --color-primary: &lt;?php echo esc_attr($primary_color); ?&gt;;
            --container-max: &lt;?php echo esc_attr($container_width); ?&gt;px;
        }
    &lt;/style&gt;
    &lt;?php
}
add_action('wp_head', 'mio_tema_customizer_css');
</code></pre>
<hr>
<h2>Creare Template Specifici</h2>
<p>Per un tema completo, dovresti creare template specifici per diversi tipi di contenuto.</p>
<h3>Template per Pagine (page.php)</h3>
<pre><code class="language-php">&lt;?php get_header(); ?&gt;

&lt;main class="page-template"&gt;
    &lt;?php while (have_posts()) : the_post(); ?&gt;

        &lt;article class="page-content"&gt;
            &lt;header class="page-header"&gt;
                &lt;h1 class="page-title"&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;
            &lt;/header&gt;

            &lt;div class="page-body"&gt;
                &lt;?php the_content(); ?&gt;
            &lt;/div&gt;

            &lt;?php
            // Supporto per la paginazione all'interno del contenuto
            wp_link_pages(array(
                'before' =&gt; '&lt;div class="page-links"&gt;' . __('Pagine:', 'mio-primo-tema'),
                'after' =&gt; '&lt;/div&gt;',
            ));
            ?&gt;
        &lt;/article&gt;

        &lt;?php
        // Commenti (se abilitati)
        if (comments_open() || get_comments_number()) :
            comments_template();
        endif;
        ?&gt;

    &lt;?php endwhile; ?&gt;
&lt;/main&gt;

&lt;?php get_footer(); ?&gt;
</code></pre>
<h3>Template per Articoli (single.php)</h3>
<pre><code class="language-php">&lt;?php get_header(); ?&gt;

&lt;main class="single-post"&gt;
    &lt;?php while (have_posts()) : the_post(); ?&gt;

        &lt;article class="post-single"&gt;
            &lt;header class="post-header"&gt;
                &lt;?php if (has_post_thumbnail()) : ?&gt;
                    &lt;div class="post-featured-image"&gt;
                        &lt;?php the_post_thumbnail('large'); ?&gt;
                    &lt;/div&gt;
                &lt;?php endif; ?&gt;

                &lt;h1 class="post-title"&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;

                &lt;div class="post-meta"&gt;
                    &lt;span class="post-date"&gt;
                        &lt;time datetime="&lt;?php echo get_the_date('c'); ?&gt;"&gt;
                            &lt;?php echo get_the_date(); ?&gt;
                        &lt;/time&gt;
                    &lt;/span&gt;
                    &lt;span class="post-author"&gt;
                        &lt;?php the_author_posts_link(); ?&gt;
                    &lt;/span&gt;
                    &lt;span class="post-categories"&gt;
                        &lt;?php the_category(', '); ?&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/header&gt;

            &lt;div class="post-content"&gt;
                &lt;?php the_content(); ?&gt;
            &lt;/div&gt;

            &lt;footer class="post-footer"&gt;
                &lt;?php the_tags('&lt;div class="post-tags"&gt;&lt;strong&gt;Tag:&lt;/strong&gt; ', ', ', '&lt;/div&gt;'); ?&gt;

                &lt;?php get_template_part('template-parts/author', 'bio'); ?&gt;
            &lt;/footer&gt;
        &lt;/article&gt;

        &lt;nav class="post-navigation"&gt;
            &lt;div class="previous-post"&gt;
                &lt;?php previous_post_link('%link', '← Articolo precedente'); ?&gt;
            &lt;/div&gt;
            &lt;div class="next-post"&gt;
                &lt;?php next_post_link('%link', 'Articolo successivo →'); ?&gt;
            &lt;/div&gt;
        &lt;/nav&gt;

        &lt;?php comments_template(); ?&gt;

    &lt;?php endwhile; ?&gt;
&lt;/main&gt;

&lt;?php get_footer(); ?&gt;
</code></pre>
<h3>Template per Errori 404 (404.php)</h3>
<pre><code class="language-php">&lt;?php get_header(); ?&gt;

&lt;main class="error-404"&gt;
    &lt;div class="container"&gt;
        &lt;section class="error-404-content"&gt;
            &lt;h1 class="error-code"&gt;404&lt;/h1&gt;
            &lt;h2 class="error-title"&gt;&lt;?php esc_html_e('Pagina Non Trovata', 'mio-primo-tema'); ?&gt;&lt;/h2&gt;
            &lt;p class="error-message"&gt;
                &lt;?php esc_html_e('La pagina che stai cercando non esiste o è stata spostata.', 'mio-primo-tema'); ?&gt;
            &lt;/p&gt;

            &lt;div class="error-search"&gt;
                &lt;h3&gt;&lt;?php esc_html_e('Prova a cercare:', 'mio-primo-tema'); ?&gt;&lt;/h3&gt;
                &lt;?php get_search_form(); ?&gt;
            &lt;/div&gt;

            &lt;div class="error-links"&gt;
                &lt;a href="&lt;?php echo esc_url(home_url('/')); ?&gt;" class="btn-home"&gt;
                    &lt;?php esc_html_e('Torna alla Home', 'mio-primo-tema'); ?&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/section&gt;
    &lt;/div&gt;
&lt;/main&gt;

&lt;?php get_footer(); ?&gt;
</code></pre>
<hr>
<h2>Sicurezza e Best Practices</h2>
<p>Quando sviluppi un tema WordPress, la sicurezza deve essere sempre una priorità.</p>
<h3>Sanitizzazione e Validazione</h3>
<pre><code class="language-php">// Sanitizzazione degli input
$testo = sanitize_text_field($input);
$email = sanitize_email($input);
$url = esc_url($input);
$html = wp_kses_post($input);

// escaping dell'output
echo esc_html($testo);
echo esc_attr($attributo);
echo esc_url($link);
echo wp_kses_post($contenuto_html);
</code></pre>
<h3>Altre Best Practices</h3>
<ul>
<li><strong>Non modificare i file core di WordPress</strong></li>
<li><strong>Usa funzioni WordPress native</strong> invece di codice personalizzato quando possibile</li>
<li><strong>Implementa il supporto per la traduzione</strong> usando <code>__()</code> e <code>_e()</code></li>
<li><strong>Evita queries personalizzate complesse</strong> nel template; usa invece hooks e filtri</li>
<li><strong>Mantieni il codice modulare</strong> usando template parts e funzioni specifiche</li>
</ul>
<hr>
<h2>Testare e Distribuire il Tema</h2>
<p>Prima di rendere disponibile il tuo tema, è essenziale testarlo accuratamente.</p>
<h3>Checklist per i Test</h3>
<ul>
<li>[ ] Il tema si attiva senza errori</li>
<li>[ ] Tutti i template funzionano correttamente</li>
<li>[ ] I menu di navigazione sono visualizzati</li>
<li>[ ] Le immagini in evidenza vengono visualizzate</li>
<li>[ ] I commenti funzionano</li>
<li>[ ] La paginazione è corretta</li>
<li>[ ] Il Customizer funziona</li>
<li>[ ] Il tema è responsive su diversi dispositivi</li>
<li>[ ] Non ci sono errori PHP o JavaScript nella console</li>
<li>[ ] Il tema rispetta gli standard WordPress</li>
</ul>
<h3>Strumenti di Test</h3>
<ul>
<li><strong>Theme Check</strong>: Plugin che verifica la conformità agli standard WordPress</li>
<li><strong>Query Monitor</strong>: Per debuggare query database e performance</li>
<li><strong>Browser DevTools</strong>: Per testare CSS e JavaScript</li>
<li><strong>Theme Unit Test</strong>: Dataset di test per verificare la compatibilità</li>
</ul>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrtux.it/creare-tema-wordpress-guida-101-allo-sviluppo-completo/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
