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

Strona błędu 404 – umilamy widoki czytelnikom


Warning: Trying to access array offset on false in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/functions.php on line 159
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:

Komentarze

  1. Maciej Płoński 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Jedna rzecz – dosyć popularne jest error 404 – strona nie została odnaleziona, które nie wygląda zbyt dobrze. Ja u siebie od pewnego czasu stworzyłem error 404 inny niż u wszystkich ;-)

    odpowiedz
  2. Maciej Płoński 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Oczywiście miało być Ja pewien czas temu stworzyłem…

    odpowiedz
  3. Zacol 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Całkiem przyjemnie to wygląda. Przyjdzie czas, że będzie trzeba pomyśleć o czymś takim na swojej stronie, ale teraz lepiej będzie jak poprawię działanie podstawowych funkcji ;)

    Swoją drogą to SajFaj, które tutaj widzimy, to wersja po odpicowaniu? Szczerze, nie pamiętam jak wyglądała pierwotna wersja. Liczę cały czas na jakieś porównanie wersji pierwotnej i odpicowanej, oraz jakieś smaczki.

    odpowiedz
  4. Łukasz Horodecki 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Zamiast dłubać można użyć wtyczki Dunstan-style Error Page i serwować zbłąkanym odwiedzającym coś w ten deseń.

    odpowiedz
  5. Flanker 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Ja akurat nie jestem zwolennikiem wgrywania wtyczki dla każdej małej pierdoły. Jeśli mi się uda, to wolę wprowadzić to co chcę w pliku 404.php

    odpowiedz
  6. Wojciech N. Usarzewicz 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Ludzie, a gdzie radosna twórczość i woń dzikiego zachodu, gdzie wszystko trzeba było robić samemu? Dzisiaj się tak wszyscy rozleniwiają i każdą pierdołę wtyczką chcą usprawniać. A potem HEAD jest większe niż pliki CSS w moich tajnych projektach (a te przekraczają grubo ponad dwa tysiące linijek lol).

    odpowiedz
  7. Zacol 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    ^Patrz mów komentarz wyżej. Trochę mi się pomyliło. Myślałem, że to SajFaj miało zostać odpicowane ;p Wybaczcie pomyłkę. Moja pamięć ostatnio płata mi figle i psikusy.

    odpowiedz
  8. Damian 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    moja jest dziwna ^^

    odpowiedz
  9. Łukasz 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Strony 404 piękne tworzyć pocznijcie, bowiem na dniach do konkursu potrzebne wam będą.

    O lubię konkursy :D

    odpowiedz
  10. Szymon Skulimowski 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    O, widzę, że znalazł się jeden odważny co dotrwał dzielnie do końca artykułu. :-)

    odpowiedz
  11. glabek94 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    No i warto dać link do Pajacyka :) .

    odpowiedz
  12. Wojciech N. Usarzewicz 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Ee, jako designer stwierdzam, iż nie komponowałoby się to odpowiedno z ogólnym wyglądem jakiejkolwiek strony błędów panie Glabek :P

    odpowiedz
  13. kavillock 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    panie autorzu :P to chyba ironia byla ale ja bym tam wrzucił miliony reklam i popupów i takie tam (to też ironia)

    odpowiedz
  14. glabek94 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Eee tam ;) . Daje się tekst w stylu „Zaglądałeś? Nie? No to na co czekasz :)” i mamy mały. Ew. sam link zawsze się gdzieś wsadzi.

    odpowiedz
  15. aniec2 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Linki mi się nie ładują a z chęcią zobaczyłbym jak to wygląda w praktyce.

    odpowiedz
  16. Wojciech N. Usarzewicz 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Na razie się nie ładują, bo była awaria – nie wiadomo tylko czy w serwerowni w Dallas, TX, DNS’ach WHB w Stanach, czy w DNS’ach w Home.pl. Choć serwerownię wykluczam, bowiem jedna strona na serwerze chodzi, czyli ktoś popsuł DNS’y heh :P. Cierpliwości, to ja jestem stratny mając 2 niedziałające strony he he

    odpowiedz
  17. Tomek 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Ja kiedyś pisałem o aspekcie humorystycznym ;) http://ittechblog.pl/2007/11/15/404-nie-odnaleziono-strony/ a sam mam np. http://ittechblog.pl/okurka ;)

    odpowiedz
  18. aniec2 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Już działa. Obejrzałem i chyba zrobię sobie podobną stronę 404.

    odpowiedz
  19. Custom 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Można także dostać ładne stronki 404 od Google :)
    Jednak nie przydadzą się one, jeśli w naszym centrum „Google-webmasters” nie zaakceptujemy naszego sitemapa :)

    odpowiedz
  20. Tomek 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    @Custom: Gdzie dokładnie te 404 google mamy?

    odpowiedz
  21. Dominik Koza 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Dzięki, skorzystałem.

    odpowiedz
  22. Jacek Krużycki 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Ha! Zobaczcie sami jak wygląda moja strona 404 :)

    odpowiedz
  23. Szymon Skulimowski 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    @Custom: Gdzie dokładnie te 404 google mamy?

    Google Webmaster Tools / Tools / Enhance 404 pages
    Nie miałem okazji jeszcze z tego korzystać.

    odpowiedz
  24. Krótkie podsumowanie: styczeń 2009 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

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

    odpowiedz
  25. Zacol 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Ciekawe kiedy będzie konkurs o którym mowa w tym wpisie :)

    odpowiedz
  26. Konkurs na „stronę 404” 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

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

    odpowiedz
  27. Mahavatar 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Możemy, stosować się do tego artykułu, lub dla osób które nie znają za bardzo składni pisania i działania kodu źródłowego: http://www.admin.exploracje.com/siedem-wtyczek-aby-blad-404-byl-przyjazny-dla-uzytkownika/ .Za pomocą wtyczek można zdziałać przecież to samo :)

    odpowiedz
  28. Nomex 15 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Dziś znalezione w necie. Przyznam, że niektóre są fantastyczne.
    http://www.instantshift.com/2009/03/24/creative-404-error-pages-around-for-inspiration/

    odpowiedz
  29. Mariusz 13 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Naprawdę, niektóre strony są prześwietne. A czy zastanawialiście się kiedyś, jak śledzić takie strony z pomocą Google Analytics? Zrobienie szablonu strony błędu to jedno, ale też trzeba się wziąć za eliminację ślepych linków. Dzięki GA można sprawdzić, skąd trafiają do na „ślepi” użytkownicy:) Więcej na ten temat na naszym bogu: http://bit.ly/hJiBFW

    odpowiedz
  30. SpeX 13 lat temu:
    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43

    Wiem iż wpis trochę stary, ale dziś znalazłem:
    http://proteys.info/404/

    odpowiedz

Dodaj własny komentarz


Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 95

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 […]