10 måter å få en fremhevet bilde-URL i WordPress - Full guide

Utvalgte bilder, også kjent som miniatyrbilder av innlegg, er et viktig aspekt ved webdesign og brukeropplevelse på WordPress. De kan bidra til å fange en besøkendes oppmerksomhet og gjøre nettstedet ditt mer visuelt tiltalende. Her er 10 måter å få en fremhevet bilde-URL i WordPress:

1. WordPress Post Editor

Når du redigerer et innlegg eller en side, kan du laste opp et fremhevet bilde direkte fra WordPress-redigeringsprogrammet. Etter opplasting klikker du på bildet, og du finner URL-en i detaljruten.

Duh!

2. Bruk av egendefinerte felt:

WordPress har en innebygd funksjon kalt tilpassede felt, som kan brukes til å få URL-en til et utvalgt bilde. Når du legger til et fremhevet bilde, genererer WordPress automatisk det tilpassede feltet _thumbnail_id. Du kan deretter bruke denne ID-en til å hente URL-en.

For å hente nettadressen til et fremhevet bilde ved å bruke tilpassede felt i WordPress, må du samhandle med WordPresss egendefinerte feltfunksjon. Egendefinerte felt er en form for metadata som lar deg lagre vilkårlig informasjon med hvert WordPress-innlegg.

For å oppnå dette, følg trinnene nedenfor:

Trinn 1: Aktiver egendefinerte felt Alternativet Egendefinerte felt er ikke alltid synlig som standard i WordPress-innleggsredigereren. Du må aktivere det først:

Gå til "Innlegg" i WordPress-dashbordet og åpne et eksisterende innlegg eller opprett et nytt.
Øverst til høyre på siden klikker du på menyen med tre prikker (alternativmenyen) og klikker deretter "Innstillinger".
I popup-vinduet Innstillinger klikker du på "Paneler" i sidefeltet.
Veksle alternativet "Egendefinerte felt" for å aktivere det. Nå skal du kunne se Egendefinerte felt-panelet under området for innleggsinnhold.

Trinn 2: Legg til eller finn det fremhevede bildet Deretter må du legge til et fremhevet bilde i innlegget:

I høyre sidefelt under "Innlegg"-innstillinger finner du delen "Utvalgt bilde".
Klikk på "Angi utvalgt bilde" og velg et bilde fra mediebiblioteket eller last opp et nytt.

Trinn 3: Skaff den tilpassede felt-ID-en Etter å ha angitt det fremhevede bildet, genererer WordPress automatisk en metanøkkel med navn _thumbnail_id i Egendefinerte felt-panelet. Denne nøkkelen vil ha en verdi knyttet til seg, som er ID-en til bildet du nettopp har angitt som det fremhevede bildet.

Trinn 4: Hent URL-en til det fremhevede bildet Nå kan du hente URL-en til det fremhevede bildet ved å bruke _thumbnail_id. Her er et stykke PHP-kode som gjør dette:

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

Denne koden henter først IDen til miniatyrbildet ved hjelp av get_post_meta() funksjon, så bruker den denne IDen med wp_get_attachment_url() funksjon for å hente URL-en til bildet. get_the_ID() er en WordPress-funksjon som henter IDen til det aktuelle innlegget i The Loop.

Du kan bruke denne koden i WordPress-malfilene dine der du vil vise nettadressen til det fremhevede bildet. Husk at endring av WordPress-malfiler krever kunnskap om PHP og forståelse for hvordan WordPress-temaer fungerer. Ta alltid en sikkerhetskopi av nettstedet ditt før du gjør slike endringer.

3. Bruke mediebiblioteket

Du kan laste opp bilder direkte til mediebiblioteket i WordPress. Etter opplasting klikker du på bildet og kopierer fil-URL-en du finner på høyre side av skjermen.

4. PHP-kode

Hvis du er komfortabel med koding, kan du bruke WordPresss innebygde funksjon, wp_get_attachment_url(). Bare send ID-en til bildet til denne funksjonen for å få URL-en.

Å bruke PHP-kode for å hente URL-en til et fremhevet bilde innebærer å samhandle med WordPresss innebygde funksjoner. Her er trinnene for å gjøre dette:

Trinn 1: Finn stedet i temafilene dine

