Diventare sviluppatore WordPress

Loop di WordPress nel tema TwentyTwentyOne

WordPress può rappresentare un’ottima palestra per tutti quelli che vogliono muovere i primi passi nella programmazione web. Ma anche chi ha già delle solide basi troverà in questo famoso e diffusissimo cms open source, non solo delle opportunità di carriera presso web agency e software house, ma anche come consulente e sviluppatore freelance. Il suo codice open source e l’enorme presenza in rete di documentazione, guide e walkthrough per problemi comuni lo rendono adatto tanto al principiante, quanto a chi ha necessità di lavorare su un prodotto stabile e maturo.

In questo articolo non mi dilungherò troppo sulla storia di WordPress, sulla percentuale di installazioni in tutto il mondo ecc., ma spiegherò perché può essere interessante per uno sviluppatore (o aspirante tale) e cosa dovresti conoscere dal punto di vista tecnico per impadronirti di tutte le competenze necessarie per lavorare con questo versatile e utilissimo strumento.

Le basi del cms

WordPress è un content management system che permette la creazione e la gestione di contenuti web dinamici con estrema facilità. La sua curva di apprendimento per l’utente finale è molto bassa e l’enorme quantità di temi e plugin pronti all’uso permette di creare in poco tempo siti internet, e-commerce, portali di e-learning e tanto altro ancora con una spesa contenuta e un notevole risparmio di tempo. La sua estendibilità permette allo sviluppatore di creare addon per il cliente finale, ma anche di pubblicarli nel canale ufficiale nelle modalità che preferisce (gratuitamente, con licenza freemium o premium ecc.).

Per cominciare a sviluppare su WordPress occorre innanzitutto imparare ad installarlo e a utilizzarne tutte le feature di base. Vediamo brevemente da dove partire.

Questo articolo presuppone nel lettore le basi della programmazione web. Se sei un principiante assoluto, ti consiglio di partire da qui

Apache, Php, MySql

WordPress è sviluppato in linguaggio Php su database MySql. Essendo un software web, deve essere ospitato su un server http, il più utilizzato dei quali è Apache.

Qualunque sia il sistema operativo installato sul tuo pc, la via più breve per creare un’installazione di WordPress in locale e iniziare a fare pratica, è scaricare e configurare Xampp. Sia sul sito ufficiale che in rete trovi migliaia di guide per completare l’operazione in una manciata di minuti. Una volta avviati i servizi di Xampp in localhost, ti basterà eseguire il download di wordpress, scompattare lo zip dentro la cartella htdocs di Apache e seguire il wizard di installazione. Il cms creerà automaticamente il database e le tabelle necessarie, con alcuni contenuti di partenza e un tema predefinito. Bene, hai già creato il tuo primo sito internet!

Inizia da subito a navigare nella Bacheca, che altro non è che l’interfaccia di amministrazione del sito web di test sul tuo server locale; crea pagine, articoli, cambia lo stile, installa e disinstalla plugin, aggiungi utenti con diversi ruoli. Cerca di acquisire gli elementi base del cms e i problemi che questo software vuole risolvere; questo esercizio ti sarà utile quando dovrai sviluppare il tuo codice php per WordPress.

Il Php e lo sviluppo di temi e plugin per WordPress

Come ho già anticipato, WordPress è interamente sviluppato in php e permette al programmatore di creare le proprie estensioni per il cms, in special modo temi e plugin. Un tema è sostanzialmente un insieme di file php, fogli di stile e file javascript che definiscono il layout del sito. Un plugin invece è un’estensione del core di WordPress che aggiunge le funzionalità desiderate (una delle estensioni più famose, ad es. è Woocommerce, che trasforma il sito in un negozio on line). Alla versione attuale, la 5.6, il tema attivo di default è TwentyTwentyOne. Per esaminarne il codice, naviga nella cartella di installazione questo percorso /wp-content/themes/twentytwentyone. Non lasciarti spaventare dalla quantità di file, che in realtà sono ben documentati, a partire dal nome “parlante” come ad esempio 404.php (che indica appunto il codice da eseguire se l’utente non trova la pagina, il classico caso di errore “404 not found”). Vediamone i sorgenti:

<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since 1.0.0
 */

get_header();
?>

	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->

	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .page-content -->
	</div><!-- .error-404 -->

<?php
get_footer();

Se hai già delle basi di html e php, potrai notare a colpo d’occhio che i commenti in cima al file ne indicano lo scopo e il package di appartenenza, mentre le invocazioni a funzione get_header(), get_search_form(), get_footer(), iniettano nella pagina il codice dinamico di, rispettivamente, header, form di ricerca e footer del sito. Come vedi il codice è molto semplice, anche perché è di tipo procedurale; esaminando ogni file e studiandolo a fondo, potresti in pochi giorni essere in grado di creare il tuo tema per WordPress a partire da un qualunque template statico in html/css/javascript.

