Post Format
2. October 2009

Fehlerseite 404 sinnvoll einsetzen und die 5 letzten Artikel anzeigen in WordPress

Ich habe in einem meiner let­zten Artikel gezeigt, wie man die Fehler­seite 404 mit­tels einer .htac­cess Datei sin­nvoll abfängt und sich seine eigene Fehler­seite auf­bauen kann. Heute will ich auf  dieser Seite meinen let­zten fünf Artikel anzeigen lassen. …

Die 404 Seite ist in meinen Augen eine wichtige Seite, denn wenn der gewün­schte Artikel nicht gefun­den wird, sprich der User kommt von Google und bekommt direkt ohne weit­ere Ankündi­gun­gen eine Fehler­seite auf den Schirm, wird er sich auch kaum die Mühe machen, weiter auf dieser Seite zu suchen und wird sich dem näch­sten Ergeb­nis bei Google zuwenden.

Um genau das zu ver­hin­dern, habe ich den Artikel mit der .htac­cess Datei geschrieben, um dem Google Besucher eine aus­sagekräftige Fehler­mel­dung zu geben und ihn somit vielle­icht ani­mieren zu kön­nen, sich weiter auf der Seite umzuschauen. Diese Entschei­dung soll­ten wir dem Googler so ein­fach wie möglich machen. Aus diesem Grund werde ich euch heute zeigen, wie man die let­zten 5 Artikel auf der Fehler­seite anschaulich darstellt.

Mit der Bas­is­funk­tion­al­ität von Word­Press die let­zten 5 Artikel anzeigen

Mit fol­gen­dem Cod­ing, das ihr ein­fach in die 404.php Datei in eurem The­me­ord­ner kopiert, könnt ihr die let­zten 5 Artikel ganz ein­fach anzeigen lassen:


Unter dem folgenden Links findest Du eine Übersicht der letzten Beiträge.

image Das aus dem Cod­ing resul­tierende Ergeb­nis dieser 404 Seite könnt ihr euch hier auf der linken Seite anschauen. Ein­fach anklicken. Allerd­ings fand ich das Ergeb­nis, grafisch gese­hen, nicht beson­ders ansprechend und habe mir weit­ere Gedanken hierzu gemacht. Während ich so über meine Seite scrollte, ist mir die Box der “Ähnlichen Artikel” ins Auge gefallen und ich habe begonnen die Darstel­lung in die 404.php Datei zu übernehmen

Auf der 404 Seite die let­zten 5 Artikel in eigener Darstel­lung einbauen

image Ich bin über meine Seite gescrollt, nach­dem ich den obi­gen Teil des Artikels cod­ingtech­nisch real­isiert hatte. Allerd­ings gefiel mir die Umset­zung der “Ähnlichen Artikel” auf meiner Seite sehr gut. Ich wollte die let­zten 5 Artikel in der gle­ichen Umset­zung darstellen. Allerd­ings ist das im Stan­dard sehr schwierig, also mußte eine neue 404.php her. Auf der linken Seite, könnt ihr das angestrebte Endergeb­nis sehen.

Um die 404 Seite euren Wün­schen anzu­passen, könnt ihr fol­gen­der­maßen vorgehen:

Der Stan­dar­d­auf­bau der Seite sieht cod­ingtech­nisch so aus:

1. Zusatz­funk­tion, um Con­tent Inhalt der Artikel zu kürzen:

Um die Artikel, bzw. deren Inhalt, also sprich Con­tent zu kürzen, habe ich eine Funk­tion einge­baut, die das übernimmt:


 $word_limit)
  array_pop($words);
  return implode(' ', $words);
}
?>

Dieser Code macht nichts anderes, als den selek­tierten Con­tent des Artikels, auf die ersten 25 Wörter zu beschränken! Damit kann ich den Leser informieren, aber ich überlade ihn nicht mit dem kom­plet­ten Artikel.

2. Aus­gabe des ein­lei­t­en­den Textes

Jetzt geben wir den obi­gen Teil, den Text der Seite an:





Sorry, die angewählte Seite existiert leider nicht.


        Die von dir angeforderte Seite existiert leider nicht oder ist umgezogen. Versuche über die Suchfunktion den von dir gewählten Artikel zu finden.
    

