10 manieren om een uitgelichte afbeeldings-URL te krijgen in WordPress - Volledige gids

Uitgelichte afbeeldingen, ook wel postminiaturen genoemd, zijn een essentieel aspect van websiteontwerp en gebruikerservaring op WordPress. Ze kunnen helpen de aandacht van een bezoeker te trekken en uw site visueel aantrekkelijker te maken. Hier zijn 10 manieren om een uitgelichte afbeeldings-URL in WordPress te krijgen:

1. WordPress berichteditor

Wanneer u een bericht of pagina bewerkt, kunt u een uitgelichte afbeelding rechtstreeks vanuit de WordPress-editor uploaden. Na het uploaden klikt u op de afbeelding. U vindt de URL in het detailvenster.

Duh!

2. Aangepaste velden gebruiken:

WordPress heeft een ingebouwde functie genaamd aangepaste velden, die kan worden gebruikt om de URL van een uitgelichte afbeelding te verkrijgen. Zodra u een uitgelichte afbeelding toevoegt, genereert WordPress automatisch het aangepaste veld _thumbnail_id. U kunt dit ID vervolgens gebruiken om de URL op te halen.

Om de URL van een uitgelichte afbeelding op te halen met behulp van aangepaste velden in WordPress, moet je communiceren met de aangepaste veldenfunctie van WordPress. Aangepaste velden zijn een vorm van metadata waarmee u bij elk WordPress-bericht willekeurige informatie kunt opslaan.

Om dit te bereiken, volgt u de onderstaande stappen:

Stap 1: Aangepaste velden inschakelen De optie Aangepaste velden is niet altijd standaard zichtbaar in de berichteditor van WordPress. U moet dit eerst inschakelen:

Ga in uw WordPress-dashboard naar ‘Berichten’ en open een bestaand bericht of maak een nieuw bericht.
Klik in de rechterbovenhoek van de pagina op het menu met drie stippen (optiemenu) en klik vervolgens op ‘Voorkeuren’.
In het pop-upvenster Voorkeuren klikt u op ‘Panelen’ in de zijbalk.
Toggle de optie ‘Aangepaste velden’ om deze in te schakelen. Nu zou u het paneel Aangepaste velden onder uw berichtinhoudsgebied moeten kunnen zien.

Stap 2: Voeg de uitgelichte afbeelding toe of zoek deze Vervolgens moet je een uitgelichte afbeelding aan het bericht toevoegen:

Zoek in de rechterzijbalk onder ‘Post’-instellingen het gedeelte ‘Uitgelichte afbeelding’.
Klik op ‘Uitgelichte afbeelding instellen’ en kies een afbeelding uit de Mediabibliotheek of upload een nieuwe.

Stap 3: Verkrijg de aangepaste veld-ID Na het instellen van de uitgelichte afbeelding genereert WordPress automatisch een metasleutel met de naam _thumbnail_id in het paneel Aangepaste velden. Aan deze sleutel is een waarde gekoppeld, namelijk de ID van de afbeelding die u zojuist hebt ingesteld als de uitgelichte afbeelding.

Stap 4: Haal de URL van de uitgelichte afbeelding op Nu kunt u de URL van de uitgelichte afbeelding ophalen met behulp van de _thumbnail_id. Hier is een stukje PHP-code dat dit doet:

$thumbnail_id = get_post_meta( get_the_ID(), '_thumbnail_id', true ); 
$image_url = wp_get_attachment_url( $thumbnail_id );
echo $image_url;

Deze code haalt eerst de ID van de miniatuur op met behulp van de get_post_meta() functie, dan gebruikt het deze ID met de wp_get_attachment_url() functie om de URL van de afbeelding op te halen. get_the_ID() is een WordPress-functie die de ID van het huidige bericht in The Loop ophaalt.

U kunt deze code gebruiken in uw WordPress-sjabloonbestanden waar u de aanbevolen afbeeldings-URL wilt weergeven. Houd er rekening mee dat het aanpassen van WordPress-sjabloonbestanden kennis van PHP vereist en inzicht in hoe WordPress-thema's werken. Maak altijd een back-up van uw site voordat u dergelijke wijzigingen aanbrengt.

3. Gebruik van de mediabibliotheek

