Vytvoření stránky 404 s WordPress a Visual Composer

Nikola Puciriusa Poslední aktualizace 02.09.2021
6 min.
Poslední aktualizace 02.09.2021

Vždy se může stát, že váš web je udržován, jednotlivé stránky nejsou přístupné nebo obsahují chybné odkazy, což často vede k zobrazení stránky 404. To není příjemné, ale díky dobře navrženým chybovým stránkám si můžete návštěvníky udržet. Ukážeme vám, jak to udělat pomocí stránek WordPress a Visual Composer .

Účelem chybové stránky 404 je informovat návštěvníky o chybě, ke které došlo. A přesměrovat je na ty části webu, které stále existují nebo fungují. Tímto způsobem snížíte míru odskočení.

Vlastní stránka 404 je také ideální pro propagaci a vkládání prvků výzvy k akci. To znamená, že může v podstatě plnit stejné funkce jako funkční vstupní a cílová stránka.

Věděli jste to?

Vynálezce World Wide Webu Tim Berners-Lee měl kancelář v místnosti 404 v CERNu (Evropská organizace pro jaderný výzkum), kde byl umístěn první webový server. Chyba 404 byla pojmenována podle něj, protože Tima často nebylo možné najít.

Podíváme se na následující body:

  • Co je to chybová stránka 404?
  • Varianty chyby 404
  • Kdy dochází k chybám 404 
  • Jak opravit chyby 404
  • Dobré a kreativní příklady stránek 404
  • Vytvoření vlastní chybové stránky 404 pomocí WordPress
  • Chybová stránka 404 s Visual Composer vytvořit

Co je to stránka 404?

Stručně popsaná chyba 404 je kód odpovědi protokolu HTTP (Hypertext Transfer Protocol). Znamená to, že server nemůže najít požadovaný zdroj. Nebo ta část cesty k webové stránce, která následuje za znakem "/". V podstatě to znamená, že konkrétní stránka, která se má zobrazit, není k dispozici.

Většinou se zobrazí následující chybová zpráva 404:

  • HTTP 404
  • 404 Not Found / nenalezeno
  • 404
  • Chyba 404 / Chyba
  • 404 Tato stránka neexistuje (Stránka neexistuje)
  • Stránka nebyla nalezena
  • Soubor nebyl nalezen
  • Adresář nebyl nalezen 
  • Požadovaná adresa URL nebyla nalezena
  • ... a podobné varianty

Možné příčiny výskytu chyb 404:

  • Stránka WordPress nebo příspěvek jsou odstraněny nebo přesunuty na jinou stránku bez přesměrování odkazů.
  • Návštěvník zadá název domény nesprávně (chybí písmeno, je tam pravopisná chyba apod.).
  • Dřívější odkazy (které se změnily) jsou stále uvedeny v externích zdrojích.
  • Server/webové stránky se zhroutily, jsou v údržbě nebo mají technické problémy, které způsobují, že se webové stránky nezobrazují správně (například přerušené připojení).

Kromě chyby 404 existují následující stavové kódy HTTP:

  • 100-199 Odpověď: Žádost o příjemce a pokračování ve zpracování
  • 200-299 Úspěšně: Žádost byla úspěšně přijata.
  • 300-399 Přesměrování: Vyžaduje další akci k dokončení požadavku.
  • 400-499 Chyba klienta: Neplatný požadavek nebo požadavek nelze dokončit.
  • 500-599 Chyba serveru: Server nemohl přijmout požadavek.

Jak opravit chyby 404

Na jedné straně prostřednictvím přesměrování přesměrujete návštěvníky přímo na cílové stránky, které co nejvíce odpovídají obsahu původního požadavku. Na adrese RAIDBOXES nepotřebujete další WordPress Plugin pro nastavení přesměrování a pravidel přesměrování. Viz pokyny k přesměrování 301 a 302.

Další možností je najít a opravit nefunkční odkazy, tj. nahradit je nově platným interním zdrojem. Ujistěte se, že všechny interní odkazy vedou na požadované stránky. Požádejte také vlastníky externích zdrojů odkazů, aby změnili všechny nefunkční odkazy.

