Uitgelichte afbeeldingen verbergen op individuele berichten in WordPress

Sommige mensen geven er misschien de voorkeur aan om geen uitgelichte afbeeldingen te tonen bij individuele blogberichten, hetzij vanwege prestatieproblemen, ontwerpkeuzes of de focus op de inhoud. 

Je wilt bijvoorbeeld misschien geen uitgelichte afbeelding bij tekstintensieve berichten zoals tutorials of aankondigingen, omdat deze bezoekers van de inhoud zelf kan afleiden. Het verbergen van de uitgelichte afbeelding kan ook de laadsnelheid verbeteren, vooral voor gebruikers op mobiele apparaten.

Als je hetzelfde doel nastreeft, begeleiden we je bij het verbergen van de uitgelichte afbeelding op je individuele blogberichten!

Hoe u uitgelichte afbeeldingen afzonderlijk kunt verbergen

Er zijn verschillende manieren om uitgelichte afbeeldingen uit je blogberichten te verbergen. Als je geen codeerervaring hebt, kun je een eenvoudige plugin gebruiken om het werk gedaan te krijgen.

Maar als je geen plugins wilt installeren, kun je een meer technische aanpak volgen door de themabestanden te bewerken of aangepaste CSS te gebruiken. Hieronder hebben we elke methode stap voor stap uitgelegd:

Methode 1: Een plugin gebruiken

Je kunt de plugin Conditionally Display Featured Image gebruiken om de uitgelichte afbeelding snel te verbergen. Deze populaire plugin is gratis beschikbaar in de WordPress-pluginmap.

Met deze plugin kun je ervoor kiezen om de uitgelichte afbeelding te verbergen op afzonderlijke berichten of op de blogpagina die de lijst met alle gepubliceerde berichten weergeeft.

Als je deze eenvoudige methode wilt proberen, beginnen we met de installatie ervan:

1. Installeer en activeer de plugin

Als je al weet hoe je een plugin in WordPress installeert en activeert, kun je doorgaan naar de volgende stap. Maar als dit je eerste keer is, laten we dan doorgaan met de onderstaande stappen:

• Open je WordPress-beheerdashboard.
• Klik op het menu Plugins in de zijbalk.

• Klik op Plugin toevoegen om de Pluginmap te openen.
• Typ Conditionally Display Featured Image in de zoekbalk. De plugin zou als eerste resultaat moeten verschijnen.

• Klik op Nu installeren om de plugin te downloaden.
• Zodra deze is geïnstalleerd, klik je op Activeren om de plugin op je site in te schakelen.

2. Bewerk het gewenste bericht

Nadat de plugin is geactiveerd, kun je direct naar het bericht gaan waar je de uitgelichte afbeelding wilt verbergen. Volg vervolgens de onderstaande stappen om het selectievakje te vinden waarmee je de afbeelding kunt verbergen:

• Open het blogbericht dat je wilt bewerken.
• Klik op Instellingen om de editor te openen.

• Ga in de zijbalk naar het tabblad Bericht .
• Helemaal bovenaan zou je je uitgelichte afbeelding moeten zien. Daaronder vind je de optie: Uitgelichte afbeelding alleen tonen in de berichtenlijsten, maar verbergen in de weergave van één bericht.

• Vink het selectievakje aan om de uitgelichte afbeelding in dat specifieke bericht te verbergen.
• Sla de wijzigingen vervolgens op door op de knop Bijwerken/Opslaan te klikken (als het bericht al is gepubliceerd) of op de knop Publiceren (als het nog een concept is).

3. Werk het bericht bij om wijzigingen toe te passen

Deze stap is voltooid zodra je op de knop Opslaan of Bijwerken klikt. Controleer echter de voorkant van je site om te bevestigen dat de uitgelichte afbeelding daadwerkelijk verborgen is.

Er zijn twee manieren om dit te doen:

• Bekijk de live versie van het gepubliceerde bericht
• Of bekijk een voorbeeld van je conceptbericht voordat je het publiceert

Hier is een blik op het voor-en-na resultaat:

Methode 2: Aangepaste CSS gebruiken

Als de uitgelichte afbeelding nog steeds op je berichten verschijnt, maak je geen zorgen, want we hebben een andere methode om je te helpen het probleem op te lossen.

Je kunt aangepaste CSS-code gebruiken om het aan het zicht van de gebruiker te onttrekken. Houd er echter rekening mee dat deze methode de prestaties enigszins kan beïnvloeden, omdat de uitgelichte afbeelding nog steeds wordt geladen, ook al is deze niet zichtbaar.

Als dat geen probleem voor je is, volg dan de onderstaande tutorial:

1. Identificeer de specifieke bericht-ID

Om ervoor te zorgen dat de CSS-code alleen invloed heeft op een individueel bericht, moet je de post-ID ervan vinden. De post-ID is een nummer dat elk bericht in WordPress uniek identificeert.

De URL kan bijvoorbeeld post=111 bevatten, waarbij 111 de post-ID is.

Als je site echter SEO-vriendelijke permalinks gebruikt, zie je de bericht-ID niet direct in de URL.

Zo kun je het in plaats daarvan vinden:

• Ga naar je WordPress-beheerdersdashboard.
• Klik op het bericht dat je wilt bewerken.
• Kijk naar de adresbalk in je browser.
• Je zou een URL moeten zien die de post-ID bevat, zoals hieronder weergegeven.

2. Voeg aangepaste CSS toe om de uitgelichte afbeelding voor dat bericht te verbergen

Nadat je de bericht-ID hebt gevonden, is de volgende stap om deze toe te voegen aan je aangepaste CSS-code. WordPress heeft een ingebouwde functie voor het toevoegen van CSS, dus je hoeft geen plug-ins van derden te installeren.

