Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak ulepszyć twój szablon strony 404 w WordPress (2 sposoby)

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Chcesz ulepszyć twój szablon strony 404 w WordPress?

Zastępując domyślną stronę WordPress 404 twoim własnym projektem, możesz pokazać odwiedzającym interesującą treść i informacje. Może to poprawić wrażenia użytkownika i zatrzymać ludzi na twojej witrynie na dłużej.

W tym artykule pokażemy, jak dostosować własny szablon strony 404 w WordPress.

How to improve your 404 page template in WordPress

Dlaczego warto ulepszyć twój szablon strony 404 w WordPress?

Większość motywów WordPress zawiera podstawowy szablon 404, w tym domyślne motywy WordPress.

Na przykład, na poniższym obrazku można zobaczyć stronę 404 ThemeIsle Hestia.

The 404 template included in the ThemeIsle Hestia WordPress theme

Większość z tych domyślnych szablonów jest prosta i nie pokazuje żadnych treści z twojej witryny. Oznacza to, że każdy, kto wyląduje na twojej stronie 404, z większym prawdopodobieństwem opuści twoją witrynę internetową WordPress, co zwiększy współczynnik odrzuceń.

Jest to zła wiadomość dla Twojego WordPress SEO i może mieć wpływ na to, gdzie Twoja witryna pojawia się w rankingach wyszukiwarek.

To powiedziawszy, dobrym pomysłem jest stworzenie strony 404 z twoją własną treścią i brandingiem.

The WPBeginner custom 404 page

Własna strona 404 to świetny sposób na promowanie treści, takich jak najpopularniejsze wpisy lub produkty z twojego sklepu internetowego. Możesz również zamieścić odnośniki do twoich profili w mediach społecznościowych, wyróżnić najnowsze komentarze i nie tylko.

Jeśli szukasz inspiracji, zebraliśmy dla Ciebie najlepsze przykłady projektów stron błędów 404.

Mając to na uwadze, przyjrzyjmy się, jak można ulepszyć twój szablon strony 404 w WordPress.

Film instruktażowy

Subscribe to WPBeginner

Jeśli wolisz instrukcje pisemne, czytaj dalej. Możesz również skorzystać z poniższych odnośników, aby przejść bezpośrednio do wybranej metody:

Najlepszym sposobem na ulepszenie strony 404 twojej witryny jest użycie SeedProd.

SeedProd to najlepszy kreator stron docelowych dla WordPress. Pozwala on tworzyć, edytować i dostosowywać twoje strony WordPress bez pisania jakiegokolwiek kodu.

SeedProd zawiera ponad 300 gotowych szablonów, w tym wiele wzorów 404. Oznacza to, że możesz stworzyć profesjonalnie zaprojektowaną stronę 404 w ciągu kilku minut.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować wtyczkę SeedProd. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Uwaga: Istnieje darmowa wersja SeedProd, która umożliwia tworzenie 111111 pięknych stron konserwacyjnych i wkrótce dostępnych. Będziemy jednak korzystać z wtyczki premium, ponieważ pozwala ona zastąpić wbudowany w twój motyw szablon 404.

Po włączaniu wtyczki, SeedProd poprosi o twój klucz licencyjny.

SeedProd license key

Informacje te można znaleźć na Twoim koncie w witrynie internetowej SeedProd. Po wpiszeniu licencji kliknij przycisk „Zweryfikuj klucz”.

Gdy już to zrobisz, przejdź do SeedProd ” Landing Pages. W sekcji „Strona 404” kliknij „Skonfiguruj stronę 404”.

The SeedProd page builder plugin

Teraz możesz wybrać szablon dla twojej strony 404.

Aby wyświetlić podgląd projektu, po prostu najedź na niego kursorem myszy, a następnie kliknij lupę.

SeedProd's ready-made 404 templates

Gdy znajdziesz projekt, który ci się podoba, po prostu kliknij „Wybierz ten szablon”.

Używamy „Oh No 404 Page” na wszystkich naszych obrazkach, ale możesz użyć dowolnego projektu.

Choosing a professionally-designed 404 template

Po wybraniu szablonu zostaniesz przeniesiony do kreatora „przeciągnij i upuść”, w którym możesz rozpocząć dostosowywanie strony 404.

Po lewej stronie ekranu znajdują się bloki i sekcje, które możesz dodać do twojego projektu. Po prawej stronie znajduje się podgląd na żywo.

