Logo kromin web agency

Introduzione allo sviluppo su WordPress

Di Marco Ciotoli giovedì, 21 luglio 2016

Con questo articolo voglio iniziare una rubrica dedicata a Wordpress. L’intento è quello di riportare metodologie, trick e strumenti utili per sviluppare piattaforme più o meno complesse con il CMS più utilizzato al mondo.

L'articolo si trova nella categoria Development e tratta di: ,

Sviluppare prodotti digitali con WordPress a volte sembra utopia, ma con un pò di lavoro ed alcuni strumenti possiamo cambiare idea.

Io sono Marco Ciotoli, Front-End Developer in Kromin ed in questo articolo introdurrò il  “Ciclo di Vita” di un progetto realizzato in WordPress, attraverso l’utilizzo di trucchi e strumenti utili per ottimizzare la piattaforma.

Per uno Sviluppatore è molto importante riuscire a comprendere quando è possibile utilizzare WordPress e quando, invece, bisogna approcciarsi al Progetto attraverso Strumenti differenti.

In Kromin realizziamo Siti Web con WordPress per Progetti basati quasi esclusivamente su una tipologia di Contenuti statici, poco dinamici o progetti in fase di Startup.

Un esempio pratico di un sito completamente custom, realizzato con WordPress, è whitenoisegallery.it.

Comprendere la Tipologia di contenuti

Durante i primi Brief sul Progetto delineiamo la tipologia di Contenuti che il Sito Web dovrà ospitare e studiamo le relazioni tra i vari elementi che verranno inseriti all’interno dell’intera Struttura.

Su whitenoisegallery abbiamo compreso che i Contenuti da inserire erano:

  • Le Opere (non acquistabili);
  • Le Opere (acquistabili);
  • Gli Artisti;
  • Le Mostre;
  • Le Project Room;
  • Blog con articoli e categorie;
  • Pagine statiche.

Il primo Step di analisi dei Contenuti non va sottovalutato: in questa fase, è necessario strutturare ogni relazione tra i Contenuti in modo efficace e corretto, in modo da non trovare alcuna limitazione in fase di Sviluppo.

Gestione e Relazione dei contenuti

Normalmente evitiamo di gestire con WordPress piattaforme che devono poter permettere agli utenti di compiere molte azioni dato che bisognerebbe completamente stravolgere l’architettura base di WordPress, andando a perdere la semplicità e l’efficacia del CMS stesso.

Infatti, nel caso di whitenoisegallery,  gli Utenti avevano solo la possibilità di acquistare prodotti e chiedere maggiori informazioni. Ponendo le Opere al centro del Progetto, abbiamo analizzato precisamente le relazioni tra i Contenuti, collegandole ad altre “Entità” e sfruttando al meglio le  tassonomie (“categorie” Custom) di WordPress.

  • Opere non acquistabili ( custom post type);
  • Opere acquistabili ( woocommerce );
  • Artisti ( Tassonomia collegata alle opere e all’ecommerce );
  • Mostre ( Tassonomia collegata alle opere );
  • Project Room ( Tassonomia collegata alle opere ).

schema-contenuti-sviluppo-wordpres

È facile notare come WordPress ci è venuto incontro con 2 concetti: Le Tassonomie ed i Post Type Custom.

Realizzazione Back-End WordPress

Le Tassonomie, i Post Custom e tutte le funzionalità devono essere create con il codice. Per fare questo possiamo percorrere 2 strade a seconda dei casi:

  1. Realizzare un Plugin per le funzionalità ed un Tema per esporre quelle funzionalità. Così facendo si scompone in due il Progetto, dividendo sia logicamente che praticamente il Back-End dal Front-End.
  2. Realizzare un Tema Custom con tutte le funzionalità all’interno, suddividendo il Back-End ed il Front-End tramite scafolding.

Normalmente il secondo caso è quello più veloce e pratico, soprattutto se si monta un sistema di version control come Git ed altri strumenti che analizzeremo più avanti.

Realizzazione Front-End WordPress

L’indispensabile per sviluppare un Tema WordPress è quello di conoscere WordPress!

Le risorse migliori che puoi trovare sull’argomento si trovano nella documentazione di WordPress:

Studia i file che compongono un tema WordPress, i file che permettono di personalizzare le Tassonomie Custom ed i Post Type Custom. Tutte le funzionalità che ti serviranno le potrai trovare nella documentazione, a patto che tu conosca l’HTML, CSS e qualche nozione di JavaScript.

Questa immagine spiega quale file elaborano i vari tipi di contenuti.
Questa immagine spiega quale file elaborano i vari tipi di contenuti. Premendo sull’immagine potrai vederla ingrandita. Potrai notare come single-[nome post type custom].php si occupi di fare il rendering del nostro custom post type e come taxonomy-[nome nostra tassonomia].php si occupi di fare il rendering della lista dei post associati alla tassonomia (tipo le categorie classiche di WordPress).
Facciamo un esempio pratico, devo mostrare il titolo all’interno di un articolo del blog e non so come si fa:

  1. Cerco su google : print title post wordpress.
  2. I primi risultati sono la soluzione: il file che gestisce il rendering del post è single.php e la funzione che mostra il titolo è the_title().

Strumenti utili per lo sviluppo

Attualmentegli strumenti e le metodologie utili di lavoro sono le seguenti:

  • 1 WordPress installato su un server di sviluppo;
  • 1 WordPress installato su ogni computer su cui si sviluppa;
  • 1 Ramo di git installato sul server di sviluppo con cui ogni membro del Team invia le modifiche;
  • Starter Kit Theme : Sage di roots.io https://roots.io/sage/ (Bower, GulpJs, Sass, Funzionalità interne di sage tipo i wrapper – https://roots.io/sage/docs/theme-wrapper/);
  • Visual Composer (su cui sviluppiamo i moduli) https://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431;
  • Per lavori veloci : https://www.advancedcustomfields.com/ versione pro, ci permette di creare i fields https://codex.wordpress.org/Custom_Fields (ed altre cose molto utili) senza toccare 1 riga di codice;
  • Sublime Text 3 ( ogni membro del team usa moduli diversi ).

Con l’utilizzo di questi strumenti, è possibile realizzare un Sito Web, anche abbastanza complesso,  in poche settimane di lavoro.

Nei prossimi giorni approfondirò ogni sezione di questo articolo, andando a spiegare nel dettaglio alcuni “Trick” che quotidianamente utilizzo. 

Se l’argomento ti interessa iscriviti alla Newsletter qui in basso e resta aggiornato sul mondo del Front-End e Sviluppo su WordPress.