Jak dostosować zajawki WordPress (bez kodowania)

Zajawki WordPress to krótkie podsumowania twoich wpisów, które pojawiają się na stronie głównej, w archiwach i wynikach wyszukiwania. Dostosowanie ich do własnych potrzeb może poprawić wygląd twojej witryny i zwiększyć zaangażowanie użytkowników.

Co więcej, dzięki odpowiednim narzędziom można modyfikować zajawki bez umiejętności kodowania.

Ten przewodnik pokaże ci, jak łatwo dostosować te zajawki, aby lepiej pasowały do stylu i potrzeb twojej witryny.

Film instruktażowy

Jeśli wolisz instrukcje pisemne, czytaj dalej.

Kiedy i dlaczego warto używać zajawek w WordPressie?

Najpierw porozmawiajmy o tym, kiedy warto używać zajawek i dlaczego jest to dobry pomysł.

Domyślnie WordPress wyświetla pełne wpisy na stronie głównej, stronie bloga i w archiwum twojej witryny.

Z naszego doświadczenia wynika jednak, że spowalnia to działanie witryny WordPress, a także może powodować problemy z wyszukiwarkami, ponieważ oznacza to zduplikowaną treść na twojej witrynie.

Używanie zajawek sprawi, że twoje strony będą ładować się szybciej, ponieważ będziesz wczytywać tylko niewielką część każdego artykułu. Warto używać zajawek na:

• Strona główna Twojej witryny internetowej, jeśli wyświetla wpisy na blogu.
• Twoje różne strony archiwum dla kategorii i tagów.
• Twoja strona z wpisami na blogu, jeśli masz statyczną stronę główną.

Wiele motywów WordPress jest skonfigurowanych tak, aby domyślnie używać zajawek w miejscach takich jak twoja strona główna. W przypadku motywów WordPress premium możesz mieć możliwość wyboru, czy chcesz wyświetlać pełne wpisy, czy zajawki.

Aby uzyskać więcej szczegółów, zapoznaj się z naszym artykułem na temat pełnych wpisów vs. zajawek, aby poznać więcej powodów, dla których warto używać zajawek.

Dlaczego możesz chcieć dostosować swoje zajawki do własnych potrzeb?

Jeśli twój motyw WordPress domyślnie używa zajawek, to WordPress automatycznie wygeneruje zajawkę dla ciebie.

Domyślnie WordPress używa pierwszych 55 słów twojego wpisu, choć wiele motywów wyświetla nieco więcej.

Więc co w tym złego? Czy nie możesz po prostu zaoszczędzić czasu, pozwalając WordPressowi wymyślić zajawkę za Ciebie?

Z naszego doświadczenia wynika, że nie działa to dobrze w przypadku większości witryn internetowych.

Automatycznie wygenerowana zajawka rozpocznie się od tekstu znajdującego się na początku twojego wpisu. Może to być dobre w niektórych przypadkach, ale nie działa tak dobrze, jeśli masz coś przed rozpoczęciem wpisu.

Oto przykład witryny korzystającej z motywu Ribosome:

Jak widać, zajawka pokazuje tekst z samego początku wpisu. Obejmuje to wyróżniający obrazek oraz informację o tym, kiedy wpis był ostatnio aktualizowany. Nie wygląda to zbyt dobrze.

Jeśli twój motyw nie radzi sobie zbyt dobrze z zajawkami, możesz chcieć je dostosować, aby były łatwiejsze do odczytania i pomagały uzyskać więcej kliknięć wpisów.

W związku z tym przyjrzyjmy się różnym sposobom dostosowania zajawek w WordPressie. Możesz użyć poniższych odnośników, aby przejść do dowolnej metody:

1. Jak dodać własną zajawkę w WordPress (domyślnie)

Dodanie własnej zajawki w WordPressie jest dość proste. Najpierw należy utworzyć nowy wpis lub edytować istniejący.

W prawym panelu edytora treści WordPress powinieneś zobaczyć listę rozwijaną „Zajawka”. Kliknij strzałkę w dół obok niego.

Zostanie ona rozwinięta, aby wyświetlić zajawkę.

Tutaj możesz wpisać własną zajawkę wpisu. My po prostu skopiowaliśmy pierwszy akapit naszego wpisu.

