Jak zrobić niestandardową stronę 404 w motywie potomnym WordPress?

Bez względu na to, jak dobrze zaprojektowana i zaprojektowana jest Twoja witryna, użytkownicy w pewnym momencie napotkają stronę 404. Może to być coś tak prostego, jak wpisanie adresu URL z błędem pisowni. Na przykład, jeśli masz stronę kontaktową znalezioną pod adresem www.website.com/contact i ktoś próbuje wejść na www.website.com/contacts, istnieje duże prawdopodobieństwo, że zostanie przekierowany na stronę 404. Ponadto dostosowania treści witryny mogą nie zawsze uwzględniać strony, które mogły zostać przeniesione bez przekierowania linków. Miejmy nadzieję, że to doświadczenie nie zdarza się zbyt często Twoim użytkownikom, ale kiedy tak się dzieje, jest to okazja do zaoferowania pomocy i stworzenia czegoś wyjątkowego dla Twojej marki.

Prawdopodobnie nie są Ci obce strony 404 w sieci, więc być może masz już na myśli projekt. Jeśli nie, w wyszukiwaniu „fajnych stron 404 w wyszukiwarce” znajdziesz wszelkiego rodzaju inspiracje. Projekt może być dowolny, od poważnego po zabawny, z dużą ilością tekstu lub minimalistycznym, lub gdzieś pomiędzy.

Poniżej kilka moich ulubionych. Są dobrymi przykładami wykorzystania kreatywności w projektowaniu strony.

Figma

Figma to prosta strona 404, ale grafika bardzo pasuje do punktów wektorowych. Podoba mi się, jakie to proste i odważne; to naprawdę wszystko, co jest potrzebne.

Airbnb

Ten przykład oferuje nieco więcej pod względem treści. Ilustracyjne podejście dodaje element humoru. Obejmuje to niektóre z głównych linków. Jeśli użytkownik popełnił błąd, możliwe, że uda mu się znaleźć to, czego szuka na liście.

PocztaChimp

Projekt jest zawsze fajny na stronie MailChimp, zwłaszcza po niedawnym przeprojektowaniu. Zawiera element humoru zarówno w tekście, jak i ilustracji.

Pobierz motywy Genesis Framework i StudioPress za darmo!

Hostując swoje witryny na Flywheel, będziesz mieć dostęp do ponad 30 motywów WordPress premium (w tym Genesis!) bezpośrednio z naszego zachwycającego pulpitu nawigacyjnego. To ponad 2000 USD, od których możesz zacząć za jedyne 15 USD/miesiąc! Dowiedz się więcej tutaj.

Tworzenie niestandardowej strony 404

Po pierwsze: wszystkie dostosowania powinny być wykonane w motywie potomnym. W ten sposób wszelkie modyfikacje nie zostaną nadpisane przez aktualizacje zwykłego motywu. Ta strona 404 będzie plikiem w motywie potomnym, dokładnie o nazwie 404.php .

Jak dodać zmienne CSS, aby dostosować motywy potomne WordPress?

Zmienne CSS, zwane również niestandardowymi właściwościami CSS, umożliwiają łatwe ponowne wykorzystanie w arkuszach stylów CSS. Jeśli wykonałeś już pracę z motywami potomnymi WordPress, prawdopodobnie robisz dużo sty...

Pamiętaj też, aby zrobić to w środowisku testowym. Podczas zmiany plików motywu zawsze istnieje możliwość wystąpienia błędów składniowych, które mogą spowodować awarię witryny.

1. Utwórz nowy plik

Gdy masz motyw potomny, pierwszym krokiem jest utworzenie nowego pliku, z którym można rozpocząć pracę. Będziesz chciał otworzyć folder, w którym utworzyłeś motyw potomny i dodać plik 404.php .

2. Edytuj plik

Podstawowy przykład

Ten przykład dotyczy strony zawierającej tekst i obraz. Ideą projektową jest tutaj stworzenie czegoś prostego, co wymaga ilustrowanej grafiki.

Wklej następujący kod do strony 404.php . To podstawowy początek. Możesz modyfikować rzeczy do innej struktury, aby naprawdę uczynić ją własną (tj. jeśli nie chcesz paska bocznego, możesz go usunąć).

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>

Jest kilka modyfikacji, które musisz wykonać. Jednym z nich jest zmiana ścieżki do obrazu i dołączenie żądanego tytułu. Nie zapomnij napisać niestandardowej wiadomości, a następnie zapisać zmiany.

Jeśli postępowałeś zgodnie z instrukcjami do tej pory, utworzyłeś niestandardowy szablon z obrazem, wiadomością i standardowym nagłówkiem, paskiem bocznym i stopką. (Możesz mieć to również na innych stronach.)

Podejście widżetowe

Jest to opcjonalne, ale wielu projektantów woli pracować z obszarami widżetów. Łatwiej jest wprowadzać zmiany i jest łatwiejszy w utrzymaniu. Na przykład widżet to skuteczny sposób wyświetlania najnowszych i popularnych artykułów na blogu.

Dodawanie widżetu

Aby dodać widżet do 404.php file , musisz utworzyć nowy widżetowy obszar. Motyw potomny wymaga pliku functions.php , więc nadszedł czas, aby dokładnie sprawdzić, czy motyw potomny go posiada.

W pliku functions.php potrzebny będzie fragment, aby dodać nowy widżet na stronie.

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

Ten fragment kodu dodaje tylko widżet. Aby faktycznie zacząć z niego korzystać, należy wywołać tę funkcję. Zostanie wywołany w pliku 404.php . Zwróć uwagę na lokalizację, w której chcesz umieścić ten obszar widżetów.

Skopiuj i wklej następujący kod w miejscu, w którym chcesz wyświetlać nowe widżety (na przykład po tytule i tekście):

<?php dynamic_sidebar( '404' ); ?>

Po ustaleniu, gdzie ma być wyświetlany nowy obszar widżetów, nadszedł czas, aby dodać zawartość widżetu, przechodząc do opcji Wygląd > Widgety . Tutaj możesz wybrać takie elementy, jak blok HTML, popularne posty lub dowolny inny widżet dla strony 404.

Niezależnie od tego, czy tworzysz coś prostego, czy stronę z wieloma linkami, utworzenie niestandardowej strony 404 jest całkiem proste. Korzystając z motywu potomnego i wykorzystując widżety, istnieją nieograniczone możliwości projektowania.

Szukasz więcej sposobów na dostosowanie swojej witryny? Sprawdź te samouczki:

• Jak dodać zmienne CSS, aby dostosować motywy potomne WordPress?
• Proste dostosowania motywu potomnego Genesis
• Jak tworzyć i używać niestandardowych pól w WordPress