Creazione di un tema WordPress da HTML statico aggiunta di immagini in primo piano

Ora hai elaborato una serie di passaggi per creare un tema WordPress da file HTML statici.

Nello specifico, abbiamo esaminato quanto segue:

• 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
• creando un file modello di archivio.

Il tuo tema ora ha un file modello per la visualizzazione delle pagine di archivio, ma al momento non visualizza correttamente le immagini. In questo tutorial imparerai come aggiungere il supporto per le immagini in primo piano al tema e come visualizzarle e modificarle nel modello di archivio.

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

Informazioni sulle immagini in primo piano

Le immagini in primo piano o le miniature dei post sono una funzionalità WordPress davvero utile, che è stata implementata dalla versione 2.9. La terminologia che li circonda può essere un po 'confusa, quindi farò del mio meglio per definirlo qui:

• Un'immagine in primo piano o miniatura del post è una singola immagine allegata a un post tramite il Immagini in primo piano metabox nella schermata di modifica della pagina. Quando lavori con le immagini in primo piano nel tuo codice generalmente usi il termine "immagine in primo piano" (ad es. Quando aggiungi il supporto per loro nel tuo tema) o "miniatura" (ad es. Quando le visualizzi nei file modello). Tuttavia, sono la stessa cosa.
• Il termine 'miniatura' viene anche usato come dimensione dell'immagine. In questo modo, puoi visualizzare qualsiasi immagine che carichi su WordPress nella sua dimensione 'miniatura'. Questo vale per tutte le immagini, non solo per le immagini presentate. Pertanto, è possibile visualizzare una miniatura post nella sua miniatura, media, grande o intera.

È un po 'confuso, ma finché usi il codice giusto, non dovresti sbagliare.

1. Aggiunta di supporto per immagini in primo piano al tema

Il primo passo è quello di aggiungere il supporto per le immagini in primo piano al tuo tema, senza che questo non abbia accesso al metabox delle immagini in primo piano nella schermata di post-editing.

Apri i tuoi temi functions.php file e aggiungere quanto segue in basso, prima della chiusura ?> etichetta:

 function wptutsplus_theme_support () add_theme_support ('post-thumbnails');  add_action ('after_setup_theme', 'wptutsplus_theme_support');

Salva il tuo file di funzioni e apri la schermata di modifica per uno dei tuoi post. Vedrai che la metabox delle immagini in primo piano è apparsa, come mostrato nello screenshot.

Ora lavorate attraverso ciascuno dei post nel vostro blog a turno, aggiungendo un'immagine in primo piano a ciascuno e salvandola. Non è necessario specificare la dimensione dell'immagine che si sta visualizzando, che verrà eseguita nel codice.

2. Aggiunta di immagini in primo piano al modello di archivio

Il prossimo passo è aggiungere il codice per visualizzare le immagini presenti nella pagina dell'archivio. Lo fai all'interno di The Loop.

Apri i tuoi archive.php file e trova la seguente riga:

Sostituiscilo con questo:

  ">  'left', 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)))); ?>  

Quel codice fa alcune cose:

1. Il codice controlla se il post include un'immagine in primo piano if (has_post_thumbnail ()). Se questo non è il caso, non visualizzerà l'immagine in primo piano.
2. Successivamente, racchiude l'immagine in un collegamento al post permalink, in modo che i visitatori possano fare clic sull'immagine e sul titolo del post per visualizzare il post in modo completo.
3. Infine, visualizza l'immagine in primo piano usando the_post_thumbnail (). Questo ha il 'medio' parametro per dire a WordPress di mostrare l'immagine di medie dimensioni, e una serie di argomenti tra cui una classe per lo styling e il 'Alt' argomento per impostare l'attributo alt per l'immagine.

Ora salva il tuo file di archivio e visita una pagina di archivio sul tuo sito (non la pagina principale del blog, ma un archivio di categorie o simile).

Ecco come appare la mia pagina di archivio ora:

Questo ha ancora bisogno di un po 'di stile, dato che le immagini sono unite insieme. Quindi apri il tuo style.css file e aggiungere il seguente:

 .articolo #content archivio, articolo .blog #content margin-top: 10px; overflow: auto; 

Si noti che usando il .archivio e .blog classi che sto prendendo di mira tag sulla pagina principale del blog e su qualsiasi pagina di archivio. Ora i post dovrebbero essere più chiaramente definiti:

3. Aggiunta di immagini in evidenza al file indice

Ora disponi di un modello di archivio funzionante con supporto per le immagini in primo piano. Prima di finire, tuttavia, è necessario copiare lo stesso codice su index.php file.

Trova la stessa riga di codice che hai sostituito nel archive.php file e sostituirlo con esattamente lo stesso codice che hai aggiunto al file di archivio. Ora salva il tuo file e controlla la pagina del tuo blog principale. Anch'esso visualizzerà l'immagine in primo piano per ogni post.

Sommario

Le immagini in primo piano sono un ottimo modo per rendere le pagine di archivio più visive e user-friendly. È anche possibile aggiungere immagini in primo piano ad altri modelli come page.php modello.

In questo caso potresti voler impostare i parametri in modo diverso, magari usando la dimensione del file più grande invece del mezzo e cambiando la classe. Si rimuove anche il collegamento, poiché il visitatore si trova già sulla singola pagina.

Nella prossima e ultima parte di questa serie ti mostrerò come caricare un tema nel repository di temi di WordPress. Una volta che hai un tema che ritieni sia abbastanza buono per gli altri, questo è un ottimo modo per contribuire alla comunità e aiutare altri utenti di WordPress.

risorse

• Immagini in primo piano
• the_post_thumbnail ()