Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Ago 21
guida Wordpress

Come creare un tema WordPress: creazione della struttura di base

  • 21/08/2017
  • Paolo Dell'Aguzzo
  • 1 Comment
  • Programmazione, Wordpress
  • php, programmazione, tema, tema wordpress, wordpress
Ciao 🙂

Andiamo avanti con la guida Come creo un tema WordPress? parlando della struttura di base che deve avere il nostro tema. Questo articolo presuppone che hai installato MAMP o XAMP sul tuo MacBook o PC. Supponiamo anche che hai già installato anche WordPress. Se non hai ancora l’ambiente pronto leggi: Come installare MAMP e WordPress su Windows e MacBook.

Web Hosting

Quali sono i file necessari per creare un tema WordPress?

Per prima cosa devi sapere che per creare un tema WordPress è necessario avere due file fondamentalmente ed è necessario posizionarli all’interno di una cartella precisa. I file principali sono “index.php” e “style.css”. Il primo file menzionato si occupa di fornire i contenuti del nostro sito web definendo anche la struttura del contenuto in HTML. Il secondo file, “style.css”, ha lo scopo di fornire al nostro contenuto uno stile grafico più interessante.

Sono sufficienti questi 2 file?

La risposta è sì. Però come ben sai sono fissato con il codice pulito e di conseguenza non posso fermare questa guida e farti vedere tutto in due file. Così ti mostro qual’è la gerarchia dei file WordPress e come essi possono essere suddivisi:

Ho trovato questa bella grafica online che credo sia perfetta per il caso nostro. Te la spiego brevemente. Quando apri una pagina WordPress la piattaforma si chiede “che tipo di pagina devo fornire all’utente?” (quindi si legge da sinistra verso destra). A questo punto, in base alla pagina scelta, WordPress scorre il grafico fino a quando non trova una delle pagine .php con il nome appropriato.

Nel nostro caso, per qualsiasi tipo di contenuto, WordPress andrà a mostrarci il contenuto di un post, di una pagina statica, di una pagina “about”, di qualsiasi cosa, utilizzando il template definito in “index.php” perché è l’unico file che abbiamo. A breve ti insegnerò a creare una struttura più complessa e organizzata in grado di fornire il contenuto in maniera più appropriata.

WooCommerce tema

Vedremo quindi che:

Development Category (English)728x90

  • Potremo creare un template php appositamente per un POST singolo del blog (single.php)
  • Potremo creare un template php appositamente per una pagina statica (page.php)
  • Potremo creare template php appositamente dedicati ad header e footer (header.php e footer.php)
  • Potremo creare template per pagine che utilizzano un nome specifico. Per esempio la “Home”, la quale avrà lo “slug” con valore “home” (page-home.php)

Nota bene: uno slug di un post, di una pagina, ecc. non è altro che un identificativo. Utilizzando uno slug, a differenza dell’id di un post/pagina, abbiamo più chiaro quello che stiamo facendo in quanto è più “parlante”. Dirti infatti creiamo il file “page-home.php” è molto più parlante di “page-32.php”.

Da dove inizio?

Bene. Per iniziare con il nostro tema entriamo nella cartella “htdocs” che abbiamo visto nelle altre guide. Entriamo nella cartella del nostro sito (nel mio caso “sitolocale”). Dunque troverai al suo interno una cartella denominata “wp-content”, quindi entra in questa cartella. Infine entra nella cartella “themes”.

Giunti a questo percorso dovresti trovarti dei temi già pre-installati, quindi ci sono già delle cartelle.

Deep Learning Specialization on Coursera

Passaggio preliminare

Per prima cosa giunto a questo punto è necessario che abiliti le estensioni visibili sui file che sono spesso nascoste in Windows. Per farlo apri la cartella di “esplora risorse” selezionando la cartella gialla nella barra delle applicazioni. Dunque in alto a sinistra trovi “Organizza” e seleziona “Opzioni cartella e ricerca” nel menù che si apre. Dunque nella scheda “Visualizzazione” togli il segno di spunta che si trova alla voce “Nascondi le estensioni per i tipi di file conosciuti”.