Ich kann dir hier ein paar Alternativen anbieten:

Nach­dem wir jetzt die Funk­tion und die ersten Zeilen der Seite haben, geht es mit der Aus­gabe der let­zten 5 Artikel weiter:

3. Selek­tion der let­zten 5 Artikel von der Daten­bank

Wir starten das Ganze wie bei einer “nor­malen” Selek­tion von Artikeln, mit dem fol­gen­den Coding:



Die letzten 5 Artikel






    
have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; 

$excerpt = get_the_excerpt();
$textaehnlich = string_limit_words($excerpt,20);

Dieses Cod­ing selek­tiert aus eurer Daten­bank ein­fach den Inhalt der let­zten 5 Artikel und die bei­den Vari­ablen $excerpt und $tex­taehn­lich wer­den zuerst mit dem Inhalt der Daten­bank befüllt und dann auf die besagten 25 Wörter gekürzt! Als näch­stes habe ich eine Funk­tion mit den Bildern (Thumb­nails) eingebaut.

4. Thumb­nails (Bilder) der let­zten 5 Artikel mit ausgeben:

Ich habe in meinen Artikel ein Cus­tom Fields / benutzerdefinierte Felder “thumbnail_url” in denen ich das Bild oben rechts aus­gebe. Diese Cus­tom Field, frage ich jetzt im näch­sten Teil der 404.php Seite ab und gebe es aus, wenn es gefüllt ist. Wenn ihr diese Funk­tion­al­ität nicht habt, bzw. wollt, dann könnt ihr das fol­gende Cod­ing ein­fach weglassen:

	//Set Default Thumbnail Image URL's
     $test = get_post_meta($post->ID, 'thumbnail_url', true);
     if($test != ''){
     $aehnlich_thumbnail = "minithumb";
     } else {
     $aehnlich_thumbnail == "";
     }

Aber das abschließende “?>” dürft ihr natür­lich nicht vergessen!

5. zeilen­weise Aus­gabe der let­zten Artikel:

Hier jetzt die eigentliche Aus­gabe der einzel­nen Zeilen. Auch hier habe ich das Ganze in zwei Blöcke aufgeteilt:

mit Bil­daus­gabe:

  • 


    




     -  ..
    

    •

    nur reine Textausgabe:

  • 

     -  ..
    

    •

    Und zum Abschluß, müssen dann die bei­den oben geöffneten divs wieder geschlossen werden.

    

    


    6. CSS – Formatierung:
    

    Ich habe hier noch meine CSS – For­matierung ange­hängt, die müsst ihr dann ein­fach in eure CSS – Datei kopieren:
    

    

    
.aehnlichebox	{
	border-bottom: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;
	background:#FBFBFC;
    padding: 5px;
}

.aehnlichebox h2	{

-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-x-system-font:none;
background:transparent url(img/rip.png) no-repeat scroll 0 80%;
font-size:1.3em;
font-family:arial,helvetica,sans-serif;
font-size:1.5em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:-1px;
line-height:normal;
margin-bottom:0px;
margin-top:0px;
padding-bottom:0;
padding-left:0px;
padding:0 0 0 25px;
}

/* Related Posts */
ol.related-posts {clear:both; text-align:center; margin:10px 0px 0px 0px; padding:0;}
ol.related-posts li{width:120px; float:left; display:inline; margin-right:15px;; padding:0;}
ol.related-posts img{clear:both; padding:5px; background:#F7F7F7; border:1px solid #DDD;}
ol.related-posts a{clear:both; display:block; border:none; text-decoration:none;}
ol.related-posts li{font-size:12px;}

/* Thumbnails aufrufen */
img.thumbnailmini { float: left; width: 50px; height: 50px; margin: 0 10px 0 0; }

/* Thumbnails aufrufen */
img.thumbnailaehn { float: left; width: 50px; height: 50px; margin: 0px 10px 0 0; }

.related_post img {
align:left;
padding: 0 10px 0 0;
}

.related_post ul li{
		border-bottom: 1px solid #f1f1ed;
	  list-style:none inside !important;
	  margin: 0px;
    padding: 5px;
}

    

    Zusam­men­fas­sung:
    

    Ich habe hier jetzt mein Cod­ing Zusam­men­fas­sung angehängt:
    

    Cod­ing ohne Thumbnails:
    

    

     $word_limit)
  array_pop($words);
  return implode(' ', $words);
}
?>

    

    

    Sorry, die angewählte Seite existiert leider nicht.
    

        Die von dir angeforderte Seite existiert leider nicht oder ist umgezogen. Versuche über die Suchfunktion den von dir gewählten Artikel zu finden.
    

