Utwórz stronę 404 z WordPress i Visual Composer

Nikola Puciriusa Ostatnia aktualizacja 02.09.2021
6 Min.
Ostatnia aktualizacja 02.09.2021

Zawsze może się zdarzyć, że Twoja witryna jest w trakcie konserwacji, poszczególne strony są niedostępne lub zawierają błędne linki, co często prowadzi do wyświetlenia strony 404. Nie jest to miłe, ale z dobrze zaprojektowanymi stronami błędów możesz nadal utrzymać swoich odwiedzających. Pokażemy Ci jak to zrobić za pomocą WordPress i Visual Composer .

Celem strony błędu 404 jest poinformowanie odwiedzających o błędzie, który wystąpił. I przekierować ich do tych części witryny, które nadal istnieją lub funkcjonują. W ten sposób obniżasz współczynnik odrzuceń.

Niestandardowa strona 404 jest również idealna do promowania i wstawiania elementów call-to-action. Oznacza to, że może on w zasadzie pełnić te same funkcje co funkcjonujący landing page i strona docelowa.

Czy wiesz, że?

Wynalazca World Wide Web Tim Berners-Lee miał biuro w pokoju 404 w CERN (Europejska Organizacja Badań Jądrowych), gdzie znajdował się pierwszy serwer sieciowy. Błąd 404 został nazwany jego imieniem, ponieważ Tim często nie mógł zostać znaleziony.

Zwracamy uwagę na następujące kwestie:

  • Co to jest strona błędu 404?
  • 404 Warianty błędów
  • Kiedy występują błędy 404 
  • Jak naprawić błędy 404
  • Dobre i kreatywne przykłady dla stron 404
  • Utwórz własną stronę błędu 404 z WordPress
  • Strona błędu 404 z Visual Composer utwórz

Co to jest strona 404?

Krótko opisując, błąd 404 jest kodem odpowiedzi Hypertext Transfer Protocol (HTTP). Oznacza to, że serwer nie może znaleźć żądanego źródła. Lub ta część ścieżki do strony internetowej, która znajduje się po "/". Zasadniczo oznacza to, że określona strona, która ma zostać wyświetlona, nie jest dostępna.

W większości przypadków komunikat o błędzie 404 jest wyświetlany w następujący sposób:

  • HTTP 404
  • 404 Not Found / nie znaleziono
  • 404
  • 404 Błąd / Błąd
  • 404 Ta strona nie istnieje (Strona nie istnieje)
  • Strona nie została znaleziona
  • Plik nie został znaleziony
  • Nie znaleziono katalogu 
  • Nie znaleziono żądanego adresu URL
  • ... i podobne warianty

Możliwe powody występowania błędów 404:

  • Strona lub post WordPress zostaje usunięty lub przeniesiony na inną stronę bez przekierowania linków
  • Odwiedzający wpisuje nazwę domeny niepoprawnie (brak litery, błąd ortograficzny itp.)
  • Poprzednie linki (które uległy zmianie) są nadal wymienione w źródłach zewnętrznych
  • Serwer/strona uległa awarii, jest w trakcie konserwacji lub ma problemy techniczne, które powodują, że strona nie jest wyświetlana prawidłowo (np. przerwane połączenie).

Oprócz błędów 404, istnieją następujące kody statusu HTTP:

  • 100-199 Odpowiedź: Żądanie odbiorcy i dalsze przetwarzanie
  • 200-299 Pomyślnie: Żądanie powiodło się i zostało zaakceptowane
  • 300-399 Przekierowanie: Wymaga dalszych działań w celu zakończenia żądania.
  • 400-499 Błąd klienta: Nieprawidłowe żądanie lub żądanie nie może zostać wykonane.
  • 500-599 Błąd serwera: Serwer nie mógł przyjąć żądania

Jak naprawić błędy 404

Z jednej strony, dzięki przekierowaniom przekierowujesz odwiedzających bezpośrednio na strony docelowe, które jak najdokładniej odpowiadają treści oryginalnego żądania. Na stronie RAIDBOXES nie jest potrzebna dodatkowa strona WordPress Plugin do ustawiania przekierowań i reguł przekierowań. Zobacz instrukcje dotyczące przekierowań 301 i 302.

