Share
Penso che sia sicuro dire che se sei un blogger, vuoi mettere in evidenza i contenuti più recenti sul tuo blog in modo che la gente possa individuarlo e leggerlo. Ci sono alcuni modi per farlo, incluso l'utilizzo di stili diversi per il primo post sulla pagina del tuo blog per evidenziarlo o visualizzarlo in modo prominente nella barra laterale.
In questo tutorial ti mostrerò come andare un po 'più in là di quanto tu possa usare il CSS: invece di semplicemente stilizzare il tuo primo post di blog in modo diverso, otterrai un contenuto diverso per esso. In particolare, il primo post avrà un titolo, un'immagine in primo piano e contenuto, mentre gli altri post avranno solo il titolo, l'immagine in evidenza e il brano.
Puoi adattare questa tecnica: se non vuoi così tanto dettaglio puoi modificare il ciclo in ciascuna delle query con cui lavoreremo in modo che (ad esempio) il primo post abbia un titolo, un'immagine e un estratto mentre altri hai solo il titolo e l'immagine. Oppure potresti omettere l'immagine in primo piano per i post successivi. Tocca a voi.
La tecnica che useremo per fare questo comporta l'uso di WP_Query classe per scrivere una query in più prima della query principale in home.php file modello, che guida la pagina principale del blog. Quindi useremo pre_get_posts () modificare la query principale in modo che il post più recente non venga emesso due volte. Creerò un tema figlio del tema predefinito Twenty Fifteen e creo a home.php file per esso, oltre a un foglio di stile per impostare il tema figlio.
Per seguire questo tutorial, avrai bisogno di:
Se stai lavorando con il tema Twenty Fifteen, il primo passo è impostare il tuo tema figlio. Crea una nuova cartella nel tuo wp-content / themes directory e dargli un nome: sto chiamando il mio loop tutsplus-blog-page-due. Ora crea un vuoto style.css file in quella cartella e aggiungere il seguente:
Accentsconagua
/ * Nome del tema: Tuts + Usa due loop sul tuo URI del tema della pagina principale del blog: http://rachelmccollin.co.uk/wptutsplus-taxonomy-archive-list-by-second-taxonomy/ Descrizione: Tema per supportare il tutorial di WPTutsPlus sulla creazione un archivio di tassonomia personalizzato. Tema infantile per il tema Twenty Fifteen. Autore: Rachel McCollin Autore URI: http://rachelmccollin.co.uk/ Template: twentyfifteen Versione: 1.0 * / @import url ("... /twentyfifteen/style.css");Questo dice a WordPress che il tuo tema è figlio del tema Twenty Fifteen e importa il foglio di stile da quel tema. Probabilmente vorrai modificare alcuni dettagli per riflettere sul fatto che questo è il tuo tema.
Poiché è la pagina principale del blog che desideri modificare, dovrai creare un file modello per quello nel tuo tema figlio. Il file del modello che devi creare è home.php, che alimenta la pagina principale del blog indipendentemente dal fatto che sia la prima pagina del tuo sito.
Crea un file chiamato home.php nella tua cartella dei temi.
Ora apri il index.php file in Twenty Fifteen e copia il codice all'inizio e alla fine di quel file (cioè non il ciclo). Il tuo file sarà simile a questo:
__ ('Pagina precedente', 'twentyfifteen'), 'next_text' => __ ('Pagina successiva', 'twentyfifteen'), 'before_page_number' => ''. __ ('Pagina', 'twentyfifteen'). ' ',)); ?>
Se stai utilizzando il tuo tema, copia il codice equivalente dal tema index.php file, in modo da avere gli elementi di contenimento per la tua pagina ma nessun ciclo.
Il prossimo passo è creare il primo ciclo, che visualizzerà il post più recente per intero.
Sotto la chiusura tag nella tua home.php file, aggiungi gli argomenti per la query:
$ args = array ('posts_per_page' => '1',);Questo richiederà solo il post più recente. Si noti che non è necessario includere il tipo di post e questo valore predefinito 'inviare'.
Ora aggiungi il ciclo sotto i tuoi argomenti:
$ query = new WP_query ($ args); if ($ query-> have_posts ()) ?> have_posts ()): $ query-> the_post (); / * avvia il ciclo * /?>> ', esc_url (get_permalink ())),''); ?> "> 'left', 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)))); ?>
Questo loop restituisce il titolo del post, la miniatura se ce n'è una e il contenuto.
Nota che ho aggiunto una classe extra, .primo post, nel post_class () tag modello. Se vuoi evidenziare il tuo primo post usando CSS, questa classe extra ti offre un modo semplice per farlo.
È molto importante aggiungere rewind_posts () dopo il ciclo, altrimenti il ciclo successivo non funzionerà.
Il secondo ciclo è molto simile, ma invece di usare WP_Query, accede solo alla query principale.
Sotto il ciclo che hai appena aggiunto, aggiungi il secondo ciclo:
> ', esc_url (get_permalink ())),''); ?> "> 'left', 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)))); ?> "> Ulteriori informazioni.
Questo ciclo è molto simile al primo, ma con due differenze:
.primo post classe.Ora salva il tuo file.
Al momento, se controlli la tua pagina principale del blog, vedrai che il tuo post più recente viene visualizzato due volte. Lo risolveremo annullando la query principale utilizzando il pre_get_posts gancio.
Crea un nuovo file nel tuo tema chiamato functions.php. In alternativa, se stai lavorando con il tuo tema e ha già un file di funzioni, aprilo.
Aggiungi questo codice al tuo file delle funzioni:
is_home () && $ query-> is_main_query ()) $ query-> set ('offset', '1'); add_action ('pre_get_posts', 'tutsplus_offset_main_query');Questo filtra la query principale ma solo sulla home page, aggiungendo un offset di 1.
Ora salva il tuo file e dai un'occhiata alla pagina principale del tuo blog:
C'è un problema. Poiché il mio blog ha un post appiccicoso, questo viene visualizzato sopra il post più recente, che non è quello che voglio. Mostra anche il contenuto completo del post più recente e del post appiccicoso.
Questo è facilmente corretto. Apri i tuoi home.php file di nuovo e aggiungi un altro argomento agli argomenti per la tua prima query:
'ignore_sticky_posts' => true
Ciò assicurerà che WordPress ignori i post appiccicosi durante l'esecuzione del primo ciclo. Il tuo primo gruppo di argomenti di query ora sarà simile a questo:
$ args = array ('posts_per_page' => '1', 'ignore_sticky_posts' => true);Ora salva di nuovo il file e controlla la pagina del tuo blog:
Così va meglio! Il post più recente è in alto nella sua interezza e il post appiccicoso è sotto di esso, con solo il suo estratto. Se scorri ulteriormente, vedrai che anche gli altri post mostrano solo un estratto:
Se si desidera ignorare post appiccicosi nel secondo ciclo, è possibile farlo aggiungendo il ignore_sticky_posts argomento alla tua seconda query. Voglio che i post appiccicosi funzionino come dovrebbero per tutti tranne il mio post più recente, quindi non lo farò.
Noterai che se navighi verso la seconda e le successive pagine di post (cioè le pagine impaginate) nel tuo blog, gli stessi post vengono visualizzati come nella prima pagina, ovvero solo i tuoi dieci post più recenti vengono visualizzati! Questo perché compensare la query principale ha interrotto l'impaginazione.
Fortunatamente questo è facilmente risolto modificando la funzione che hai aggiunto al pre_get_posts gancio.
Apri i tuoi functions.php file di nuovo e modificare la funzione in modo che legga come il seguente:
function tutsplus_offset_main_query ($ query) if ($ query-> is_home () && $ query-> is_main_query () &&! $ query-> is_paged ()) $ query-> set ('offset', '1'); Quello che abbiamo fatto qui è aggiunto il is_paged () tag condizionale. Questo controlla pagine paginate diverse dalla prima, quindi restituisce true se il visitatore sta guardando la seconda o successiva pagina di post. Usando !$ Query-> is_paged (), ci stiamo assicurando che la query verrà compensata solo se la pagina è non impaginato.
Ora salva il tuo file e ricontrolla. La paginazione ora funzionerà correttamente.
Noterai che lo stesso post recente è ancora visualizzato nella parte superiore della pagina. Questo perché la pagina utilizza lo stesso modello e gli stessi due loop.
Nel mio sito sono felice di lasciare questo perché è perché voglio che il post più recente sia molto importante. Tuttavia, se volessi cambiarlo, dovresti aggiungere un argomento extra alla tua prima query, cioè 'paged' => falso.
Modificando il modo in cui la pagina principale del tuo blog emette i tuoi post, puoi facilmente farlo usando WP_Query classe con il pre_get_posts gancio. In questo tutorial hai imparato come:
WP_Query per pubblicare il primo post per interoÈ possibile adattare questa tecnica per visualizzare l'ultimo post di una determinata categoria, per utilizzare diversi contenuti nel proprio ciclo e altro ancora.
