Sta diventando sempre più comune per i blog la visualizzazione di alcuni post nella parte superiore della pagina. In questo tutorial, ti mostreremo come implementarlo in WordPress. Utilizzeremo il tema predefinito, Kubrik, come tema base, ma dovrebbe essere adattabile alla maggior parte dei temi con alcune modifiche. C'è pochissimo codice e la presentazione dei post è semplice.

Per cosa stiamo girando

Stiamo modificando il tema di Kubrik che viene fornito in versione preconfezionata in WordPress per poter pubblicare post nella parte superiore della pagina. Questo tutorial è stato testato solo su WordPress 2.5.x ma dovrebbe funzionare anche sulla serie 2.3.x. Supponiamo che tu stia usando 2.5.xo sopra. Alla fine del tutorial, avrai qualcosa di simile a questo:

Passaggio 1: creazione dell'immagine predefinita

Prima di fare qualsiasi cosa, vai alla cartella dei temi della tua installazione di WordPress (wp-content / themes /) e fai un backup della cartella "predefinita". Questo è il tema di Kubrik che modificheremo. Il backup è nel caso in cui si desideri tornare al tema originale non modificato.

Per prima cosa, creeremo un'immagine di default nell'evento in cui non è specificata alcuna immagine postata. Facciamo in modo che sia dolce e semplice per questo tutorial. Apri il tuo editor di immagini preferito e crea un rettangolo 233x130px con angoli arrotondati con raggio di 10px. Ho reso lo sfondo un gradiente radiale da bianco a grigio e ho aggiunto del testo sopra. Questo è quello che ho:

Salva l'immagine come "no-featured-image.jpg" nella cartella "images" che si trova all'interno della cartella "predefinita".

Passaggio 2: aggiungi il codice PHP

Ora per il codice. Apri il file "header.php" nella cartella "predefinita". Alla fine del file, vedrai un blocco div e un tag hr in questo modo:

 
 
/ ">
 
 
 
 

Tra il tag div finale e l'hr, inserisci il seguente codice:

 
 ID); $ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-featured-image.jpg"; printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title); ?> 
 
 

Questo codice produrrà tre immagini in una lista non ordinata. Ogni immagine è un link a un post in primo piano. Parleremo di come configurare il codice dopo aver aggiunto il CSS.

Passaggio 3: stile con i CSS

Successivamente abbiamo bisogno di aggiungere alcuni stili CSS. Apri il file "style.css" e inserisci il seguente codice alla fine del file. Tutto ciò fa fluttuare gli elementi della lista a sinistra e distanziarli uniformemente.

/ * Carousel post in primo piano * / #featured padding: 10px 10px 0 20px;  #carousel list-style: none; margine: 0; padding: 0;  #carousel li float: left; padding: 0; margin-right: 10px; 

Step 4 - Capire il codice

Diamo un'occhiata a ciò che il codice che abbiamo aggiunto. All'interno del contenitore div (id = "featured") abbiamo una lista non ordinata e qualche codice PHP per generare elementi di lista.

$ featured_posts = get_posts ('numberposts = 3 & category =1');

La prima riga sopra riportata recupera le informazioni sul post utilizzando la funzione get_posts () e assegna i dati del post alla variabile $ featured_posts. La funzione get_posts () esclude un singolo parametro sotto forma di una stringa di query simile a ciò che potresti vedere alla fine di un URL (senza il punto interrogativo iniziale). Il primo parametro è "numberposts" che abbiamo impostato su 3 per questo tutorial. Questo parametro imposta il numero di post in evidenza che mostreremo. Il secondo parametro è "categoria" che abbiamo impostato su 1. Il valore del parametro "categoria" dovrebbe essere l'ID della categoria che stai utilizzando per i tuoi post in primo piano. Puoi trovare l'ID di una categoria andando alla pagina di gestione delle categorie e passando il mouse sopra il titolo di una categoria. La barra di stato mostrerà un collegamento. L'ultimo numero è l'ID della categoria.

La riga successiva è un ciclo foreach che scorre ciclicamente i post che abbiamo recuperato usando la funzione get_posts (). La prima riga all'interno del ciclo foreach recupera l'URL dell'immagine utilizzando la funzione get_post_custom_values ​​() e memorizza l'URL nella variabile $ custom_image. Il primo parametro specifica la chiave del valore personalizzato che stiamo utilizzando, "featured_image". Il secondo parametro specifica di quale post stiamo ottenendo il valore.

$ custom_image = get_post_custom_values ​​('featured_image', $ post-> ID);

Nella riga successiva facciamo un rapido controllo per vedere se un'immagine è stata effettivamente specificata. Se non è stata specificata alcuna immagine, assegniamo alla variabile $ image l'URL dell'immagine predefinita. Se è stata specificata un'immagine, la usiamo.

$ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-featured-image.jpg";

Nell'ultima riga vengono effettivamente visualizzati gli elementi della lista. Ogni elemento è un'immagine che si collega al post in primo piano.

printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title);

Passaggio 5: creazione di messaggi in primo piano

Questo è tutto! Ora, ogni volta che desideri pubblicare un post, assegnalo alla categoria in primo piano e crea un valore personalizzato con una chiave di "featured_image" e un valore dell'URL dell'immagine. Le immagini dovrebbero essere 233x130 px.

Guardalo in azione

Puoi vedere il tema in azione sul nostro server demo di WordPress NETTUTS: