Creazione di un tema WordPress da HTML statico creazione di un modello di archivio

Se hai lavorato su questa serie, ora hai un tema funzionante con due modelli di pagina.

I passi che ho dimostrato fino a questo punto sono:

  • preparare il tuo markup per WordPress
  • convertire il tuo HTML in PHP e dividere il tuo file in file modello
  • modifica del foglio di stile e caricamento del tema su WordPress
  • aggiungendo un ciclo al tuo file di indice
  • aggiungendo meta tag, il wp_head gancio e il titolo del sito e la descrizione per il file di intestazione
  • aggiungendo un menu di navigazione
  • aggiungere aree widget all'intestazione e alla barra laterale
  • aggiungendo aree widget, un colophon e il wp_footer aggancia al file footer
  • creazione di file modello per pagine statiche.

In questa parte, ti mostrerò come creare un altro file modello: il archive.php file. Questo file è utilizzato da WordPress per mostrare archivi di categorie, tag o qualsiasi altro tipo di contenuto archiviato.

L'unico post che non viene utilizzato è la pagina principale del blog che elenca gli ultimi post del blog, che utilizza front-page.php o index.php.

Cosa ti serve

  • il tuo editor di codice di scelta
  • un browser per testare il tuo lavoro
  • un'installazione di WordPress, locale o remota
  • Se stai lavorando localmente, avrai bisogno di MAMP, WAMP o LAMP per abilitare l'esecuzione di WordPress.
  • Se stai lavorando in remoto, avrai bisogno di un accesso FTP al tuo sito più un account amministratore nella tua installazione di WordPress.

1. Creazione del modello di archivio

Inizia creando un file vuoto nella cartella del tema e nominandolo archive.php. Aggiungi il seguente, come hai fatto per il modello di pagina:

  

Questo imposta la base del tuo file modello, con l'intestazione, la barra laterale e il piè di pagina inclusi e il #soddisfare div in atto.

2. Visualizzazione di un titolo della pagina

Il titolo della tua pagina di archivio è leggermente più complicato del titolo di un post o di una pagina statica. Ad esempio, una pagina di archivio potrebbe visualizzare un archivio di date o una categoria, un tag o un archivio di tipi di post.

Il primo passo è verificare quale tipo di contenuto viene visualizzato dall'archivio eseguendo un ciclo. È quindi necessario riavvolgere quel ciclo in modo da poter eseguire un ciclo standard per visualizzare il contenuto dell'archivio.

Dentro il #soddisfare div, aggiungi il seguente:

  

Archivio per Archivio per Archivio per nome; ?>

Questo controlla se l'archivio è per un giorno, mese o anno e, in tal caso, visualizza la data nel modo appropriato (per ulteriori informazioni sulla visualizzazione delle date, vedere la pagina Codex sul get_the_date () etichetta).

Se non è un archivio di date, usa WordPress get_queried_object () per identificare la categoria, il tag, la tassonomia o il tipo di posta attualmente interrogato e mostrarlo. Si noti che questo deve essere seguito da -> nome altrimenti non verrà visualizzato nulla.

2. Esegui il ciclo

Il loop in questa pagina di archivio sarà simile al loop in index.php, ma con una struttura diversa per consentire la visualizzazione di immagini in primo piano accanto al testo e l'utilizzo del the_excerpt () tag al posto di il contenuto() per visualizzare un estratto di ogni post invece del suo intero contenuto.

Nota: puoi creare manualmente estratti di post nella schermata di modifica del post, altrimenti WordPress utilizzerà automaticamente le prime 55 parole del post.

Inizia creando il ciclo di base. Sotto il codice aggiunto per l'intestazione, aggiungi questo codice:

   
>

Questo esegue un ciclo ma non genera ancora alcun contenuto da ogni post.

3. Aggiungi l'immagine in primo piano

Il primo elemento nel ciclo è l'immagine in primo piano. Ho intenzione di metterlo dentro a

elemento che lascerò a sinistra usando OOCSS nel mio tema - potrebbe essere necessario aggiungere il proprio CSS.

Dentro l'apertura

tag, aggiungi:

 

Questo recupererà l'immagine in primo piano e la visualizzerà usando la dimensione dell'anteprima.

4. Aggiungi l'estratto

Anche l'estratto è flottato a sinistra ma usando OOCSS gli sto dando una larghezza di tre quarti in modo che galleggi a destra dell'immagine.

Sotto il codice dell'immagine in primo piano, aggiungi quanto segue:

 

"href =""rel =" segnalibro ">

Questo include il titolo del post più l'estratto. Se lo si desidera, è possibile posizionare il titolo sopra l'immagine e aspettarsi posizionandolo più in alto nella struttura.

Ora salva il tuo file di archivio e visualizza una pagina di archivio. Ho creato una categoria chiamata "Archivio" e la sto visualizzando nello screenshot qui sotto:

Come puoi vedere sta visualizzando il nome della mia categoria e i post con un'immagine a sinistra. Al momento le immagini non vengono visualizzate perché non ho aggiunto funzionalità di immagine in primo piano al mio tema - questo è ciò che farò nella prossima parte di questa serie.

Sommario

I modelli di archiviazione sono utili per visualizzare gli archivi dei tuoi contenuti nel modo che desideri. Oltre a un semplice file archive.php, è possibile creare modelli di archivio personalizzati per archivi di categorie specifiche, tag, tipi di post o tassonomie. Vedi la pagina del codice sulla gerarchia dei modelli per i dettagli di come funzionano.

risorse

  • Gerarchia dei modelli
  • get_the_date ()
  • get_queried_object ()
  • estratti