Building a custom 404 page for your WordPress website

Większość szablonów 404 posiada już pewne bloki, które są rdzeniem wszystkich projektów SeedProd.

Aby dostosować dowolny z tych bloków, po prostu kliknij, aby wybrać ten blok w twoim układzie. Następnie można wprowadzić zmiany za pomocą ustawień w menu po lewej stronie.

Changing the text in a custom 404 page

Aby utworzyć nowy blok w twoim projekcie, znajdź go w menu po lewej stronie. Następnie przeciągnij go na twój układ. Możesz teraz dostosować blok zgodnie z procesem opisanym powyżej.

Na początek warto dodać logo twojej witryny internetowej do strony 404, aby odwiedzający wiedzieli, że nadal znajdują się na twojej witrynie.

Aby zastąpić logo SeedProd twoim własnym brandingiem, po prostu kliknij, aby wybrać logo zastępcze w twoim układzie. Następnie najedź kursorem myszy na obrazek w menu po lewej stronie.

Gdy się pojawi, kliknij przycisk „Wybierz obrazek”.

Adding your own logo to a 404 page

Spowoduje to uruchomienie multimediów WordPress, w których możesz wybrać dowolny obrazek lub przesłać nowy plik z twojego komputera.

Wiele szablonów 404 pokazuje również główne menu nawigacyjne twojej witryny. Jeśli masz wiele menu, możesz preferować wyświetlanie innego menu.

Aby dokonać tej zmiany, wystarczy kliknąć blok „Nav Menu” w twoim szablonie. Następnie możesz otworzyć menu rozwijane „Menu” i wybrać dowolne menu z listy.

Adding a custom navigation menu to a 404 page

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat dodawania własnych menu nawigacyjnych w motywach WordPress.

Kiedy odwiedzający ląduje na twojej stronie 404, może być zdezorientowany, jak się tu znalazł i co robić dalej. Mając to na uwadze, dobrym pomysłem jest dodanie tekstu wyjaśniającego, że nie można znaleźć treści i sugerującego działania, które należy podjąć w następnej kolejności.

Aby to zrobić, dodaj blok „Nagłówek” i „Tekst” do twojego projektu. Następnie możesz wpisać twój rodzaj wiadomości w edytorze tekstu w menu po lewej stronie.

Adding text to a custom 404 page

Następnie zmienimy przycisk „Powrót do strony głównej” tak, aby zachęcał do sprawdzenia konkretnego wpisu zamiast zwykłego powrotu do strony głównej.

Na przykład, możesz promować najpopularniejszy wpis na twoim blogu WordPress lub stronę, która pomaga ci zarobić najwięcej pieniędzy na blogowaniu online.

Aby dostosować przycisk, wystarczy kliknąć, aby zaznaczyć go w układzie strony. W polu „Odnośnik” wpisz adres URL, którego chcesz użyć zamiast niego.

Changing the button label

Ponieważ przycisk nie jest już odnośnikiem do strony głównej, należy zastąpić etykietę „Powrót do strony głównej”. Wystarczy wpisać nowy rodzaj wiadomości w polu „Tekst przycisku”.

Gdy to zrobisz, kliknij kartę „Zaawansowane”. Tutaj możesz zmienić kolor przycisku, jego rozmiar i nie tylko.

Creating a custom CTA button

Aby uzyskać więcej wskazówek dotyczących projektowania, zapoznaj się z naszym przewodnikiem na temat wyboru idealnego schematu kolorów dla twojej witryny WordPress.

To wszystko, czego potrzebujesz, aby stworzyć prostą własną stronę 404. Istnieje jednak wiele innych funkcji i treści, które mogą poprawić wrażenia odwiedzających, utrzymać ich zaangażowanie, a nawet pomóc w uzyskaniu większej liczby konwersji.

Mając to na uwadze, przyjrzyjmy się kilku zaawansowanym funkcjom, które możesz dodać do swojej strony 404.

Dodaj twoje najpopularniejsze wpisy do strony WordPress 404

Na początek warto pokazać listę twoich najpopularniejszych wpisów. Ponieważ te artykuły są popularne, istnieje duża szansa, że odwiedzający znajdą coś, co im się spodoba.

Możesz utworzyć tę listę automatycznie za pomocą wtyczki MonsterInsights. Jest to najlepsze rozwiązanie analityczne dla WordPress, z którego korzysta ponad 3 miliony witryn internetowych.

