Jak poprawić szablon strony 404 w WordPressie (2 sposoby)

Czy chcesz ulepszyć swój szablon strony 404 w WordPressie?

Ulepszenie domyślnej strony WordPress 404 może pomóc w stworzeniu lepszego doświadczenia użytkownika, zmniejszeniu współczynnika odrzuceń i zwiększeniu liczby odsłon.

W tym artykule pokażemy, jak krok po kroku dostosować szablon strony 404 w WordPress.

Po co ulepszać szablon strony 404 w WordPressie?

Większość odwiedzających, którzy trafią na domyślną stronę WordPress 404, szybko opuści Twoją witrynę WordPress.

Zwiększy to współczynnik odrzuceń, obniży komfort użytkowników, a nawet może negatywnie wpłynąć na rankingi w wyszukiwarkach.

Ulepszając swoją stronę WordPress 404, możesz wysyłać odwiedzających do popularnych postów, zwiększać liczbę odsłon i zmniejszać współczynnik odrzuceń oraz zamieniać odwiedzających jednorazowych w stałych czytelników i klientów.

Gdy gość pozostaje w Twojej witrynie dłużej, jest bardziej prawdopodobne, że dokona zakupu, przeczyta więcej postów, dołączy do Twojej listy e-mailowej i nie tylko.

Ponadto może poprawić SEO WordPress, dzięki czemu uzyskasz większy ruch w wyszukiwarkach.

Uwaga: ważne jest, aby utworzyć niestandardową stronę 404, ale powinieneś również śledzić, z jakich adresów URL 404 użytkownicy korzystają, aby odwiedzić Twoją witrynę, a następnie skonfigurować odpowiednie przekierowania, aby poprawić rankingi SEO.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem, jak łatwo śledzić strony 404 i przekierowywać je w WordPress.

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

Wideo poradnik

Jeśli wolisz pisemne instrukcje, po prostu czytaj dalej.

Metoda 1. Utwórz niestandardową stronę 404 w WordPress bez kodu

Najlepszym i najbardziej przyjaznym dla początkujących sposobem ulepszenia szablonu strony 404 jest użycie wtyczki SeedProd do tworzenia stron.

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

Dzięki tej wtyczce możesz łatwo utworzyć niestandardową stronę 404, korzystając z dołączonych szablonów stron 404.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować wtyczkę SeedProd. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Uwaga: dostępna jest bezpłatna wersja SeedProd, ale będziemy używać wersji Pro, ponieważ zawiera ona szablony stron 404, których potrzebujemy.

Po aktywacji musisz przejść do SeedProd »Ustawienia i wprowadzić klucz licencyjny. Możesz znaleźć te informacje na stronie swojego konta w witrynie SeedProd.

Następnie przejdź do SeedProd » Strony i kliknij przycisk „Ustaw stronę 404” w meta polu „Strona 404”.

Spowoduje to przejście do strony, na której możesz wybrać szablon strony 404.

Istnieją dziesiątki profesjonalnie zaprojektowanych szablonów stron 404, które możesz wybrać, aby szybko rozpocząć pracę.

Aby wybrać szablon, najedź na niego i kliknij ikonę „Znacznika wyboru”. W tym samouczku użyjemy szablonu „Oh No 404 Page”, ale możesz użyć dowolnego szablonu.

Po wybraniu szablonu zostaniesz przeniesiony do kreatora przeciągnij i upuść, w którym możesz zacząć dostosowywać swoją stronę 404.

Po lewej stronie ekranu znajdziesz bloki i sekcje, które możesz dodać do swojej strony 404. Prawa strona strony to podgląd na żywo. Każdy element na stronie można edytować i dostosowywać.

Najpierw dodamy tekst i powiemy użytkownikom, co mają dalej robić. Zamiast po prostu wylądować na stronie 404 i wyjść, możesz skierować odwiedzających do wartościowych treści i dalszych działań do podjęcia.

Aby to zrobić, przeciągnij blok „Tekst” na swoją stronę i kliknij go, aby zmienić tekst.

Następnie zmienimy link do przycisku strony głównej i zamiast tego link do jednej z najcenniejszych treści.

Może to być najpopularniejszy post na Twoim blogu WordPress lub taki, który przynosi największe dochody.

Najpierw przeciągnij nad blokiem „Nagłówek” i dodaj nowy nagłówek.

Następnie przeciągnij nad innym blokiem „Tekst” i wprowadź tekst opisujący Twój artykuł.

Następnie kliknij przycisk, aby wyświetlić ekran edytora przycisków.

Tutaj możesz dostosować tekst, kolor, rozmiar i nie tylko.