Uwaga: Jeśli nadal używasz starego klasycznego edytora, musisz kliknąć kartę „Opcje ekranu” w prawym górnym rogu. Następnie zaznacz pole „Zajawka”. Zobaczysz teraz miejsce na twoją zajawkę poniżej pola, w którym piszesz swój wpis.

Twój motyw WordPress będzie teraz używał własnej zajawki dla tego wpisu.

Jak widać, odnośnik Dowiedz się więcej nie jest wyświetlany po zajawce. W zależności od używanego motywu, własne zajawki mogą nie mieć tego odnośnika.

Czytelnik nadal może kliknąć tytuł wpisu lub wyróżniający go obrazek, aby przeczytać cały twój wpis.

2. Zmiana długości zajawki

Jeśli chcesz zmienić długość zajawek na twojej witrynie, możesz skorzystać z darmowej wtyczki WPCode. Jest to nie tylko najłatwiejszy i najbezpieczniejszy sposób na dodanie własnego kodu do twojej witryny, ale także zawiera dużą bibliotekę wstępnie skonfigurowanych fragmentów kodu.

Wykorzystamy dziś jeden z tych wbudowanych fragmentów kodu.

Aby rozpocząć, należy zainstalować i włączyć WPCode. Aby uzyskać więcej informacji, możesz sprawdzić nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu, możesz przejść do Code Snippets „ Add Snippet w twoim panelu administracyjnym WordPress i wyszukać „zajawkę”.

Najedź kursorem myszy na wynik zatytułowany „Zmień długość zajawki” i kliknij przycisk „Użyj fragmentu kodu”.

Wtyczka wstawi następujący fragment kodu:

add_filter(
	'excerpt_length',
	function ( $length ) {
		// Number of words to display in the excerpt.
		return 40;
	},
	500
);

Następnie zobaczysz ekran „Edytuj fragment kodu”. WPCode wstępnie skonfigurował już wszystkie ustawienia.

Domyślnie ten fragment kodu ograniczy zajawkę do 40 słów. Możesz dostosować liczbę w linii 5 do tego, co najlepiej pasuje do twojego bloga WordPress.

Po ustawieniu żądanej długości zajawki wystarczy przełączyć przełącznik na „Włączanie” i kliknąć przycisk „Aktualizuj”.

Teraz, gdy użytkownik przejdzie na twoją witrynę, skrócone zajawki znajdą się tam, gdzie pokazuje je twój motyw.

Poniżej znajduje się przykład tego, jak wyglądałoby to przy użyciu motywu Twenty Twenty-Two i ustawieniu fragmentu kodu WPCode na wyświetlanie 5 słów.

Należy pamiętać, że fragment kodu z WPCode działa tylko z domyślnymi zajawkami generowanymi przez WordPress.

Zmiana długości własnych zajawek

Jeśli chcesz zmienić długość niestandardowych zajawek, musisz dodać osobny, własny fragment kodu do WPCode. Kopiowanie i wklejanie fragmentów kodu do WordPressa jest bardzo proste, a ponieważ używamy WPCode, wykonujemy wiele takich samych kroków jak powyżej.

Najpierw przejdź do sekcji Fragmenty kodu „ Dodaj fragment kodu. Najedź kursorem myszy na „Add Your Custom Code (New Snippet)” i kliknij przycisk „Use Snippet”.

Następnie wyświetli się strona „Utwórz fragment kodu”.

Teraz musisz nadać swojemu nowemu fragmentowi kodu tytuł, a następnie wkleić poniższy kod w polu „Podgląd kodu”:

add_filter( 'get_the_excerpt', function( $excerpt, $post ) {
	
	$excerpt_length = 40; // Change excerpt length 
	$excerpt_more   = '...<br><br><a href="' . get_permalink($post->ID) . '">Read More »</a>'; // Add ellipsis and 'Read More' permalink text when trimmed
	
    if ( has_excerpt( $post ) ) {
        $excerpt = wp_trim_words( $excerpt, $excerpt_length, $excerpt_more );
    }
	
    return $excerpt;
	
}, 10, 2 );

Możesz zmienić wartość $excerpt_length w linii 3, aby wybrać, ile słów będzie miał twój własny zajawka.

Dodatkowo, edycja zaznaczonego poniżej tekstu w linii 4 zmieni tekst kotwicy dla odnośnika Dowiedz się więcej, gdy zajawka zostanie przycięta.