MonsterInsights może zobaczyć, które wpisy mają najwięcej odwiedzających i dodać je do twojej strony 404. Aby uzyskać więcej informacji, zobacz nasz przewodnik na temat wyświetlania popularnych wpisów według wyświetleń w WordPress.

Po włączaniu MonsterInsights możesz wyświetlać twoje najpopularniejsze wpisy, dodając krótki kod w WordPress. W lewym menu SeedProd wystarczy znaleźć blok „Krótki kod” i upuścić go na twój układ.

How to add shortcode to your website's 404 page

Teraz skopiuj następujący krótki kod:

[monsterinsights_popular_posts_widget theme="beta"]

Następnie kliknij, aby wybrać blok Krótki kod w edytorze SeedProd. Możesz teraz wkleić kod do menu po lewej stronie.

Adding shortcode to you website's 404 page

Domyślnie SeedProd nie wyświetla podglądu twoich najpopularniejszych wpisów w edytorze strony, więc musisz kliknąć przycisk „Podgląd” w prawym górnym rogu, aby zobaczyć krótki kod w działaniu.

Jeśli chcesz zobaczyć listę popularnych wpisów w edytorze SeedProd, po prostu kliknij przełącznik „Pokaż podgląd krótkiego kodu”.

Previewing the 404 page's shortcode

W powyższym krótkim kodzie używamy motywu = "beta" dla naszej listy, ale MonsterInsights ma kilka różnych motywów, których można użyć.

Aby zobaczyć różne motywy, przejdź do sekcji Insights ” Popular Posts w kokpicie WordPress, a następnie kliknij „Popular Posts Widget”.

The MonsterInsights' popular posts widget settings

Możesz teraz kliknąć różne motywy, aby zobaczyć podgląd.

Gdy znajdziesz projekt, który Ci się podoba, po prostu zaktualizuj krótki kod w SeedProd. Na przykład, jeśli chcesz użyć motywu „Alpha”, musisz wpisać rodzaj kodu:

[monsterinsights_popular_posts_widget theme="alpha"]

Pokaż swoje najpopularniejsze produkty WooCommerce

Jeśli posiadasz internetowy marketplace lub sklep, możesz chcieć pokazać swoje najlepiej sprzedające się produkty WooCommerce na stronie 404. W ten sposób twoja własna strona 404 może pomóc ci uzyskać większą sprzedaż.

W menu po lewej stronie znajdź blok Najlepiej sprzedające się produkty i przeciągnij go na twój układ.

How to show best-selling products on a 404 page

SeedProd pokaże niektóre produkty automatycznie. Możesz jednak dostosować ten blok, wybierając go w edytorze, a następnie korzystając z ustawień w menu po lewej stronie.

Możesz na przykład zmienić liczbę kolumn w bloku, dodać paginację, umożliwić kupującym filtrowanie najlepiej sprzedających się produktów i nie tylko.

Displaying WooCommerce products on a 404 page

Więcej informacji można znaleźć w naszym przewodniku na temat wyświetlania popularnych produktów WooCommerce.

Pomimo nazwy, można użyć tego bloku do wyświetlania innego rodzaju produktów. Na przykład, możesz pokazać produkty, które są w wyprzedaży lub Twoje produkty o najwyższej ocenie.

Aby zapoznać się z różnymi opcjami, należy otworzyć menu rozwijane „Rodzaj”, a następnie wybrać opcję z listy.

Showing different WooCommerce products on a 404 page

Dodaj formularz kontaktowy do twojej strony WordPress 404

Możesz także dodać formularz kontaktowy, aby odwiedzający mogli skontaktować się z Tobą, jeśli nie znajdą tego, czego szukają. Formularz ten daje również użytkownikom łatwy sposób zgłaszania błędów 404, dzięki czemu można poprawić te niedziałające odnośniki i poprawić wrażenia przyszłych odwiedzających.

Aby uzyskać więcej informacji, zapoznaj się z naszym kompletnym przewodnikiem na temat poprawek niedziałających odnośników w WordPress.

Najlepszym sposobem na dodanie formularza kontaktowego do twojej witryny jest użycie wtyczki WPForms. Jest to najlepsza wtyczka do formularzy kontaktowych dla WordPress i zawiera kreator formularzy typu „przeciągnij i upuść”.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku na temat tworzenia formularza kontaktowego w WordPress.