Du må finne riktig sted i temafilene dine der du vil at nettadressen til det fremhevede bildet skal sendes ut. Dette kan være innenfor The Loop i temaene dine index.php, single.php, page.php, eller en annen malfil som passer for dine behov.

Trinn 2: Sett inn PHP-koden

Sett inn følgende PHP-kode på riktig sted i The Loop:

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;
}

Denne koden sjekker om innlegget har et fremhevet bilde. Hvis den gjør det, bruker den get_the_post_thumbnail_url() funksjon for å hente URL-en til det fremhevede bildet. get_the_ID() brukes til å hente IDen til gjeldende innlegg, og 'full' brukes til å spesifisere at vi vil ha URL-en til bildet i full størrelse. Ønsker du en annen størrelse kan du bytte ut 'full' med 'thumbnail', 'medium', 'medium_large'eller 'large'.

De echo setningen vil skrive ut (skrive ut) URL-en på stedet der koden er satt inn.

Viktig merknad: Før du endrer temafilene dine, anbefales det å lage et undertema. Et undertema arver utseendet og funksjonaliteten til et annet tema, kalt overordnet tema. Hvis du redigerer et tema direkte og det blir oppdatert av temautvikleren, vil endringene gå tapt. Ved å bruke et undertema kan du sikre at endringene dine blir bevart.

Husk også å sikkerhetskopiere nettstedet ditt før du gjør noen kodeendringer. Det er god praksis å ha en nylig sikkerhetskopi for å gjenopprette hvis noe går galt. I tillegg krever disse endringene en grunnleggende forståelse av PHP og WordPress tema struktur. Hvis du ikke er komfortabel med å gjøre disse endringene selv, kan du vurdere å ansette en profesjonell utvikler.

5. Bruke en plugin

Plugins som "FileBird - WordPress Media Library Folders" eller "Real Media Library" kan hjelpe deg med å administrere mediefilene dine effektivt og gi enkel tilgang til fil-URLer.

Her er noen WordPress-plugins som kan hjelpe deg med å administrere mediefilene dine effektivt og gi enkel tilgang til fil-URLer:

Plugin Navn	Beskrivelse	link
FileBird – WordPress Media Library-mapper	FileBird er en populær plugin for mediebibliotekadministrasjon. Den lar deg organisere mediefilene dine i mapper og undermapper. Du kan enkelt administrere, laste opp og bestille filer på tvers av alle mapper. Det gir også en funksjon for å direkte få URL-en til de opplastede filene.	FileBird
Real Media Library	Real Media Library er en annen flott plugin som hjelper deg med å administrere mediefilene dine. Den tilbyr et dra-og-slipp-grensesnitt for å organisere filene dine i mapper og samlinger. Den integreres også med populære sidebyggere og plugins for e-handel, noe som gjør det enklere å velge og sette inn mediefiler.	Real Media Library
WP Media-mappe	Media Library Assistant gir flere forbedringer for å administrere mediebiblioteket ditt. Det gir et mer robust grensesnitt for å administrere medietaksonomier (kategorier og koder), og det tilbyr kortkoder som kan brukes til å vise media og relatert informasjon på nettstedet ditt.	WP Media-mappe
Forbedret mediebibliotek	Denne plugin er et robust medieadministrasjonsverktøy som tilbyr muligheten til å kategorisere og merke mediefilene dine. Det gir også mulighet for enkel filtrering og søking av mediene dine, noe som gjør det enklere å finne URL-en til filene dine.	Forbedret mediebibliotek
Mediebibliotekassistent	Media Library Assistant gir flere forbedringer for å administrere mediebiblioteket ditt. Det gir et mer robust grensesnitt for å administrere medietaksonomiene (kategorier og koder), og det tilbyr kortkoder som kan brukes til å vise media og relatert informasjon på nettstedet ditt.	Mediebibliotekassistent

Husk alltid å sjekke plugin-kompatibilitet med din nåværende versjon av WordPress og sørg for at plugin-en er godt støttet og jevnlig oppdatert. Det er også en god idé å sikkerhetskopiere nettstedet ditt før du installerer en ny plugin.

6. REST API

WordPresss REST API inkluderer endepunkter for å hente media. Du kan bruke dette til å få URL-en til et fremhevet bilde. Husk at du trenger ID-en til bildet for å hente URL-en.