Ich kann dir hier ein paar Alternativen anbieten:



    

    Die letzten 5 Artikel
    



    

      
have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;
$excerpt = get_the_excerpt();
$textaehnlich = string_limit_words($excerpt,20);
?>

    • 

       -  ..
      

      • 

      



    

    

    

    



    

    



    

    Cod­ing mit Thumbnails:
    

    

     $word_limit)
  array_pop($words);
  return implode(' ', $words);
}
?>

    

    

    Sorry, die angewählte Seite existiert leider nicht.
    

        Die von dir angeforderte Seite existiert leider nicht oder ist umgezogen. Versuche über die Suchfunktion den von dir gewählten Artikel zu finden.
    

Ich kann dir hier ein paar Alternativen anbieten:



    

    Die letzten 5 Artikel
    



    

      
have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; 

	//Set Default Thumbnail Image URL's
     $test = get_post_meta($post->ID, 'thumbnail_url', true);
     if($test != ''){
     $aehnlich_thumbnail = "minithumb";
     } else {
     $aehnlich_thumbnail == "";
     }
      $excerpt = get_the_excerpt();
      $textaehnlich = string_limit_words($excerpt,20);
	?>

    • 


      




       -  ..
      

      • 

      



    

    

    

    



    

    



    

    Soll­tet ihr Fra­gen oder Anmerkun­gen dazu haben, würde ich mich freuen in den Kom­mentaren darüber zu lesen. Ihr könnt mir aber auch über das Kon­tak­t­for­mu­lar eure Frage zukom­men lassen.
    

    Ich werde in den näch­sten Wochen weit­ere Artikel mit weit­eren Fea­tures für die 404.php schreiben, die ich für sin­nvoll erachte dort anzuzeigen. Hast du oder habt ihr vielle­icht noch irgendwelche Ideen, was man in der 404.php Datei alles anzeigen lassen könnte?
    


    Alter­na­tive Artikel:
      

    1. Kat­e­gorien auf einer eige­nen Seite anzeigen
      2. 

    2. 404 Fehler Seite aufrufen über htac­cess Datei
      3. 

    3. Wie viele nicht gepostete Artikel sind dir schon zum Opfer gefallen
      4. 

    4. Word­Press all com­ments Feed­burner Problematik
      5. 

    5. Heute mal ein Artikel auf einer anderen Seite – crazytoast.de -
      6. 

    					
    
			
					
						
			
	
    
	
		

			
		
			
	
    
	
	
			
		
    
			22 comments		
    

		
      
					
    1. 
		
      Pingback: newstube.de
      
		
      
	
      2. 

	
    2. 
		

	
      3. 

	
    3. 
		
      
						
			
      
								Markus				
      
				05/10/2009 @ 11:35
      
				
				
      
			
      	
		
			
      
				
      Sehr schöner Artikel. So in der Form hab ich es auch. Nur fände ich es sin­nvoller, die Artikel anhand der aufgerufe­nen falschen URL auszule­sen. Oft­mals ist ja nicht arg viel falsch und man kommt durch so eine Suche doch auf die richtige Seite. Lei­der vergess ich diese nette, kleine 4040 Seite regelmäßig^^
      
	
					
			Reply			
      
		
      

	
      4. 

	
    4. 
		
      
						
			
      
								Kim				
      
				05/10/2009 @ 14:31
      
				
				
      
			
      	
		
			
      
				
      Ich habe in meiner 404-Seite eine sim­ple Google-Site-Suche inte­gri­ert, in die die URL-Bestandteile reinge­baut wer­den, so dass der Besucher via Google mal nach­schauen kann, was denn überhaupt irgend­wie passen könnte…
      

      Lieferte bisher auch immer mal wieder zufriedene Leser :-) 
      
	
					
			Reply			
      
		
      

	
      5. 

	
    5. 
		
      
						
			
      
								Mac_BetH				
      
				05/10/2009 @ 22:55
      
				
				
      
			
      	
		
			
      
				
      Nabend zusam­men,
      

      @Gilly: Freut mich, das ich weit­er­helfen kon­nte, soll­ten Prob­leme oder Rück­fra­gen auf­tauchen, weißt du ja wo du mich findest!
      

      @Markus: Ja, da haben wir ja gle­ich Kim am Rohr, der kann uns da vielle­icht ein paar Tipps geben. Freut mich dass dir der Artikel gefällt!
      

      @Kim: Ja das mit der Google Suche kommt noch! PSSSCCHHT! Nicht zuviel ver­raten! Aber das mit den Google Such­be­grif­fen hört sich echt inter­es­sant an! Darf man fra­gen, wie du das abfrägst?
      

      Gruß
      

      Matthias
      
	
					
			Reply			
      
		
      

	
      6. 

	
    6. 
		
      
						
			
      
								Lizzy				
      
				06/10/2009 @ 02:38
      
				
				
      
			
      	
		
			
      
				
      Schöne Anleitung. :-) 
      

      Das erin­nert mich daran, dass ich meine 404-Seite bisher ver­nach­läs­sigt habe.
      

      @Kim: Das mit dem Such­feld ist auch eine gute Idee…
      
	
					
			Reply			
      
		
      

	
      7. 

	
    7. 
		
      
						
			
      
								plerzelwupp				
      
				06/10/2009 @ 07:02
      
				
				
      
			
      	
		
			
      
				
      Alter Fal­ter — da hast Du es Dir aber gegeben. Sehr aus­führlich und illus­tri­ert — Hut ab!
      

      Wie im Vor­fels besprochen, müsste meine 404-Seite auch aufgepeppt wer­den. Bei meinem alten Theme hab ich das gemacht; das neue wurde in diesem Hin­blick ver­nach­läs­sigt.
      