U kunt afbeeldingen rechtstreeks uploaden naar de mediabibliotheek in WordPress. Na het uploaden klikt u op de afbeelding en kopieert u de bestands-URL aan de rechterkant van het scherm.

4. PHP-code

Als u vertrouwd bent met coderen, kunt u de ingebouwde functie van WordPress, wp_get_attachment_url(), gebruiken. Geef eenvoudigweg de ID van de afbeelding door aan deze functie om de URL te verkrijgen.

Het gebruik van PHP-code om de URL van een uitgelichte afbeelding op te halen, impliceert interactie met de ingebouwde functies van WordPress. Hier zijn de stappen om dit te doen:

Stap 1: Zoek de plaats in uw themabestanden

U moet de juiste plaats in uw themabestanden vinden waar u de aanbevolen afbeeldings-URL wilt uitvoeren. Dit kan binnen The Loop in jouw thema zijn index.php, single.php, page.phpof een ander sjabloonbestand dat geschikt is voor uw behoeften.

Stap 2: Voer de PHP-code in

Voer op de juiste plaats binnen The Loop de volgende PHP-code in:

if ( has_post_thumbnail() ) { // check if the post has a featured image
    $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 
    echo $featured_img_url;
}

Deze code controleert of het bericht een uitgelichte afbeelding heeft. Als dit het geval is, wordt gebruik gemaakt van de get_the_post_thumbnail_url() functie om de URL van de weergegeven afbeelding op te halen. get_the_ID() wordt gebruikt om de ID van het huidige bericht op te halen, en 'full' wordt gebruikt om aan te geven dat we de URL van de afbeelding op volledige grootte willen. Als u een andere maat wilt, kunt u deze vervangen 'full' Met 'thumbnail', 'medium', 'medium_large'of 'large'.

De echo statement zal de URL uitvoeren (afdrukken) op de locatie waar de code is ingevoegd.

Belangrijke opmerking: Voordat u uw themabestanden wijzigt, is het raadzaam een child-thema te maken. Een child-thema neemt het uiterlijk en de functionaliteit over van een ander thema, het parent-thema. Als u een thema rechtstreeks bewerkt en het wordt bijgewerkt door de thema-ontwikkelaar, gaan uw wijzigingen verloren. Door een child-thema te gebruiken, zorg je ervoor dat je wijzigingen behouden blijven.

Vergeet ook niet een back-up van uw site te maken voordat u codewijzigingen aanbrengt. Het is een goede gewoonte om een recente back-up te hebben, zodat u deze kunt herstellen als er iets misgaat. Bovendien vereisen deze veranderingen een basiskennis van PHP en WordPress-thema structuur. Als u deze wijzigingen niet zelf wilt doorvoeren, kunt u overwegen een professionele ontwikkelaar in te huren.

5. Een plug-in gebruiken

Plug-ins zoals ‘FileBird – WordPress Media Library Folders’ of ‘Real Media Library’ kunnen u helpen uw mediabestanden efficiënt te beheren en gemakkelijke toegang tot bestands-URL’s te bieden.

Hier zijn enkele WordPress-plug-ins waarmee u uw mediabestanden efficiënt kunt beheren en gemakkelijke toegang tot bestands-URL's kunt bieden:

