Kort om: En riktigt bra 404 – page not found, alltså

Många har frågat hur jag gjort min nya lite smartare felsida. (Posten är uppdaterad, upplänkad och lätt redigerad.)

Vad som gör den smart?

• Den skickar rätt felkod, så även maskiner får klart för sig att det är en sida som inte finns
• Den förklarar för läsaren att sidan inte finns, men den gör det på ett trevligt och förhoppningsvis begripligt sätt.
• Den levererar ett antal begripliga råd om vad man kan göra för att lösa problemet.
• Den hänvisar till en söksida, som också försöker vara smart. Eftersom jag bloggar på mer än ett ställe kanske man rört ihop det – då är det bra att kunna söka brett. Alltså hänvisar jag till en samlad sök för både den här sajten och mindpark.se.
• För att besökaren alltid ska ha något att klicka på använder jag pluggen Popular post för att lista de fem populäraste posterna från den senaste månaden.
• Den är tydlig med vad man ska göra om man ändå inte är nöjd, och den räds inte att skriva ut mailadressen. Hey, problem med spam löser man med bra filter, inte genom att göra det svårt för den som vill kontakta dig.
• Men smartast av allt är nog att den använder en Google-funktion för att försöka klura ut vad du egentligen var ute efter. Testa tex att klicka på jardenberg.se/livestream eller jardenberg.se/statestik. Ursmart. Kallas för ”Enhance 404 widget” och tar bara tre klick att fixa. (Däremot kan det ta ett tag innan du ser någon effekt av den. Ha lite tålamod, låt den ligga några veckor.)

Den bygger på WordPress (kräver egen installation, alltså inte wordpress.com), temat Thesis – och dess fil för anpassade funktioner (‘custom_functions.php‘), en plugin och en kodsnippet från google. Här är koden jag snickrade ihop och klistrade in i min allt matigare funktionsfil…

 
/* better 404 */
function my_404_title() 
{
echo "Hoppsan, den sidan verkar inte finnas (404)";
}
 
remove_action('thesis_hook_404_title', 'thesis_404_title');
add_action('thesis_hook_404_title', 'my_404_title');	
 
function custom_404_page() { ?>
 
<h3>Men det finns ingen anledning till panik, det löser sig</h3>
<ul>
<li>For real, <a href="http://www.youtube.com/watch?v=EOyUevGG9pQ" target="_blank"> det löser sig...</a></li>
<li>Backa tillbaka till där du kom ifrån och prova igen.</li>
<li>Gå till <a href="http://jardenberg.se">startsidan</a> och hitta något annat spännande.</li>
<li>Kolla in söksidan på <a href="http://jardenberg.se/sok/">jardenberg.se/sok/</a> - där kan du söka på både den här sajten och mindpark.se samtidigt.</li>
<li>Eller så letade du kanske efter någon av de mest populära posterna (senaste 30 dagarna) här på sajten? <br />
<?php if (function_exists('WPPP_show_popular_posts')) WPPP_show_popular_posts( "title=&list_tag=ol&number=5&days=30&format=<a href='%post_permalink%' title='%post_title_attribute%'>%post_title% (%post_views% views)</a>" ); ?>
</li>
<li>Om inget annat funkar, maila till <a href="mailto:joakim@jardenberg.com">joakim@jardenberg.com</a> och fråga var i H-E sidan tagit vägen.</li>
</ul>
<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'sv';
  var GOOG_FIXURL_SITE = 'http://jardenberg.se'
</script>
<script type="text/javascript"
  src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script>
 
<?php }
 
remove_action('thesis_hook_404_content', 'thesis_404_content');
add_action('thesis_hook_404_content', 'custom_404_page');
/* better 404 */

Även om du inte har exakt samma setup som jag så är tipsen säkert nyttiga, bara att anpassa lite… Ni kanske kan hjälpa varandra i kommentarerna – eller så googlar du, tex ger sökningen wordpress 404 ett bra resultat. (Om du vill se något kul så testa polopoly 404. Nyttigt?)

Mer läsning?

• Google med tips om en bra 404
• Och skomakarens barn… http://www.google.com/fail
• Wikipedia för den som vill läsa mer om 404:an, och med bra länktips
• Smashing magazine. Alltid bäst. Mest humor och snygg design, men väldigt inspirerande.
• Det finns hur mycket läsning som helst. En runda på Pusha ger dig säkert mer inspiration. Rock on, och dela med dig.

Taggat som: 404, funktioner, teknik, thesis, utveckling, webb, Wordpress