1X
🔊 100%
Contenuti del libro
Informazioni
“Crea un Tema WordPress da Zero!” di Andrea Barghigiani è quel tipo di libro che ti prende per mano se hai voglia di capire davvero come funziona il cuore di un sito WordPress. Non è la solita guida che ti dice solo dove cliccare, ma ti porta dentro il codice, mostrandoti come costruire un tema WordPress da zero. Si parte subito forte, mettendo su l’ambiente di sviluppo WordPress giusto, con tool fighi come LESS.js per scrivere CSS in modo più smart e GitHub per tenere tutto in ordine. Poi si entra nel vivo della struttura tema WordPress, capendo come i vari file PHP si incastrano per creare le pagine che vedi online. Il WordPress Loop diventa il tuo migliore amico per tirare fuori i contenuti degli articoli, e impari a usare un sacco di funzioni tema WordPress per mostrare titoli, date, categorie e tutto il resto. Non manca la parte sulla personalizzazione tema WordPress, tipo rendere le sidebar dinamiche con i widget WordPress o creare layout diversi per articoli singoli e homepage. Si va anche su cose più avanzate, come i loop personalizzati con WP_Query per mostrare articoli specifici, gestire i commenti WordPress o persino costruire uno slider WordPress animato. È un viaggio pratico, che ti fa sporcare le mani con codice, ma alla fine ti dà gli strumenti per creare temi non solo belli, ma anche efficienti e facili da gestire.Riassunto Breve
Per creare un tema WordPress fatto bene, servono alcuni strumenti specifici. Aptana Studio è un editor di codice avanzato che aiuta a gestire progetti, trovare errori e connettersi via FTP. Anche se si può scrivere codice con editor semplici, un ambiente come Aptana rende tutto più facile con cose come l’evidenziazione del codice e il completamento automatico. Per scrivere CSS in modo più efficiente si usa LESS.js, una libreria JavaScript che aggiunge variabili, regole annidate e mixin, rendendo il codice più riutilizzabile e semplice da gestire. Per far girare WordPress sul proprio computer, si installa MAMP o XAMP, che danno un server web, database e PHP, tutto pronto. GitHub serve per tenere traccia del codice, creare punti di salvataggio e lavorare in gruppo. Un tema WordPress ha una sua struttura di file e cartelle; organizzarla bene all’inizio è importante. Si include una cartella per i file LESS e il file principale di stile. LESS.js va scaricato e messo nella cartella dei file JavaScript del progetto. Ci sono file LESS già pronti che offrono funzioni per effetti CSS e sistemi di griglia responsive.Per usare le funzioni dei file LESS, bisogna importarli nel file di stile principale. WordPress crea le pagine al volo, senza file HTML fissi per ogni pagina. Ogni pagina è divisa in parti: header, contenuto, sidebar e footer, gestite da file PHP specifici. Il file functions.php aggiunge nuove funzioni al tema, come una pagina di impostazioni, includendo altro codice PHP e usando funzioni di WordPress per collegarla all’area di amministrazione. Per importare i file LESS, devono essere nella stessa cartella del file principale o bisogna indicare il percorso esatto.La struttura HTML di WordPress si riempie con i contenuti degli articoli usando il Loop. Dentro il Loop, funzioni come the_title() mostrano il titolo dell’articolo. Altre funzioni mostrano autore, data, categorie e tag. the_content() mostra il testo completo, mentre the_excerpt() mostra un riassunto. La sidebar può avere un modulo di ricerca con get_search_form(). Le categorie e gli archivi si mostrano con funzioni apposite. Per gestire la sidebar con i widget, si registra una sidebar “widget-ready” nel file functions.php, definendo come appare con vari parametri.WordPress permette di mettere un messaggio di benvenuto usando il widget Testo. Si mette il codice HTML nel widget e si decide dove appare nel file principale del tema. L’aspetto si cambia con il CSS, usando anche LESS.js. La struttura del tema si basa su una gerarchia di file che decide il layout delle pagine. Anche se c’è un file predefinito, si possono creare design diversi per pagine statiche, archivi o articoli singoli. Questa flessibilità permette di adattare l’aspetto. Per esempio, nelle pagine degli articoli singoli, si può fare la sidebar più stretta per dare più spazio al contenuto principale, diverso dalla homepage.La struttura del tema può cambiare in base al contenuto. Aggiungendo body_class() al tag body nell’header, WordPress aggiunge classi CSS che identificano il tipo di pagina (homepage, articolo singolo), permettendo di applicare stili mirati. La gestione delle sidebar è flessibile; get_sidebar() può caricare file sidebar specifici passando un parametro. Questo funziona anche per header e footer, permettendo di avere versioni alternative. Nel file header.php, is_single() controlla se si è su un articolo singolo. Questa informazione aiuta a cambiare dinamicamente elementi dell’header, come il tag HTML del titolo del blog, per ottimizzare per i motori di ricerca senza cambiare l’aspetto visivo grazie al CSS.WordPress usa get_template_part() per caricare parti di template in modo modulare, utile nel file principale per adattare il layout in base al formato dell’articolo (standard, video, link). Gli articoli si possono dividere in più pagine usando un tag specifico e una funzione per la navigazione. Il file comments.php gestisce i commenti, mostrando quelli esistenti e il modulo per scriverne di nuovi. comment_form() crea il modulo, personalizzabile per gli utenti non registrati. wp_list_comments() mostra l’elenco dei commenti, con opzioni avanzate per controllare l’HTML.Per mostrare liste di articoli specifici, come quelli di una certa categoria, si usa la classe WP_Query(). Questa crea loop personalizzati con parametri per scegliere la categoria o quanti articoli mostrare. Dentro il loop personalizzato, si usano funzioni per mostrare titolo e contenuto. Dopo un loop personalizzato, è importante resettare il loop principale con wp_reset_query(). Per una pagina di errore 404, è utile includere elementi che aiutino l’utente, come un campo di ricerca, una lista degli ultimi articoli, un contatto o un link all’archivio.Per fare uno slider web in WordPress, si crea la struttura HTML, si aggiungono animazioni CSS e si usa jQuery per il movimento automatico. Le immagini principali degli articoli si abilitano e si definiscono le loro dimensioni nel file functions.php. Un nuovo loop prende gli articoli da mostrare nello slider da una categoria specifica. Il CSS posiziona gli elementi in modo che si sovrappongano e la visibilità è gestita da jQuery. jQuery e lo script dello slider si includono correttamente nel tema usando funzioni di WordPress che li caricano nell’header.Riassunto Lungo
1. Configurazione dell’Ambiente di Sviluppo
Strumenti Essenziali per lo Sviluppo di Temi WordPress
Per creare un tema WordPress efficace, è utile usare degli strumenti specifici che facilitano il lavoro e migliorano il risultato finale. Tra questi strumenti, un editor di codice avanzato è molto importante.Aptana Studio: Un Editor di Codice Completo
Aptana Studio è un ottimo editor di codice, derivato da Eclipse, pensato apposta per chi sviluppa siti web. Con Aptana Studio, puoi gestire più progetti contemporaneamente, trovare e correggere errori nel codice e collegarti via FTP per caricare e scaricare file dal server. Usare un editor come Aptana Studio rende lo sviluppo più rapido rispetto a scrivere codice con programmi più semplici come il Blocco Note, perché offre funzioni come la colorazione del codice per riconoscerlo meglio, il controllo automatico degli errori mentre scrivi e il completamento automatico del codice per scrivere più velocemente.Ottimizzare il CSS con LESS.js
Per migliorare la scrittura del CSS, si può usare LESS.js. LESS.js è un programma JavaScript che aggiunge delle funzioni in più al CSS, il linguaggio usato per definire l’aspetto di un sito web. Con LESS.js, puoi usare variabili per memorizzare valori che si ripetono, puoi scrivere regole CSS dentro altre regole per organizzare meglio il codice e puoi creare dei “mixin”, cioè delle porzioni di codice che puoi riutilizzare facilmente. In questo modo, scrivere CSS diventa più semplice, veloce e facile da mantenere nel tempo.Ambiente di Test Locale con MAMP o XAMPP
Per provare WordPress direttamente sul tuo computer, senza bisogno di un server online, puoi installare MAMP (se usi Mac) o XAMPP (se usi Windows). Questi programmi installano e configurano automaticamente tutto ciò che serve per far funzionare WordPress: un server web Apache, un database MySQL e il linguaggio PHP. In questo modo, puoi lavorare al tuo tema WordPress offline e vedere subito i risultati.Gestione del Codice con GitHub
GitHub è uno strumento molto utile per gestire il codice del tuo tema WordPress. Ti permette di tenere traccia di tutte le modifiche che fai, salvare diverse versioni del progetto e tornare indietro se qualcosa va storto. Con GitHub, puoi archiviare il tuo codice online, creare dei punti di riferimento importanti (milestone) per il tuo progetto e collaborare con altre persone in modo più semplice e organizzato.Struttura di Base di un Tema WordPress
Un tema WordPress è organizzato in diversi file e cartelle, ognuno con un compito specifico. Per creare un tema ben fatto, è fondamentale partire da una struttura ordinata e logica. È importante includere nella struttura del tema una cartella chiamata `less` e un file con estensione `.less`. Questi elementi servono per gestire gli stili del tema usando LESS.js, come spiegato prima.LESS.js: Funzionalità Aggiuntive e File Utili
Infine, è necessario scaricare e configurare LESS.js per poterlo usare nel tuo progetto. Si consiglia di mettere la libreria LESS.js nella cartella `js` del tema. Inoltre, vengono forniti due file `.less` di esempio, chiamati `classes.less` e `grid.less`. Questi file contengono delle funzioni LESS.js già pronte all’uso per creare facilmente effetti CSS3, cioè effetti grafici avanzati per il tuo sito, e sistemi di griglia responsivi, cioè layout che si adattano automaticamente a schermi di diverse dimensioni. In particolare, il file `grid.less` sfrutta la capacità di LESS.js di fare calcoli matematici per definire griglie parametriche, cioè griglie personalizzabili in base alle tue esigenze.È davvero indispensabile appesantire il flusso di lavoro con strumenti complessi come LESS.js e Aptana Studio, quando alternative più semplici e dirette potrebbero essere sufficienti per un tema WordPress efficace?
Il capitolo sembra suggerire che l’uso di strumenti specifici come Aptana Studio e LESS.js sia non solo utile, ma quasi necessario per lo sviluppo di temi WordPress di qualità. Questa enfasi sugli strumenti potrebbe distogliere l’attenzione dai principi fondamentali dello sviluppo web, come la comprensione approfondita di HTML, CSS e JavaScript, e la capacità di scegliere gli strumenti più adatti in base alle esigenze specifiche del progetto. Per rispondere a questa domanda, sarebbe utile esplorare approcci di sviluppo web più minimalisti e concentrarsi sulla padronanza dei linguaggi di base, magari approfondendo autori come Eric Meyer per il CSS o Douglas Crockford per JavaScript, per sviluppare una prospettiva più critica e consapevole nella scelta degli strumenti.2. Architettura del Tema: Importare, Strutturare, Impostare
Per attivare le funzioni dei file `grid` e `classes`, bisogna prima inserirli nel file `style.less`.Importare i file Grid e Classes
Per fare questa operazione, apri il file `style.less` e aggiungi queste due righe di codice: `@import “grid”;` e `@import “classes”;`. In questo modo, tutte le caratteristiche di `grid` e `classes` saranno disponibili e funzionanti nel tuo tema.Struttura delle Pagine Web in WordPress
WordPress crea le pagine web in modo dinamico. Questo significa che non servono file HTML statici per ogni pagina del sito. Ogni pagina web è formata da diversi elementi fondamentali, come la parte superiore (header), il contenuto principale (content), la barra laterale (sidebar) e la parte inferiore (footer). Questi elementi sono gestiti da file specifici: `header.php` si occupa dell’header, `index.php` del contenuto principale, `sidebar.php` della barra laterale e `footer.php` del footer.Estendere WordPress con functions.php
Il file `functions.php` è molto utile perché permette di aggiungere nuove capacità a WordPress. Si comporta come un plugin, cioè un componente aggiuntivo, e serve per inserire funzioni personalizzate. Una delle funzioni che si possono aggiungere è la pagina di impostazioni del tema, che permette di configurare diversi aspetti grafici e funzionali.Creare la Pagina di Impostazioni del Tema
Per creare la pagina di impostazioni, il primo passo è includere un file PHP esterno dentro `functions.php`. Poi, per far funzionare la pagina delle opzioni, si usano le funzioni `add_theme_page()` e `add_action()`. Queste funzioni collegano la pagina di impostazioni all’area di amministrazione di WordPress, rendendola accessibile dal pannello di controllo.Posizione Corretta dei File LESS
Quando importi i file LESS, è importante che si trovino nella posizione giusta. Per evitare problemi, i file LESS da importare devono essere nella stessa cartella di `style.less`. Se i file si trovano in un’altra cartella, devi scrivere il percorso corretto per farli trovare a `style.less`.Ma limitarsi a elencare passaggi tecnici garantisce davvero la comprensione dell’architettura di un tema, o rischiamo di perdere di vista il quadro generale?
Il capitolo si concentra sull’operatività, spiegando come fare, ma tralascia il perché certe scelte architetturali sono importanti. Per una comprensione più profonda, sarebbe utile esplorare i principi di architettura del software e design modulare. Approfondire autori come McConnell o Gamma potrebbe fornire una visione più ampia e concettuale, utile per non ridurre lo sviluppo di un tema a una mera sequenza di istruzioni.Ma quindi, il capitolo suggerisce che la complessità del mondo si riduca a una serie di semplici scelte individuali?
Il capitolo sembra presentare una visione eccessivamente semplificata della realtà, quasi come se i grandi problemi derivassero unicamente da manchevolezze personali, trascurando le dinamiche sistemiche e le interazioni complesse che caratterizzano la società. Per una comprensione più articolata, sarebbe utile esplorare la teoria dei sistemi complessi e autori come Edgar Morin, che offrono strumenti concettuali per analizzare la realtà in modo meno riduttivo.3. WordPress: Rendere Dinamico il Tuo Sito
Come WordPress Mostra i Contenuti
WordPress usa una struttura HTML predefinita per mostrare i contenuti. Questa struttura viene riempita in modo automatico con gli articoli grazie a un meccanismo chiamato Loop. Per far vedere gli articoli, basta inserire il codice della struttura all’interno del Loop.Funzioni per Titolo e Informazioni Aggiuntive
Per mostrare il titolo di un articolo, si usa la funzionethe_title(). Oltre al titolo, si possono mostrare altre informazioni utili come l’autore, la data e le categorie. Per fare questo, si usano funzioni specifiche: the_author_link() per l’autore, the_category() per le categorie, the_date() per la data e the_time() per l’orario. La funzione the_date() permette di far vedere la data in un formato standard preciso, chiamato ISO 8601. Invece, the_time() mostra l’orario nel modo in cui è stato scelto da chi amministra il sito.Funzioni per il Corpo dell’Articolo, Riassunti e Tag
Per far vedere il testo completo di un articolo, la funzione principale èthe_content(). Questa funzione permette anche di aggiungere un link con scritto “Continua a Leggere”, utile per articoli lunghi. Se invece si vuole mostrare solo un breve riassunto dell’articolo, si usa the_excerpt(). Questa funzione è particolarmente utile nelle pagine archivio, dove si elencano molti articoli. Infine, per mostrare le etichette (tag) che identificano gli argomenti di un articolo, si usa la funzione the_tags(). Questa funzione si può personalizzare per cambiare come appaiono i tag, aggiungendo parole prima, dopo o tra un tag e l’altro.Funzioni per la Barra Laterale
La barra laterale, che di solito si trova a lato del contenuto principale, può essere resa più utile aggiungendo diversi elementi. Ad esempio, si può inserire un modulo di ricerca per permettere ai visitatori di trovare facilmente quello che cercano. Per aggiungere il modulo di ricerca, si usa la funzioneget_search_form(). Questa funzione cerca un file chiamato searchform.php. Se questo file non esiste, usa un modulo di ricerca predefinito. Un altro elemento utile sono i feed RSS, che permettono alle persone di seguire gli aggiornamenti del sito. Per integrare i feed RSS, si usa la funzione bloginfo('rss2_url'). Inoltre, si possono mostrare elenchi delle categorie degli articoli e degli archivi mensili, per navigare i contenuti per argomento o per data. Per mostrare le categorie, si usa wp_list_categories(), mentre per gli archivi mensili si usa wp_get_archives(). Entrambe queste funzioni si possono personalizzare in molti modi per cambiare il loro aspetto e comportamento.Rendere Dinamica la Barra Laterale con i Widget
Per rendere la barra laterale dinamica e facile da gestire, si possono usare i widget. I widget sono dei moduli che si possono aggiungere, togliere e spostare nella barra laterale senza dover modificare il codice del sito. Per poter usare i widget, bisogna prima registrare una sidebar predisposta per i widget nel filefunctions.php del tema. Questo si fa con la funzione register_sidebar(). Questa funzione accetta diversi parametri che servono a definire come appariranno i widget, come name (nome), id (identificativo), before_widget e after_widget (codice HTML da mettere prima e dopo ogni widget), e before_title e after_title (codice HTML per il titolo del widget). WordPress attiva la funzione di registrazione delle sidebar nel momento giusto grazie all’azione widgets_init. In questo modo, la barra laterale diventa un’area dinamica e personalizzabile tramite i widget.Ma è sempre indispensabile ricorrere a loop personalizzati e pagine 404 elaborate, quando spesso la semplicità e la chiarezza sono più efficaci per l’utente?
Il capitolo descrive come implementare loop personalizzati e pagine 404 in WordPress, ma trascura di interrogarsi sull’effettiva necessità di tali personalizzazioni in ogni contesto. È fondamentale considerare che un eccesso di personalizzazione può complicare la gestione del sito e, paradossalmente, peggiorare l’esperienza utente. Per una comprensione più approfondita, sarebbe utile esplorare principi di usabilità web e design dell’interazione, studiando autori come Jakob Nielsen, per valutare quando la personalizzazione aggiunge valore e quando invece risulta superflua o addirittura dannosa.8. Architettura di uno Slider Web
Per creare uno slider web in WordPress, è necessario seguire una serie di passaggi precisi. Il primo passo è definire la struttura HTML, che prevede un contenitore principale per l’immagine in evidenza e per il riassunto del contenuto.Animazioni CSS e Interazione jQuery
Per migliorare l’aspetto visivo dello slider, si utilizzano animazioni CSS. Queste animazioni vengono realizzate usando classi predefinite, in modo da rendere lo sviluppo più rapido. Per gestire l’interazione dinamica, si usa invece jQuery. Con jQuery, si imposta un timer che permette di far ruotare automaticamente le slide, una funzionalità che CSS da solo non offre.Gestione delle immagini in evidenza
In WordPress, le immagini in evidenza vengono attivate tramite la funzione `add_theme_support()`. Per definire le dimensioni standard delle immagini e ottimizzarne la visualizzazione nello slider, si usa poi la funzione `add_image_size()`.Loop personalizzato per i contenuti
Per mostrare dinamicamente le informazioni degli articoli, si utilizza un nuovo loop. Questo loop viene creato con la funzione `get_template_part()` e un file `.php` specifico.Posizionamento CSS degli elementi
Il foglio di stile CSS è fondamentale per posizionare correttamente gli elementi dello slider. Per il contenitore `.mask` si usa `position: relative`, mentre per gli elementi `#content-x` si usa `position: absolute`. In questo modo, gli elementi si sovrappongono e la loro visibilità può essere gestita tramite jQuery. L’attivazione delle immagini in evidenza e la definizione delle loro dimensioni avviene nel file `functions.php`, dove si registrano formati immagine personalizzati.Loop degli articoli e animazioni jQuery
Il loop personalizzato, che si trova nel file `slider-articoli.php` e viene richiamato in `front-page.php`, seleziona gli articoli da una specifica categoria chiamata ‘Slider’. Viene visualizzato solo un numero limitato di questi articoli. jQuery, attraverso il file `tz_slider.js`, si occupa di animare la transizione tra le diverse slide dello slider.Inclusione di jQuery e dello script personalizzato
Per includere jQuery e lo script personalizzato in WordPress, si utilizzano le funzioni `wp_enqueue_scripts` e `wp_register_script` nel file `functions.php`. Questo assicura che le risorse siano caricate correttamente nell’header del tema, tramite la funzione `wp_head()` presente nel file `header.php`.È ancora giustificato l’utilizzo di jQuery nel 2024 per le animazioni di un semplice slider web, quando JavaScript nativo e CSS offrono alternative più performanti e meno dipendenti da librerie esterne?
Il capitolo descrive un metodo consolidato, ma omette di considerare l’evoluzione del panorama tecnologico web. L’insistenza su jQuery solleva dubbi sull’efficienza e la modernità dell’approccio. Approfondire le animazioni CSS3, le Web Animations API e le moderne funzionalità JavaScript (ES6+) è fondamentale per valutare alternative più performanti e ridurre la dipendenza da librerie esterne. Studiare autori come Lea Verou per CSS e Axel Rauschmayer per JavaScript può fornire una prospettiva aggiornata.Abbiamo riassunto il possibile
Se vuoi saperne di più, devi leggere il libro originale
Compra il libro[sc name=”1″][/sc] [sc name=”2″][/sc] [sc name=”3″][/sc] [sc name=”4″][/sc] [sc name=”5″][/sc] [sc name=”6″][/sc] [sc name=”7″][/sc] [sc name=”8″][/sc] [sc name=”9″][/sc] [sc name=”10″][/sc]