Plugin Naam	Omschrijving	Link
FileBird – Mappen voor WordPress-mediabibliotheek	FileBird is een populaire plug-in voor het beheer van mediabibliotheken. Hiermee kunt u uw mediabestanden in mappen en submappen ordenen. U kunt eenvoudig bestanden in alle mappen beheren, uploaden en bestellen. Het biedt ook een functie om rechtstreeks de URL van de geüploade bestanden op te halen.	Bestandsvogel
Echte mediabibliotheek	Real Media Library is een andere geweldige plug-in waarmee u uw mediabestanden kunt beheren. Het biedt een interface met slepen en neerzetten om uw bestanden in mappen en verzamelingen te ordenen. Het kan ook worden geïntegreerd met populaire paginabouwers en plug-ins voor e-commerce, waardoor het selecteren en invoegen van mediabestanden eenvoudiger wordt.	Echte mediabibliotheek
WP Media-map	De Mediabibliotheek-assistent biedt verschillende verbeteringen voor het beheren van uw mediabibliotheek. Het biedt een robuustere interface voor het beheren van mediataxonomieën (categorieën en tags) en biedt shortcodes die kunnen worden gebruikt om media en gerelateerde informatie op uw site weer te geven.	WP Media-map
Verbeterde mediabibliotheek	Deze plug-in is een robuuste tool voor mediabeheer die de mogelijkheid biedt om uw mediabestanden te categoriseren en te taggen. Het maakt het ook eenvoudig filteren en doorzoeken van uw media mogelijk, waardoor het eenvoudiger wordt om de URL van uw bestanden te vinden.	Verbeterde mediabibliotheek
Mediabibliotheek-assistent	De Mediabibliotheek-assistent biedt verschillende verbeteringen voor het beheren van uw mediabibliotheek. Het biedt een robuustere interface voor het beheren van de mediataxonomieën (categorieën en tags) en biedt shortcodes die kunnen worden gebruikt om media en gerelateerde informatie op uw site weer te geven.	Mediabibliotheek-assistent

Vergeet niet om altijd de compatibiliteit van de plug-ins met uw huidige versie van WordPress te controleren en ervoor te zorgen dat de plug-in goed wordt ondersteund en regelmatig wordt bijgewerkt. Het is ook een goed idee om een back-up van uw site te maken voordat u een nieuwe plug-in installeert.

6. De REST-API

De REST API van WordPress bevat eindpunten voor het ophalen van media. U kunt dit gebruiken om de URL van een uitgelichte afbeelding op te halen. Houd er rekening mee dat u de ID van de afbeelding nodig heeft om de URL ervan op te halen.

De WordPress REST API is een krachtige tool waarmee ontwikkelaars op afstand met sites kunnen communiceren door JSON-objecten (JavaScript Object Notation) te verzenden en te ontvangen. Hier volgen de stappen voor het gebruik van de WordPress REST API om de URL van een uitgelichte afbeelding te verkrijgen:

Stap 1: Schakel de REST API in

De REST API is vanaf versie 4.7 standaard ingeschakeld op alle WordPress-sites. Als uw site een oudere versie heeft, kunt u overwegen WordPress bij te werken, of u kunt de REST API handmatig inschakelen door de WP REST API-plug-in.

Stap 2: Bepaal de ID van de post

Je hebt de ID van het bericht nodig om toegang te krijgen tot de gegevens ervan via de REST API. Je kunt deze ID doorgaans vinden in je WordPress-beheerdersdashboard wanneer je het bericht bewerkt (deze wordt weergegeven in de URL).

Stap 3: Gebruik het REST API-eindpunt

WordPress maakt voor elk bericht een specifieke URL (eindpunt) waarmee u ermee kunt communiceren via de REST API. Het standaardformaat is https://yourwebsite.com/wp-json/wp/v2/posts/POST_ID, Waar yourwebsite.com is het domein van uw site en POST_ID is de ID van het bericht.

Voeg toe om de URL van de uitgelichte afbeelding te krijgen ?_embed naar de URL. Dit instrueert de REST API om ingesloten berichtgegevens op te nemen, inclusief uitgelichte afbeeldingsgegevens. De URL zou er nu als volgt uit moeten zien: https://yourwebsite.com/wp-json/wp/v2/posts/POST_ID?_embed.

Stap 4: Ga naar de URL voor de uitgelichte afbeelding

U kunt deze URL in een webbrowser openen om de JSON-gegevens te bekijken. De URL van de uitgelichte afbeelding bevindt zich onder _embedded -> wp:featuredmedia -> 0 -> media_details -> sizes -> full -> source_url.

Als u een programmeertaal zoals JavaScript of Python gebruikt, kunt u de fetch() functie of een HTTP-bibliotheek zoals axios or requests om de gegevens op te halen.

Houd er rekening mee dat:

Als uw WordPress-site een andere permalink-structuur heeft of als u aangepaste instellingen heeft, kan de URL-structuur van het REST API-eindpunt anders zijn.

Het hier beschreven proces geldt ook voor openbare berichten. Als het bericht privé is, heb je authenticatie nodig om toegang te krijgen tot de gegevens.

