Tema di base per WordPress Tonik

Quando si tratta di lavorare con i plugin di WordPress, non è raro vedere persone che utilizzano strumenti più moderni come Composer, gestione delle dipendenze front-end tramite strumenti come Node e così via.

In effetti, direi che il più popolare è probabilmente il progetto Sage del team Roots. È fantastico, ma di recente io e alcuni amici ci siamo imbattuti nel tema Tonik WordPress Starter Theme e ho avuto il piacere di parlare con il capo del progetto, Patryk.

Quindi, per quelli di voi che sono interessati a flussi di lavoro, strumenti e strategie più moderni e che li utilizzano nel contesto dello sviluppo di temi, penso che valga la pena dare un’occhiata a Tonik.

Non mi ci è voluto molto per far girare un’istanza del tema sul mio computer locale. Ma il punto non riguarda la mia esperienza con esso, è il motivo per cui penso che valga la pena dare un’occhiata.

Tema di base per WordPress Tonik

Prima di entrare nell’installazione effettiva del tema, ho pensato che valesse la pena evidenziare ciò che rende Tonik degno di nota.

Per coloro che sono interessati a utilizzare sia le tecniche di programmazione a riga di comando che quelle orientate agli oggetti, il tema offre quanto segue:

• interfaccia a riga di comando, per avviare facilmente nuovi temi,
• modelli avanzati con supporto per il passaggio di dati,
• webpack per la gestione, la compilazione e l’ottimizzazione degli asset,
• orientato alla costruzione con azioni e filtri

Innanzitutto, puoi vedere il progetto su GitHub, ma prima di esaminare e scaricare tutti i vari componenti correlati (come Gin ), è importante notare come va il flusso di lavoro per questo particolare tema.

Cioè, non è che lo scarichi, lo installi e sei pronto per partire. Invece, il flusso di lavoro è leggermente diverso.

Iniziare

Ad esempio, per iniziare con Tonik, ecco cosa devi fare (nota tutto questo presuppone che tu abbia  installato Composer e Node ).

Passa alla directory wp-content/themes e inserisci il seguente comando:

$ composer create-project tonik/theme acme-theme

Ovviamente, non devi chiamarlo "tema dell’acme".

Da lì, dovrai clonare il repository del progetto da GitHub (questo è il motivo per cui non lo installi come al solito modo di installare i temi, ma ne parleremo tra un minuto):

A questo punto, ci sono alcune altre dipendenze che deve risolvere. Per fare ciò, vai alla directory del tema appena creato e quindi usa Composer per installare dette dipendenze.

$ composer install

E quindi installa le dipendenze front-end:

$ npm install

A questo punto, non resta che costruire il tema di base e attivarlo (tramite la riga di comando che è dove entra in gioco WP-CLI ):

$ npm run dev

$ wp theme activate acme-theme

A questo punto, sei pronto per iniziare a utilizzare il tema all’interno di WordPress.

"Sembra un po’ complicato…"

Dati tutti i passaggi precedenti, è probabile che la domanda naturale sia "Perché dovrei prendermi la briga di fare tutto questo quando posso semplicemente creare un tema usando la metodologia normale?"

E questa è una buona domanda. Ma se sei qualcuno che sta cercando di creare soluzioni per te stesso o per altri utilizzando strumenti più moderni, penso che l’utilizzo di strumenti come questo possa fare molto per renderlo possibile.

Tutto ciò che offre

Caso in questione: un punto dolente nello sviluppo di modelli per altri è la mancanza di un vero motore di creazione di modelli in WordPress (almeno al momento in cui scrivo).

Ma se dai un’occhiata alla documentazione per i modelli da solo, vedrai alcune cose come i segnaposto e altri modi per gestire determinati elementi.

E c’è molto di più integrato in esso. Mi piacerebbe dire che ho provato tutti gli aspetti di ciò che offre, ma sento di aver solo graffiato la superficie. Ad esempio, non ho avuto la possibilità di armeggiare con nessuna delle funzionalità HTTP.

Tuttavia, ecco una rapida carrellata di ciò che offre tutto il tema:

• una struttura di directory preconfigurata,
• modellazione,
• supporto dei componenti,
• funzioni di supporto,
• supporto dell’Ajax,
• azioni e filtri del tema,
• un contenitore di servizio,
• supporto per codici brevi,
• caricamento automatico,
• e molto di più.

Tutto questo può essere esaminato nella documentazione.