Obrazek wyróżniający vs. Obrazek okładki w edytorze bloków WordPress (Przewodnik dla początkujących)

Kiedy po raz pierwszy zacząłem używać WordPressa, często myliłem obrazy wyróżniające z obrazami okładki. W rezultacie niektóre z moich wczesnych postów na blogu nie trafiały w punkt. Albo brakowało im kluczowych wizualizacji, albo obrazy były źle umieszczone, co sprawiało, że projekt był nieco nieodpowiedni.

Na szczęście szybko dowiedziałem się, że te dwa rodzaje obrazów pełnią unikalnie ważne role.

Obrazki okładki są używane w treści, aby nadać ton i zaangażować czytelników. Natomiast obrazki wyróżniające działają jako wizualne podsumowanie, prezentując esencję Twojego postu, zanim zostanie on nawet otwarty.

W tym przewodniku podzielę się wszystkim, czego nauczyłem się o obrazach nagłówka i obrazach wyróżniających w edytorze bloków WordPress.

Oto szybki przegląd tego, co omówię w tym przewodniku:

• Czym jest obraz nagłówkowy?
• Czym jest obraz wyróżniający?
• Obraz nagłówka vs. Obraz wyróżniający w edytorze bloków WordPress
• Jak dodać obrazek okładki w WordPress
• How to Add a Featured Image in WordPress
• Często zadawane pytania dotyczące obrazów nagłówka i wyróżniających
• Przewodniki eksperckie dotyczące korzystania z obrazów w WordPress

Czym jest obraz nagłówkowy?

Obraz nagłówka to szeroki obraz, który umieszczasz w dowolnym miejscu w treści wpisu lub strony.

Jest to specyficzny blok używany do przełamywania długich fragmentów tekstu i tworzenia wizualnego początku nowej sekcji, często z tekstem napisanym na nim.

Są one szczególnie powszechne na stronach internetowych, które mocno opierają się na opowiadaniu historii lub treściach wizualnych, takich jak podróże, styl życia i portfolio.

Na przykład bloger może użyć obrazu nagłówka do wprowadzenia nowego rozdziału w długim artykule. Marketerzy często używają ich do tworzenia pełnoekranowych banerów z wezwaniem do działania, a fotografowie mogą ich używać do prezentacji oszałamiającego elementu portfolio w studium przypadku.

Blok „Okładka” w WordPressie pozwala na dodanie obrazu okładki. Pozwala również na dodawanie nakładek tekstowych i kolorystycznych na obrazy.

Możesz również dostosować te nakładki, aby pasowały do kolorów Twojej witryny lub nadać nastrój różnym sekcjom treści. Później w artykule pokażę Ci więcej o tej opcji dostosowywania.

Dla najlepszego efektu zalecam używanie obrazów okładki o wymiarach 1920×1080 pikseli. Ten rozmiar zapewnia wysoką jakość obrazów i ładnie wypełnia górną część wpisów.

Czym jest obraz wyróżniający?

Obraz wyróżniający jest jak twarz Twojego wpisu na blogu, zapewniając wizualną reprezentację, która przyciąga czytelników.

Znany również jako miniatura posta, pojawia się na stronie głównej i stronach archiwum bloga. Pojawia się również w kanałach mediów społecznościowych po udostępnieniu artykułu.

Te obrazy są tworzone tak, aby były atrakcyjne wizualnie, zachęcając czytelników do klikania i przeglądania Twojego bloga WordPress lub strony internetowej.

Na przykład w WPBeginner mój zespół i ja dbamy o to, aby każdy wyróżniony obraz był unikalny, jednocześnie zachowując spójny styl naszej marki.

Pamiętaj, że obrazy wyróżniające zależą od motywu WordPress, którego używasz, ponieważ motyw decyduje o najlepszym rozmiarze dla tych obrazów.

Dzieje się tak, ponieważ motywy mają predefiniowane układy, takie jak siatki lub listy wpisów na stronie głównej i stronach archiwum, i wymagają spójnych rozmiarów obrazów, aby zachować czysty i profesjonalny wygląd.

Na przykład, wiele motywów wybiera standardowy współczynnik proporcji 16:9, używając rozmiarów takich jak 680×382 pikseli. Niektóre motywy mogą nawet używać obrazów wyróżniających jako obrazów nagłówka, o wymiarach takich jak 1200×675 pikseli.