Je kunt de CSS-code toevoegen via het menu Aanpassen . Deze methode vereist alleen basiskennis van coderen, dus je hoeft je geen zorgen te maken.

We lopen de onderstaande stappen met je door:

• Klik op het menu Weergave in de zijbalk en selecteer Aanpassen. 

• Je wordt naar het menu Aanpassen gebracht. 

• Scroll naar beneden en klik op de sectie Aanvullende CSS .
• Plak de onderstaande code in het editorvak. Vergeet niet de bericht-ID te vervangen door je werkelijke bericht-ID.

.postid-51442 .post-thumbnail { display: none; } 

• Klik ten slotte op Publiceren om de wijzigingen toe te passen. Je uitgelichte afbeelding zou nu verborgen moeten zijn voor dat bericht. 

Methode 3: Themabestanden bewerken

Als de bovenstaande methoden niet het gewenste resultaat opleveren, kun je proberen de themabestanden te bewerken.

Maar dit moet als laatste redmiddel worden beschouwd, omdat het bewerken van themabestanden fouten kan veroorzaken of bepaalde functies kan verstoren.

Zorg ervoor dat je voor de zekerheid een back-up maakt. Na die waarschuwing kunnen we beginnen:

1. Open het functions.php-bestand van het thema

Er zijn veel .php -bestanden binnen een thema, zoals single.php, content.php en functions.php. Het hangt af van de structuur van je thema.

Voor deze methode moet je het bestand functions.php lokaliseren. Zo vind je het:

• Open het menu Weergave in de zijbalk.
• Klik op de Themabestandseditor.

• Hiermee wordt de thema-editor geopend, zoals hieronder weergegeven. 

• Scroll naar beneden in het menu Themabestanden en zoek het bestand functions.php. 

• Klik om het bestand te openen. 

2. Voeg voorwaardelijke instructies toe om de uitgelichte afbeelding voor specifieke berichten uit te sluiten

Nu je het bestand functions.php hebt geopend, voeg je de volgende code toe om de uitgelichte afbeelding op afzonderlijke berichtpagina's te verbergen. 

function wordpress_hide_feature_image( $html, $post_id, $post_image_id ) { return is_single() ? '' : $html; } // add the filter add_filter( 'post_thumbnail_html', 'wordpress_hide_feature_image', 10, 3 ); 

Om ervoor te zorgen dat de code de uitgelichte afbeelding alleen voor een specifiek bericht verbergt, vervang je is_single() door is_single(123), waarbij 123 de ID is van het bericht dat je wilt targeten.

Sla daarna de wijzigingen op door op de knop Bestand bijwerken te klikken. 

Hoe je uitgelichte afbeeldingen in alle afzonderlijke berichten verbergt

Als je uitgelichte afbeeldingen op al je individuele berichten wilt verbergen, maakt het Neve-thema het je gemakkelijker. 

Met slechts een paar klikken zorgt deze methode ervoor dat uitgelichte afbeeldingen verborgen blijven op je berichtpagina's.

Als je het Neve-thema al hebt geïnstalleerd, kun je doorgaan met de onderstaande stappen:

• Ga in je WordPress-beheerdashboard naar Weergave en klik op Aanpassen.
• Navigeer naar het gedeelte Blog .

• Je ziet twee lay-outstijlen: Normaal en Cover. De stappen om uitgelichte afbeeldingen te verbergen verschillen per lay-out:

Voor de normale lay-out:

1. Scroll naar beneden en zoek het gedeelte Thumbnail .
2. Klik op het oogpictogram naast de miniatuur om deze uit te schakelen.
3. Pas deze wijziging toe door op de knop Publiceren te klikken.
4. Uitgelichte afbeeldingen worden nu verborgen op berichten die de normale header-indeling gebruiken.

Voor de Cover-layout:

1. Scroll naar beneden om de schakelaar Uitgelichte afbeelding verbergen te vinden.
2. Zet deze schakelaar aan.
3. Klik op Publiceren om de instellingen op te slaan.

• Wacht na het opslaan van de instellingen een paar seconden totdat de wijzigingen van kracht worden.
• Controleer vervolgens door een van je individuele berichten te bezoeken om te zien of de uitgelichte afbeeldingen verborgen zijn.

Houd er rekening mee dat je het Neve-thema moet hebben geïnstalleerd om deze methode te gebruiken. Als je het nog niet hebt geïnstalleerd, probeer het dan te installeren en activeren vanuit de Themamap. Typ gewoon Neve in het zoekveld en je zult het vinden. 

Waarom het bewerken van de themabestanden niet wordt aanbevolen?

We hebben je eraan herinnerd om de themabestanden niet te bewerken als dat niet nodig is. De simpele reden: het kan je site kapotmaken.

Dus hebben we een paar veiligere alternatieven verzameld om uitgelichte afbeeldingen te verbergen zonder het themabestand te hoeven bewerken:

• De Code Snippets-plugin gebruiken: Code Snippet is een gratis plugin waarmee je aangepaste PHP aan je afzonderlijke berichten kunt toevoegen. Het werkt wonderwel zonder het risico je site te beschadigen.
• Custom Functionality Plugin: Met deze plugin kun je een aangepaste PHP-hook toevoegen in plaats van deze rechtstreeks in het themabestand te typen.

Conclusie

Je hoeft niet alle bovenstaande methoden te proberen om de uitgelichte afbeelding in WordPress te verbergen. Zoek gewoon degene die bij jouw behoeften past.

Het beheren van een groot aantal uitgelichte afbeeldingen kan tijdrovend zijn, vooral wanneer je mediabibliotheek rommelig wordt.