Prima di iniziare a conoscere quali file e quali linguaggi sono necessari per la creazione di un tema WordPress, voglio farti riflettere per un momento sugli strumenti necessari per crearlo nel migliore dei modi.
Se ti senti sicuro e questo non è il tuo primo “rodeo WordPress”, puoi anche saltare questa lezione ma anche se questa dovesse essere la tua situazione ti consiglio comunque di leggere i contenuti seguenti perché potrai scoprire alcune buone pratiche e soluzioni che ancora non hai avuto il tempo di sperimentare.
Fatte le dovute premesse, è giunto il momento di entrare nel vivo del corso e scoprire da vicino come poter configurare il nostro ambiente di sviluppo per poter lavorare nel modo più veloce e preciso possibile.
Con WordPress non svilupperai se un server non hai
Prendendo in prestito le capacità comunicative del maestro Joda ho cercato di scrivere un titolo un po’ divertente. Il discorso vero è che, divertimenti a parte, esistono un sacco di soluzioni che ci permettono di installare un server web all’interno del nostro sistema operativo.
Abbiamo già afforntato un argomento molto simile all’interno del corso Apprendi il PHP con WordPress e non è assolutamente mia intenzione andarmi a ripetere anche in questa lezione.
Se non vuoi seguire il corso precedente significa che conosci già il significato di uno stack AMP e non è mia intenzione annoiarti troppo con la sua definizione.
Ma lo stack non era LAMP?
Il maestro Joda parla di stack LAMP perché la L si riferisce al sistema operativo Linux e generalmente questi sono i server più stabili e diffusi ma con le soluzioni che ti sto per mostrare potrai installare un server web in qualsiasi sistema operativo.[
Anche se ti stai approcciando per la prima volta allo sviluppo di temi WordPress do per scontato che tu almeno conosca la piattaforma e che l’abbia installata su qualche server web, anche online va più che bene.
Quando si parla di sviluppare qualcosa che è in qualche modo collegato a un server web io sono un forte sostenitore dello sviluppo in locale, questo significa che dovrai essere in grado di riprodurre le funzionalità che sono presenti sul server web online all’interno del sistema operativo che usi.
Sviluppare in WordPress significa avere sul proprio computer un server web Apache, l’interprete PHP e un server database MySQL; in breve lo stack AMP. Questo risultato si può raggiungere in diversi modi:
- installare uno per uno i vari programmi, non sempre consigliato perché è un processo lento e richiede diverse configurazioni;
- installare un’applicazione che gestisce tutto, come i già discussi XAMPP, MAMP e compagnia. Utili ma talvolta noiosi da configurare se abbiamo bisogno di qualcosa di aggiuntivo;
- installare dei sistemi di virtualizzazione come Vagrant o Docker che permettono di creare una macchina virtuale all’interno del proprio sistema operativo che si comporterà come un vero e proprio server web esterno.
La soluzione che andrò a utilizzare io è l’ultima dove, grazie a Vagrant (e soprattutto alla macchina virtuale VVV), posso avere a mia disposizione una configurazione WordPress completamente funzionante e pronta da personalizzare come desidero visto che mi trovo all’interno di Linux.
Potresti preferire Docker…
VVV è sicuramente una soluzione valida ma ultimamente sto usando un piccolo script che mi aiuta a impostare un LAMP con Docker, scoprilo in questo articolo.
Ovviamente non voglio costringerti a utilizzare la mia scelta, una qualsiasi delle soluzioni elencate precedentemente può andar bene ma ti consiglio comunque di darci un occhio perché risulta veramente interessante e creare degli ambienti di sviluppo dedicati a WordPress è ormai diventato un gioco da ragazzi.
Ho deciso di optare per questa soluzione perché verrà utilizzata sicuramente anche in altri corsi più avanzati e benché tu non abbia bisogno di conoscerla in questo momento, ritengo sia una conoscenza che ti tornerà molto utile nel prossimo futuro.
Scrivi il codice dove ti pare, ma un IDE è meglio
Come ormai dovresti sapere, all’interno di SkillsAndMore siamo forti sostenitori dell’editor di codice Atom perché è Open Source e soprattutto perché è facilmente estendibile grazie ai suoi pacchetti e ai linguaggi web che sono stati utilizzati per crearlo.
Allo stesso tempo, quando ci avviciniamo allo sviluppo di soluzioni avanzate con linguaggi di programmazione più complessi, come per esempio il PHP, è bene avere degli strumenti in grado di fornirci feedback più accurati e soluzioni idonee.
Per questo motivo il mio consiglio ricade sulla scelta di un IDE dedicato a questo linguaggio.
Le scelte che puoi prendere sono principalmente due:
- NetBeans – un progetto open source molto completo;
- PHPStorm – progetto invece a pagamento che utilizzerò io all’interno di questo corso.
Entrambe sono delle soluzioni veramente accattivanti e personalmente preferisco il secondo soltanto per la sua semplicità di utilizzo, ma la scelta di un IDE non dovrebbe essere soltanto relativa al costo o alla semplicità d’uso, ma piuttosto dovrebbe essere una scelta ponderata presa in base alle caratteristiche che ritieni più importanti per il tuo lavoro.
Questi due li ritengo ottimi per lo sviluppo in WordPress perché ci permettono di ottenere facilmente la documentazione delle funzioni interne, permettono di eseguire dei test sul nostro codice, gestiscono tutte le azioni di push e pull verso un repository Git e offrono anche una gestione intelligente dei file che compongono il nostro progetto.
Avere un IDE al proprio fianco mentre si sviluppa un tema WordPress è sicuramente un vantaggio, ma non è obbligatorio.
Esistono anche molti pacchetti per Atom che ti aiuteranno a sviluppare meglio in WordPress, anche se non saranno in grado di svolgere le stesse azioni che un IDE completo mette a disposizione.
Prendi questa sezione come un consiglio e non un obbligo, puoi continuare a utilizzare tranquillamente Atom o il tuo editor di codice preferito perché in questo corso andremo a vedere assieme le singole funzionalità che permettono di costruire un tema e molte delle funzionalità avanzate messe a disposizione da un IDE non saranno neanche utilizzate.
Non si sviluppare mai un tema senza contenuto
Avere a disposizione il contenuto che dovrà essere mostrato all’interno del sito è un fattore molto importante durante lo sviluppo, un po’ come abbiamo ricordato anche all’interno del corso dedicato al responsive design, purtroppo non sempre questo è possibile.
In questo corso non andremo a focalizzarci troppo sull’analisi del contenuto che il nostro cliente ci metterà a disposizione e tantomeno cercheremo di realizzare un tema WordPress partendo da una base grafica; questo perché lo scopo del nostro corso è quello di conoscere da vicino le funzioni che permettono di realizzarlo senza andare a lottare troppo con le personalizzazioni CSS.
Allo stesso tempo, un’installazione classica di WordPress non offre una partenza di base che sia in grado di farci testare tutti i tipi di contenuti che possiamo pubblicare all’interno di questa piattaforma.
Per questo motivo diventa necessario trovare una soluzione che ci permette di testare tutte le forme che il contenuto può assumere, e per tua fortuna questo è possibile grazie all’importazione di un semplice file .xml.
Come ti mostrerò nel video allegato a questa lezione, importare questo file è semplice quanto utilizzare l’uploader all’interno della nostra piattaforma. La cosa importante è trovare il contenuto giusto da caricare.
Se andiamo a navigare all’interno del portale WordPress.org è molto facile trovare il file .xml che ci permette di importare il contenuto che la community ha sviluppato appositamente per testare il nostro tema; ma io preferisco una via alternativa.
Se vai sul sito wptest.io trovi un pacchetto ancora più aggiornato e creato appositamente per gli sviluppatori che è veramente un aiuto incredibile.
Grazie a questo pacchetto potrai importare tutto il contenuto che può mettere in crisi il tuo WordPress. Ci sono post con immagini in evidenza verticali, altre orizzontali, titoli lunghi e titoli corti.
All’interno dei vari articoli troverai inseriti tutti gli elementi che WordPress è in grado di gestire come i titoli di vario livello, liste di vario tipo, immagini allineate sui vari lati ecc…
C’è anche un tweet incluso nella pagina grazie alla funzionalità oEmbed di WordPress 🙂
Insomma, installando questo singolo pacchetto sarai in grado di provare il tuo tema su qualsiasi contenuto in modo da prepararlo anche al tuo cliente che desidererà (sicuramente) inserire qualsiasi tipo di informazione.
Alcuni plugin per migliorare il tuo sviluppo
Molto spesso si sente parlare di persone che installano decine di plugin soltanto per aggiungere i commenti Facebook (esempio non troppo lontano dalla realtà) e probabilmente anche per questo motivo i plugin si sono guadagnati una nomina un po’ cattiva…
La cosa vera è che non si può fare di tutta l’erba un fascio perché esistono degli ottimi plugin in circolazione che ci possono aiutare in modo incredibile a svolgere il nostro lavoro.
Alcuni utili plugin che installo durante il mio lavoro sono i seguenti:
- Query Monitor – un ottimo plugin che mi consente di ottenere moltissime informazioni sulla pagina visualizzata come le query eseguite, le pagine template caricate e mi avvisa se sono presenti degli errori;
- Simple Show Hook – utilissimo per scoprire la posizione degli Hook utilizzati all’interno della pagina e quali funzioni sono collegate a esso;
- Debug Toolkit – altro incredibile plugin che mi permette di non configurare xDebug nel mio ambiente di sviluppo, basta usare la funzione
dump()per controllare meglio il mio codice.
Conclusioni
Ebbene siamo giunti al termine di questa prima lezione. Spero di averti aiutato a scegliere gli strumenti giusti perché sin dalla prossima lezione entreremo nel vivo dello sviluppo di un tema e non ci guarderemo più indietro.
Come sempre ti ricordo che, anche se questa è stata una lezione teorica, troverai le domande che ti aiuteranno a migliorare le tue conoscenze e se desideri confrontarti un po’ con tutti gli altri skillati discutendo alcuni degli strumenti presentati, o proponendoci quelli ai quali sei affezionato tu stesso, non devi far altro che partecipare nella nostra community in modo da confrontarti con gli altri e migliorando ancora di più le tue conoscenze.
Adesso non mi resta altro che passare la parola a te e aspettarti nella prossima lezione dove andremo a parlare di un po’ di codice e scopriremo come organizzare la cartella del nostro tema!