Jeśli potrzebujesz bardziej szczegółowych informacji, zapoznaj się z tym kompleksowym przewodnikiem po rozmiarach obrazów w WordPress.

Obraz nagłówka vs. Obraz wyróżniający w edytorze bloków WordPress

Aby jeszcze bardziej wyjaśnić różnice, oto szybkie porównanie obrazu nagłówka i obrazu wyróżniającego:

Funkcja	Obraz nagłówka	Obraz wyróżniający
Główny cel	Tworzenie wizualnych przerw i wyróżnianie sekcji wewnątrz wpisu.	Reprezentowanie całego artykułu na stronach głównych, archiwach i w mediach społecznościowych.
Lokalizacja	Dowolne miejsce w treści wpisu lub strony.	Wyświetlane przez Twój motyw na stronach poza samym wpisem.
Jak to jest dodawane	Użycie bloku „Okładka” w edytorze treści.	Użycie ustawienia „Obraz wyróżniający” w bocznym pasku wpisu.
Kluczowe funkcje	Może mieć nakładki tekstowe, efekty paralaksy i filtry.	Wygląd i rozmiar są kontrolowane przez Twój motyw WordPress.

Jak dodać obrazek okładki w WordPress

Edytor bloków WordPress, znany również jako Gutenberg, bardzo ułatwia dodawanie obrazów okładkowych za pomocą poręcznego bloku Okładka.

Aby zacząć, musisz utworzyć nowy post, przechodząc do Posty » Dodaj post.

Możesz również edytować istniejący, przechodząc do Wpisy » Wszystkie wpisy, odnajdując wpis, który chcesz edytować, i klikając tytuł wpisu, aby otworzyć go w edytorze.

W edytorze wpisów kliknij przycisk „+”, aby dodać nowy blok, a następnie wybierz blok „Okładka” z listy.

Blok „Okładka” znajdziesz w zakładce „Multimedia”. Alternatywnie, możesz również wpisać „/okładka” w polu wyszukiwania bloków, aby łatwo go znaleźć.

Po wybraniu bloku „Cover” zobaczysz go w edytorze treści. Jesteś teraz gotowy do dodania swojego obrazu nagłówkowego.

Po prostu przeciągnij i upuść swój ulubiony obraz lub film do obszaru bloku. Alternatywnie, możesz kliknąć przycisk „Prześlij”, aby wybrać plik z komputera.

A jeśli masz już coś świetnego w swojej bibliotece multimediów, kliknij przycisk „Biblioteka multimediów”, aby wybrać obraz z galerii multimediów.

Kliknij przycisk „Wybierz”, aby dodać obraz do wpisu.

Teraz czas na jego dostosowanie.

Po prostu kliknij obraz, a pojawi się pasek narzędzi do wprowadzania poprawek. Panel po prawej stronie oferuje jeszcze więcej opcji.

Zacznijmy od dodania tytułu. Po prostu kliknij obszar „Napisz tytuł…” pośrodku obrazu nagłówkowego i wpisz swój tekst.

Będziesz mieć pod ręką opcje formatowania, które pojawią się nad tekstem w celu dostosowania.

Następnie sprawdź panel po prawej stronie, aby uzyskać dodatkowe ustawienia.

Tutaj zobaczysz dwie zakładki – „Ustawienia” i „Style”.

W zakładce „Ustawienia” możesz dostosować opcje układu. Domyślnie układ jest ustawiony na pełną szerokość, więc możesz pozostawić to ustawienie bez zmian.

Następnie wybierz między tłem stałym lub powtarzalnym, aby dopasować je do swojego projektu. Tło stałe jest idealne do tworzenia efektu paralaksy, nadając obrazowi dynamiczny charakter. Tło powtarzalne jest pomocne przy używaniu obrazów kafelkowych.

Następnie dostosuj punkt centralny obrazu, aby podkreślić jego kluczowe części. Możesz również ustawić rozdzielczość, aby wybrać, jak ostry i wyraźny chcesz, aby były Twoje obrazy.

Przejdź do zakładki ‘Style’, a następnie dostosuj przezroczystość nakładki. Odnosi się to do tego, jak przezroczysta jest warstwa koloru na Twoim obrazku.

Domyślnie ustawiona jest przezroczystość 50%, ale możesz ją dostosować do nastroju swojego wpisu. Pomaga to zapewnić, że tekst pozostaje łatwy do odczytania, jednocześnie pozwalając kontrolować, ile koloru się wyświetla.