WordPress REST API er et kraftig verktøy som lar utviklere samhandle med nettsteder eksternt ved å sende og motta JSON-objekter (JavaScript Object Notation). Her er trinnene for hvordan du bruker WordPress REST API for å få URL-en til et utvalgt bilde:

Trinn 1: Aktiver REST API

REST API er aktivert som standard på alle WordPress-nettsteder fra og med versjon 4.7. Hvis nettstedet ditt er på en eldre versjon, bør du vurdere å oppdatere WordPress, eller du kan manuelt aktivere REST API ved å installere WP REST API-plugin.

Trinn 2: Bestem postens ID

Du trenger ID-en til innlegget for å få tilgang til dataene gjennom REST API. Du kan vanligvis finne denne ID-en i WordPress-admin-dashbordet når du redigerer innlegget (det vises i URL-en).

Trinn 3: Bruk REST API-endepunktet

WordPress oppretter en spesifikk URL (endepunkt) for hvert innlegg som lar deg samhandle med det via REST API. Standardformatet er https://yourwebsite.com/wp-json/wp/v2/posts/POST_ID, Hvor yourwebsite.com er nettstedets domene og POST_ID er postens ID.

For å få nettadressen til det fremhevede bildet, legg til ?_embed til URL-en. Dette instruerer REST API til å inkludere innebygde postdata, som inkluderer fremhevede bildedata. URL-en skal nå se slik ut: https://yourwebsite.com/wp-json/wp/v2/posts/POST_ID?_embed.

Trinn 4: Få tilgang til nettadressen til det fremhevede bildet

Du kan få tilgang til denne URL-en i en nettleser for å se JSON-dataene. Nettadressen til det fremhevede bildet er plassert under _embedded -> wp:featuredmedia -> 0 -> media_details -> sizes -> full -> source_url.

Hvis du bruker et programmeringsspråk som JavaScript eller Python, kan du bruke fetch() funksjon eller et HTTP-bibliotek som axios or requests for å hente dataene.

Merk:

Hvis WordPress-nettstedet ditt har en annen permalink-struktur eller hvis du har egendefinerte innstillinger, kan REST API-endepunkt-URL-strukturen være annerledes.

Prosessen beskrevet her er også for offentlige innlegg. Hvis innlegget er privat, trenger du autentisering for å få tilgang til dataene.

Til slutt bør du være komfortabel med å jobbe med JSON-data og ha en grunnleggende forståelse av HTTP-forespørsler før du bruker REST API. Hvis du ikke er kjent med disse konseptene, er det mange ressurser tilgjengelig på nettet for å hjelpe deg å lære.

7. Legg ut miniatyrbilder i RSS-feeder

Som standard inkluderer ikke WordPress innleggsminiatyrbilder i RSS-feeder. Du kan imidlertid bruke plugins som "Utvalgte bilder i RSS & Mailchimp Email" for å legge til utvalgte bilder i RSS-feedene dine.

Å legge til miniatyrbilder til WordPress RSS-feedene dine innebærer bruk av WordPresss innebygde krok og filtersystem. Slik kan du gjøre det:

Trinn 1: Åpne ditt temas functions.php-fil

De functions.php filen er der du kan legge til dine egne funksjoner for å endre funksjonaliteten til WordPress-siden din. Du kan få tilgang til det ved å gå til WordPress-dashbordet ditt, deretter til "Utseende" > "Temaredigering", og til slutt velge functions.php filen på høyre side av skjermen.

OBS: Sikkerhetskopier alltid nettstedet ditt før du gjør endringer i temafilene. I tillegg anbefales det sterkt å bruke et undertema for å forhindre at endringene dine blir overskrevet når det overordnede temaet oppdateres.

Trinn 2: Legg til en egendefinert funksjon for å legge til miniatyrbilder i RSS-feeder

I din functions.php fil, legger du til en funksjon som legger til miniatyrbildet av innlegget til innholdet i RSS-feeden. Legg til denne koden på slutten av 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');

Her er hva koden gjør:

De insertThumbnailRSS() funksjonen sjekker om innlegget har et miniatyrbilde. Hvis den gjør det, legger den til miniatyrbildet i begynnelsen av innholdet.
De add_filter() funksjoner festes insertThumbnailRSS() til the_excerpt_rss og the_content_feed filtre, som brukes til å endre innholdet i RSS-feeden.

