Utvalda bilder är ofta det första folk lägger märke till på en blogg. De fångar uppmärksamhet, drar in läsare och sätter tonen för ditt inlägg.
Men i vissa WordPress-teman tar klick på den utvalda bilden besökare ingenstans. Istället för att öppna ditt inlägg, händer ingenting.
Det kanske inte låter som en stor sak, men det kan förvirra besökare och göra dem mindre benägna att fortsätta läsa. Detta är ett litet men allvarligt problem.
Lyckligtvis finns det en enkel lösning. Jag ska visa dig hur du gör utvalda bilder klickbara i WordPress så att dina besökare får den smidiga upplevelse de förväntar sig.
Varför länka utvalda bilder till inlägg i WordPress?
Anledningen är enkel. Besökare förväntar sig att bilder fungerar som länkar. När de ser en utvald bild vill de naturligtvis klicka på den för att öppna hela inlägget.
Utvalda bilder är vanligtvis stora, färgglada och tar upp mer utrymme, så besökare tenderar att märka dem först. De gör det också lättare för folk att trycka på dina inlägg när de använder en telefon eller surfplatta.
Men om dina utvalda bilder inte är klickbara kan det förvirra besökare. 😕
De kan försöka trycka på bilden och förvänta sig att den ska öppna inlägget, bara för att inse att ingenting händer. Den lilla frustrationen kan få vissa användare att lämna din webbplats snabbare, vilket kan skada ditt engagemang.
Det gör också din webbplats mindre tillgänglig. Större bilder är lättare att klicka eller trycka på för alla, särskilt personer med motoriska svårigheter eller de som använder mindre skärmar.
Medan många moderna WordPress-teman länkar den utvalda bilden till inlägget, gör vissa det fortfarande inte. Om ditt tema är ett av dem, visar jag dig exakt hur du fixar det.
I följande avsnitt kommer jag att lära dig hur du automatiskt länkar utvalda bilder till inlägg i WordPress. Och här är allt jag kommer att täcka i den här guiden:
- Länka automatiskt utvalda bilder till inlägg i WordPress
- Bonustips: Optimera dina utvalda bilder för snabbhet
- Vanliga frågor: Länka automatiskt utvalda bilder till WordPress-inlägg
- Fler guider för att använda bilder i WordPress
Låt oss börja.
Länka automatiskt utvalda bilder till inlägg i WordPress
Den här metoden kräver att du lägger till kod i dina WordPress-filer. Om du inte har gjort det tidigare, se vår nybörjarguide om att klistra in kodavsnitt från webben i WordPress.
Medan du kan lägga till koden i ditt temas functions.php, rekommenderar jag att du använder ett kodsnuttplugin istället. Det är mycket säkrare, enklare att hantera, och dina ändringar kommer inte att gå förlorade om du uppdaterar eller byter tema.
Vårt toppval är WPCode, det bästa pluginet för kodavsnitt för WordPress. Det låter dig lägga till och hantera anpassad kod utan att röra dina temafiler, så du riskerar inte att bryta din webbplats.
Dessutom litar många av våra partner varumärken på den för dess pålitlighet och enkelhet att använda. Du kan läsa mer i vår fullständiga WPCode-recension.
Först måste du installera och aktivera den kostnadsfria pluginen WPCode. Om du behöver hjälp, följ vår handledning om hur man installerar en WordPress-plugin för steg-för-steg-instruktioner.
💡 Notera: För den här handledningen kan du använda gratisversionen av WPCode. Om du behöver avancerade funktioner som kodschemaläggning, villkorlig logik och en komplett revisionshistorik, kanske du vill utforska WPCode Pro-versionen.
När pluginet har aktiverats kan du navigera till Kodavsnitt » Lägg till nytt i ditt WordPress-adminområde.
Därefter ser du sidan 'Lägg till kodavsnitt'.
Du kan sväva över alternativet 'Lägg till din anpassade kod (nytt kodavsnitt)' och klicka på knappen '+ Lägg till anpassat kodavsnitt'.
På nästa skärm väljer du kodtyp för ditt kodavsnitt.
Här vill du klicka på rutan ‘PHP Snippet’.
Detta tar dig till WPCode-redigeraren.
Det första du ska göra här är att ge din kodsnutt ett namn. Detta är endast för din referens, så det kan vara vad som helst som hjälper dig att snabbt förstå vad kodsnutten är till för.
Klistra sedan in ett av följande två kodavsnitt i rutan 'Kodförhandsgranskning'. Du behöver bara använda ett.
Det första är ett enkelt alternativ som gör den utvalda bilden klickbar överallt, inklusive på arkiv, hemsidan och enskilda inläggssidor:
function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );
Den andra metoden fungerar lite annorlunda. Den ser till att den utvalda bilden inte är klickbar när en besökare redan är på den specifika inläggssidan, vilket är bättre för användarupplevelsen.
Detta är användbart om du bara vill länka utvalda bilder på vyer som inte är enskilda, som startsidan, bloggindexet eller kategorisidorna på din WordPress-blogg:
function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
if (! is_singular()) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
} else {
return $html;
}
}
add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );
Jag rekommenderar det andra kodavsnittet för bästa användarupplevelse, men båda fungerar! 👍
När du har lagt till kodsnutten, här är hur den kan se ut i din WPCode-redigerare:
Låt oss sedan skrolla ner på sidan till avsnittet 'Infogning'.
Du kan lämna det på metoden 'Auto Insert', så att den automatiskt infogar och kör kodavsnittet på rätt plats.
Slutligen, byt reglaget från 'Inaktiv' till 'Aktiv'.
Klicka sedan på knappen 'Spara kodavsnitt'.
Det var allt. Nu kommer dina utvalda bilder automatiskt att länkas till dina inlägg.
Bonustips: Optimera dina utvalda bilder för snabbhet
Nu när dina utvalda bilder är klickbara är det en bra idé att se till att de laddas snabbt. Stora, ooptimerade bilder kan sakta ner din webbplats, vilket skadar både användarupplevelsen och dina SEO-rankningar.
Innan du laddar upp en utvald bild till WordPress rekommenderar jag att du ändrar storlek på bilden så att den passar din temas innehållsbredd och komprimerar den för att minska filstorleken. Du kan enkelt göra detta med ett bildredigeringsverktyg eller ett plugin för bildkomprimering.
Det finns andra hjälpsamma tekniker också.
Du kan till exempel aktivera lazy loading, använda nästa generations bildformat (som WebP) och aktivera ett CDN för snabbare leverans över olika platser.
För att lära dig mer, kolla in vår fullständiga guide om hur man optimerar bilder för webbprestanda.
Vanliga frågor: Länka automatiskt utvalda bilder till WordPress-inlägg
Nu ska vi reda ut några vanliga funderingar kring länkning av utvalda bilder i WordPress.
Varför är mina utvalda bilder inte klickbara som standard?
Huruvida dina utvalda bilder är klickbara beror helt på ditt WordPress-tema. Vissa moderna teman inkluderar detta som standard, medan andra utelämnar det.
Är det säkert att lägga till den här koden i min temas functions.php-fil?
Jag förstår – att redigera temafilen kan kännas riskabelt. Och ärligt talat är det lite så. En liten felskrivning i filen functions.php kan låsa dig ute från din webbplats eller orsaka den ‘vita skärmen av döden‘.
Det är därför jag rekommenderar att använda ett plugin som WPCode. Det är ett mycket säkrare och mer nybörjarvänligt sätt att lägga till kod på din webbplats.
Kommer det att lägga till detta kodavsnitt att sakta ner min webbplats?
Goda nyheter – nej, det kommer det inte. Koden använder en standardfunktion i WordPress som gör den extremt lättviktig och effektiv. Du kommer inte att märka någon skillnad i hastighet eller prestanda.
Fler guider för att använda bilder i WordPress
Jag hoppas att den här artikeln hjälpte dig att lära dig hur du automatiskt länkar utvalda bilder till inlägg i WordPress. Om du tyckte att den här guiden var användbar, har vi andra handledningar som kan hjälpa dig att förbättra hur du använder bilder på din WordPress-webbplats:
- Omslagsbild vs. Utvald bild i WordPress Blockredigerare
- Hur man ställer in en standard utvald bild i WordPress
- Hur man lägger till utvalda bilder eller miniatyrer i WordPress
- Hur man fixar att utvalda bilder inte visas i WordPress
- Hur man lägger till bildtexter till utvalda bilder i WordPress
- WebP vs PNG vs JPEG: Bästa bildformatet för WordPress
- Hur man väljer den bästa programvaran för webbdesign
- Nybörjarguide till WordPress bildstorlekar
- Nybörjarguide till bild-SEO
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Fredrick John
Fungerade som en charm, tack.
WPBeginner Support
Varsågod!
Admin
Nelson Nchopereu
Hur ställer jag in min "featured image" så att om inläggslänken delas på WhatsApp eller Facebook, så följer den med den "featured image"?
Tack
WPBeginner Support
För det täcker vi det i vår guide nedan som inkluderar social meta-information:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/
Admin
Anas
Bra Sir, det fungerar....
WPBeginner Support
Thank you, glad our content was helpful
Admin
Rohit Sharma
Hur designar wpbeginner sina utvalda bilder och YouTube-miniatyrer?
Vilka verktyg / appar / programvara använder du?
De ser ganska fantastiska ut..
Jag kunde inte hitta detta i ditt inlägg om webbplatsritningar... så jag tänkte fråga här...
Väntar på ditt svar..!
WPBeginner Support
Unless I hear otherwise, we use Camtasia for our videos and Photoshop or Affilinty designer for the article thumbnails
Admin
özkan
Hej,
Jag är så avundsjuk på alla dessa människor som säger att det fungerar.
Det fungerar inte för min webbplats. Kan någon hjälpa mig med detta?
Tack.
WPBeginner Support
Du kanske vill kontakta ditt temas support för att se om det finns en tema-specifik inställning som kan åsidosätta detta.
Admin
Faizan
Det fungerade! Tack
Carlos Alberto Romay
Hej! Fantastisk artikel, jag behöver göra tvärtom; för att upptäcka HUR MAN undviker att någon länk från bild, titel eller text leder till någon URL, hur kan jag göra det? Jag menar, du besöker min webbplats, ser bloggen men du KAN INTE klicka på någon bild, text eller titel, är detta möjligt? Tack
Jennifer
Hej, Tack så mycket.
Jag har använt den på min webbplats.
Hur lägger jag till en länk till några miniatyrbilder i en specifik storlek?
pete
fungerar för mig tack!!
Stuart Campbell
Hur kan jag använda den här metoden för att få den utvalda bilden att länka till en annan URL? Vad missar jag här? Tack
Sandeep
På min blogg är de utvalda bilderna inte klickbara. Det blir därför lite svårt för användaren att navigera till bloggarna.
Jag tror att temat jag använder inte stöder det.
Men koden du nämnde ovan ska jag prova.
Jag ska prova den, om det fungerade, vore det toppen.
Susan Howarth
Thank you so much for this!! I was worried this issue would take a lot of time and energy to figure out. After a quick copy and paste of your code, and it worked perfectly!
Deepak
det fungerade, jag vill veta hur jag stänger PHP-satsen? när jag använder detta i slutet } ger min webbplats 500-fel
Ivan
Det fungerade bra! Toppen! Tack
modo seyoum
jag letar efter det bästa sättet att lägga till länkar till en utvald bild. till exempel – om du klickar på länken nedan ser du huvudbilden och sedan två länkar i innehållsområdet. jag skulle hellre vilja att de två länkarna visas i sidhuvudet på ett sätt som inte kompromissar med någon responsiv design. jag har några idéer, men jag skulle vilja höra en annan åsikt...
jeet sandhu
Hej, jag har en annan fråga. Jag försökte visa specifika inlägg på specifika sidor med pluginet 'inlägg på sida'. Men de utvalda bilderna som jag har angett för inläggen visas inte på sidan. Jag menar, bara titeln på inlägget visas, men jag vill att de utvalda bilderna för alla inlägg ska visas också! Kan du föreslå någon metod eller plugin som kan hjälpa mig att uppnå detta. Jag har sökt på hela webben; ingen har svaret. Jag skulle vara tacksam om du kunde hjälpa mig.
malik aadil
Jag är ny bloggare, den här artikeln hjälpte mig mycket
Jag använde länkar i bilderna men problemet var att bilderna öppnades men gick inte till den länkade artikeln
WPBeginner Support
Hej Malik,
We are glad you found this article helpful
Don’t forget to follow us on Facebook for more WordPress tips and tutorials.
Admin
Sulman Qamar
hey dear ,
here isn’t concerning solely featured pictures however additionally concerning committal to writing . …
in some model that’s operating.. most of your data is nice on behalf of me and my members ..
we follow principally .:)
in this richest article I actually have found totally different sort of data ..
Hope you best for your blogging future
~salman qamar
Dale Reardon
Hej,
Tack så mycket för den här användbara koden.
Är detta ett sätt (kan jag besvära dig med funktionskoden) att även lägga till en ALT-tagg till bildlänken med inläggets titel som alt-text?
Jag har synnedsättning och för tillfället säger länken bara bildfilnamnet vilket inte är användbart större delen av tiden.
Tack,
Dale.
Ankit Agarwal
Tack för hans handledning. Jag provade detta på min blogg men insåg att bilden som visas i miniatyren inte är min utvalda bild utan den första bilden jag använder i inlägget. Förmodligen för att jag använder MotoPress sidbyggarplugin. och
Det verkar finnas en konflikt mellan den här koden och Motopress-pluginet.
Dale Reardon - My Disability Matters
Hej,
Det fungerade fantastiskt.
Bara en ytterligare fråga – min webbplats handlar om funktionshinderfrågor:
så jag vill att saker ska vara tillgängliga och jag är själv blind så uppskattar alla sidor som gör sitt.
Finns det ett sätt att tilldela ALT-text till den här bildlänken som består av titeln på sidan den länkar till? För tillfället läser min skärmläsare bara upp bildfilnamnet vilket ibland inte är särskilt hjälpsamt.
Din hjälp uppskattas mest.
Dale.