Come si costruisce un tema WordPress? Chiedilo a un albero!

Che cos’è un ambiente di sviluppo per wordpress?

Per un albero un ambiente di sviluppo é un luogo ottimale dove crescere sano e quindi una location approvvigionata da aria, acqua, sole e sostanze nutritive che gli arrivano dalla terra. Anche per WordPress l’ambiente di sviluppo per un aspirante developer ha queste caratteristiche. Si lavora localmente e solo dopo si finisce nell’ ambiente di produzione, i vantaggi sono evidenti, nell’ ambiente pubblico tutto deve essere funzionale per l’utente mentre localmente andando a sviluppare funzionalità che non sono complete le cose sono volatili e temporanee. In locale lavoriamo sul nostro computer non sul cloud. Un server lontano 400 km non è il nostro computer locale, semmai solo il computer ufficiale che ospiterà il nostro ambiente di produzione, attivo 24 ore al giorno, che ospiterà fisicamente i nostri files fisici. Lavorando in locale non ho necessità di una connessione internet per esempio. Il tuo progetto in locale quindi sarà visibile solo da te, questo per accendere la luce sulle differenze sostanziali tra l’ambiente di sviluppo e quello di produzione. E’ buona prassi salvare localmente e lavorare solo al di fuori dell’ ambiente di produzione perchè i refusi sono visibili solo a noi stessi e non ho la necessità ogni volta di fare il famoso FTP per trasferire i dati. Quindi la domanda adesso é wordpress di che risorse ha bisogno per funzionare, esattamente come un albero che attinge alla luce del sole e alle risorse idriche del terreno? Un server Apache su cui fare girare PHP e un database in genere MySql. Localmente ci sono vari tools che assolvono a questa mission come xampp per esempio o l’interessante strumento di configurazione https://localbyflywheel.com/ che guida velocemente l’utente per mettere insieme le funzionalità base. Il download non é immediato ma la procedura guidata poi aiuta avviando l’eseguibile dalla cartella di download. Avvierà virtual box e i servizi di hosting in locale, dopo la configurazione verrà richiesto di settare i parametri di collegamento, con utente, pwd e mail, dopodiché verranno importati i file del nostro progetto in locale nel percorso c:/utenti/nomeutente/local sites. A questo punto abbiamo dato all’ albero tutta la linfa vitale per iniziare le modalità di sviluppo e nutrirlo e non ci resta che sperimentare con una prima pagina in php la correttezza del nostro setup di configurazione. Dentro la cartella Local Sites avrò una cartella di progetto che conterrà APP che aperta presenterà una cartella PUBLIC, ed é qui dove risiede come si dice in gergo tutto l’ambaradan per lo sviluppo. Procuriamoci quindi un editor per creare e modificare codice come Atom, SUblime Text o Visual Studio Code per esempio. Dopodiché creiamo un file vuoto con estensione php e possiamo fare i nostri esperimenti, tipo settare una variabile, stamparla a video tra blocchi di codice html o compiere semplici operazioni matematiche di prova per visualizzarle nel sito. Ora che sappiamo dove si trovano tutti i file dell’ applicazione non sarà certo un problema mettere in piedi questo file vuoto nella root del nostro progetto e visualizzarlo nella url del sito sleshato con il nome del file appena creato, dopo aver attivato il nostro server in locale, questo solo per capire il funzionamento di base di come php svolge le sue mansioni all’ interno di un server apache attivo e funzionale con tanto di db per il proseguo. Tutto ciò ci permetterà di familiarizzare con la struttura delle directory e con il funzionamento di base di tutto il nostro wordpress in locale che presenta tutta una serie di potenzialità di personalizzazione, tali da consentirci di mettere in piedi progetti complessi. PHP come linguaggio di programmazione lato server porta già una bellissima notizia: trattasi di una serie di istruzioni non tipicizzate, ossia senza l’obbligo di dichiarare il tipo di variabili, in quanto il sistema le riconosce in automatico. Posso mescolare php direttamente nell’ html , l’importante è che ciò avvenga all’ interno di pagine con estensione php, in modo da imporre delle direttive di comportamento al mio wordpress e indurlo a fare quello che noi vogliamo che faccia. A questo punto il passo successivo é quello di creare il nostro vestito wordpress il cosidetto tema. Niente paura, è meno complicato di quello che sembra perché la famosa cartella wp-content dove sono presenti tutti i temi di configurazione è facile da trovare dalla root del nostro progetto. All’ interno troviamo Themes e qui dentro creeremo una cartella con il nostro tema specifico che verrà visto in automatico nella dashboard. All’ interno di questo vestito metteremo in piedi due file, il classico index.php e lo style.css; nel primo ho il tema da visualizzare e nel secondo tramite la sintassi /* e */ posso inserire le informazioni generali del tema come la versione o il nome dell’ autore per la dashboard, semplificando il file style.css contiene, oltre alle informazioni del tema, anche il codice css che ne gestisce l’aspetto, per esempio la parte visibile nella dashboard:

/*
Theme Name: Guercio-demo
Theme URI: http://www.guercio.com/guercio
Author: Guercio author
Author URI: http://www.guercio.com
Description: Guercio, un progetto didattico che sviscera il potenziale wordpress
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, two-columns, right-sidebar, responsive-layout, flexible-header, custom-header, custom-menu, editor-style, featured-images, post-formats, sticky-post, translation-ready, custom-background
Text Domain: guercio
*/