Dalším tipem je používání uživatelsky přívětivých adres URL a trvalých odkazů - buďte krátcí, používejte malá písmena a popište, kam odkazy vedou. To vám pomůže sledovat nefunkční odkazy a optimalizovat web pro vyhledávače. Viz článek Vnitřní propojení a SEO s WordPress .

Nakonec byste měli vytvořit vlastní stránku 404. To přivede "ztracené" návštěvníky zpět na domovskou stránku nebo na relevantní obsah. Zároveň si nebudou chybu plést s chybou celého webu.

Stránky 404 a SEO

Většina chyb 404 obvykle nemá přímý negativní dopad na výkon nebo hodnocení webových stránek. V horším případě neobsahují přesměrování. Pak je o 88 % pravděpodobnější, že uživatelé web zcela opustí a už se na něj nevrátí, což je nepřímý faktor SEO. Dobrá stránka 404 je spíše o vytvoření lepšího zážitku pro vaše cílové publikum.

Co jsou stránky 404, na které lze cílit

Proto je důležité mít vlastní chybovou stránku 404, která návštěvníky přesměruje zpět na existující části webu. Nyní se podíváme, jaké máte možnosti. Obvyklé a doporučené přístupy k vytváření vlastních stránek 404 jsou následující:

  • Tlačítka Zpět nebo Domů: Dejte publiku možnost vrátit se na dostupné stránky nebo na libovolné místo.
  • Vyhledávací panel: K těmto typům chyb obvykle dochází, když se uživatelé:uvnitř snaží najít konkrétní obsah nebo stránku. Nabídněte jim tedy možnost vyhledávání nebo navrhněte konkrétní vstupní stránky.
  • Kontaktní formuláře: Pokud lidé nemohou najít hledaný obsah, mohou využít kontaktní formulář nebo živý chat a získat pomoc. Nebo pokud potřebují pomoc s jinými věcmi na vašich webových stránkách.
  • Ikony sociálních médií: Vždy je dobré propojit různé platformy sociálních médií, kde lze váš obsah najít a oslovit.
  • Humorné představy: Jedná se o jeden z nejvíce podceňovaných postupů, který je zjevně nedostatečně využíván. Jistě, humor může zmírnit následky (pravděpodobně) negativního vnímání. Zde je několik příkladů.

Vytvoření vlastní stránky 404 pomocí WordPress

Při vytváření stránky 404 máte k dispozici následující možnosti. Pomocí WordPress , pomocí nástroje pro tvorbu webových stránek nebo nástroje pro tvorbu stránek a pomocí vlastního kódu - například HTML. Takto to funguje na webu WordPress :

  1. Přejděte na svůj řídicí panel WordPress
  2. Vyberte oblast "Design" na levé straně
  3. V něm je dílčí položka "Editor
  4. Zkontrolujte, zda vaše stránka WordPress Theme obsahuje "šablonu 404" (Ctrl + F a zadejte "404.php");
  5. Klikněte na odkaz pro šablonu 404 na pravé straně.

Obsah vypadá přibližně takto:

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();

Nyní ji změňte podle svých potřeb. K tomu však potřebujete znalost jazyka HTML. Měli byste také pracovat s podřízenou stránkou Theme, jinak mohou být vaše změny po aktualizaci stránky WordPress Themes opět odstraněny.

404 WordPress Plugins

Nejlepší věc ve světě WordPress je Plugins. Na webu Plugins je k dispozici více než 50 000 bezplatných aplikací pro téměř všechny účely, které si dokážete představit: Pro stránky 404, stránky 301, přesměrování, SEO a mnoho dalšího. Viz oficiální adresářWordPress Plugin .

Vytvoření stránky 404 pomocí Visual Composer

Jedním z nejjednodušších a nejrychlejších způsobů, jak vytvořit stránku 404, je použít nástroj pro tvorbu webových stránek nebo stránek. V tomto příkladu vám ukážeme, jak vytvořit vlastní stránku 404 pomocí Visual Composer pomocí metody drag and drop. Upozorňujeme, že to je možné pouze ve verzi Premium.

