Share
Nelle prime tre parti di questa serie, hai imparato come preparare l'HTML statico per WordPress e creare un tema dividendo il tuo file HTML in un insieme di file modello e modificando il foglio di stile. Hai quindi caricato il tema su WordPress e attivato.
Il tema non mostra comunque alcun contenuto aggiunto tramite l'amministratore di WordPress; per fare ciò è necessario aggiungere un ciclo continuo ai tuoi file modello.
Al momento il tema ha solo un file modello principale - index.php - quindi aggiungerai un ciclo.
Presumo che tu sappia già come utilizzare l'amministratore di WordPress per aggiungere una pagina. Ho intenzione di creare una pagina chiamata 'Casa', aggiungi del contenuto fittizio e poi modifica il'Impostazioni di lettura'in WordPress in modo che questa sia la home page, piuttosto che l'elenco dei post sul blog.
Userò il contenuto del mio sito statico come contenuto per la mia nuova pagina, tranne che non aggiungerò la prima immagine a tutta larghezza al contenuto - imparerai come aggiungere un'immagine come questa al tuo tema come un'immagine in primo piano nella parte 10 di questa serie.
Quindi vai avanti e crea una pagina, includi alcune immagini se ti piace e modifica l'immagineImpostazioni di lettura'pagina in modo che la tua nuova pagina sia la home page.
Dopo aver creato la tua nuova pagina, visita nuovamente la home page del tuo sito. Scoprirai che nulla è cambiato: WordPress non visualizza il contenuto della tua pagina. Questo perché devi aggiungere un ciclo continuo per dirglielo. Il ciclo estrae il contenuto della pagina dal database ed è ciò che fa funzionare WordPress.
Apri i tuoi index.php file. Dopo l'apertura del .soddisfare div e prima dell'apertura tag, aggiungi il seguente:
Ora dopo la chiusura tag, aggiungi:
Il primo pezzo di codice che hai aggiunto inizia il ciclo. Controlla se c'è un post o una pagina da visualizzare e quindi apre il primo post o pagina.
Se sei su una pagina di archivio, scorre in tutti i post pertinenti, sia gli ultimi post sulla pagina principale del blog o i post in una determinata categoria in una pagina di categoria.
Il secondo pezzo di codice termina il ciclo in modo che WordPress possa passare alla visualizzazione di contenuti come la barra laterale e il piè di pagina.
L'apertura il tag può avere classi e un ID che vengono generati automaticamente da WordPress. Puoi quindi usarli in un secondo momento per scegliere come target i CSS su quel post o pagina, se lo desideri.
Trova l'apertura etichetta:
Modificalo in modo che legga:
Le due funzioni che hai aggiunto sono:
Accentsconagua
the_ID () - questo aggiunge una classe al articolo elemento che è il riferimento ID univoco per il post o la pagina visualizzatapost_class - questo aggiunge una serie di classi al articolo elemento che include la categoria del post, il tipo di post e altroIn questo modo puoi utilizzare l'ID per indirizzare un post specifico con i CSS e la classe per applicare allo stesso modo tutti i post di una determinata categoria, ad esempio.
La prossima cosa da mostrare sul tuo post o pagina è il titolo. Nel codice esistente, questo è un titolo statico all'interno di etichetta. Trova la riga di codice che legge:
Questo è il titolo di un post o di una pagina
Modificalo in modo che ora legga:
"href =""rel =" segnalibro ">
Questo aggiunge due cose:
the_permalink () ). Questo è utile nelle pagine di archivio per consentire agli utenti di fare clic su un collegamento alla pagina del messaggio stessoIl primo sezione l'elemento all'interno del ciclo è per i metadati dei post, in particolare la data e l'autore del post.
Trova questa riga di codice (o tutto il codice al suo interno sezione elemento: potrebbe essere diverso nel tuo tema):
Pubblicato il 5 novembre da Rachel McCollin
Sostituirlo con:
postato su di
Hai aggiunto due tag modello:
l'appuntamento() l'autore() La cosa più importante è assicurarsi che il contenuto del post o della pagina sia visualizzato e lo fai usando un semplice tag di modello - il contenuto().
Trova la sezione con la classe .entry-content ed elimina il suo contenuto. Sostituiscili con il contenuto() tag in modo che l'intera sezione assomigli a questo:
Nella mia progettazione, ci sono più post metadati dopo il post o il contenuto della pagina. Questo è opzionale, ma qui lo userò per visualizzare un elenco di categorie associate al post. Potresti scegliere di perdere questo aspetto del tuo tema a seconda del tuo design e del tuo uso di categorie o tag.
Elimina i contenuti della sezione finale con il .entry-meta classe e sostituirli in modo che l'intera sezione legga:
categorie:
Vale la pena dedicare un momento per elaborare questo codice poiché è il frammento più lungo di PHP che hai aggiunto fino ad ora.
Se dichiarazione e se questo è più di zero, esegue il resto del codice.campata elemento e elenca le categorie di post al suo interno, utilizzando echo get_the_catgeory_list (). Il eco è importante in quanto senza questo il get_the_category_list () la funzione non visualizzerebbe effettivamente la lista, accederà semplicemente alla lista e non farà nulla con essa.finisci se la dichiarazione chiude il Se dichiarazione così WordPress può passare alla prossima parte di codice.Finalmente, salva il tuo index.php file, tornare al browser e aggiornare la schermata iniziale. Questo dovrebbe essere leggermente cambiato, come mostrato di seguito:
Come puoi vedere, sono mostrati i seguenti elementi:
Il tuo tema è ora sulla buona strada per essere un tema pienamente funzionante. Ha un loop sul posto per visualizzare il contenuto aggiunto tramite l'amministratore di WordPress e un set di file modello. Il prossimo passo è modificare il header.php file per includere un hook di azione essenziale e altri tag di modello.