attivando il tema si vedrà il contenuto della nostra pagina index.php e nella dashboard nel menù apparence-themes si vedrà anche l’icona del tema di selezione se nella cartella predefinita per il nostro vestito abbiamo inserito il nostro screenshot.pgn, che verrà rilevato in automatico nella modalità di visualizzazione e scelta presente dopo il login da url http://nomeprogetto.local/wp-admin

A questo punto abbiamo familiarizzato con il nostro primo tema, non ci resta che fare un passo ulteriori verso le funzioni di wordpress prima notiamo che cancellando le directory con i temi che non mi servono da file system, in automatico scompariranno dal menù apparence-themes del pannello di controllo di wordpress. Andando sul pannello di controllo, voce di menù generali, abbiamo delle voci tipo il TITLE e il TAG che corrispondono a funzioni predefinite di wordpress che estrapolano e stampano sulla pagina il valore del NOME e della nostra DESCRIPTION come argomenti della funzione bloginfo() nella nostra pagina, è proprio qui che risiede la forza del cms, nel fatto che non devo creare funzioni generali che sono già incluse per tutti i nostri usi, pronte per la riusabilità. Oltre a lavorare con le funzioni lavoriamo anche con gli array, grandi armadi pieni di cassetti che raccolgono informazioni coerenti e raggruppate per categoria da memorizzare e richiamare all’ occorrenza. Lavorare con gli array, collection di oggetti, è fondamentale per cui non ci resta che dare un occhiata a questo aspetto. Gli array possono contenere anche altri array e possono anche essere multidimensionali (molto complessi) e associativi, quando andiamo all’ ikea abbiamo come scelta diversi tipi di armadio da acquistare, ognuno con le sue caratteristiche e il proprio uso. Torniamo però a wordpress che hai dei post e quindi dei contenuti da ciclare al posto di numeri e nomi. Da qui l’importanza dei loop nello scorrimento degli array, cosa che si ottiene per esempio come mostrato in figura con un ciclo while, più prezioso del marmo di Carrara. Sicuramente questo è un argomento cruciale da affrontare, ma prima di andare avanti con una analisi generica sulle potenzialità di wordpress per gli sviluppatori, dobbiamo parlare degli editor di testo in wordpress e in particolare del rilascio delle ultime versioni che aggiornano il front end della compilazione del testo. Per tornare all’ interfaccia classico molto più immediato e incisivo come fare quindi? Si addiziona il plug-in CLASSIC EDITOR, cercandolo dai tools messi a disposizione da wordpress, niente di complicato quindi. La particolarità di questo plug-in é che si porta dietro direttamente dal team di sviluppo dieci anni di consolidamenti rispetto alla nuova versione 5 proposta nel dicembre 2018, è chiaro che gli utenti forse potranno trovarsi meglio con questa interfaccia, trovandosi disorientati con i nuovi pannelloni di testo proposti nelle ultime versioni. Non a caso la discussione su questo nuovo editor é molto accesa e più di un milioni di utenti preferiscono non stravolgere nulla tornando all’ antico anche se c’è da precisare che tutte le funzionalità del nuovo non intaccano nulla della vecchia rappresentazione. E’ bene chiarire subito che WP utilizza una sua ricerca redefinita sulle pagine, nel senso che deve avere nella root del tema pagine come single.php o page.php oltre alla index che farà ruotare i post con il link di approfondimento, che una volta eseguito porterà sulla pagina dei contenuti senza ulteriori link. Nella index tra i tag php di apertura e chiusura del codice, scriveremo (senza i commenti) con il ciclo while segmentato intorno all’ HTML:

/*
<?php

get_header();

while(have_posts()) {
the_post(); ?>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<hr>
<?php }

get_footer();

?>
*/

e qui abbiamo un sacco di funzioni predefinite di WP come get_header(); o get_footer(); o have_posts() o anche the_permalink(); e ancora the_title(); e the_content();. Va da se proprio l’utilità di funzioni già incorporate che assolvono al compito imposto senza dover riscrivere nulla. Dalla index si passerà quindi per il criterio di ricerca sulle pagine alla single.php che avrà questo contenuto:

/*

<?php

get_header();

while(have_posts()) {
the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>

<?php }

get_footer();

?>

*/

che é come la precedente ma senza la funzione the_permalink(); che fa esplodere i dettagli della notizia. Il get_header(); rimanda a questo contenuto con la funzione di richiamo wp_head():

/*

<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<h1>Guercio University</h1>

*/

mentre il get_footer(); avrà la sua bella funzione incorporata wp_footer():

/*

<p>Greetings from footer.php</p>

<?php wp_footer(); ?>
</body>
</html>

*/

Da notare come sono stati modellati i tag body per raccogliere i contenuti delle pagine nel corpo del documento sia nell’ header che nel footer. Ovviamente tutto ciò serve a cambiare rapidamente una sola volta l’area del header o del footer senza riscrivere tutto per mille pagine e avremo la certezza che il nostro intero sito sarà aggiornato. A questo punto abbiamo il problema di incorporare il nostro foglio stile nel tema come fare? Dobbiamo creare un file function.php e scrivere al suo interno:

/*

<?php

function university_files() {
wp_enqueue_style(‘university_main_styles’, get_stylesheet_uri());
}

add_action(‘wp_enqueue_scripts’, ‘university_files’);

?>

*/

le funzioni vanno richiamate ma qui tramite l’istruzione add_action dico che WP deve caricare la funzione university_files senza bisogno di invocarla. Ovviamente adesso la modellazione della pagina CSS dovrà assorbire la nostra prossima azione. Qui possiamo solo concludere che nella funzione sopra university_main_styles e university_files che é anche il nome della funzione sono nomi arbitrari tutto il resto richiama dei comandi specifici di WP.