Inną możliwością jest odnalezienie i naprawienie zepsutych linków - czyli zastąpienie ich na nowo obowiązującym źródłem wewnętrznym. Upewnij się, że wszystkie linki wewnętrzne prowadzą do pożądanych stron. Poproś również właścicieli zewnętrznych źródeł linków o zmianę wszystkich uszkodzonych linków.

Kolejną wskazówką jest używanie przyjaznych dla użytkownika adresów URL i permalinków - utrzymuj je krótkie, używaj małych liter i opisuj, do czego prowadzą linki. Pomoże Ci to śledzić wszelkie niedziałające linki i zoptymalizować Twoją stronę pod kątem wyszukiwarek. Zobacz artykuł Linkowanie wewnętrzne i SEO z WordPress .

Na koniec należy utworzyć niestandardową stronę 404. To doprowadzi "zagubionych" odwiedzających z powrotem na stronę główną lub do odpowiednich treści. Jednocześnie nie pomylą oni błędu z awarią całej witryny.

Strony 404 i SEO

Większość błędów 404 zazwyczaj nie ma bezpośredniego negatywnego wpływu na wydajność lub ranking witryny. W najgorszym przypadku nie zawierają one przekierowań. Wówczas użytkownicy są o 88% bardziej skłonni do całkowitego opuszczenia strony i niepowracania na nią - co jest pośrednim czynnikiem SEO. Dobra strona 404 jest bardziej o tworzeniu lepszego doświadczenia dla odbiorców docelowych.

Co stanowi docelową stronę 404?

Dlatego ważne jest, aby mieć niestandardową stronę błędu 404, która przenosi odwiedzających z powrotem do istniejących części witryny. Przyjrzyjmy się teraz, jakie masz opcje. Wspólne i zalecane podejścia do tworzenia niestandardowych stron 404 są:

  • Przyciski wstecz lub home: Daj swoim odbiorcom możliwość powrotu do dostępnych stron lub do dowolnej lokalizacji.
  • Pasek wyszukiwania: Zazwyczaj tego typu błędy występują, gdy użytkownicy:wewnątrz próbują znaleźć konkretną treść lub stronę. Zaoferuj im więc opcję wyszukiwania lub zaproponuj konkretne strony docelowe.
  • Formularze kontaktowe: Ludzie mogą skorzystać z formularza kontaktowego lub czatu na żywo, aby uzyskać pomoc, jeśli nie mogą znaleźć treści, których szukają. Lub jeśli potrzebują pomocy z innymi rzeczami na Twojej stronie.
  • Ikony mediów społecznościowych: Zawsze dobrze jest połączyć różne platformy mediów społecznościowych, na których można znaleźć i dotrzeć do Twoich treści.
  • Humorystyczne obrazowanie: Jest to jedna z najbardziej niedocenianych praktyk, która jest wyraźnie niedostatecznie wykorzystywana. Z pewnością humor może rozładować skutki (prawdopodobnie) negatywnego postrzegania. Oto kilka przykładów za chwilę.

Utwórz własną stronę 404 z WordPress

Masz następujące możliwości tworzenia strony 404. Za pomocą WordPress , za pomocą kreatora stron internetowych lub kreatora stron oraz za pomocą własnego kodu - takiego jak HTML. Tak to działa w przypadku WordPress :

  1. Wejdź na stronę WordPress Dashboard
  2. Wybierz obszar "Projektowanie" po lewej stronie
  3. W tym miejscu w podpunkcie "Edytor
  4. Sprawdź, czy Twoja strona WordPress Theme zawiera "szablon 404" (Ctrl + F i wpisz "404.php");
  5. Kliknij link do szablonu 404 po prawej stronie.

Treść wygląda mniej więcej tak:

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(); ?>
		</div><!-- .page-content -->
	</div><!-- .error-404 -->
<?php
get_footer();

Teraz zmień je zgodnie z własnymi potrzebami. Do tego potrzebna jest jednak znajomość HTML. Powinieneś również pracować z dzieckiem Theme, w przeciwnym razie twoje zmiany mogą zostać ponownie usunięte po aktualizacji WordPress Themes .

404 WordPress Plugins

Najlepszą rzeczą w świecie WordPress jest Plugins. Istnieje ponad 50.000 darmowych stron Plugins do prawie każdego celu, jaki można sobie wyobrazić: Dla stron 404, stron 301, przekierowań, SEO i wielu innych. Zobacz oficjalny katalogWordPress Plugin .