Ten slotte moet u vertrouwd zijn met het werken met JSON-gegevens en een basiskennis hebben van HTTP-verzoeken voordat u de REST API gebruikt. Als u niet bekend bent met deze concepten, zijn er online talloze bronnen beschikbaar om u te helpen leren.

7. Plaats miniaturen in RSS-feeds

Standaard neemt WordPress geen berichtminiaturen op in RSS-feeds. U kunt echter plug-ins zoals ‘Uitgelichte afbeeldingen in RSS en Mailchimp e-mail’ gebruiken om uitgelichte afbeeldingen aan uw RSS-feeds toe te voegen.

Voor het toevoegen van berichtminiaturen aan uw WordPress RSS-feeds wordt gebruik gemaakt van het ingebouwde hook- en filtersysteem van WordPress. Hier ziet u hoe u het kunt doen:

Stap 1: Open het function.php-bestand van uw thema

De functions.php -bestand is waar u uw eigen functies kunt toevoegen om de functionaliteit van uw WordPress-site te wijzigen. Je kunt het openen door naar je WordPress-dashboard te gaan, vervolgens naar ‘Uiterlijk’ > ‘Thema-editor’ en ten slotte de functions.php bestand aan de rechterkant van het scherm.

Opmerking: Maak altijd een back-up van uw site voordat u wijzigingen aanbrengt in de themabestanden. Bovendien wordt het gebruik van een child-thema ten zeerste aanbevolen om te voorkomen dat uw wijzigingen worden overschreven wanneer het hoofdthema wordt bijgewerkt.

Stap 2: Voeg een aangepaste functie toe om miniaturen aan RSS-feeds toe te voegen

In uw functions.php -bestand, voegt u een functie toe die de berichtminiatuur toevoegt aan de RSS-feedinhoud. Voeg deze code toe aan het einde van het functions.php file:

function insertThumbnailRSS($content) {
    global $post;
    if(has_post_thumbnail($post->ID)) {
        $content = '' . get_the_post_thumbnail($post->ID) . '' . $content;
    }
    return $content;
}
add_filter('the_excerpt_rss', 'insertThumbnailRSS');
add_filter('the_content_feed', 'insertThumbnailRSS');

Dit is wat de code doet:

De insertThumbnailRSS() functie controleert of het bericht een miniatuur heeft. Als dit het geval is, wordt de miniatuur aan het begin van de inhoud toegevoegd.
De add_filter() functies hechten insertThumbnailRSS() aan de the_excerpt_rss en the_content_feed filters, die worden gebruikt om de inhoud van de RSS-feed te wijzigen.

Stap 3: Sla uw wijzigingen op

Klik op ‘Bestand bijwerken’ om uw wijzigingen op te slaan.

Nu moeten uw RSS-feeds de berichtminiatuur aan het begin van elke berichtinhoud bevatten. U kunt dit controleren door de paginabron van uw feed-URL te bekijken (meestal yourwebsite.com/feed/).

Belangrijke opmerking: Het wijzigen van de functions.php dossier moet met zorg gebeuren. Syntaxisfouten kunnen ertoe leiden dat uw website ontoegankelijk wordt. Als dit gebeurt, moet u een FTP-client gebruiken om de wijzigingen ongedaan te maken. Als u deze wijzigingen niet zelf wilt doorvoeren, overweeg dan om een professionele ontwikkelaar in te huren.

8. Een shortcode gebruiken

U kunt een aangepaste shortcode maken in uw function.php-bestand die de aanbevolen afbeeldings-URL ophaalt en weergeeft.

WordPress-shortcodes zijn specifieke codefragmenten waarmee u complexe functies in uw berichten kunt uitvoeren zonder dat u elke keer opnieuw hoeft te coderen. Hier ziet u hoe u een shortcode kunt maken die de URL van de uitgelichte afbeelding van een bericht weergeeft.

Stap 1: Open het function.php-bestand van uw thema

De functions.php -bestand is waar u uw eigen functies kunt toevoegen om de functionaliteit van uw WordPress-site te verbeteren. Je kunt het openen door naar je WordPress-dashboard te gaan, vervolgens naar ‘Uiterlijk’ > ‘Thema-editor’ en ten slotte de functions.php bestand aan de rechterkant van het scherm.