Po utworzeniu formularza kontaktowego możesz dodać go do twojej strony 404 za pomocą bloku „Formularz kontaktowy”. Wystarczy znaleźć ten blok w menu po lewej stronie i przeciągnąć go na twój projekt.

The WPForms form builder plugin

Następnie otwórz listę rozwijaną „Wybierz formularz” i wybierz twój formularz kontaktowy z listy.

Edytor strony wyświetli teraz podgląd formularza kontaktowego.

How to add a contact form to your website's 404 page

Możesz dodać tekst wprowadzający twój formularz kontaktowy lub zachęcający odwiedzających do kontaktu.

Aby to zrobić, po prostu dodaj blok „Nagłówek” lub „Tekst” nad twoim formularzem kontaktowym, a następnie wpisz rodzaj tekstu, którego chcesz użyć.

A custom 404 page, created using SeedProd

Jak opublikować stronę 404

Kiedy jesteś zadowolony z wyglądu strony 404, nadszedł czas, aby ją opublikować.

Wystarczy kliknąć strzałkę rozwijaną obok opcji „Zapisz”, a następnie wybrać opcję „Zapisz jako szablon”.

Saving your SeedProd 404 template

Po wyświetleniu pytania wpisz rodzaj nazwy szablonu. To jest tylko dla twojego odniesienia, więc możesz użyć czegokolwiek chcesz.

Następnie kliknij przycisk „Zapisz szablon”.

Naming your WordPress template

W następnym wyskakującym okienku kliknij „Return to Page Editor”. Następnie możesz kliknąć przycisk „X” w prawym górnym rogu, aby zamknąć edytor stron SeedProd.

W tym momencie może pojawić się wyskakujące okienko z pytaniem, czy chcesz opublikować twój projekt 404. Jeśli się na to zgadzasz, kliknij „Tak, włącz”.

Activating a SeedProd template for your WordPress website

Jeśli nie chcesz teraz publikować szablonu, kliknij „Nie, zamknij”.

Następnie możesz opublikować projekt w dowolnym momencie, przechodząc do SeedProd ” Strony. Tutaj kliknij przełącznik w sekcji „Strona 404”, aby wyświetlić „Włączanie”.

Activating a template for your WordPress website

Aby zobaczyć twoją stronę 404 w działaniu, wystarczy dodać /404 na końcu nazwy domeny.

Po opublikowaniu własnej strony 404 warto śledzić, w jaki sposób klienci korzystają z tej strony. Pozwala to zobaczyć, co działa, a co nie, dzięki czemu możesz dopracować swój projekt 404, aby uzyskać więcej konwersji i zaangażowania.

Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować Google Analytics w WordPress.

Metoda 2: Tworzenie strony 404 przy użyciu pełnego edytora witryny (tylko motywy blokowe)

Jeśli korzystasz z motywu WordPress włączającego bloki, możesz edytować stronę 404 twojej witryny w pełnym edytorze witryny.

Aby rozpocząć, przejdź do Wygląd ” Edytor w kokpicie WordPress.

Opening the WordPress full-site editor (FSE)

Domyślnie w pełnym edytorze witryny wyświetlany jest szablon główny twojego motywu.

Aby edytować stronę 404, kliknij „Szablony”.

How to edit the 404 template using the full-site editor

Zobaczysz teraz listę wszystkich szablonów, które tworzą twój motyw oparty na blokach, takich jak strona wyników wyszukiwania i strona archiwum.

Po prostu kliknij „404”.

Improving the built-in 404 design using FSE

WordPress wyświetli teraz podgląd obecnego, aktualnego wyglądu 404.

Aby przejść dalej i edytować ten szablon, kliknij małą ikonkę ołówka.

Editing the 404 template in your WordPress theme

Edytor pełnej witryny działa podobnie do standardowego edytora treści WordPress.

Aby dodać bloki do projektu, kliknij przycisk „+”.

Adding blocks to a 404 page design using the block-based WordPress editor

Możesz teraz wpisać rodzaj bloku, który chcesz dodać do strony 404.

Na przykład, możesz chcieć wyświetlić ostatnie wpisy na twojej witrynie. Może to być szczególnie skuteczne, jeśli wpisujesz treści wrażliwe na czas, na przykład jeśli prowadzisz witrynę internetową agregującą wiadomości.

