Un’introduzione all’anatomia di un tema WordPress

  1. 1. Tutorial WordPress: come creare un tema WordPress da HTML (parte 1)
  2. 2. Tutorial WordPress: come creare un tema WordPress da HTML (parte 2)
  3. 3. Leggendo al momento: Un’introduzione all’anatomia di un tema WordPress

Qualche tempo fa, ti abbiamo presentato il concetto di creare un tema WordPress da HTML. Abbiamo diviso il tutorial in due parti e oggi siamo tutti impegnati a realizzare i due tutorial, quindi sentiti libero di considerare questo post come il terzo servizio della serie di post. Il mio obiettivo è quello di smontare il tema WordPress per darti un quadro chiaro di come funziona (il tema).


Questo post presuppone che tu abbia una conoscenza pratica di HTML e CSS. Continuerò e dichiarerò che avere competenze HTML e CSS è un prerequisito nella progettazione di temi WordPress. Ancora una cosa, questo post rimarrà alla larga da grandi parole e concetti difficili – sarà facile da capire, quindi sii pronto a divertirti e ad imparare.

A Little HTML Priming

Ogni pagina Web HTML è divisa in parti diverse utilizzando il

etichetta. Ad esempio, puoi rompere il corpo () del tuo sito Web in diverse sezioni, tra cui navigazione, intestazione, contenuto principale, barra laterale e piè di pagina.

Una volta che hai la tua pagina web in sezioni, puoi ordinare (o organizzare) le sezioni come desideri usando i CSS. Questo processo è noto come styling e comporta l’aggiunta di altri elementi di stile come colore, dimensioni, bordi, effetti speciali ecc. Tale è la potenza del CSS, che – tra l’altro – è l’abbreviazione di Cascading Style Sheets. Quando metti insieme i tuoi file HTMl e CSS e aggiungi un paio di immagini, finisci con un sito web completo.

Le cose non sono molto diverse con i temi di WordPress. Come abbiamo visto nella parte 1 di Come creare un tema WordPress da HTML, i temi WordPress sono divisi in diversi file. Se non riesci a individuare qualche somiglianza a questo punto, permettimi di spiegare.

Le pagine Web HTML statiche sono suddivise in divisioni (ciò che abbiamo chiamato sezioni in precedenza) utilizzando

tag (o tabelle se sei davvero vecchia scuola). D’altra parte, i temi di WordPress sono suddivisi in diversi file php, che vengono quindi riuniti utilizzando i tag modello.

Pertanto, invece di avere tutti gli elementi del corpo (intestazione, contenuto principale, barra laterale, piè di pagina ecc.) Che vivono in un singolo file (come nel caso dell’HTML statico), ciascuno degli elementi del corpo (nei temi di WordPress) vive in un file separato.

Quindi, l’intestazione vivrà in header.php, la barra laterale troverà home in sidebar.php, il contenuto principale vivrà in index.php, o single.php (se è un post) o page.php (se è una pagina ). La sezione piè di pagina vivrà in footer.php e così via.

Stai seguendo? Dai un’occhiata all’illustrazione seguente:

html-wordpress = struttura

Dalla nostra illustrazione sopra, , e sono chiamati tag modello. Il loro lavoro è quello di recuperare header.php, sidebar.php e footer.php in questo ordine dalla directory dei temi e visualizzare il contenuto nel tuo index.php, completando così la pagina web.

Non lasciare che il .php l’estensione ti spaventa, il contenuto all’interno dei file php è solo un codice HTML che conosci. Ad esempio, header.php può contenere la tipica navigazione dell’elenco HTML. Allo stesso modo, puoi inserire il tipico codice HTML in footer.php, sidebar.php e index.php.

Puoi anche posizionare il loop.php funzione nel tuo index.php (o ovunque tu voglia) per visualizzare i post del tuo blog, ma dovrei rallentare e tornare all’anatomia dei temi di WordPress. Ho menzionato una o due cose sul loop nella parte 2 di come creare un tema WordPress da HTML. e ne parleremo (il loop) e altre funzioni in futuro.

