Nella prima parte di questa serie, ti ho mostrato come preparare i tuoi file HTML e CSS per WordPress, assicurandoti che la struttura funzionasse, che il codice fosse valido e che venissero utilizzate le classi corrette.
In questo tutorial imparerai come prendere il tuo index.html file e dividerlo in un set di file modello da utilizzare con WordPress.
Cosa ti serve
Per questo tutorial tutto ciò di cui hai bisogno è lo strumento più semplice per modificare HTML e PHP:
Un editor di codice di tua scelta.
Cosa sono i file di modello?
Un tema WordPress è costituito da un numero di file modello. Per lo meno, un tema deve contenere due file per farlo funzionare, questi sono index.php e style.css.
Tuttavia, in un tema ben scritto, il contenuto del index.php il file verrà diviso nel file di modello principale (index.php) e un insieme di includere i file. Questi sono i file contenenti il codice per l'intestazione, la barra laterale e il piè di pagina.
In alcuni temi, viene utilizzato un file di inclusione aggiuntivo per The Loop; Verrò a quello nella parte 4 di questa serie. I file sono chiamati include file perché aggiungi codice al tuo index.php file per dire a WordPress di includere i loro contenuti.
Nostro index.html il file sarà diviso in quattro file PHP:
index.php, che conterrà il contenuto principale più il codice per includere gli altri file
header.php, che includerà il sezione più tutto nell'intestazione e nella navigazione
sidebar.php, che conterrà l'area del widget della barra laterale
footer.php che conterrà (hai indovinato!) il piè di pagina, più la chiusura etichetta
Nel corso di questa serie, aggiungerai a questi file in modo che il tuo tema possa includere widget, menu e un ciclo e potrai aggiungere ganci che verranno utilizzati dai plug-in. Aggiungerai inoltre file modello aggiuntivi per visualizzare diversi tipi di contenuti. Se vuoi iniziare da capo, dai un'occhiata alla pagina del codice sulla gerarchia dei modelli WordPress.
Ma per ora, tutto quello che devi fare è creare un set di file PHP e dividere il contenuto del tuo index.php file a loro.
Creazione di file PHP
Il primo passo è creare file vuoti. Crea quattro file vuoti con i seguenti nomi e aprili nell'editor di codice:
index.php
header.php
sidebar.php
footer.php
Assicurati che tutti siano in una cartella con il nome del tuo tema - nel mio caso chiamerò la cartella 'wptutsplus-demo-tema'.
Copia il tuo foglio di stile in questa cartella, pure. Non lo modificherete in questo tutorial, ma lo farete nella prossima parte della serie.
Compilare il file di intestazione
Quindi copi la parte superiore di index.html nel tuo header.php file.
Aperto index.html e seleziona tutto dall'apertura DOCTYPE dichiarazione all'apertura div etichetta:
Creazione di temi WordPress - Creazione di un tema WordPress da HTML statico
Edificio tematico WordPress
Creazione di un tema WordPress da html statico
Copia questo codice e incollalo nel tuo header.php file.
Salva il tuo nuovo file di intestazione.
Compilare il file della barra laterale
Ora ripeti questo per la barra laterale.
Nel tuo index.html file, selezionare il a parte elemento e tutto al suo interno:
Ora copia questo nel tuo sidebar.php file e salvarlo.
Compilare il file di piè di pagina
Il processo di popolamento del footer.php il file è identico all'intestazione e alla barra laterale.
Seleziona tutto dopo la barra laterale nella tua index.html file:
Copialo e incollalo nel tuo footer.php file.
Salva il file del tuo footer.
Potresti chiederti perché il .principale div è chiuso nel file footer e non nella barra laterale. In questo modo, se in seguito imposti un file modello per le pagine che non dispongono di una barra laterale, perderai l'inclusione della barra laterale in quel modello e manterrai il piè di pagina incluso e .principale div sarà chiuso correttamente.
Compilazione del file indice
Il passo finale è impostare il tuo index.php file. Questo è un po 'più complicato, dovrai aggiungere alcune funzioni PHP che WordPress usa per includere l'intestazione, la barra laterale e il piè di pagina.
Apri il tuo vuoto index.php file e aggiungi il codice mostrato di seguito:
Assicurati di lasciare uno spazio tra l'inclusione dell'intestazione di apertura e l'inclusione della barra laterale, è qui dove dovrai aggiungere il contenuto del file di indice che non si trova nell'intestazione, nella barra laterale o nel piè di pagina.
Ora apri il tuo index.html file di nuovo e selezionare tutto il codice tra l'apertura div elemento e la barra laterale:
Questo è il titolo di un post o di una pagina
Pubblicato il 5 novembre da Rachel McCollin
Questo è il contenuto del post. In una pagina di archivio potrebbe essere un estratto del post o potresti includere l'intero contenuto.
Immagini in WordPress
Questo post include alcune immagini - una volta convertito questo html in un tema WordPress sarai in grado di ottenere WordPress per gestire le immagini per te e la vita sarà molto più facile!
Ha anche un'immagine in primo piano - ancora, WordPress gestirà queste cose per te e non tornerai mai più all'HTML statico. Imparerai come aggiungere il supporto per le immagini in primo piano al tuo tema nella parte 10 di questa serie. Puoi usarli per visualizzare automaticamente le immagini nei tuoi singoli post e pagine e nelle pagine di archivio, imparerai come configurare una pagina di archivio personalizzata nella Parte 11.
Pubblica categorie e tag
In questa sezione puoi visualizzare le informazioni relative alle categorie e ai tag associati al tuo post, imparerai come farlo utilizzando i tag modello WordPress nella parte 4 di questa serie.
Copia questo e incollalo nel tuo index.php file sotto il get_header () linea.
Salva il tuo index.php file.
Sommario
Ora hai l'inizio di un tema WordPress. Hai convertito il tuo file HTML in un set di file PHP e li hai configurati per lavorare insieme.
Nella prossima parte di questa serie, ti mostrerò come modificare il foglio di stile per far funzionare il tuo tema e caricare il tuo tema su WordPress.
risorse
La gerarchia dei modelli WordPress (pagina del codice)
Stepping Into Templates (pagina del codice)
Anatomia di un tema WordPress (post del blog di Yoast)
Sviluppo del tema WordPress Guida per principianti di Tessa Blakeley Silver e Rachel McCollin (sì, io!)
Accentsconagua
Share