Tworzenie strony 404 z Visual Composer

Jednym z najprostszych i najszybszych sposobów na stworzenie strony 404 jest użycie kreatora stron. W tym przykładzie pokazujemy, jak stworzyć niestandardową stronę 404 z Visual Composer , używając metody przeciągnij i upuść. Zwróć uwagę, że jest to możliwe tylko w wersji premium.

Najpierw należy pobrać i zainstalować stronę Visual Composer Plugin . Zobacz ten film instruktażowy na YouTube:

YouTube

Wczytując ten film, akceptujesz politykę prywatności YouTube.
Learn More

Załaduj video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9DY2FVNHNZd2NvbyIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Jak tylko Plugin zostanie zainstalowany i aktywowany, możesz rozpocząć pracę. Użyj jednego z wielu szablonów. Aby to zrobić, kliknij na symbol rynku w edytorze frontend. Wybierz Szablony i wpisz "404", aby znaleźć gotowe strony 404.

Ten tutorial wyjaśnia dokładnie jak stworzyć niestandardową stronę 404 za pomocą Visual Composer :

YouTube

Wczytując ten film, akceptujesz politykę prywatności YouTube.
Learn More

Załaduj video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9hSHg2V3dETnVqTSIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Po zakończeniu i zapisaniu indywidualnych projektów stron 404 możesz nimi zarządzać w edytorze. Poniższy film pokazuje, jak to zrobić:

YouTube

Wczytując ten film, akceptujesz politykę prywatności YouTube.
Learn More

Załaduj video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9LeG4xT2hmUGRxayIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Aby uzyskać więcej wskazówek na temat tworzenia niestandardowej strony 404, najlepszych rozwiązań Plugin i trochę inspiracji dla stron 404, sprawdź post z Visual Composer 404 strony z WordPress .

Przykłady dobrych stron 404

Zebraliśmy kilka najbardziej kreatywnych stron błędu 404 - niezależnych od WordPress i Visual Composer - abyś mógł czerpać z nich inspirację. Strona 404 GOG.com jest jednym z najlepszych przykładów myślenia nieszablonowego. I to w najprawdziwszym tego słowa znaczeniu:

404 Strona przykładowa GOG
Strona 404 serwisu GOG.com (Obraz © gog.com)

Ponieważ jest to strona o wartości rozrywkowej, Blizzard musiał spełnić wysokie wymagania dotyczące strony 404. Fajny design staje się klasyką samą w sobie:

404 Strona przykładowa Blizzard
Blizzard wysyła swoich pomocników (Image © Blizzard)

Ostatni przykład stron 404 z Slack jest super prosty, ale wciąż zaskakujący. Jest to piękny przykład kreatywności:

Przykładowa strona 404 Slack
Zabawna i z animacją: Strona błędu 404 z Slack (Image © Slack )

Wnioski na stronach 404 z WordPress

Teraz już wiesz, jak stworzyć stronę błędu 404, która poprowadzi Twoich odwiedzających do aktywnych podstron Twojej witryny. I jak możesz zmienić złą sytuację w coś, co zminimalizuje lub nawet rozwiąże irytację. Również to, że istnieją bardzo proste sposoby na zaprojektowanie takiej strony 404 - pod warunkiem kreatywności i odrobiny umiejętności graficznych.

Dzięki kreatorowi stron internetowych jako narzędziu, nie potrzebujesz żadnej wiedzy programistycznej, aby zmienić nudną stronę 404 w coś, co wprawi Cię w dobry nastrój. I / lub, że pomaga odwiedzającym w ich sytuacji. Czy masz dobry przykład udanej strony błędu 404? Więc nie krępuj się i podziel się nim w komentarzach.

Twoje pytania dotyczące stron 404

Jakie masz pytania dotyczące stron błędu 404 z WordPress ? Czekamy na Twój komentarz. Czy interesują Cię aktualne tematy dotyczące WordPress i WooCommerce? Następnie śledź RAIDBOXES na Twitterze, Facebooku, LinkedIn lub poprzez nasz newsletter.

Po studiach - Public Relations i Zarządzanie Reklamą - Nikola pracuje w zespole marketingowym Visual Composer . Zajmuje się copywritingiem, social media i analityką, interesuje się psychologią i procesami decyzyjnymi zachowań konsumenckich.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.