Dodaj swoje najpopularniejsze posty do swojej strony WordPress 404

Następnie możesz dodać swoje najpopularniejsze artykuły. Ponieważ te artykuły cieszą się popularnością, istnieje duża szansa, że ​​Twoi odwiedzający znajdą coś, co im się spodoba.

Najłatwiej to zrobić za pomocą wtyczki MonsterInsights. To najlepsze rozwiązanie analityczne dla WordPressa, z którego korzysta ponad 3 miliony stron internetowych.

Dzięki tej wtyczce możesz po prostu dodawać popularne posty w dowolnym miejscu swojej witryny WordPress.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dotyczącym wyświetlania popularnych postów według wyświetleń w WordPress.

Gdy wtyczka zostanie aktywowana i skonfigurowana, wszystko, co musisz zrobić, to dodać jeden krótki kod do swojej strony.

Aby to zrobić, po prostu przeciągnij blok „Shortcode” na swoją stronę.

Następnie wprowadź następujący krótki kod, aby wyświetlić najpopularniejsze posty.

Część theme=“beta” odnosi się do tego, jak będą wyświetlane Twoje popularne posty. Jeśli chcesz zobaczyć, jak wyglądają różne motywy, przejdź do sekcji Informacje » Popularne posty i kliknij „Widżet popularnych postów”.

W sekcji „Wybierz motyw” możesz wyświetlić każdy z motywów i ich nazwy.

Możesz także dodać nagłówek nad popularnymi postami, wykonując te same czynności, co powyżej.

Dodaj formularz kontaktowy do swojej strony WordPress 404

Następnie możesz dodać formularz kontaktowy bezpośrednio do swojej strony 404. Dzięki temu odwiedzający mogą skontaktować się z Tobą, jeśli nie mogą znaleźć tego, czego szukali w powyższych linkach.

Najlepszym sposobem dodania formularza kontaktowego do witryny jest użycie wtyczki WPForms. To najlepsza wtyczka do formularza kontaktowego dla WordPressa, z której korzysta ponad 4 miliony stron internetowych.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak utworzyć formularz kontaktowy w WordPress.

Gdy wtyczka zostanie aktywowana i skonfigurowana, możesz po prostu przeciągnąć blok „Formularz kontaktowy” na swoją stronę.

Następnie wystarczy wybrać formularz kontaktowy z rozwijanej listy.

Musisz najpierw utworzyć formularz kontaktowy, zanim będziesz mógł dodać go do swojej strony 404.

Możesz również dodać blok „Nagłówek” lub „Tekst” nad formularzem kontaktowym.

Wykonaj te same kroki, co powyżej, aby dodać te bloki.

Po zakończeniu wprowadzania zmian kliknij „Zapisz” w prawym górnym rogu strony.

Jeśli chcesz opublikować swoją stronę na żywo, wybierz strzałkę w dół obok „Zapisz” i kliknij „Opublikuj”.

Możesz również zmienić logo i menu nawigacyjne, klikając je i wprowadzając zmiany za pomocą panelu po lewej stronie, a następnie wykonując ten sam proces edycji, co powyżej.

Możesz dalej dostosowywać swoją stronę, dodawać nowe bloki i testować różne układy, aby zobaczyć, co preferują Twoi użytkownicy.

Jeśli jesteś właścicielem sklepu WooCommerce, możesz dostosować swoją stronę 404, wyświetlając popularne produkty, aby zwiększyć sprzedaż.

Aby aktywować nową stronę 404, wróć do SeedProd » Strony , a następnie przełącz przełącznik „Strona 404” na „Aktywny”.

Teraz odwiedzający zobaczą stronę 404 o wysokiej konwersji, zamiast domyślnej opcji.

Wskazówka dla profesjonalistów: możesz śledzić wydajność swojej strony WordPress 404, aby zobaczyć, jak konwertuje i które zmiany są najbardziej przydatne. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować Google Analytics w WordPress.

Metoda 2. Utwórz niestandardową stronę 404 w WordPressie, dodając kod

Ta metoda nie jest tak przyjazna dla początkujących, ponieważ będziesz musiał dodać kod i zmodyfikować pliki motywów WordPress.

Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem dla początkujących dotyczącym wklejania fragmentów z sieci do WordPressa.

Najpierw musisz utworzyć nowy plik w folderze motywu WordPress i nazwać go 404.php . Jeśli Twój motyw ma już plik 404.php , musisz zamiast tego edytować ten plik.

Aby edytować ten plik, musisz połączyć się z kontem hostingowym WordPress za pomocą klienta FTP lub jego narzędzia do zarządzania plikami.

Po połączeniu się ze swoją witryną możesz zobaczyć plik 404.php w folderze motywu WordPress.