Andare avanti…

Un tema di base di WordPress è composto da almeno quattro file modello, vale a dire:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Vediamo cosa succede in ognuno di questi magico File:

File modello Index.php

Questo è il file principale senza il quale non hai un tema WordPress funzionante. È il primo file (o predefinito) che viene caricato quando visiti un sito Web WordPress. Consideralo l’equivalente di index.html.

Un tipico index.php nei temi di WordPress sarà simile al seguente:





È possibile aggiungere il ciclo tra e per visualizzare post sul blog sulla homepage (index.php) come mostrato di seguito:




File modello Header.php

Questo file modello contiene il codice dell’intestazione, la navigazione e il codice HTML. Fondamentalmente, header.php memorizza tutto ciò che vuoi mostrare nella parte superiore del tuo sito web. Sai, cose come il titolo del tuo sito web e cose del genere.

Collega anche il tuo foglio di stile CSS nell’header.php. Ecco un esempio di base di header.php:





<?php wp_title( '|', true, 'right' ); ?>







Questa è la sezione dell'intestazione. Inserisci qui il tuo logo e altri dettagli.

File modello Sidebar.php

Sidebar.php contiene tutto il necessario per apparire sulla / e barra / e laterale / i. La barra laterale contiene menu, widget, categorie, icone di social media, contenuti personalizzati, codice HTML come pubblicità ecc.

Sidebar.php può contenere markup HTML puro o chiamate di funzione php a seconda delle tue esigenze. Pertanto, un sidebar.php di base potrebbe apparire come:

Footer.php Template File

Cosa pensi vada in footer.php? Puoi inserire qui le informazioni sul copyright, menu aggiuntivi, collegamenti, icone dei social media: tutto quello che vuoi! Ti piacerebbe vedere come appare un footer.php di base? Qui:

Inserisci qui il contenuto del tuo piè di pagina, comprese le chiamate di funzione php (per recuperare diversi file modello, ad esempio search.php), se necessario.

Notare il e tag di chiusura nel footer.php? Riesci a indovinare perché devono essere inclusi nel footer.php? Allo stesso modo, puoi indovinare perché e i tag di apertura sono inclusi nell’header.php? Facci sapere le tue ipotesi nella sezione commenti alla fine di questo post ��

I quattro file modello che abbiamo appena descritto costituiscono un tema WordPress di base. Esistono molti altri file modello; c’è un file modello per ogni elemento che vedi su un tema WordPress, che si tratti di commenti, risultati di ricerca e 404 pagine di errore solo per citarne alcuni.

Per comprendere appieno l’anatomia di un tema WordPress, devi familiarizzare con diversi file modello. Puoi sfogliare tutto tessere modello utilizzabili su WordPress.

Quindi abbiamo tag modello, che WordPress utilizza per recuperare i file modello dalla directory dei temi. Puoi saperne di più tag modello e il ruolo che svolgono in WordPress.

Sommario

Un tema WordPress è costituito dai seguenti elementi anatomici:

  • File modello come index.php, header.php, search.php, category.php ecc
  • Tag modello come , eccetera
  • CSS
  • Immagini e altri file multimediali
  • File JavaScript

Ed ecco un’illustrazione che riassume l’anatomia di un tema WordPress:

Stai cercando di continuare ad imparare? Dai un’occhiata ai dettagli guida all’anatomia del tema nel Codice WordPress.

Conclusione

Ogni tema WordPress che vedi sul Web utilizza la stessa struttura anatomica (anche il nostro famoso tema Total WordPress), che puoi personalizzare per soddisfare le tue esigenze. Una volta che avvolgi la tua testa intorno alle basi dello sviluppo del tema WordPress, non c’è limite a cosa puoi fare con / ai temi WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map