Se vuoi invece addentrarti in un plugin, il più semplice di tutti tra quelli preinstallati è senza ombra di dubbio “Hello Dolly” che trovi in /wp-content/plugins/hello.php (in pratica un unico file). Per i più audaci, qualcosa di più complesso si trova nella cartella di Akismet, un plugin per il filtro antispam.

Il Codex di WordPress

Le funzioni come get_header() sono molto facili da comprendere, ma man mano che ci si addentra nel codice di un tema o di un plugin può sorgere la necessità di impadronirsi della terminologia tecnica e di alcuni pattern di programmazione utilizzati in WordPress. Ad esempio, cos’è il loop di WordPress (cfr. la foto in evidenza)? Perché in Hello Dolly a un certo punto si trova questa chiamata?

add_action( 'admin_notices', 'hello_dolly' );

Cos’è una action? E perché in functions.php si trova una chiamata simile (add_filter)? A queste e ad altre domande si trova risposta ormai ovunque con una banale ricerca sui principali motori, tuttavia è bene sin da subito familiarizzare con il Codex di WordPress. Si tratta di un manuale sempre aggiornato che fornisce le linee guida, lo stile e le convenzioni di programmazione e la documentazione per gli sviluppatori WordPress. Per iniziare puoi partire da qui.

Gestione e amministrazione di MySql

Il database di WordPress è creato in MySql. È molto frequente per uno sviluppatore doversi avventurare tra le tabelle create dal cms per eseguire query complesse, aggiornare alcuni campi, creare le proprie tabelle e importare o esportare insiemi di record. Per cui, non potrai fare a meno di imparare a gestire MySql o utilizzando PhPMyAdmin installato di default su Xampp, oppure utilizzando qualche altro software come MySqlWorkBench o DBeaver.

Do per scontato che tu acquisisca o abbia acquisito le basi di sql.

Librerie frontend

WordPress utilizza alcune librerie front end per gestire l’interfaccia grafica del sito e l’interazione utente con il DOM.

Per quanto riguarda html e css, dovrai conoscere Bootstrap, in special modo il grid layout, mentre per quanto riguarda javascript, l’interfaccia di amministrazione di WordPress fa ancora largo uso di JQuery, una libreria per la gestione del DOM. Gutenberg, invece, l’editor a blocchi per la creazione dei contenuti del blog e delle pagine, utilizza React. All’inizio puoi tralasciare React (un framework javascript per le single page application dalla curva di apprendimento un po’ ripida), dato che ti sarà utile solo se deciderai di creare blocchi personalizzati per Gutenberg (o se vorrai invece intraprendere la carriera di sviluppatore frontend!); mentre per quanto riguarda Bootstrap e JQuery, anche in questo caso si tratta di strumenti che richiedono poche giornate di pratica per impadronirsi dei primi rudimenti ed essere subito operativi.

Contattami se hai necessità di approfondire WordPress

WordPress e la SEO

Se è assodato che come sviluppatore web dovrai concentrarti maggiormente sullo sviluppo di plugin e temi, tuttavia non potrai tralasciare la Search Engine Optimization. Nella stragrande maggioranza dei casi, anche quando WordPress è usato come web app piuttosto che come semplice cms, tutto ciò che viene sviluppato su di esso deve essere ottimizzato per i motori di ricerca. I tuoi temi e plugin non dovranno causare rallentamenti e malfunzionamenti al sito e, molto probabilmente, dovranno implementare meta key, meta description, rich snippets, amp e tutto quanto è necessario perché un sito sia trovato sul web facilmente. Ma anche in qualità di consulente WordPress, lo sviluppatore può trovare nuove opportunità di business con le sue competenze utili a migliorare la presenza on line di blog, di un e-commerce, di un sito vetrina. E infine anche l’appassionato potrà trarre vantaggio dal fatto di generare molto traffico sul proprio blog. Le risorse on line per acquisire i fondamenti della SEO sono infinite per cui in questo caso lascio al lettore l’onere della ricerca.

Conclusione

In questo articolo ho cercato di riassumere tutte le informazioni utili per acquisire tutte le competenze necessarie per diventare sviluppatore WordPress. Questo cms è molto facile da imparare, sia da parte dell’utente finale, sia da parte dello sviluppatore che vuole estenderlo con i propri temi e plugin. Tuttavia le tecnologie coinvolte e la quantità di documentazione e guide presenti on line, rischiano di creare un po’ di confusione nel neofita. E con questa guida spero di aver lasciato qualche briciola di pane utile per imboccare la strada più breve per imparare la programmazione web con WordPress.

Se questo articolo ti è stato utile, iscriviti alla newsletter per rimanere aggiornato

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *