Jeg tror det er trygt å si at hvis du er en blogger, vil du fremheve det nyeste innholdet på bloggen din slik at folk vil få øye på det og lese det. Det er noen måter du kan gjøre dette på, blant annet ved å bruke annen stil for det første innlegget på bloggsiden din for å markere det eller vise det fremtredende i sidebjelken din.
I denne opplæringen vil jeg vise deg hvordan du skal gå litt lenger enn du kan bruke CSS: i stedet for å bare utforme ditt første blogginnlegg annerledes, vil du sende ut annet innhold for det. Spesielt vil det første innlegget ha en tittel, et kjennetegnet bilde og innhold, mens andre innlegg bare vil ha tittelen, kjennetegnet bilde og utdrag.
Du kan tilpasse denne teknikken: Hvis du ikke vil ha så mye detaljert informasjon, kan du endre sløyfen i hver av spørsmålene vi skal jobbe med slik at (for eksempel) det første innlegget har tittel, bilde og utdrag mens andre har bare tittelen og bildet. Eller du kan legge ut det kjente bildet for etterfølgende innlegg. Det er opp til deg.
Teknikken vi skal bruke for å gjøre dette innebærer å bruke WP_Query
klasse for å skrive en ekstra spørring før hovedspørsmålet i home.php
malfil, som driver hovedbloggsiden. Vi bruker da pre_get_posts ()
for å endre hovedspørsmålet slik at det siste innlegget ikke sendes to ganger. Jeg skal lage et tema for temaet Standard Twenty Fifteen tema og lage en home.php
filen for den, pluss et stilark for å sette opp barnetemaet.
For å følge denne opplæringen må du:
Hvis du jobber med Twenty Fifteen-temaet, er det første skrittet å sette opp barnets tema. Opprett en ny mappe i din wp-content / themes
katalog og gi det et navn-jeg ringer min tutsplus-blogg-side-to-løkker
. Opprett nå en tom style.css
filen i den mappen og legg til følgende for det:
/ * Tema navn: Tuts + Bruk to sløyfer på hovedblogg-siden Tema URI: http://rachelmccollin.co.uk/wptutsplus-taxonomy-archive-list-by-second-taxonomy/ Beskrivelse: Tema for å støtte WPTutsPlus opplæring om å skape et tilpasset taksonomiarkiv. Barn tema for Twenty Fifteen tema. Forfatter: Rachel McCollin Forfatter URI: http://rachelmccollin.co.uk/ Mal: twentyfifteen Versjon: 1.0 * / @import url ("... /twentyfifteen/style.css");
Dette forteller WordPress at temaet ditt er et barn i tjuefemte temaet og importerer stilarket fra det aktuelle temaet. Du vil sikkert redigere noen av detaljene for å gjenspeile at dette er ditt tema.
Siden det er den viktigste bloggsiden du vil endre, må du opprette en malfil for det i barnet ditt. Malen filen du trenger å lage er home.php
, som driver hovedbloggsiden om det er forsiden av nettstedet ditt.
Opprett en fil som heter home.php
i temamappen din.
Åpne nå index.php
filen i tjuefem og kopier koden i begynnelsen og slutten av den filen (dvs. ikke sløyfen). Filen din vil se slik ut:
__ ('Forrige side', 'tjuefifteen'), 'next_text' => __ ('Next page', 'twentyfifteen'), 'before_page_number' => ''. __ ('Side', 'tjuefifteen'). ' ',)); ?>
Hvis du bruker ditt eget tema, kopier du tilsvarende koden fra temaet ditt index.php
filen i stedet, slik at du har de inneholdende elementene for siden din, men ingen sløyfe.
Det neste trinnet er å lage den første sløyfen, som viser det siste innlegget i sin helhet.
Under avslutningen tag i din
home.php
fil, legg til argumentene for spørringen:
$ args = array ('posts_per_page' => '1',);
Dette vil bare søke etter det siste innlegget. Merk at du ikke trenger å inkludere posttypen, og dette er standardinnstillingen til 'post'
.
Legg nå løkken under dine argumenter:
$ query = ny WP_query ($ args); hvis ($ query-> have_posts ()) ?> have_posts ()): $ query-> the_post (); / * Start loop * /?>> ', esc_url (get_permalink ()))''); ?> "> 'left', 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)))); ?>
Denne sløyfen gir ut posttittelen, miniatyrbildet hvis det er en, og innholdet.
Legg merke til at jeg har lagt til en ekstra klasse, .første-post
, i post_class ()
mal tag. Hvis du vil markere ditt første innlegg ved hjelp av CSS, gir denne ekstra klassen deg en enkel måte å gjøre det på.
Det er veldig viktig at du legger til rewind_posts ()
etter løkken, som ellers vil neste sløyfe ikke fungere.
Den andre sløyfen er veldig lik, men i stedet for å bruke WP_Query
, det åpner bare hovedspørsmålet.
Under den løkken du nettopp har lagt til, legg til den andre sløyfen:
> ', esc_url (get_permalink ()))''); ?> "> 'left', 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)))); ?> "> Ytterligere informasjon.
Denne sløyfen er veldig lik den første, men med to forskjeller:
.første-post
klasse.Lagre filen din nå.
For øyeblikket, hvis du sjekker din hovedbloggside, ser du at det siste innlegget ditt vises to ganger. Vi løser det ved å kompensere hovedspørsmålet ved hjelp av pre_get_posts
krok.
Opprett en ny fil i temaet ditt functions.php
. Alternativt hvis du jobber med ditt eget tema og det allerede har en funksjonsfil, åpner du det.
Legg til denne koden i funksjonsfilen din:
is_home () && $ query-> is_main_query ()) $ query-> set ('offset', '1'); add_action ('pre_get_posts', 'tutsplus_offset_main_query');
Dette filtrerer hovednavnet, men bare på hjemmesiden, og legger til en forskyvning på 1.
Lagre filen og ta en titt på hovedbloggsiden din:
Det er et problem. Fordi bloggen min har et klebrig innlegg, blir dette vist over det siste innlegget, som ikke er det jeg vil ha. Det viser også det fulle innholdet i både det nyeste innlegget og det klossete innlegget.
Dette er lett korrigert. Åpne din home.php
filen igjen og legg til et annet argument til argumentene for ditt første spørsmål:
'ignore_sticky_posts' => true
Dette sikrer at WordPress ignorerer klissete innlegg når du kjører den første sløyfen. Ditt første sett med spørringsargumenter vil nå se slik ut:
$ args = array ('posts_per_page' => '1', 'ignore_sticky_posts' => true);
Lagre filen på nytt og sjekk bloggsiden din:
Det er bedre! Det siste innlegget er øverst i sin helhet og det klissete innlegget er under det, med bare utdragsutgangen. Hvis du ruller nedover, ser du at de andre innleggene også bare viser et utdrag:
Hvis du vil ignorere klissete innlegg i den andre sløyfen din, kan du gjøre dette ved å legge til ignore_sticky_posts
argument til det andre spørsmålet ditt. Jeg vil ha klissete innlegg å jobbe som de burde for alle, men mitt siste innlegg, men det vil jeg ikke.
Du vil merke at hvis du navigerer til andre og påfølgende sider med innlegg (dvs. paginerte sider) i bloggen din, vises de samme innleggene som på første side, noe som betyr at bare de ti siste innleggene vises! Dette skyldes at motsetning av hovedspørsmålet har ødelagt paginering.
Heldigvis er dette enkelt løst ved å endre funksjonen du la til pre_get_posts
krok.
Åpne din functions.php
fil igjen og rediger funksjonen slik at den leser som under:
funksjon tutsplus_offset_main_query ($ query) if ($ query-> is_home () && $ query-> is_main_query () &&! $ query-> is_paged ()) $ query-> sett ('offset', '1');
Det vi har gjort her er lagt til is_paged ()
betinget kode. Dette kontrollerer for paginerte sider annet enn den aller første, så returnerer sant hvis den besøkende ser på den andre eller påfølgende siden av innlegg. Ved bruk av !$ Query-> is_paged ()
, Vi sørger for at spørringen kun blir kompensert hvis siden er ikke paginert.
Lagre filen og sjekk på nytt. Paginering vil nå fungere fint.
Du vil legge merke til at det samme nye innlegget fremdeles vises øverst på siden. Dette skyldes at siden bruker samme mal og de samme to løkkene.
På min side er jeg glad for å forlate dette som det er fordi jeg vil at det siste innlegget skal være svært fremtredende. Men hvis du ville endre dette, ville du legge til et ekstra argument for ditt første spørsmål, nemlig 'paged' => false
.
Endre måten bloggens hovedsideutganger innlegg enkelt gjøres ved hjelp av WP_Query
klasse med pre_get_posts
kroken. I denne opplæringen har du lært hvordan du:
WP_Query
å sende det første innlegget fullt utDu kan tilpasse denne teknikken for å vise det nyeste innlegget fra en gitt kategori, for å bruke annet innhold i sløyfen din og mer.