Na koniec możesz poeksperymentować z filtrami w celu zmiany stylu obrazu. Wypróbuj różne, aby znaleźć najlepsze dopasowanie do swojego posta.

Dla tych, którzy lubią być kreatywni, zanurz się w ustawieniach Zaawansowane, aby dodać niestandardowy CSS i nadać swojemu obrazkowi okładki unikalny charakter.

I gotowe! Możesz powtórzyć te kroki, aby dodać więcej obrazów okładki, jeśli Twój post ich potrzebuje, tworząc dynamiczne i angażujące doświadczenie czytelnicze.

Po zakończeniu możesz przejrzeć i opublikować swój post, aby upewnić się, że wszystko wygląda dobrze na stronie głównej.

Jak dodać obraz wyróżniający w WordPressie

Dodanie obrazu wyróżniającego do wpisu WordPress to prosty sposób, aby go wyróżnić. Proces jest prawie taki sam jak dodawanie obrazu tła.

Niezależnie od tego, czy dopiero zaczynasz przygodę z blogowaniem, czy potrzebujesz szybkiego przypomnienia, oto jak to zrobić.

Na początek otwórz post, który chcesz edytować. Pole meta Obraz wyróżniający znajduje się po prawej stronie.

Po prostu kliknij opcję „Ustaw obraz wyróżniony” , aby rozpocząć.

Teraz dodajmy Twój obraz wyróżniający.

Możesz przesłać nowy obraz, korzystając z narzędzia do przeciągania i upuszczania lub wybierając obraz z biblioteki mediów.

Następnie możesz dodać tytuł i tekst alternatywny (ważne dla SEO i dla użytkowników czytników ekranu) dla swojego obrazu wyróżniającego, a następnie kliknij przycisk „Ustaw obraz wyróżniający”. Pomyślnie dodałeś obraz wyróżniający do swojego artykułu!

Aby uzyskać bardziej szczegółowe instrukcje, możesz przeczytać nasz przewodnik dla początkujących dotyczący dodawania obrazów wyróżniających w WordPress.

Po dodaniu obrazu wyróżniającego możesz go dostosować. Opcje dostosowywania będą jednak zależeć od typu motywu WordPress, którego używasz.

W tym kroku zbadam dwie metody dostosowywania obrazów wyróżniających: za pomocą narzędzia do dostosowywania motywu i Edytora Pełnej Witryny (FSE).

Korzystanie z narzędzia do dostosowywania motywu

Ta metoda działa ogólnie dla klasycznych motywów, ale w tym artykule użyję motywu Sydney. Sydney oferuje przyjazne dla użytkownika opcje projektowania, które ułatwiają poprawę wyglądu Twojej witryny.

Na początek musisz zainstalować i aktywować motyw. Jeśli potrzebujesz pomocy, przeczytaj przewodnik mojego zespołu na temat instalowania motywu WordPress.

Następnie zacznij od przejścia do swojego panelu WordPress i wybierz Wygląd » Dostosuj. Spowoduje to otwarcie narzędzia Dostosowywanie.

Tutaj możesz dostosować wiele aspektów wizualnej prezentacji swojej witryny, w tym obraz wyróżniający.

W narzędziu do dostosowywania możesz również przeglądać sekcje takie jak „Nagłówek” , aby uzyskać dostęp do ustawień związanych z Twoimi obrazami wyróżniającymi.

Możesz również dostosować ustawienia nagłówka i układ mobilny. Gdy będziesz zadowolony ze zmian, kliknij „Opublikuj” w lewym górnym rogu, aby je zapisać.

Aby uzyskać więcej szczegółów, zapoznaj się z tym przewodnikiem na temat korzystania z narzędzia do dostosowywania motywu.

Korzystanie z Edytora Pełnej Witryny (FSE)

Dla tych, którzy używają motywów opartych na blokach, Edytor Pełnej Witryny (FSE) pozwala dostosować obrazy wyróżniające. Poniższe kroki pokazują, jak zmienić globalny, ogólnosystemowy styl dla wszystkich Twoich obrazów wyróżniających.

Pamiętaj, że jest to ustawienie globalne. Aby uzyskać bardziej szczegółowe dostosowania, możesz również edytować poszczególne szablony, takie jak szablon „Pojedynczy wpis”.

Zacznij od przejścia do Wygląd » Edytor z panelu administracyjnego WordPress. Spowoduje to otwarcie edytora witryny. Po wejściu do edytora przejdź do Nawigacja » Style.