Uwaga: przed dostosowaniem motywu WordPress zalecamy utworzenie kopii zapasowej witryny WordPress. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dotyczącym tworzenia kopii zapasowych i przywracania witryny WordPress.

Wyświetlaj najpopularniejsze posty na stronie 404

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować darmową wtyczkę WordPress Popular Posts. To jedna z najpopularniejszych wtyczek do postów dla WordPressa.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz dodać ten tag szablonu do pliku 404.php , w którym chcesz wyświetlać popularne posty.

<?php wpp_get_mostpopular(); ?>

Wyświetlaj najczęściej komentowane posty na stronie 404

Aby dodać najczęściej komentowane posty do Twojej strony WordPress 404, użyjemy tej samej wtyczki, którą aktywowałeś powyżej.

Po prostu dodaj następujący tag szablonu, w którym chcesz wyświetlać najczęściej komentowane posty.

<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>

Możesz również zapoznać się z naszym przewodnikiem, jak wyświetlić najczęściej komentowane posty w WordPressie.

Wyświetl ostatnie posty na stronie 404

Istnieje wiele sposobów wyświetlania najnowszych postów w WordPress.

Najprostszym sposobem jest dodanie tego tagu szablonu w szablonie 404, aby wyświetlić najnowsze posty.

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>

Wyświetlaj losowe posty na stronie 404

Jeśli chcesz wyświetlić losową listę postów w WordPress, możesz po prostu dodać ten kod do szablonu 404, w którym chcesz wyświetlić losową listę postów z Twojej witryny.

<ul>
<?php 
$posts = get_posts('orderby=rand&numberposts=5'); 
   foreach($posts as $post)  ?>
        <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </li>
   <?php  ?>
</ul>

Dodaj miesięczne archiwa za pomocą kompaktowych archiwów

Jeśli masz dużo treści w swojej witrynie, świetnym sposobem na zorganizowanie tego jest pokazanie miesięcznych archiwów.

Tutaj w WPBeginner wyświetlamy nasze miesięczne archiwa na naszej stronie 404 za pomocą wtyczki Compact Archives. Ta wtyczka jest rozwijana i utrzymywana przez nasz zespół.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dotyczącym tworzenia kompaktowych archiwów w WordPress.

Gdy wtyczka zostanie aktywowana i skonfigurowana, po prostu dodaj następujący kod do pliku 404.php .

<p><strong>By Date</strong></p>
<ul>
<?php compact_archive($); ?>
</ul>

Gdy użytkownik wyląduje na Twojej stronie 404, zobaczy Twoje kompaktowe archiwa postów.

Oto jak to się wyświetla na naszej stronie 404.

Przykładowy szablon 404 dla WordPress

Oto przykładowy plik 404.php oparty na domyślnym szablonie strony 404 w motywie WordPress Twenty Twenty-One.

<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();
?>

	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->

	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
			
			<h4>While you're here, check out some of our popular content:</h4>
 
<div class="col1">
<div class="col-header">          
<strong>Popular</strong>
</div>
<?php wpp_get_mostpopular(); ?>
</div>
 
<div class="col2">
<div class="col-header">          
<strong>Comments</strong>
</div>
 <?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
</div>
 
<div class="col3">
<div class="col-header">          
<strong>Recent</strong>
</div>
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 5, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
</div>
			
		</div><!-- .page-content -->
	</div><!-- .error-404 -->

<?php
get_footer();

Porównaj ten szablon 404 z domyślnym szablonem w Twenty Twenty-One.

Zauważysz, że zaraz po formularzu wyszukiwania dodaliśmy nasz niestandardowy kod, aby wyświetlić popularne, najczęściej komentowane i najnowsze posty.

Następnie dodaliśmy niestandardowy CSS do arkusza stylów motywu WordPress, aby podzielić go na kolumny.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dotyczącym łatwego dodawania niestandardowego kodu CSS do witryny WordPress.

.col1, .col2, .col3  
width:30%;
float:left;
padding:0px 10px 10px 10px;
margin:0px;

.col3:after
clear:both;

.col-header  
background:#28303D;
color:#D1E3DD;
margin:0px;
padding:1px;
text-align:center;

To jest wynik końcowy po dodaniu niestandardowego kodu strony 404 powyżej.

Mamy nadzieję, że ten artykuł pomógł Ci ulepszyć szablon strony 404 w WordPress. Możesz również zapoznać się z najlepszymi przykładami projektów stron błędów WordPress 404 i naszymi ekspertami, wybierając najlepsze oprogramowanie do powiadomień web push, aby zwiększyć ruch w Twojej witrynie.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.