Nejprve je třeba stáhnout a nainstalovat web Visual Composer Plugin . Podívejte se na tento videonávod na YouTube:

Youtube

Načtením videa souhlasíte se zásadou ochrany osobních údajů YouTube.
Zjistěte více

Stáhnout video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9DY2FVNHNZd2NvbyIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Jakmile je stránka Plugin nainstalována a aktivována, můžete začít pracovat. Použijte jednu z mnoha šablon. Chcete-li tak učinit, klikněte v editoru frontendu na symbol tržiště. Vyberte možnost Šablony a zadejte "404", abyste našli připravené stránky 404.

Tento návod přesně vysvětluje, jak vytvořit vlastní stránku 404 pomocí Visual Composer :

Youtube

Načtením videa souhlasíte se zásadou ochrany osobních údajů YouTube.
Zjistěte více

Stáhnout video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9hSHg2V3dETnVqTSIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Po dokončení a uložení jednotlivých návrhů stránek 404 je můžete spravovat v editoru. Následující video ukazuje, jak to udělat:

Youtube

Načtením videa souhlasíte se zásadou ochrany osobních údajů YouTube.
Zjistěte více

Stáhnout video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9LeG4xT2hmUGRxayIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Další tipy, jak vytvořit vlastní stránku 404, nejlepší řešení Plugin a inspiraci pro stránky 404 najdete v příspěvku z Visual Composer 404 pages with WordPress .

Příklady dobrých stránek 404

Shromáždili jsme pro vás několik nejkreativnějších chybových stránek 404 - nezávisle na stránkách WordPress a Visual Composer - a můžete se jimi inspirovat. Stránka 404 služby GOG.com je jedním z nejlepších příkladů nestandardního myšlení. A to v pravém slova smyslu:

Ukázka stránky 404 GOG
Stránka GOG.com 404 (Obrázek © gog.com)

Vzhledem k tomu, že se jedná o stránku se zábavnou hodnotou, musela společnost Blizzard splnit vysoký standard, pokud jde o stránku 404. Chladný design se sám o sobě stává klasikou:

Ukázka stránky 404 Blizzard
Blizzard vysílá své pomocníky (Obrázek © Blizzard)

Poslední příklad stránek 404 z webu Slack je velmi jednoduchý, ale přesto překvapivý. Je to krásný příklad kreativity:

Ukázka stránky 404 Slack
Hravé a s animací: Chybová stránka 404 na Slack (Obrázek © Slack )

Závěr na stránkách 404 s WordPress

Nyní víte, jak vytvořit chybovou stránku 404, která návštěvníky zavede na aktivní podstránky vašeho webu. A jak můžete nepříjemnou situaci změnit v něco, co ji minimalizuje nebo dokonce vyřeší. Také to, že existují velmi jednoduché způsoby, jak takovou stránku 404 navrhnout - za předpokladu kreativity a trochy grafických dovedností.

S nástrojem pro tvorbu webových stránek nepotřebujete žádné znalosti programování, abyste nudnou stránku 404 proměnili v něco, co vám zlepší náladu. A/nebo to pomůže vašim návštěvníkům v jejich situaci. Máte dobrý příklad úspěšné chybové stránky 404? Pak se o něj můžete podělit v komentářích.

Vaše dotazy ke stránkám 404

Jaké máte dotazy ohledně chybových stránek 404 s WordPress ? Těšíme se na váš komentář. Zajímají vás aktuální témata o WordPress a WooCommerce? Pak sledujte stránky RAIDBOXES na Twitteru a Facebooku, LinkedIn nebo prostřednictvím našeho newsletteru.

Po studiu - Public Relations a reklamního managementu - pracuje Nikola v marketingovém týmu Visual Composer . Zaměřuje se na copywriting, sociální média a analytiku, zajímá se o psychologii a rozhodovací procesy spotřebitelského chování.

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.