Opmerking: Maak altijd een back-up van uw site voordat u wijzigingen aanbrengt in de themabestanden. Het wordt ook ten zeerste aanbevolen om een child-thema te gebruiken om te voorkomen dat uw wijzigingen worden overschreven wanneer het hoofdthema wordt bijgewerkt.

Stap 2: Voeg een aangepaste functie toe om de shortcode te maken

In uw functions.php bestand, voegt u een functie toe die de shortcode maakt. Voeg deze code toe aan het einde van het functions.php file:

function featured_img_url_shortcode() {
    global $post;
    if(has_post_thumbnail($post->ID)) {
        return get_the_post_thumbnail_url($post->ID);
    } else {
        return '';
    }
}
add_shortcode('featured_img_url', 'featured_img_url_shortcode');

Deze code creëert een nieuwe shortcode [featured_img_url]. De featured_img_url_shortcode() functie controleert of het huidige bericht een uitgelichte afbeelding heeft en retourneert de URL ervan. De add_shortcode() function maakt deze functie beschikbaar als shortcode.

Stap 3: Sla uw wijzigingen op

Klik op ‘Bestand bijwerken’ om uw wijzigingen op te slaan.

Stap 4: Gebruik de shortcode in uw berichten

U kunt nu de [featured_img_url] shortcode in een bericht of pagina om de URL van de weergegeven afbeelding weer te geven. Plak de shortcode gewoon in uw berichteditor waar u de URL wilt laten verschijnen.

9. Vanuit de database

Als u toegang heeft tot de database van uw website, kunt u de URL rechtstreeks uit de tabel ‘wp_postmeta’ halen.

Als u rechtstreeks vanuit de WordPress-database toegang wilt krijgen tot de URL van een uitgelichte afbeelding, moet u met twee tabellen communiceren: wp_postmeta en wp_posts. De eerste bevat metadata over de berichten, terwijl de laatste de berichten zelf opslaat.

Hier zijn de stappen om de URL van een uitgelichte afbeelding uit de WordPress-database op te halen:

Stap 1: Toegang tot uw WordPress-database

Krijg toegang tot uw WordPress-database met behulp van een databasebeheertool zoals phpMyAdmin, die gewoonlijk door webhosts in hun configuratiescherm wordt aangeboden. Zorg ervoor dat u over de benodigde machtigingen beschikt om toegang te krijgen tot de database en er query's op uit te voeren.

Stap 2: Begrijp de databasestructuur

In WordPress wordt de relatie tussen een bericht en de afgebeelde afbeelding opgeslagen in de wp_postmeta tafel. De meta_key “_thumbnail_id” in het wp_postmeta tabel bevat de bericht-ID van de uitgelichte afbeelding voor elk bericht. De wp_posts tabel bevat alle gegevens voor berichten, pagina's, revisies en mediabestanden. De GUID-kolom in wp_posts bevat de URL voor mediabestanden.

Stap 3: Query uitvoeren in de database

U moet een SQL-query uitvoeren om deel te nemen aan de wp_postmeta en wp_posts tabellen om de URL van de weergegeven afbeelding op te halen. Stel dat u de URL wilt ophalen voor het bericht met ID = 1, dan kunt u de volgende SQL-query gebruiken:

SELECT p.guid
FROM wp_postmeta AS pm
INNER JOIN wp_posts AS p ON pm.meta_value = p.ID
WHERE pm.post_id = 1 AND pm.meta_key = '_thumbnail_id';

Vervang “1” door de ID van het bericht waarvan u de aanbevolen afbeeldings-URL wilt ophalen.

Deze SQL-query retourneert de URL van de uitgelichte afbeelding voor het bericht met de door u opgegeven ID.

Opmerking: Het wordt aanbevolen om een back-up van uw database te maken voordat u query's uitvoert, vooral als u nog niet bekend bent met SQL of phpMyAdmin. Hoewel de hier gegeven vraag bedoeld is voor het lezen van gegevens en de database niet wijzigt, is het nog steeds een goede gewoonte om regelmatig back-ups te maken.

