Share
Ik denk dat het veilig is om te zeggen dat als je een blogger bent, je de meest recente inhoud op je blog wilt markeren, zodat mensen het kunnen zien en lezen. Er zijn een paar manieren waarop je dit kunt doen, inclusief het gebruik van verschillende stijlen voor het eerste bericht op je blogpagina om het te markeren of het prominent in je zijbalk weer te geven.
In deze zelfstudie laat ik je zien hoe je een beetje verder kunt gaan dan met CSS: in plaats van simpelweg je eerste blogpost anders te stylen, voer je verschillende inhoud uit. In het bijzonder zal de eerste post een titel, een afgebeelde afbeelding en inhoud hebben, terwijl andere berichten alleen de titel, de afgebeelde afbeelding en het uittreksel zullen hebben.
Je kunt deze techniek aanpassen: als je niet zo veel details wilt, kun je de lus aanpassen in elk van de vragen waarmee we werken, zodat (bijvoorbeeld) het eerste bericht een titel, afbeelding en uittreksel heeft terwijl anderen heb alleen de titel en afbeelding. Of u kunt het afgebeelde beeld achterlaten voor volgende berichten. Het is aan jou.
De techniek die we gebruiken om dit te doen, is het gebruik van de WP_Query klasse om een extra query te schrijven vóór de hoofdquery in de home.php sjabloonbestand, dat de hoofdblogpagina bestuurt. We zullen dan gebruiken pre_get_posts () om de hoofdquery aan te passen, zodat de meest recente post niet tweemaal wordt uitgevoerd. Ik maak een kindthema van het standaard Twenty Fifteen-thema en maak een home.php bestand, plus een stylesheet om het kindthema in te stellen.
Als u deze zelfstudie wilt volgen, heeft u het volgende nodig:
Als je werkt met het Twenty Fifteen-thema, is de eerste stap het opzetten van je kindthema. Maak een nieuwe map in uw wp-content / themes map en geef het een naam - ik roep de mijne tutsplus-blog-pagina-two-loops. Maak nu een leeg style.css bestand in die map en voeg het volgende toe:
Accentsconagua
/ * Naam van het thema: Tuts + Gebruik twee lussen op uw hoofdpagina van het blogthema URI: http://rachelmccollin.co.uk/wptutsplus-taxonomy-archive-list-by-second-taxonomy/ Beschrijving: thema om WPTutsPlus-zelfstudie over maken te ondersteunen een aangepast taxonomiearchief. Kindthema voor het Twenty Fifteen-thema. Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co.uk/ Sjabloon: twentyfifteen Versie: 1.0 * / @import url ("... /twentyfifteen/style.css");Dit vertelt WordPress dat uw thema een kind is van het Twenty Fifteen-thema en importeert de stylesheet van dat thema. U zult waarschijnlijk enkele details willen bewerken om aan te geven dat dit uw thema is.
Omdat dit de belangrijkste blogpagina is die u wilt wijzigen, moet u een sjabloonbestand maken voor dat in uw kindthema. Het sjabloonbestand dat u moet maken, is home.php, die de hoofdblogpagina van stroom voorziet, ongeacht of dit de voorpagina van uw site is.
Maak een bestand met de naam home.php in je themamap.
Open nu de index.php bestand in Twenty Fifteen en kopieer de code aan het begin en het einde van dat bestand (dus niet de lus). Uw bestand zal er ongeveer zo uitzien:
__ ('Vorige pagina', 'twentyfifteen'), 'next_text' => __ ('Volgende pagina', 'twentyfifteen'), 'before_page_number' => ''. __ ('Pagina', 'twintigvijftien'). ' ',)); ?>
Als u uw eigen thema gebruikt, kopieert u de equivalente code van uw thema's index.php bestand in plaats daarvan, zodat u de bevattende elementen voor uw pagina hebt, maar geen lus.
De volgende stap is het maken van de eerste lus, die het meest recente bericht volledig weergeeft.
Onder het sluiten tag in uw home.php bestand, voeg de argumenten voor de query toe:
$ args = array ('posts_per_page' => '1',);Hiermee wordt alleen naar het meest recente bericht gevraagd. Merk op dat u het berichttype niet hoeft op te nemen, en dit is standaard ingesteld op 'post'.
Voeg nu de lus toe onder uw argumenten:
$ query = nieuwe WP_query ($ args); if ($ query-> have_posts ()) ?> have_posts ()): $ query-> the_post (); / * start de lus * /?>> ', esc_url (get_permalink ())),''); ?> "> 'left', 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)))); ?>
Deze lus geeft de titel van het bericht weer, de thumbnail als die er is en de inhoud.
Merk op dat ik een extra klas heb toegevoegd, .eerste post, in de post_class () sjabloon tag. Als u uw eerste bericht met CSS wilt markeren, biedt deze extra klasse u een eenvoudige manier om dit te doen.
Het is erg belangrijk dat je toevoegt rewind_posts () na de lus, omdat anders de volgende lus niet werkt.
De tweede lus lijkt erg op elkaar, maar in plaats van te gebruiken WP_Query, het heeft gewoon toegang tot de hoofdvraag.
Onder de lus die u zojuist hebt toegevoegd, voegt u de tweede lus toe:
> ', esc_url (get_permalink ())),''); ?> "> 'left', 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)))); ?> "> Verdere informatie.
Deze lus lijkt erg op de eerste, maar met twee verschillen:
.eerste post klasse.Bewaar nu uw bestand.
Op het moment dat u uw belangrijkste blogpagina bekijkt, ziet u dat uw meest recente bericht twee keer wordt weergegeven. We lossen dit op door de hoofdquery te compenseren met behulp van de pre_get_posts haak.
Maak een nieuw bestand in uw thema met de naam functions.php. Als je werkt met je eigen thema en het heeft al een functiedossier, open dat dan.
Voeg deze code toe aan uw functiesbestand:
is_home () && $ query-> is_main_query ()) $ query-> set ('offset', '1'); add_action ('pre_get_posts', 'tutsplus_offset_main_query');Hiermee wordt de hoofdquery gefilterd, maar alleen op de startpagina, waarbij een offset van 1 wordt toegevoegd.
Bewaar nu uw bestand en bekijk uw hoofdblogpagina:
Er is een probleem. Omdat mijn blog een plakkerig bericht heeft, wordt dit weergegeven boven het meest recente bericht, wat niet is wat ik wil. Het toont ook de volledige inhoud van zowel de meest recente post als de post.
Dit kan eenvoudig worden gecorrigeerd. Open je home.php bestand opnieuw en voeg een ander argument toe aan de argumenten voor uw eerste query:
'ignore_sticky_posts' => waar
Dit zorgt ervoor dat WordPress plakkerige berichten negeert tijdens het uitvoeren van de eerste lus. Uw eerste reeks queryargumenten ziet er nu als volgt uit:
$ args = array ('posts_per_page' => '1', 'ignore_sticky_posts' => true);Sla het bestand nu opnieuw op en controleer je blogpagina:
Dat is beter! De meest recente post staat helemaal bovenaan en de plaknotitie bevindt zich eronder, met alleen de uittrekseluitvoer. Als u verder scrolt, ziet u dat de andere berichten ook slechts een fragment tonen:
Als je sticky posts in je tweede loop zou willen negeren, zou je dit kunnen doen door de ignore_sticky_posts argument voor uw tweede zoekopdracht. Ik wil dat plakkerige berichten werken zoals ze zouden moeten voor iedereen behalve mijn meest recente bericht, dus dat doe ik niet.
U zult opmerken dat als u naar de tweede en volgende pagina's met berichten (de gepagineerde pagina's) in uw blog navigeert, dezelfde berichten worden weergegeven als op de eerste pagina, wat betekent dat alleen uw tien meest recente berichten worden weergegeven! Dit komt doordat het verrekenen van de hoofdquery de paginering heeft verbroken.
Gelukkig is dit eenvoudig te verhelpen door de functie die je hebt toegevoegd aan de pre_get_posts haak.
Open je functions.php opnieuw bestand en bewerk de functie zodat deze als volgt wordt gelezen:
function tutsplus_offset_main_query ($ query) if ($ query-> is_home () && $ query-> is_main_query () &&! $ query-> is_paged ()) $ query-> set ('offset', '1'); Wat we hier hebben gedaan, is de is_paged () voorwaardelijke tag. Hiermee wordt gecontroleerd op andere paginapagina's dan de allereerste, dus wordt true geretourneerd als de bezoeker naar de tweede of volgende pagina met berichten kijkt. Door het gebruiken van !$ Query-> is_paged (), we zorgen ervoor dat de query alleen wordt gecompenseerd als de pagina is niet gepagineerd.
Sla nu uw bestand op en controleer opnieuw. Paginering zal nu prima werken.
U zult merken dat dezelfde recente post nog steeds bovenaan de pagina wordt weergegeven. Dit komt omdat de pagina dezelfde sjabloon en dezelfde twee lussen gebruikt.
In mijn site laat ik dit graag achter, omdat ik wil dat het meest recente bericht zeer prominent aanwezig is. Als u dit echter wilt wijzigen, voegt u een extra argument toe aan uw eerste query, namelijk 'paged' => false.
Het wijzigen van de manier waarop de hoofdpagina van je blog berichten uitvoert, is eenvoudig gedaan met behulp van de WP_Query klasse met de pre_get_posts haak. In deze tutorial heb je geleerd hoe je:
WP_Query om de eerste post volledig uit te voerenU kunt deze techniek aanpassen om de laatste post van een bepaalde categorie weer te geven, om verschillende inhoud in uw lus te gebruiken, en meer.