Następnie przewiń w dół i wybierz „Bloki” z listy.

Spowoduje to otwarcie listy bloków, które można dostosować w edytorze.

Następnie poszukaj bloku „Obraz wyróżniający”. Aby znaleźć go szybciej, możesz wpisać „obraz wyróżniający” w pasku wyszukiwania.

Tutaj zobaczysz opcje dostosowywania swojego wyróżnionego obrazu, w tym zmianę wymiarów (wypełnienie i margines).

Możesz również dodać obramowanie, cień i promień obrazu. Zachęcamy do eksperymentowania z tymi ustawieniami i obserwowania, jak wpływają one na wygląd Twojego wyróżnionego obrazu.

Gdy będziesz zadowolony ze zmian, poświęć chwilę na ich podgląd przed publikacją. Zapewni to, że wszystko będzie wyglądać idealnie na wszystkich urządzeniach.

Jeśli potrzebujesz więcej informacji, zapoznaj się z naszym kompletnym przewodnikiem dla początkujących po edycji pełnej strony WordPress.

Często zadawane pytania dotyczące obrazów nagłówka i wyróżniających

Oto odpowiedzi na niektóre często zadawane pytania dotyczące korzystania z obrazów nagłówka i wyróżnionych w WordPressie.

Czy mogę użyć tego samego obrazu zarówno dla nagłówka, jak i obrazu wyróżnionego?

Tak, absolutnie. Powszechną praktyką jest ustawienie obrazu wyróżnionego, a następnie użycie tego samego obrazu w bloku nagłówka na górze wpisu. Tworzy to spójne wrażenia wizualne dla czytelników od momentu kliknięcia linku do rozpoczęcia czytania.

Dlaczego tekst na moim obrazie nagłówka jest trudny do odczytania?

Zazwyczaj dzieje się tak, ponieważ nie ma wystarczającego kontrastu między kolorem tekstu a obrazem znajdującym się za nim. Możesz to naprawić, dostosowując nakładkę kolorystyczną w ustawieniach bloku nagłówka.

Ciemniejsza nakładka z jasnym tekstem (lub odwrotnie) sprawia, że jest on znacznie bardziej czytelny.

Co się stanie, jeśli nie ustawię obrazu wyróżnionego dla mojego wpisu?

Jeśli nie ustawisz obrazu wyróżnionego, Twój wpis może pojawić się jako puste miejsce na stronie głównej lub stronach archiwum Twojego bloga.

Gdy artykuł jest udostępniany w mediach społecznościowych, platforma może pobrać losowy obraz ze strony lub nie pokazać żadnego obrazu, co może negatywnie wpłynąć na zaangażowanie.

Czy tekst, który dodaję na obrazie nagłówka, wpływa na moje SEO?

Tekst umieszczony w bloku nagłówka jest traktowany przez Google jak zwykły akapit lub nagłówek, więc jest indeksowany i może przyczynić się do SEO Twojego wpisu. Jednak główny tytuł strony i dedykowane nagłówki (H2, H3) mają znacznie większy wpływ.

Czy wpis może mieć więcej niż jeden obraz wyróżniony?

Domyślnie WordPress pozwala tylko na jeden obraz wyróżniony na wpis. Możesz jednak użyć wtyczki takiej jak All in One SEO, aby ustawić inny obraz specjalnie dla platform mediów społecznościowych.

Pozwala to na posiadanie standardowego obrazu wyróżnionego dla Twojej witryny i niestandardowego, zoptymalizowanego dla Facebooka lub Twittera.

Przewodniki eksperckie dotyczące korzystania z obrazów w WordPress

Sprawdź te przydatne narzędzia i wskazówki, aby Twoje obrazy w WordPress były jeszcze lepsze:

• Najlepsze wtyczki i narzędzia do obrazów wyróżniających dla WordPressa (Porównanie)
• Jak przycinać i edytować miniatury postów w WordPress
• Jak tworzyć dodatkowe rozmiary obrazów w WordPress
• Jak dodać obraz nagłówkowy w WordPressie (działa ze wszystkimi motywami)
• Tekst alternatywny obrazu a tytuł obrazu w WordPress – jaka jest różnica?
• Jak zoptymalizować obrazy pod kątem wydajności sieci bez utraty jakości
• Sposoby zapobiegania kradzieży obrazów w WordPress

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.