Po dostosowaniu fragmentu kodu do własnych potrzeb, upewnij się, że „Rodzaj kodu” jest ustawiony na „Fragment kodu PHP”.

Następnie możesz przełączyć przełącznik na „Aktywny” i kliknąć przycisk „Zapisz fragment kodu”.

Teraz, gdy przejdziesz na swoją witrynę, zobaczysz, że twoje własne zajawki są skrócone do długości wybranej w linii 3.

3. Zmiana tekstu Dowiedz się więcej na zajawki

Oprócz powyższego fragmentu kodu można również użyć biblioteki fragmentów WPCode, aby zmienić tekst „Dowiedz się więcej”, który pojawia się wraz z zajawkami w większości motywów.

Wystarczy zainstalować i włączać darmową wtyczkę WPCode. Aby uzyskać więcej informacji, możesz skorzystać z naszego przewodnika krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu możesz przejść do sekcji Fragmenty kodu ” Dodaj fragment w twoim panelu administracyjnym. Stamtąd po prostu wyszukaj „zajawka” i najedź kursorem myszy na wynik zatytułowany „Zmień tekst Dowiedz się więcej dla zajawek”.

Możesz kliknąć przycisk „Użyj fragmentu kodu”, aby przejść do strony „Edytuj fragment kodu”. WPCode ma już wstępnie skonfigurowany fragment kodu i domyślnie jest ustawiony na „Przeczytaj cały wpis”.

Tekst w linii 4 można jednak zastąpić dowolnym tekstem.

Gdy tylko twój nowy tekst będzie satysfakcjonujący, przełącz przełącznik na „Włącz” i kliknij przycisk „Aktualizuj”.

4. Wyświetlanie zajawek w twoim motywie

Większość popularnych motywów WordPress posiada wbudowaną obsługę wyświetlania własnych zajawek w twoich wpisach.

Jednak niektóre motywy mogą nie mieć pomocy technicznej dla zajawek. Jeśli tak jest w twoim przypadku, będziesz musiał ręcznie zmodyfikować szablony motywów.

Dodawanie zajawki wpisu w motywach blokowych

Jeśli korzystasz z motywu blokowego, możesz przejść do strony Wygląd ” Edytor, aby edytować twój motyw w Edytorze witryny.

Spowoduje to otwarcie edytora witryny. Kliknij szablon, który chcesz edytować z lewego panelu bocznego lub po prostu wskaż obszar, w którym wyświetlane są twoje wpisy.

Pełny edytor witryny może wyświetlać twoje najnowsze wpisy za pomocą bloku Query Loop, który jest standardowym sposobem wyświetlania listy wpisów.

Po dodaniu bloku zapytania należy kliknąć przycisk „Wybierz”, aby wybrać wzorzec.

WordPress zawiera kilka układów jako wzorców dla Pętli Zapytań, można wybierać spośród siatki, tabeli, listy i innych.

Wygenerowany szablon wpisu będzie teraz automatycznie wyświetlał twoją zajawkę.

Jednak jedyną rzeczą, którą można tu zmienić, jest tekst Dowiedz się więcej.

Dodawanie zajawki wpisu w motywach klasycznych

Jeśli korzystasz z klasycznego motywu, możesz dodać zajawkę wpisu, tworząc motyw potomny i dodając trochę kodu.

Dodaje to pewnej złożoności do procesu, a jeśli nie czujesz się z tym komfortowo, możesz skorzystać z metody 3 w tym artykule, która nie wymaga dodawania żadnego kodu.

W twoim motywie potomnym potrzebny będzie szablon używany do wyświetlania stron, które chcesz zmodyfikować. Zobacz nasz przewodnik po hierarchii szablonów WordPress, aby dowiedzieć się, który szablon musisz edytować.

Nazwy plików będą się nieco różnić w zależności od twojego motywu, ale prawdopodobnie szukasz home.php, content.php, archive.php i category.php.

W każdym z tych plików należy znaleźć tę linię:

<?php the_content(); ?>.

Następnie należy zastąpić go tagiem the_excerpt w następujący sposób:

<?php the_excerpt(); ?>.

Ważne: Nie importujemy tej metody dla początkujących. Nawet jeśli masz spore doświadczenie z WordPressem, możesz chcieć uniknąć tworzenia motywu potomnego i edytowania plików szablonu.

