{"id":233596,"date":"2023-02-17T20:06:00","date_gmt":"2023-02-17T17:06:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233596"},"modified":"2022-11-11T00:33:15","modified_gmt":"2022-11-10T21:33:15","slug":"tutorial-sul-tema-wordpress-per-principianti-parte-2-modelli","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/tutorial-sul-tema-wordpress-per-principianti-parte-2-modelli\/","title":{"rendered":"Tutorial sul tema WordPress per principianti \u2013 Parte 2: Modelli"},"content":{"rendered":"\n

Questa lezione del tutorial sul tema WordPress per principianti ti insegner\u00e0 come strutturare i principali elementi costitutivi di un tema e come iniziare a creare modelli. Inizieremo a creare un output HTML e come includere i blocchi di costruzione nei modelli del nostro tema. Nel passaggio precedente<\/a> abbiamo impostato il minimo indispensabile di un tema WordPress e l’abbiamo attivato. Ma al momento non sta facendo molto e non contiene nemmeno HTML valido per una pagina web. Risolviamolo.<\/p>\n

Blocchi costitutivi di intestazione e pi\u00e8 di pagina (e barra laterale).<\/h2>\n

Nei nostri file modello abbiamo bisogno di HTML valido. Potremmo scrivere la struttura HTML completa (iniziando con <html><\/code>, <head><\/code>e full <body><\/code>) in index.php<\/code>, ma questo diventa impraticabile quando si mantengono pi\u00f9 file modello nel tema. Immagina di aver creato una serie di modelli e poi di aver bisogno di una piccola modifica nella parte dell’intestazione; dovresti quindi modificare tutti i modelli in modo che rimangano coerenti. Questo non \u00e8 intelligente.<\/p>\n

\"Tutorial<\/a><\/p>\n

La soluzione \u00e8 dividere l’intera struttura HTML in parti sensibili; costruzioni. Ogni blocco risiede nel proprio file e ogni volta che ne abbiamo bisogno in un modello, lo includiamo. I blocchi pi\u00f9 comuni e sensati sono uno per l’intestazione, uno per il pi\u00e8 di pagina e uno per il contenuto, ma se il tuo tema presenta una barra laterale, anche la barra laterale dovrebbe essere un edificio separato.<\/p>\n

Quelli di voi che hanno pi\u00f9 familiarit\u00e0 con PHP probabilmente hanno familiarit\u00e0 con i metodi include()<\/code>o require()<\/code>. Questo \u00e8 esattamente ci\u00f2 che faremo, tuttavia utilizzeremo le funzioni di WordPress per includere altri file poich\u00e9 offrono vantaggi aggiuntivi.<\/p>\n

In questa lezione creeremo l’intestazione, il pi\u00e8 di pagina e la barra laterale come elementi costitutivi. Le barre laterali sono tuttavia diventate sempre meno comuni nelle pagine Web, ma implementeremo comunque una barra laterale destra nel nostro tema. Questi tre elementi costitutivi sono una pratica comune in tutti i temi di WordPress ed \u00e8 in realt\u00e0 cos\u00ec comune che WordPress offre l’automazione per queste tre cose.<\/p>\n

Creazione dei modelli di intestazione, pi\u00e8 di pagina e barra laterale<\/h2>\n

Creiamo un nuovo file vuoto chiamato header.php<\/code>nella nostra cartella del tema. Per ora aggiungeremo un codice HTML molto semplice (non preoccuparti, aggiungeremo un codice HTML pi\u00f9 appropriato in seguito).<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n    <\/head>\n<body><\/code><\/pre>\n
Crea un nuovo file denominato footer.php<\/code>nella directory del tuo tema. Tutto ci\u00f2 di cui abbiamo bisogno (per ora) in questo file \u00e8 la chiusura della nostra struttura HTML.<\/p>\n
    <\/body>\n<\/html><\/code><\/pre>\n
E infine, crea un nuovo file vuoto chiamato sidebar.php<\/code>. Aggiungiamo solo il tag HTML <aside><\/code>all’interno.<\/p>\n
<aside class=\"sidebar\">\n<\/aside><\/code><\/pre>\n
Compresi gli elementi costitutivi<\/h2>\n
Torniamo al nostro index.php<\/code>fascicolo. Tutto quello che dobbiamo fare ora \u00e8 dire a WordPress dove vogliamo includere il file di intestazione e pi\u00e8 di pagina. Ovviamente vogliamo caricare l’intestazione proprio all’inizio e il pi\u00e8 di pagina proprio alla fine di questo file.<\/p>\n
WordPress offre semplici funzioni per includere questi blocchi costitutivi; get_header()<\/code>e get_footer()<\/code>rispettivamente per il file di intestazione e pi\u00e8 di pagina. Abbastanza intuitivo vero? Aggiungiamo quelli nel nostro index.php e vediamo cosa succede.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_footer(); ?><\/code><\/pre>\n
Aggiorna il tuo frontend e ispeziona o visualizza il sorgente HTML per vedere che abbiamo combinato pi\u00f9 elementi costitutivi per creare una struttura HTML completa.<\/p>\n
\"Tutorial<\/a><\/p>\n
Ora sei libero di modificare il contenuto di index.php<\/code>indipendentemente dall’intestazione e dal pi\u00e8 di pagina!<\/p>\n
Includiamo anche la barra laterale. Tieni presente che nel tuo tema potresti voler considerare casi e modelli in cui non desideri la barra laterale, ad esempio la prima pagina.<\/p>\n
Includere la barra laterale \u00e8 facile come l’intestazione e il pi\u00e8 di pagina; per questo usiamo get_sidebar()<\/code>. Aggiungiamolo a index.php, subito prima di ottenere il footer.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/code><\/pre>\n
Aggiorna e dovresti vedere il sorgente HTML incluso il nostro <aside><\/code>. Non preoccuparti, in un passaggio successivo impareremo come convertirlo in una vera e propria area della barra laterale in cui puoi posizionare i widget.<\/p>\n
Il nostro tema \u00e8 piuttosto statico in questo momento. Nella prossima lezione<\/a> di questa serie di tutorial sul tema WordPress inizieremo finalmente a immergerci correttamente nelle funzioni di WordPress per caricare contenuti e informazioni da WordPress in modo dinamico nei nostri modelli.<\/p>\n
Documentazione sui metodi utilizzati<\/h2>\n