Hoe WordPress Gerelateerde berichten zonder plug-ins toe te voegen

Een van de grote voordelen van het gebruik van WordPress zijn de plug-ins. WordPress-plug-ins bestrijken bijna alles wat je maar kunt bedenken, van het uitbreiden van je blog tot een CMS, tot het toevoegen van handige functies en het optimaliseren van je blog voor zoekmachines - de mogelijkheden zijn eindeloos (en laten we niet alle verschillende thema's vergeten).

Maar door het gebruik van te veel plug-ins loopt u het risico uw WordPress-blog te verstoppen en in het ergste geval kunt u het 'breken'. Er zijn veel voorbeelden van plug-ins die niet compatibel zijn met elkaar, evenals plug-ins die uw blog vertragen.

Enkele van de meest populaire plug-ins voor WordPress zijn gebaseerd op toevoegen “gerelateerde berichten” naar een blog. Aangezien WordPress hier niets standaards voor heeft, moet iedereen een plug-in gebruiken om gerelateerde berichten op hun site weer te geven.

In dit artikel leert u hoe u verwante berichten met miniaturen aan uw blog kunt toevoegen zonder plug-ins, zodat alles eenvoudig, licht en toegankelijk blijft. Laten we beginnen!

Maar eerst, Waarom plug-ins vermijden?

Er zijn een aantal redenen waarom je altijd moet proberen de ingebouwde code en services van WordPress te gebruiken in plaats van een plug-in. Het grootste voordeel is dat u niet hoeft te vertrouwen op een derde partij (de ontwikkelaar van plug-ins) om uw blog te laten functioneren. Er zijn veel gevallen waarin populaire plug-ins door hun ontwikkelaars in de steek gelaten worden, waardoor ontelbare site-eigenaren vastzitten met verouderde en potentieel kwetsbare software.

Een andere reden is dat u niet het risico loopt om een ​​opgeblazen plug-in te gebruiken die uw site tot het uiterste kan vertragen, of erger nog, een schadelijk stukje code bevat, hoewel dit zeldzaam is op voorwaarde dat u uw plug-ins uit de officiële WordPress-directory haalt.

Aan de slag: gerelateerde berichten met thumbnails

Deze "gerelateerde berichten" -functie is, net als de meeste andere, ontworpen om op uw hoofdartikelpagina (single.php) geplaatst te worden, maar u kunt het bijna overal gebruiken, zolang u het binnen de WordPress-lus houdt. Om de gerelateerde berichten te krijgen, gebruiken we de postlabels die aan afzonderlijke artikelen worden gegeven.

thumbnails

WordPress heeft nu een ingebouwd thumbnail-systeem dat we hier nodig hebben. Voeg deze code toe aan uw function.php-bestand om deze in te schakelen in uw themamap (in de meeste gevallen is het al aanwezig).

 add_theme_support ('post-thumbnails'); 

U kunt ook de breedte en hoogte van de miniaturen instellen door een nieuwe regel toe te voegen aan de code:

 add_theme_support ('post-thumbnails'); set_post_thumbnail_size (100, 50, true); 

Belangrijk: Wanneer u afbeeldingen aan berichten toevoegt, moet u in het deelvenster voor het uploaden van afbeeldingen een miniatuur selecteren om een ​​miniatuur te maken “Gebruik als aanbevolen afbeelding”. Hiermee wordt de miniatuur voor de post gemaakt.

De code

 
 
Gerelateerde berichten
 ID KAART); if ($ tags) $ tag_ids = array (); foreach ($ tags als $ individual_tag) $ tag_ids [] = $ individual_tag-> term_id; $ args = array ('tag__in' => $ tag_ids, 'post__not_in' => array ($ post-> ID), 'posts_per_page' => 4, // Aantal gerelateerde berichten om weer te geven. 'caller_get_posts' => 1) ; $ my_query = nieuwe wp_query ($ args); while ($ my_query-> have_posts ()) $ my_query-> the_post (); ?> 
 
   
  
 

Het stuk code the_post_thumbnail (array (150100) stelt de grootte in van de miniatuur die wordt weergegeven, in dit geval 150px breedte, 100px hoogte.

De CSS

We hebben hier twee diveklassen, “.gerelateerde berichten”, wat de algemene div container is, en “.relatedthumb” dat is de individuele thumbnail en link binnen de .relatedposts. We gaan ervan uit dat de breedte van de post de standaard 640 px is. De CSS:

 .relatedposts width: 640px; marge: 0 0 20px 0; zweven: links; font-size: 12px; .related posts h3 font-size: 20px; marge: 0 0 5px 0;  .relatedthumb margin: 0 1px 0 1px; zweven: links;  .relatedthumb img margin: 0 0 3px 0; padding: 0; .relatedthumb a color: # 333; tekstdecoratie: geen; display: block; opvulling: 4px; width: 150px; .relatedthumb a: hover background-color: #ddd; kleur: # 000; 

De bovenstaande CSS geeft de postminiaturen met een breedte van 150 px weer, wat betekent dat we 4 miniaturen nodig hebben om de breedte van de post van 640 px te vullen (inclusief de marge ertussen). U kunt dit naar wens aanpassen; als je 5 miniaturen wilt hebben, heb je een .metumbumbombreedte van ongeveer 125px nodig.

Belangrijk: Zorg ervoor dat de breedte van de miniaturen die in uw WordPress media-instellingen zijn gegenereerd, overeenkomt met degene die u in CSS hebt ingesteld. Bovendien moet het overeenkomen met de grootte gespecificeerd in de php-code: the_post_thumbnail (array (150100).

Voorbeeld

De gerelateerde berichten zouden ongeveer zo moeten verschijnen, zoals gebruikt door gameblog DigitalBattle (dat de exacte techniek gebruikt die in dit artikel wordt beschreven):

Gelijkaardige technieken

Dit is niet de enige manier om gerelateerde berichten zonder plug-ins te doen - er zijn veel technieken en gidsen die je laten zien hoe je gerelateerde berichten zonder plug-ins kunt toevoegen, hier zijn er een paar:

]
• Gerelateerde berichten met miniaturen in WordPress zonder plug-in (TechWalz)
• Hoe: gerelateerde berichten met miniaturen in WordPress zonder plug-ins (WPBeginner)
• Hoe Gerelateerde berichten met thumbnail toevoegen zonder plugin (WPCode)

conclusies

We kunnen veel doen met de ingebouwde functies die WordPress biedt, en in veel gevallen hoeven we geen gebruik te maken van plug-ins van derden om de klus te klaren. De volgende keer dat u een plug-in voor uw WordPress-blog nodig heeft, kijkt u of u dezelfde functie kunt bereiken zonder de plug-in. Graaf rond, zoek op het web naar een alternatief. Je zult verrast zijn hoeveel mogelijk is met WordPress uit de verpakking.