Kolejne dwie metody są świetną alternatywą.

5. Pokazywanie początku twoich wpisów za pomocą tagu More

Innym sposobem na utworzenie krótkiej wersji twojego wpisu na stronę główną WordPressa i strony archiwum jest użycie tagu „Więcej”.

Działa to nieco inaczej niż zajawka. Zamiast tworzyć tylko tekstowy fragment kodu twojego wpisu, tag More pozwala przerwać wpis w określonym miejscu.

Oznacza to, że tylko pierwsza część twojego wpisu (aż do tagu) będzie wyświetlana na liście wpisów na stronie głównej, stronie kategorii itp. Zaletą tagu More jest to, że zachowuje on całe twoje formatowanie.

W miejscu, w którym umieścisz tag Więcej, WordPress wyświetli odnośnik „Dowiedz się więcej”. Czytelnicy mogą go kliknąć, aby przejść do całego twojego wpisu. Zostaną też automatycznie przeniesieni do właściwego wpisu.

Aby utworzyć tagi More, utwórz nowy wpis lub edytuj istniejący.

Następnie musisz dodać blok, w którym chcesz umieścić tagi More. Wybierz blok Więcej z sekcji Opcje układu lub wyszukaj go za pomocą paska wyszukiwania.

W ten sposób tagi More pojawią się w edytorze treści.

Opcjonalnie można wybrać opcję ukrycia treści przed tagiem Więcej we właściwym wpisie.

Uwaga: Możesz również dodać tag Więcej w starym, klasycznym edytorze. Kliknij miejsce, w którym chcesz umieścić tag w twoim wpisie, a następnie kliknij przycisk Więcej na wizualnym pasku narzędzi.

Praktycznie każdy motyw będzie mógł używać tagu More wszędzie tam, gdzie wyświetlane są wpisy. Pamiętaj jednak, że jeśli twój motyw wyświetla zajawki, będziesz musiał dostosować sam zajawkę. Nie można tego zmienić, dodając tagi More do wpisów.

6. Dodawanie własnych zajawek WordPress za pomocą wtyczki

Co zrobić, jeśli wbudowana w WordPress funkcja konfiguratora zajawek nie robi tego, co chcesz … i nie chcesz też używać tagu More?

Istnieje proste rozwiązanie. Możesz użyć wtyczki do tworzenia i wyświetlania własnych zajawek.

Najpierw należy zainstalować i włączyć wtyczkę Advanced Zajawka.

Jeśli wcześniej nie instalowałeś wtyczki, zapoznaj się z naszymi instrukcjami krok po kroku, jak zainstalować wtyczkę WordPress.

Po jej włączaniu można przejść do Ustawienia ” Zajawka, aby skonfigurować sposób jej działania.

Tutaj możesz zmienić takie rzeczy, jak liczba znaków lub słów wyświetlanych w zajawce. Można również zdecydować, czy zajawka ma być ucinana w połowie słowa lub zdania.

Można również przywrócić odnośnik „Dowiedz się więcej”, który normalnie znika z zajawki własnej. Możesz nawet zmienić go na dowolny tekst i zmienić sposób jego działania:

Wskazówka: Aby używać niestandardowych zajawek z tą wtyczką, odznacz pole „Generuj zajawki, nawet jeśli wpis ma dołączony konfigurator”.

Wygląda to następująco.

Po wprowadzeniu zmian w zaawansowanych ustawieniach zajawki, upewnij się, że kliknąłeś przycisk „Zapisz” u dołu ekranu.

Dzięki wtyczce Advanced Excerpt Twoje zajawki zachowają format wpisu. Oto automatycznie wygenerowana zajawka z włączoną wtyczką.

Jak widać, podział wiersza i kursywa zostały zachowane.

Domyślnie wtyczka Advanced Excerpt używa zajawek na twojej stronie głównej, kanale RSS i innych stronach archiwum.

Nie wprowadza ona żadnych zmian w twojej treści, a jeśli chcesz ją wyłączyć, możesz po prostu wyłączyć wtyczkę.

Mamy nadzieję, że ten artykuł pomógł ci łatwo dostosować zajawki WordPress bez żadnego kodowania. Możesz również polubić naszą listę wtyczek, które musi mieć każda witryna biznesowa lub nasz przewodnik na temat wyświetlania metadanych wpisów na blogu w motywach WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.