Obrazki wyróżniające to często pierwsza rzecz, którą ludzie zauważają na blogu. Przyciągają uwagę, zachęcają czytelników i nadają ton Twojemu wpisowi.
Ale w niektórych motywach WordPress kliknięcie obrazu wyróżniającego nie przenosi odwiedzających nigdzie. Zamiast otwierać Twój post, po prostu tam pozostaje.
Może to nie brzmieć jak wielka sprawa, ale może to zdezorientować odwiedzających i sprawić, że będą mniej skłonni do dalszego czytania. Jest to mały, ale poważny problem.
Na szczęście istnieje proste rozwiązanie. Pokażę Ci, jak sprawić, aby obrazy wyróżniające były klikalne w WordPress, dzięki czemu Twoi odwiedzający będą mieli płynne doświadczenie, którego oczekują.
Dlaczego warto linkować wyróżnione obrazy do postów w WordPressie?
Powód jest prosty. Odwiedzający oczekują, że obrazy będą działać jak linki. Kiedy widzą wyróżniony obraz, naturalnie chcą kliknąć go, aby otworzyć pełny wpis.
Wyróżnione obrazy są zazwyczaj duże, kolorowe i zajmują więcej miejsca, więc odwiedzający zazwyczaj zauważają je jako pierwsze. Ułatwiają również ludziom klikanie w Twoje wpisy podczas korzystania z telefonu lub tabletu.
Ale jeśli Twoje obrazy wyróżniające nie są klikalne, może to zdezorientować odwiedzających. 😕
Mogą próbować dotknąć obrazka, oczekując, że otworzy on post, tylko po to, by zdać sobie sprawę, że nic się nie dzieje. Ta drobna frustracja może spowodować, że niektórzy użytkownicy szybciej opuszczą Twoją witrynę, co może zaszkodzić zaangażowaniu.
Sprawia to również, że Twoja witryna jest mniej dostępna. Większe obrazy są łatwiejsze do kliknięcia lub dotknięcia dla każdego, zwłaszcza dla osób z trudnościami motorycznymi lub korzystających z mniejszych ekranów.
Chociaż wiele nowoczesnych motywów WordPressa linkuje obrazek wyróżniający do posta, niektóre nadal tego nie robią. Jeśli Twój motyw jest jednym z nich, pokażę Ci dokładnie, jak to naprawić.
W poniższej sekcji nauczę Cię, jak automatycznie linkować obrazy wyróżniające do postów w WordPress. A oto wszystko, co omówię w tym przewodniku:
- Automatyczne linkowanie wyróżnionych obrazów do wpisów w WordPress
- Dodatkowa wskazówka: Zoptymalizuj swoje obrazy wyróżnione pod kątem szybkości
- FAQ: Automatyczne linkowanie obrazów wyróżniających do postów WordPress
- Więcej poradników dotyczących używania obrazów w WordPressie
Zacznijmy.
Automatyczne linkowanie wyróżnionych obrazów do wpisów w WordPress
Ta metoda wymaga dodania kodu do plików WordPress. Jeśli nigdy tego nie robiłeś, zapoznaj się z naszym przewodnikiem dla początkujących na temat wklejania fragmentów kodu z sieci do WordPress.
Chociaż możesz dodać kod do pliku functions.php swojego motywu, zalecam użycie zamiast tego wtyczki do fragmentów kodu. Jest to znacznie bezpieczniejsze, łatwiejsze w zarządzaniu, a Twoje zmiany nie zostaną utracone po aktualizacji lub zmianie motywu.
Naszym najlepszym wyborem jest WPCode, najlepszy wtyczka do fragmentów kodu dla WordPress. Pozwala dodawać i zarządzać niestandardowym kodem bez dotykania plików motywu, dzięki czemu nie ryzykujesz uszkodzenia swojej witryny.
Ponadto, zaufało mu wiele naszych marek partnerskich ze względu na jego niezawodność i łatwość użycia. Więcej informacji można znaleźć w naszej pełnej recenzji WPCode.
Najpierw musisz zainstalować i aktywować darmowy plugin WPCode. Jeśli potrzebujesz pomocy, postępuj zgodnie z naszym tutorialem na temat jak zainstalować plugin WordPress, aby uzyskać instrukcje krok po kroku.
💡 Uwaga: Do tego samouczka możesz użyć darmowej wersji WPCode. Jeśli potrzebujesz zaawansowanych funkcji, takich jak planowanie kodu, logika warunkowa i pełna historia rewizji, możesz rozważyć wersję WPCode Pro.
Po aktywacji wtyczki możesz przejść do Fragmenty kodu » Dodaj nowy w obszarze administracyjnym WordPress.
Następnie zobaczysz stronę „Dodaj fragment”.
Możesz najechać kursorem na opcję „Dodaj swój niestandardowy kod (nowy fragment)” i kliknąć przycisk „+ Dodaj niestandardowy fragment”.
Na następnym ekranie wybierzesz typ kodu dla swojego fragmentu.
Tutaj klikniesz w pole „Fragment PHP”.
Spowoduje to przejście do edytora WPCode.
Pierwszą rzeczą do zrobienia jest nadanie fragmentowi kodu nazwy. Jest to tylko do Twojej wiadomości, więc może to być cokolwiek, co pomoże Ci szybko zrozumieć, do czego służy fragment.
Następnie wklej jeden z poniższych fragmentów kodu do pola „Podgląd kodu”. Potrzebujesz tylko jednego.
Pierwsza to prosta opcja, która sprawia, że obraz wyróżniony jest klikalny wszędzie, w tym na stronach archiwów, stronie głównej i stronach pojedynczych wpisów:
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 );
Druga metoda działa nieco inaczej. Zapewnia, że obraz wyróżniony nie jest klikalny, gdy odwiedzający jest już na konkretnej stronie posta, co jest lepsze dla doświadczenia użytkownika.
Jest to pomocne, jeśli chcesz linkować obrazy wyróżnione tylko w widokach innych niż pojedyncze, takie jak strona główna, indeks bloga lub strony kategorii na Twoim blogu WordPress:
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 );
Polecam drugi fragment dla najlepszego doświadczenia użytkownika, ale oba wykonają zadanie! 👍
Po dodaniu fragmentu kodu, tak może wyglądać w edytorze WPCode:
Następnie przewiń stronę w dół do sekcji „Wstawianie”.
Możesz zostawić metodę „Automatyczne wstawianie”, dzięki czemu kod zostanie automatycznie wstawiony i wykonany we właściwym miejscu.
Na koniec przełącz przełącznik z „Nieaktywny” na „Aktywny”.
Następnie kliknij przycisk „Zapisz fragment”.
To wszystko. Teraz Twoje obrazy wyróżnione będą automatycznie linkowane do Twoich wpisów.
Dodatkowa wskazówka: Zoptymalizuj swoje obrazy wyróżnione pod kątem szybkości
Teraz, gdy Twoje wyróżnione obrazy są klikalne, warto upewnić się, że ładują się szybko. Duże, niezoptymalizowane obrazy mogą spowolnić Twoją witrynę, szkodząc zarówno doświadczeniu użytkownika, jak i Twoim rankingom SEO.
Przed przesłaniem obrazu wyróżnionego do WordPress, zalecam zmianę rozmiaru obrazu, aby pasował do szerokości treści Twojego motywu, oraz skompresowanie go w celu zmniejszenia rozmiaru pliku. Możesz to łatwo zrobić za pomocą narzędzia do edycji obrazów lub wtyczki do kompresji obrazów.
Istnieją również inne pomocne techniki.
Na przykład możesz włączyć leniwe ładowanie, używać formatów obrazów nowej generacji (takich jak WebP) i włączyć CDN w celu szybszego dostarczania treści w różnych lokalizacjach.
Aby dowiedzieć się więcej, zapoznaj się z naszym pełnym przewodnikiem na temat optymalizacji obrazów pod kątem wydajności sieci.
FAQ: Automatyczne linkowanie obrazów wyróżniających do postów WordPress
Teraz wyjaśnijmy kilka powszechnych obaw dotyczących linkowania obrazów wyróżnionych w WordPress.
Dlaczego moje wyróżnione obrazy nie są domyślnie klikalne?
To, czy Twoje obrazy wyróżnione są klikalne, zależy całkowicie od Twojego motywu WordPress. Niektóre nowoczesne motywy zawierają tę funkcję domyślnie, podczas gdy inne jej nie mają.
Czy bezpieczne jest dodanie tego kodu do pliku functions.php mojego motywu?
Rozumiem – edycja pliku motywu może wydawać się ryzykowna. I szczerze mówiąc, trochę tak jest. Mały błąd w pliku functions.php może zablokować Ci dostęp do Twojej witryny lub spowodować „biały ekran śmierci”.
Dlatego polecam użycie wtyczki takiej jak WPCode. Jest to znacznie bezpieczniejszy i bardziej przyjazny dla początkujących sposób dodawania kodu do Twojej witryny.
Czy dodanie tego fragmentu kodu spowolni moją witrynę?
Dobre wieści – nie, nie będzie. Kod wykorzystuje standardową funkcję WordPress, która sprawia, że jest niezwykle lekki i wydajny. Nie zauważysz żadnej różnicy w szybkości lub wydajności.
Więcej poradników dotyczących używania obrazów w WordPressie
Mam nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak automatycznie linkować wyróżnione obrazy do wpisów w WordPressie. Jeśli ten przewodnik był pomocny, mamy inne tutoriale, które mogą pomóc Ci poprawić sposób, w jaki używasz obrazów na swojej stronie WordPress:
- Obraz okładki vs Obraz wyróżniający w edytorze bloków WordPress
- Jak ustawić domyślny obrazek wyróżniający w WordPress
- Jak dodać obrazy wyróżniające lub miniatury postów w WordPress
- Jak naprawić problem z niewidocznym obrazem wyróżniającym w WordPress
- Jak dodać podpisy do obrazów wyróżnionych w WordPressie
- WebP vs PNG vs JPEG: Najlepszy format obrazu dla WordPressa
- Jak wybrać najlepsze oprogramowanie do projektowania stron internetowych
- Przewodnik dla początkujących po rozmiarach obrazów w WordPressie
- Przewodnik dla początkujących po SEO obrazów
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Fredrick John
Działało jak czar, dziękuję.
Wsparcie WPBeginner
Proszę bardzo!
Admin
Nelson Nchopereu
Jak umieścić mój wyróżniony obrazek, tak aby po udostępnieniu linku do posta na WhatsAppie lub Facebooku wyświetlał się z wyróżnionym obrazkiem?
Dziękuję
Wsparcie WPBeginner
W tym celu omawiamy to w naszym poniższym przewodniku, który zawiera informacje o metadanych społecznościowych:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/
Admin
Anas
Świetnie Panie, działa….
Wsparcie WPBeginner
Thank you, glad our content was helpful
Admin
Rohit Sharma
Jak wpbeginner projektuje swoje obrazy wyróżniające i miniatury YouTube?
Jakich narzędzi / aplikacji / oprogramowania używasz?
Wyglądają całkiem niesamowicie...
Nie mogłem tego znaleźć w Twoim poście o planie witryny... więc pomyślałem, że zapytam tutaj...
Czekam na Twoją odpowiedź..!
Wsparcie WPBeginner
Unless I hear otherwise, we use Camtasia for our videos and Photoshop or Affilinty designer for the article thumbnails
Admin
özkan
Witam,
Jestem tak zazdrosny o wszystkich tych ludzi, którzy mówią, że to działa.
Nie działa na mojej stronie. Czy ktoś może mi w tym pomóc?
Dziękuję.
Wsparcie WPBeginner
Możesz skontaktować się z pomocą techniczną swojego motywu, aby sprawdzić, czy istnieje specyficzne dla motywu ustawienie, które mogłoby to nadpisywać.
Admin
Faizan
Zadziałało! Dzięki
Carlos Alberto Romay
Cześć! Świetny artykuł, muszę zrobić odwrotnie; odkryć, JAK uniknąć linkowania obrazu, tytułu lub tekstu do jakiegokolwiek adresu URL, jak mogę to zrobić? Mam na myśli, że odwiedzasz moją stronę, widzisz bloga, ale NIE MOŻESZ kliknąć żadnego obrazu, tekstu ani tytułu, czy to jest możliwe? dzięki
Jennifer
Cześć, bardzo dziękuję.
Użyłem tego na mojej stronie internetowej.
Jak dodać link do niektórych miniatur w określonym rozmiarze?
pete
działa u mnie dzięki!!
Stuart Campbell
Jak mogę użyć tej metody, aby obrazek wyróżniający prowadził do innego adresu URL? Czego tutaj brakuje? Dzięki
Sandeep
Na moim blogu obrazy wyróżniające nie są klikalne, co utrudnia użytkownikom nawigację do blogów.
Myślę, że motyw, którego używam, tego nie obsługuje.
Ale kod, który wymieniłeś powyżej, spróbuję.
Spróbuję, jeśli zadziała, to będzie wspaniale.
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
zadziałało, chciałbym wiedzieć, jak zamknąć instrukcję php? Kiedy używam tego na końcu } moja strona generuje błąd 500
Ivan
Działało dobrze! Świetnie! Dziękuję
modo seyoum
szukam najlepszego sposobu na dodanie linków do wyróżnionego obrazu. na przykład – jeśli klikniesz poniższy link, zobaczysz obraz nagłówka, a następnie dwa linki w obszarze treści. wolałbym, aby te dwa linki pojawiły się w nagłówku w sposób, który nie narusza żadnego responsywnego projektu. mam kilka pomysłów, ale chciałbym usłyszeć inną perspektywę...
jeet sandhu
Cześć, mam inne pytanie. Próbowałem wyświetlić konkretne posty na konkretnych stronach za pomocą wtyczki 'post in page'. Ale obrazy wyróżniające, które ustawiłem dla postów, nie wyświetlają się na stronie. Mam na myśli, że wyświetla się tylko tytuł posta, ale chcę również, aby wyświetlały się obrazy wyróżniające wszystkich postów! Czy możesz zasugerować mi jakiś sposób lub wtyczkę, która może mi w tym pomóc. Przeszukałem cały internet; nikt nie ma odpowiedzi. Byłbym wdzięczny, gdybyś mógł mi pomóc.
malik aadil
Jestem nowym blogerem, ten artykuł bardzo mi pomógł
Używałem linków w obrazkach, ale problem polegał na tym, że obrazki się otwierały, ale nie prowadziły do powiązanego artykułu
Wsparcie WPBeginner
Cześć 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
Cześć,
Bardzo dziękuję za ten przydatny kod.
Czy jest to sposób (czy mogę prosić o kod funkcji) na dodanie również tagu ALT do linku obrazu z tytułem posta, do którego linkuje, jako tekst alternatywny?
Mam problemy ze wzrokiem i w tej chwili link mówi tylko nazwę pliku obrazu, co przez większość czasu nie jest przydatne.
Dzięki,
Dale.
Ankit Agarwal
Dzięki za ten tutorial. Próbowałem tego na moim blogu, ale zdałem sobie sprawę, że obraz wyświetlany w miniaturze to nie mój wyróżniony obraz, ale pierwszy obraz, którego używam w poście. Prawdopodobnie dlatego, że używam wtyczki MotoPress page builder. i
Wydaje się, że istnieje konflikt między tym kodem a wtyczką Motopress.
Dale Reardon - Moja Niepełnosprawność Ma Znaczenie
Cześć,
To zadziałało fantastycznie.
Tylko jedno dalsze zapytanie – moja strona internetowa dotyczy problemów z niepełnosprawnością:
Chcę, aby rzeczy były dostępne, a sam jestem niewidomy, więc doceniam wszystkie strony, które robią swoją część.
Czy jest sposób, aby przypisać tekst ALT do tego linku obrazu, składającego się z tytułu strony, do której linkuje? W tej chwili mój czytnik ekranu odczytuje tylko nazwę pliku obrazu, co czasami nie jest zbyt pomocne.
Twoja pomoc jest najbardziej doceniana.
Dale.