Sviluppo di temi WordPress per principianti

Perché sviluppare un proprio tema WordPress

Lo strumento di creazione di siti WordPress alimenta oltre il 40% di tutti i siti su internet, e capire come funzionano i temi apre le porte a un mercato enorme. I temi preconfezionati sono ottimi per lanciare rapidamente un sito, ma spesso portano con sé codice superfluo, possibilità di personalizzazione limitate e rischi per la sicurezza. Creare un proprio tema ti dà il controllo completo su aspetto, prestazioni e funzionalità del sito.

Lo sviluppo di temi è una delle competenze WordPress più richieste sul mercato freelance. Per i test, usa l'ambiente di hosting WordPress. I clienti sono disposti a pagare cifre importanti per un tema personalizzato che si adatti perfettamente alle loro esigenze. Partendo dalla comprensione delle basi, puoi costruire gradualmente un portfolio e affinare le competenze fino al livello di uno sviluppatore di temi professionista.

Struttura di un tema WordPress

Un tema WordPress si trova nella cartella wp-content/themes/nome-tema/ e contiene un insieme di file PHP, CSS e JavaScript che insieme definiscono l'aspetto e il comportamento del sito. Un tema minimale richiede solo due file: style.css con le meta informazioni del tema e index.php come template di fallback. Un tema professionale, però, contiene molti più file organizzati in una struttura logica.

File di base del tema

• style.css - foglio di stile principale con meta informazioni (Theme Name, Version, Author)
• index.php - template di fallback quando non esiste un template specifico
• functions.php - registrazione delle funzionalità del tema (menu, widget, supporto alle feature)
• header.php - intestazione del sito con navigazione e meta tag
• footer.php - piè di pagina del sito con script e informazioni di copyright
• sidebar.php - barra laterale con aree per i widget
• single.php - template per la visualizzazione dei singoli articoli del blog
• page.php - template per la visualizzazione delle pagine statiche
• archive.php - template per le pagine di archivio (categorie, tag, date)
• 404.php - template per le pagine inesistenti

Gerarchia dei template

La gerarchia dei template è il sistema con cui WordPress determina quale file template caricare per ogni pagina. È uno dei concetti più importanti nello sviluppo con WordPress. WordPress cerca il template più specifico e, se non lo trova, passa a uno più generico fino ad arrivare a index.php, che è l'ultima opzione.

Per esempio, per mostrare la categoria News, WordPress cerca prima category-news.php, poi category-3.php (dove 3 è l'ID della categoria), poi category.php, poi archive.php e infine index.php. Questa gerarchia ti permette di creare design specifici per diverse parti del sito senza programmazione complicata. Comprendere la gerarchia è fondamentale per uno sviluppo di temi efficiente.

File template usati più di frequente

Per gli articoli del blog la gerarchia è: single-{post-type}.php, single.php, singular.php, index.php. Per le pagine: page-{slug}.php, page-{id}.php, page.php, singular.php, index.php. Per gli archivi: category-{slug}.php, category.php, archive.php, index.php. Comprendere questo sistema consente un controllo preciso sulla visualizzazione di ogni tipo di contenuto.

Functions.php - il cuore del tema

Functions.php è il file più importante di un tema, perché è qui che registri tutte le funzionalità supportate dal tuo tema. Questo file viene caricato automaticamente ogni volta che il tema viene attivato e funziona in modo simile a un plugin. Al suo interno aggiungi il supporto alle feature, registri menu e aree widget, includi i file CSS e JavaScript e definisci funzioni personalizzate.

Cosa si definisce in functions.php

• Supporto alle immagini in evidenza: add_theme_support('post-thumbnails')
• Registrazione dei menu di navigazione: register_nav_menus()
• Registrazione delle aree widget: register_sidebar()
• Inclusione dei file CSS e JS: wp_enqueue_style() e wp_enqueue_script()
• Supporto agli elementi HTML5: add_theme_support('html5')
• Dimensioni immagine personalizzate: add_image_size()
• Supporto al logo personalizzato: add_theme_support('custom-logo')

La regola fondamentale è non includere mai i file CSS e JavaScript direttamente in header.php o footer.php tramite tag HTML. Usa invece sempre wp_enqueue_style() e wp_enqueue_script() in functions.php, perché ciò permette a WordPress di gestire correttamente le dipendenze, evitare i duplicati e consentire ad altri plugin di interagire con i tuoi script.

Il Loop di WordPress

Il Loop di WordPress è il codice PHP che visualizza il contenuto di articoli o pagine. Ogni template che mostra contenuti usa il Loop per scorrere i risultati della query. Comprendere il Loop è fondamentale, perché è il meccanismo che collega il tuo template con i contenuti del database.

La struttura base del Loop usa un ciclo while con le funzioni have_posts() e the_post(). All'interno del loop usi i template tag come the_title(), the_content(), the_excerpt(), the_permalink() e the_post_thumbnail() per visualizzare le diverse parti del contenuto. Puoi personalizzare il Loop con la classe WP_Query per creare query personalizzate che restituiscono esattamente gli articoli che vuoi mostrare.

Query personalizzate con WP_Query

La classe WP_Query consente di creare query degli articoli completamente personalizzate. Puoi filtrare per categoria, tag, tassonomia personalizzata, data, autore e campi meta. Per esempio, puoi mostrare gli ultimi 3 articoli della categoria News, oppure tutti i prodotti con un prezzo inferiore a 10 euro. WP_Query è uno strumento potente che ti dà il controllo completo su quali contenuti vengono mostrati e su come vengono ordinati.

Template tag e campi personalizzati

I template tag sono funzioni PHP che WordPress mette a disposizione per visualizzare contenuti dinamici nei temi. Oltre ai tag di base per titolo e contenuto, esistono decine di tag specializzati per mostrare autore, data, categorie, tag, commenti e navigazione. La documentazione su developer.wordpress.org è una risorsa preziosissima per conoscere tutti i template tag disponibili.

I campi personalizzati (campi meta) estendono gli articoli e le pagine standard con dati aggiuntivi. Usando il plugin ACF (Advanced Custom Fields) o le funzioni native di WordPress, puoi aggiungere campi per prezzo, posizione, galleria, recensioni e qualsiasi altra cosa richieda il tuo sito. I campi personalizzati combinati con i custom post type permettono a WordPress di funzionare come un CMS completo per qualsiasi tipo di contenuto.

I prossimi passi

Dopo aver padroneggiato le basi, esplora argomenti avanzati come i temi child. Consulta l'ottimizzazione SEO del sito WordPress come passo successivo. Altri argomenti avanzati includono la modifica sicura dei temi esistenti, lo sviluppo di block theme per il Full Site Editing di WordPress, la REST API per WordPress headless e WP-CLI per la gestione dei temi da riga di comando. L'ecosistema di WordPress è enorme e c'è sempre qualcosa di nuovo da imparare. Parti da un tema semplice, aggiungi gradualmente funzionalità e presto ti sentirai sicuro nel creare temi WordPress professionali.