Trinn 3: Lagre endringene dine

Klikk "Oppdater fil" for å lagre endringene.

Nå bør RSS-feedene dine inkludere innleggsminiatyrbildet i begynnelsen av hvert innleggsinnhold. Du kan sjekke dette ved å se sidekilden til nettadressen til feeden din (vanligvis yourwebsite.com/feed/).

Viktig merknad: Endre functions.php filen bør gjøres med forsiktighet. Syntaksfeil kan føre til at nettstedet ditt blir utilgjengelig. Hvis dette skjer, må du bruke en FTP-klient for å tilbakestille endringene. Hvis du ikke er komfortabel med å gjøre disse endringene selv, bør du vurdere å ansette en profesjonell utvikler.

8. Bruke en kortkode

Du kan lage en egendefinert kortkode i functions.php-filen din som henter og viser nettadressen til det fremhevede bildet.

WordPress-kortkoder er spesifikke kodebiter som lar deg gjøre komplekse funksjoner inne i innleggene dine uten å måtte kode fra bunnen av hver gang. Her er hvordan du kan lage en kortkode som gir ut URL-en til det fremhevede bildet av et innlegg.

Trinn 1: Åpne ditt temas functions.php-fil

De functions.php fil er der du kan legge til dine egne funksjoner for å forbedre funksjonaliteten til WordPress-nettstedet ditt. Du kan få tilgang til det ved å gå til WordPress-dashbordet ditt, deretter til "Utseende" > "Temaredigering", og til slutt velge functions.php filen på høyre side av skjermen.

OBS: Sikkerhetskopier alltid nettstedet ditt før du gjør endringer i temafilene. Det anbefales også sterkt å bruke et undertema for å forhindre at endringene dine blir overskrevet når det overordnede temaet oppdateres.

Trinn 2: Legg til en egendefinert funksjon for å lage kortkoden

I din functions.php fil, legger du til en funksjon som lager kortkoden. Legg til denne koden på slutten av 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');

Denne koden oppretter en ny kortkode [featured_img_url]. De featured_img_url_shortcode() funksjonen sjekker om det gjeldende innlegget har et fremhevet bilde og returnerer URL-en. De add_shortcode() funksjon gjør denne funksjonen tilgjengelig som en kortkode.

Trinn 3: Lagre endringene dine

Klikk "Oppdater fil" for å lagre endringene.

Trinn 4: Bruk kortkoden i innleggene dine

Du kan nå bruke [featured_img_url] kortkode i ethvert innlegg eller side for å vise nettadressen til det fremhevede bildet. Bare lim inn kortkoden i innleggsredigeringsprogrammet der du vil at URL-en skal vises.

9. Fra databasen

Hvis du har tilgang til nettstedets database, kan du få URL-en direkte fra 'wp_postmeta'-tabellen.

Å få tilgang til nettadressen til et fremhevet bilde direkte fra WordPress-databasen innebærer interaksjon med to tabeller: wp_postmeta og wp_posts. Førstnevnte inneholder metadata om innleggene, mens sistnevnte lagrer selve innleggene.

Her er trinnene for å hente URL-en til et utvalgt bilde fra WordPress-databasen:

Trinn 1: Få tilgang til WordPress-databasen din

Få tilgang til WordPress-databasen din ved å bruke et databaseadministrasjonsverktøy som phpMyAdmin, som vanligvis leveres av webverter i kontrollpanelet deres. Sørg for at du har de nødvendige tillatelsene for å få tilgang til og spørre databasen.

Trinn 2: Forstå databasestrukturen

I WordPress lagres forholdet mellom et innlegg og dets fremhevede bilde i wp_postmeta bord. De meta_key «_thumbnail_id» i wp_postmeta tabellen inneholder post-ID-en til det fremhevede bildet for hvert innlegg. De wp_posts tabellen inneholder alle data for innlegg, sider, revisjoner og mediefiler. GUID-kolonnen i wp_posts inneholder URL-en for mediefiler.

Trinn 3: Spør databasen

Du må kjøre en SQL-spørring for å bli med i wp_postmeta og wp_posts tabeller for å få nettadressen til det fremhevede bildet. Anta at du ønsker å få URL-en til innlegget med ID = 1, kan du bruke følgende SQL-spørring:

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';