Houd er ook rekening mee dat directe databasebewerkingen met zorg moeten worden uitgevoerd en doorgaans het laatste redmiddel zijn, vooral als er veiligere en eenvoudigere methoden beschikbaar zijn, zoals het gebruik van WordPress-functies en hooks.

10. Inspecteer element

Dit is een eenvoudige browserfunctie die kan worden gebruikt om de URL van elke afbeelding op uw site op te halen, inclusief aanbevolen afbeeldingen. Klik met de rechtermuisknop op de afbeelding en selecteer ‘Element inspecteren’ om de afbeeldings-URL in de HTML te zien.

De functie “Inspect Element” maakt deel uit van de ontwikkelaarstools die zijn ingebouwd in de meeste moderne webbrowsers, waaronder Google Chrome, Mozilla Firefox en Safari. Hiermee kunt u de onderliggende HTML en CSS van een webpagina bekijken en ermee communiceren.

Hier zijn de stappen om een uitgelichte afbeeldings-URL te krijgen met behulp van “Inspect Element”:

Stap 1: Navigeer naar het bericht

Open uw webbrowser en navigeer naar het bericht waarvan u de aanbevolen afbeeldings-URL wilt ophalen.

Stap 2: Open het gereedschap Element inspecteren

Klik met de rechtermuisknop op de weergegeven afbeelding en selecteer 'Inspecteren' of 'Element inspecteren' in het contextmenu. Hierdoor wordt het paneel Ontwikkelaarstools geopend, waarbij het HTML-element dat overeenkomt met de weergegeven afbeelding gemarkeerd is.

Stap 3: Zoek de URL in de HTML

In het paneel Ontwikkelaarstools ziet u de HTML voor de weergegeven afbeelding. Het is meestal een img label, dat een src attribuut dat de URL van de afbeelding bevat.

De code kan er ongeveer zo uitzien:

<img src="https://yourwebsite.com/wp-content/uploads/2023/07/featured-image.jpg" alt="Featured Image Description">

In dit geval is de URL van de weergegeven afbeelding: https://yourwebsite.com/wp-content/uploads/2023/07/featured-image.jpg

Stap 4: Kopieer de URL

Klik met de rechtermuisknop op de URL en selecteer 'Kopiëren' in het contextmenu. U kunt de URL nu plakken waar u deze nodig heeft.

Opmerking: Hoewel de tool ‘Inspect Element’ waardevol inzicht biedt in de structuur van een webpagina, geeft deze slechts een momentopname van de huidige status van de pagina. Alle wijzigingen die u aanbrengt met behulp van “Inspect Element” zijn lokaal in uw browser en hebben geen invloed op de live website. Houd er ook rekening mee dat u over de benodigde rechten en machtigingen moet beschikken om de afbeeldingen te gebruiken die u bekijkt.

Conclusie

Het verkrijgen van de aanbevolen afbeeldings-URL in WordPress kan in eerste instantie een uitdaging lijken, vooral met de vele manieren waarop u dit kunt bereiken. Elke methode heeft echter zijn eigen unieke voordelen en gebruiksscenario’s. Of je nu een doorgewinterde ontwikkelaar bent die zich wil verdiepen in de WordPress REST API, of een site-eigenaar die alleen een snelle URL nodig heeft voor het delen op sociale media, er is een oplossing voor jou.

We hebben verschillende methoden onderzocht, van de eenvoud van de tool ‘Inspect Element’ tot de meer technische benaderingen waarbij PHP-code en directe databasequery’s betrokken zijn. Hoewel sommige methoden een dieper inzicht in de interne werking van WordPress vereisen, kunnen andere worden geïmplementeerd zonder ook maar één regel code te schrijven.

Zorg er altijd voor dat u de best practices volgt bij het wijzigen van de code of database van uw WordPress-site, inclusief het regelmatig maken van back-ups en het werken met een child-thema. Hierdoor blijft uw site veilig terwijl u deze functionaliteiten verkent.

We hopen dat deze handleiding nuttig is geweest bij uw zoektocht naar aanbevolen afbeeldings-URL's in WordPress. Naarmate u zich meer op uw gemak voelt met deze methoden, zult u ontdekken dat ze slechts het topje van de ijsberg vormen als het gaat om wat u met WordPress kunt bereiken. Dus ga verder en ontdek de mogelijkheden!