publikacja: 15 stycznia 2009, autor: , komentarzy 30 https://wpninja.pl/artykuly/strona-bledu-404-umilamy-widoki-czytelnikom/

Strona błędu 404 – umilamy widoki czytelnikom

Strona błędu 404 – umilamy widoki czytelnikom

Przygotowując nową wersję SajFaj.pl postanowiłem umilić czytelnikom serwisu nawet sytuację zagubienia się na stronie, a raczej sytuację zgubienia strony przez serwer (grunt to zwalić problem na coś, co nie będzie się bronić). W efekcie powstała prosta strona błędu 404, która nie tylko dobrze wygląda (skromnie rzecz ujmując), ale także jest przydatna dla użytkownika, podsuwając mu do przeczytania 5 losowych artykułów z serwisu.

Jak takie cudeńko „odstrzelić” szybko tłumaczę, z góry jednak informuję, że nie taki błąd straszny, jak go kodują.

Skorzystamy z dobrodziejstwa, jakim jest standardowy plik 404.php znajdujący się w folderze naszego szablonu. Plik ten jest ładowany automatycznie, gdy strona o podanym adresie nie została odnaleziona. Jeśli nie posiadamy takiego pliku, nic nie szkodzi – tworzymy nowy plik i nadajemy mu właściwą nazwę. Et voila, nie było tak trudno, prawda? ;)

Rusztowanie, panie majster

Oczywiście teraz musimy całość odpowiednio upiększyć. Musimy stworzyć rusztowanie dla pliku. Chcąc, by nasza strona 404 wyglądała inaczej niż pozostałe strony na blogu, nie wgramy automatycznie plików nagłówka i stopki (header.phpfooter.php), stworzymy je zaś od zera – w środku pliku 404.php.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 
<title>404 - Nie znaleziono</title>
 
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
 
</head>
<body class="body-error">
 
<!-- Tutaj cała reszta kodu -->
 
</body>
</html>

Ot i cała filozofia – pomiędzy znacznikami body możemy teraz stworzyć co nam się tylko podoba, możemy też być pewni, że nic poza tym na stronie się nie pojawi. Zwracam jednakże szczególną uwagę na coś, co wnikliwi zdąrzyli już zaobserwować – otóż znacznik otwierający body posiada klasę body-error. Klasa ta będzie przez nas używana do stylowania strony błędów za pomocą CSS, każdy znacznik bowiem w pliku style.css naszego szablonu dotyczący strony 404 będzie poprzedzony klasą .body-error. Dzięki temu prostemu zabiegowi wszystko będzie się prezentować jak należy i żaden znacznik nie zostanie źle zestylowany.

Każda funkcja WordPressa będzie w powyższym kodzie działać, bowiem plik 404 stanowi integralną część systemu szablonów WP. Tym samym możemy…

Wyświetlić losowe wpisy

By tego dokonać posłużymy się „custom query”, czyli niestandardowym odwołaniem do bazy danych. W dowolnym miejscu naszego 404.php między znacznikami body wklejamy kod:

<?php query_posts('orderby=rand&showposts=5');
if (have_posts()) :
while (have_posts()) :
the_post(); ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<?php endwhile;
endif; ?>

Ta pomniejszona wersja głównej pętli WordPressa wyświetli 5 (showposts=5) losowych (orderby=rand) postów z naszego bloga. Et voila :).

Teraz wystarczy całość zestylować i upiększyć, wypełnić tekstem i gotowe – nasza strona 404 wcale nie jest taka zagubiona, jak normalnie na blogach się spotyka. A co winna taka strona zawierać? Informację o błędzie (bo nie każdy wie, co te cyferki oznaczają), wyszukiwarkę, przycisk powrotny i inne gadżety, które mają użytkownika zachęcić do pozostania na stronie. Ale to inna działka.

Do pracy towarzysze!
Bloggerzy i inni użytkownicy WordPressa – do pracy więc wam trzeba się udać, strony 404 piękne tworzyć pocznijcie, bowiem na dniach do konkursu potrzebne wam będą.

tagi:

Dodaj własny komentarz

Odnośniki z innych stron

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

  1. Krótkie podsumowanie: styczeń 2009

    […] Strona błędu 404 – umilamy widoki czytelnikom Smakowity przepis na pyszną stronę błędu 404. […]

  2. Konkurs na „stronę 404”

    […] było zapowiedziane, tak zostało zrobione – oto ogłaszam konkurs na najlepszą stronę błędu 404 na polskich […]