Erstatt "1" med ID-en til innlegget hvis nettadresse til det fremhevede bildet du vil hente.

Denne SQL-spørringen returnerer URL-en til det fremhevede bildet for innlegget med ID-en du spesifiserte.

OBS: Det anbefales å sikkerhetskopiere databasen din før du kjører noen spørringer, spesielt hvis du er ny til SQL eller phpMyAdmin. Selv om spørringen her er for å lese data og ikke endrer databasen, er det fortsatt god praksis å ta sikkerhetskopier regelmessig.

Vær også oppmerksom på at direkte databaseoperasjoner bør gjøres med forsiktighet og er vanligvis siste utvei, spesielt når sikrere og enklere metoder er tilgjengelige, som å bruke WordPress-funksjoner og kroker.

10. Inspiser element

Dette er en enkel nettleserfunksjon som kan brukes til å få URL-en til ethvert bilde på nettstedet ditt, inkludert utvalgte bilder. Bare høyreklikk på bildet og velg "Inspiser element" for å se nettadressen til bildet i HTML-en.

"Inspiser element"-funksjonen er en del av utviklerverktøy innebygd i de fleste moderne nettlesere, inkludert Google Chrome, Mozilla Firefox og Safari. Den lar deg se og samhandle med den underliggende HTML og CSS på en nettside.

Her er trinnene for å få en fremhevet bilde-URL ved å bruke "Inspiser element":

Trinn 1: Naviger til innlegget

Åpne nettleseren din og naviger til innlegget hvis nettadresse til det fremhevede bildet du vil hente.

Trinn 2: Åpne Inspiser elementverktøyet

Høyreklikk på det aktuelle bildet og velg "Inspiser" eller "Inspiser element" fra kontekstmenyen. Dette åpner utviklerverktøy-panelet, med HTML-elementet som tilsvarer det fremhevede bildet uthevet.

Trinn 3: Finn URL-en i HTML-en

I utviklerverktøy-panelet vil du se HTML-en for det aktuelle bildet. Det er vanligvis en img tag, som har en src attributt som inneholder URL-en til bildet.

Koden kan se omtrent slik ut:

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

I dette tilfellet er nettadressen til det fremhevede bildet: https://yourwebsite.com/wp-content/uploads/2023/07/featured-image.jpg

Trinn 4: Kopier URL-en

Høyreklikk på URL-en, og velg "Kopier" fra hurtigmenyen. Du kan nå lime inn URL-en der du trenger den.

OBS: Mens "Inspiser element"-verktøyet gir verdifull innsikt i strukturen til en nettside, gir det bare et øyeblikksbilde av sidens nåværende tilstand. Eventuelle endringer du gjør ved å bruke "Inspiser Element" er lokale for nettleseren din og påvirker ikke den aktive nettsiden. Husk også at du bør ha de nødvendige rettighetene og tillatelsene til å bruke bildene du har tilgang til.

konklusjonen

Å få nettadressen til det fremhevede bildet i WordPress kan virke utfordrende i begynnelsen, spesielt med de mange måtene du kan oppnå det på. Hver metode har imidlertid sine egne unike fordeler og brukstilfeller. Enten du er en erfaren utvikler som ønsker å dykke ned i WordPress REST API, eller en nettstedseier som bare trenger en rask URL for deling av sosiale medier, er det en løsning der ute for deg.

Vi har utforsket ulike metoder, fra enkelheten til "Inspect Element"-verktøyet til de mer tekniske tilnærmingene som involverer PHP-kode og direkte databasespørringer. Mens noen metoder krever en dypere forståelse av WordPresss indre virkemåte, kan andre implementeres uten å skrive en eneste kodelinje.

Husk, sørg alltid for at du følger beste praksis når du endrer WordPress-nettstedets kode eller database, inkludert å ta regelmessige sikkerhetskopier og arbeide innenfor et undertema. Dette vil holde nettstedet ditt trygt mens du utforsker disse funksjonene.

Vi håper denne veiledningen har vært nyttig i din søken etter å finne fremhevede bilde-URLer i WordPress. Etter hvert som du blir mer komfortabel med disse metodene, vil du oppdage at de bare er toppen av isfjellet når det gjelder hva du kan oppnå med WordPress. Så gå videre og fortsett å utforske mulighetene!