Su Mac OS trovi la spunta rapidamente sotto le preferenze del finder nella scheda “Avanzate”. Per maggiori informazioni Salvatore Aranzulla può aiutarti in questo a questo indirizzo.

Creazione del tema

Nel percorso “wp-content/themes” fai quindi click con il tasto destro e crea una nuova cartella chiamandola “coursetheme”. All’interno di questa cartella è necessario creare 3 file:

  • index.php – Devi chiamarlo esattamente in questo modo ed è un file obbligatorio
  • style.css – Devi chiamarlo esattamente in questo modo ed è un file obbligatorio
  • screenshot.png – Metti un’immagine che riconosci, una tua foto, quello che vuoi e rinominala in “screenshot.png”. Non è un file obbligatorio, ma ti aiuta a riconoscere meglio il tuo tema.

Quindi la nostra cartella si presenterà in questo modo:

Aggiungiamo dei dettagli al tema

Per aggiungere il titolo del tema ed altre informazioni apri il file “style.css” con il tuo editor di testo preferito. Io utilizzerò Sublime Text. Ti consiglio di utilizzare lo stesso perché è un editor molto utilizzato dai programmatori e nelle aziende. E’ comodo, rapido e gratuito quindi provare non costa nulla 🙂

Dunque, una volta aperto il file, copia in alto le seguenti righe di codice:

/*
Theme name: CourseTheme Theme
Theme url: https://www.paolodellaguzzo.com/
Description: Tema sviluppato da Paolo Dell'Aguzzo
Version: 1.0
Author: <a href="https://www.paolodellaguzzo.com/" title="Website Paolo Dell'Aguzzo">Paolo Dell'Aguzzo</a>
Author url: https://www.paolodellaguzzo.com/
Tags: static home, speed, sublime
*/

In queste righe vediamo l’utilizzo di un commento /* */ che racchiude le informazioni che WordPress utilizza per identificare in maniera più precisa il nostro tema:

  • Theme name: Il nome del tema
  • Theme url: L’url del tema, dove trovare la documentazione, ecc.
  • Description: Una descrizione del tema
  • Version: La versione del tema, iniziamo dalla 1.0 poi ogni volta che si apportano modifiche raggiungendo delle milestone di progetto è buono incrementare la versione
  • Author: Dà informazioni sull’autore del tema
  • Author url: riporta l’url al sito dell’autore del tema
  • Tags: Riporta alcuni identificativi per il nostro tema, per chi lo cerca ad esempio se è in vendita (l’ho popolato con 3 cose a caso che mi piacevano)

Vediamo il nostro tema

Per vedere il tema è necessario entrare sul pannello di amministrazione del sito. Quindi digita l’url “http://localhost/sitolocale/wp-admin/”, nel tuo caso al posto di “sitolocale” potresti voler mettere il nome che hai dato tu al sito. Dunque entra in “Aspetto > Temi”:

All’interno della schermata che si apre dovresti vedere il tema che hai appena creato!

Cliccando sull’immagine del tema potrai vedere tutti i dettagli del tema che abbiamo inserito prima nel file “style.css”. Al momento se provi invece a visualizzare l’anteprima non vedrai molto poiché il nostro file “index.php” che ci fornisce il contenuto è vuoto.

Conclusione

Con questo articolo hai imparato a collocare un tema nella cartella corretta e dunque a scrivere i dettagli del tuo tema allegando uno screenshot. Hai imparato a vedere il tema su WordPress in locale. Nel prossimo articolo avrai la possibilità di imparare a sviluppare il tuo primo contenuto nel file “index.php”. Ciò vuol dire che il tuo tema inizierà a mostrare qualcosa e sarai pronto ad attivarlo.

Per rimanere sempre aggiornato ricordati di seguire Come creo un tema WordPress? e di iscriverti alla Newsletter!

Se hai dubbi o domande non esitare a scrivermi nei commenti ?

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!)

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • CodeLobster: Il nuovo IDE per lo sviluppo web rapido, leggero e completo!19/04/2018

1 Comment

  1. Come creare un tema WordPress: la homepage statica - Paolo Dell'Aguzzo
    29/08/2017 at 10:24 · Rispondi

    […] Come creare un tema WordPress: creazione della struttura di base […]

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku

 

Caricamento commenti...