Aby to zrobić, wystarczy wpisać „Najnowsze wpisy”, a następnie przeciągnąć blok na twój projekt.

Adding the Latest Posts block to a 404 page design

Po dodaniu bloku możesz chcieć dostosować go do własnych potrzeb.

Możesz przejść dalej i kliknąć, aby wybrać blok w podglądzie. Menu po prawej stronie pokaże wszystkie ustawienia, których można użyć do zmiany treści i wyglądu bloku.

How to customize blocks in a WordPress 404 page

Wyświetlane opcje mogą się różnić w zależności od wybranego bloku. Zazwyczaj można jednak zmienić kolor tła, kolor tekstu i wielkość pisma.

Możesz teraz kontynuować dodawanie bloków do twojego projektu i dostrajać je zgodnie z tym samym procesem opisanym powyżej. Możesz również rozmieścić swoje widżety WordPress w kolumnach lub użyć wzorców bloków WordPress, aby szybciej utworzyć własną stronę 404.

Kiedy będziesz zadowolony z wyglądu strony 404, kliknij „Zapisz”, aby ją uruchomić.

Publishing a custom 404 page template

Teraz, jeśli dodasz /404 na końcu nazwy domeny twojej witryny internetowej, zobaczysz własną stronę 404 w działaniu.

Kiedy należy przekierować stronę 404?

Jedną z najczęstszych przyczyn błędów 404 jest sytuacja, w której odwiedzający rzeczywiście popełnił błąd podczas wpisz adres URL.

W takim przypadku zazwyczaj nie trzeba przekierowywać użytkownika na inną stronę. Zalecamy jednak przestrzeganie najlepszych praktyk, które pokazaliśmy, aby przywrócić ich na właściwe tory.

Jeśli jednak nie masz czasu na stworzenie własnego szablonu strony 404, możesz w międzyczasie przekierować klientów na stronę główną. W ten sposób możesz zatrzymać użytkowników na twojej witrynie internetowej.

Poza tym zdecydowanie zalecamy śledzenie i przekierowywanie błędów 404. Dzięki temu można dowiedzieć się, z jakich odnośników użytkownicy nie mogli uzyskać dostępu i przekierować ich na najbardziej odpowiednie strony.

W rezultacie można zmaksymalizować możliwość zwiększenia liczby odsłon i zmniejszenia współczynnika odrzuceń. Ponadto możesz zachować linki zwrotne, które zostały odnośniki do tych stron, aby utrzymać autorytet twojej domeny.

Wtyczka All in One SEO ma przydatną funkcję rejestrowania błędów 404 i przekierowań, z której można korzystać. Nie potrzebujesz żadnej wiedzy technicznej, aby prawidłowo z niej korzystać, ponieważ jest ona dość przyjazna dla użytkownika po wyjęciu z pudełka.

Click 404 logs menu option

Jeśli chcesz poznać więcej rekomendacji wtyczek, sprawdź naszą listę najlepszych darmowych wtyczek przekierowujących 404 dla WordPress.

Mamy nadzieję, że ten artykuł pomógł ci ulepszyć twój szablon strony 404 w WordPress. Warto również zapoznać się z naszym przewodnikiem na temat konfigurowania celów Google Analytics dla twojej witryny WordPress i naszym wyborem najlepszych aplikacji do obsługi wirtualnych numerów telefonów biznesowych.

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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

10 komentarzyZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed says

    Thanks for giving the design options for making intuitive and innovative 404 page error.
    I have been seeing good 404 error pages and was not sure that making it is so easy.
    Seedprod gives so much options to tweak on 404 error page and make it as intuitive and innovative as possible so that users bad experience turns into good experience.

  3. Joe Wocoski says

    Hi,

    I just read about the 404 page, but I am not code literate. Your article seems complicated and the popular posts does not float my boat.

    What would is a simple widget that I can use to display a single list of my main tabs on the 404 page under the search.

    Do you have a widget to send readers back to my main blog page or my other main 9 tabs?

    Thank you very much
    Joe Wocoski

  4. Cheri- CreationScience4kids says

    Thanks! I’d used wp.com for 2 years before moving to selfhosting. It was exciting to take out all the dates on my articles, but then I started realizing my most popular page by far was the 404! I did the work to use the redirect plugin (also great for posts with rotten original headlines), but haven’t done it for all 400+.
    The email alert will be a relief and the most recent/popular/etc posts idea is great. :-)

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.