Aber jetzt hab ich ja zwei tolle Anleitun­gen :-) 
      
	
					
			Reply			
      
		
      

	
      8. 

	
    8. 
		
      
						
			
      
								Mac_BetH				
      
				06/10/2009 @ 09:10
      
				
				
      
			
      	
		
			
      
				
      Mor­gen zusammen,
      

      @Lizzy: Freut mich, dass dir der Artikel gefällt und das mit dem Such­feld ist bzgl. der 404 Seite mein näch­ster Punkt auf der Liste. Und ja ich finde die 404 Seite, wie ich ja bere­its schrieb, sehr wichtig, für die Besucher, die den gesuchten Artikel nicht finden. Und den Aufwand um meine Anleitung zu real­isieren ist auch “rel­a­tiv” gering.
      

      @Plerzelwupp: Freut mich echt, und gibt mir echt Auftrieb, dass dir der Artikel gefällt! Ich habe schon in der Ver­gan­gen­heit öfters ver­sucht, mit Cod­ing zu arbeiten, aber irgend­wie woll­ten die nie so ankom­men! Aber mit dem neuen Plu­gin, zum Darstellen des Cod­ings, ist es in meinen Augen wirk­lich besser gewor­den. Ich werde in den näch­sten Tagen auch meine alten Artikel, damit aufpeppen! 
      

      Und einen Anschlag bzgl. “Vorbe­sprechung” habe ich auch schon auf dich vor!
      

      Ich hoffe es geht dir gesund­heitlich wieder etwas besser!
      

      Gruß
      

      Matthias
      
	
					
			Reply			
      
		
      

	
        

	
      • 
		
        
						
			
        
								plerzelwupp				
        
				07/10/2009 @ 14:44
        
				
				
        
			
        	
		
			
        
				
        Dankeschön, es geht gesund­heitlich tat­säch­lich besser und mit­tler­weile kann ich auch wieder feste Nahrung zu mir nehmen und auf  Anschläge kann ich wieder reagieren ;-) 
        

        Dein Code-Darstellungs-Plugin gefällt mir übrigens sehr gut (ich nutze “WP-Syntax”, was ebenso funk­tional ist).
        
	
					
			Reply			
        
		
        

	
        • 

      

      9. 

	
    9. 
		
      
						
			
      
								Arven				
      
				06/10/2009 @ 11:18
      
				
				
      
			
      	
		
			
      
				
      *räus­per* Das ist ja schlim­mer als chinesisch.…lol
      

      Ich habe sowas gar nicht glaube ich…also eine 404 Seite*grübel*
      
	
					
			Reply			
      
		
      

	
      10. 

	
    10. 
		

	
      11. 

	
    11. 
		
      
						
			
      
								Mac_BetH				
      
				07/10/2009 @ 22:32
      
				
				
      
			
      	
		
			
      
				
      @Plerzelwupp: Freut mich, dass du wieder fast der Alte bist! Und das mit fes­ter Nahrung ist schon mal ein gutes Zeichen!
      

      Mein Plu­gin, das ich benutze um das Cod­ing anzuzeigen heißt “WP-CODEBOX Plu­gin” und ich bin echt zufrieden damit! 
      

      Das Einzige was ich mal noch machen müsste ist, meine alten Artikeln durchge­hen und anpassen, bei denen ich Cod­ing ver­wen­det habe! 
      

      Gruß
      

      Matthias
      
	
					
			Reply			
      
		
      

	
      12. 
	
    12. 
		
      Pingback: t3n.de/socialnews
      
		
      
	
      13. 

	
    13. 
		
      
						
			
      
								hombertho				
      
				11/10/2009 @ 12:34
      
				
				
      
			
      	
		
			
      
				
      Sehr schöne Idee und toll umge­setzt. Ich muss zugeben ich mache es mir noch recht ein­fach und mach ein­fach eine redi­rec­tion auf meine Start­seite, wenn es die Seite nicht gibt. Deine Idee hat aber auch was. Werde es mir mal genauer anschauen, wenn ich wieder so richtig da bin.
      
	
					
			Reply			
      
		
      

	
      14. 

	
    14. 
		
      
						
			
      
								Mac_BetH				
      
				11/10/2009 @ 13:43
      
				
				
      
			
      	
		
			
      
				
      Hallo Thomas,
      

      schön das du wieder zurück bist aus deinem Urlaub! Und wie sind die ersten Touren im Net?
      

      Lass dir Zeit, komm mal an und dann kannst du es ja ange­hen! Es kom­men noch ein zwei weit­ere Teile zu der 404 Seite. Dann kannst du alles in einem Aufwasch machen! ;-) 
      

      Gruß
      

      Matthias
      
	
					
			Reply			
      
		
      

	
      15. 
	
    15. 
		
      Pingback: 404-Fehlerseite erstellen - Wordpress, 404, Fehler, 404.php, bearbeiten, benutzerdefinierte Suche - Plerzelwupps Erfahrungen
      
		
      
	
      16. 

	
    16. 
		
      
						
			
      
								Clemens				
      
				01/05/2010 @ 10:40
      
				
				
      
			
      	
		
			
      
				
      Danke, danke =)
      

      Genau nach so einem Artikel hab ich gesucht. Vor allem nach dem let­zten (sinnlosen) Updates der Perma­links lan­den viele User auf der 404-Page!
      

      Nochmals danke!
      
Lg Clemens
      
	
					
			Reply			
      
		
      

	

      17. 
	
    17. 
		
      Pingback: Claudius H. Küttner
      
		
      
	
      18. 
	
    18. 
		
      Pingback: Jeffrey Nigg
      
		
      
	
      19. 

	
    19. 
		
      
						
			
      
								ole				
      
				22/01/2011 @ 11:48
      
				
				
      
			
      	
		
			
      
				
      Hallo! Ich bin auf der Suche nach anpas­sungsmöglichkeiten für die 404 Seite auf diesen super Artikel gestoßen. Soweit klappt auch alles, aber wie bekomme ich die Übersichts­bilder dazu? bisher zeigt er mir nur die Auflis­tungspunkte an. Benötige ich dafür noch ein Plu­gin?
      
Habe die Css und die 404.php genau wie beschrieben angepasst.
      

      Grüße
      
Ole
      
	
					
			Reply			
      
		
      

	
      20. 
	
    20. 
		
      Pingback: ZenToDone
      
		
      
	
      21. 
		
    

		
		
									
    
				
    Leave a Reply 
    
									
    
																			
    Required fields are marked *.
    							
     *
    


    
												

    												
    
							
							

						
    
						This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg