Post Format

2. October 2009

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

Ich habe in einem meiner letzten Artikel gezeigt, wie man die Fehlerseite 404 mittels einer .htaccess Datei sinnvoll abfängt und sich seine eigene Fehlerseite aufbauen kann. Heute will ich auf dieser Seite meinen letzten fünf Artikel anzeigen lassen. …

Die 404 Seite ist in meinen Augen eine wichtige Seite, denn wenn der gewünschte Artikel nicht gefunden wird, sprich der User kommt von Google und bekommt direkt ohne weitere Ankündigungen eine Fehlerseite auf den Schirm, wird er sich auch kaum die Mühe machen, weiter auf dieser Seite zu suchen und wird sich dem nächsten Ergebnis bei Google zuwenden.

Um genau das zu verhindern, habe ich den Artikel mit der .htaccess Datei geschrieben, um dem Google Besucher eine aussagekräftige Fehlermeldung zu geben und ihn somit vielleicht animieren zu können, sich weiter auf der Seite umzuschauen. Diese Entscheidung sollten wir dem Googler so einfach wie möglich machen. Aus diesem Grund werde ich euch heute zeigen, wie man die letzten 5 Artikel auf der Fehlerseite anschaulich darstellt.

Mit der Basisfunktionalität von WordPress die letzten 5 Artikel anzeigen

Mit folgendem Coding, das ihr einfach in die 404.php Datei in eurem Themeordner kopiert, könnt ihr die letzten 5 Artikel ganz einfach anzeigen lassen:

^?View Code PHP

1 2	<p>Unter dem folgenden Links findest Du eine Übersicht der letzten Beiträge.</p> <?php wp_get_archives('type=postbypost&limit=5');?>

Das aus dem Coding resultierende Ergebnis dieser 404 Seite könnt ihr euch hier auf der linken Seite anschauen. Einfach anklicken. Allerdings fand ich das Ergebnis, grafisch gesehen, nicht besonders ansprechend und habe mir weitere 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 Darstellung in die 404.php Datei zu übernehmen

Auf der 404 Seite die letzten 5 Artikel in eigener Darstellung einbauen

Ich bin über meine Seite gescrollt, nachdem ich den obigen Teil des Artikels codingtechnisch realisiert hatte. Allerdings gefiel mir die Umsetzung der “Ähnlichen Artikel” auf meiner Seite sehr gut. Ich wollte die letzten 5 Artikel in der gleichen Umsetzung darstellen. Allerdings ist das im Standard sehr schwierig, also mußte eine neue 404.php her. Auf der linken Seite, könnt ihr das angestrebte Endergebnis sehen.

Um die 404 Seite euren Wünschen anzupassen, könnt ihr folgendermaßen vorgehen:

Der Standardaufbau der Seite sieht codingtechnisch so aus:

^?View Code PHP

 
<?php get_header(); 
 
<?php get_sidebar(); ?>
</div>
 
<div class="footer" style="height:15px;margin-bottom:0;"></div>
 
<?php get_footer(); ?>

1. Zusatzfunktion, um Content Inhalt der Artikel zu kürzen:

Um die Artikel, bzw. deren Inhalt, also sprich Content zu kürzen, habe ich eine Funktion eingebaut, die das übernimmt:

^?View Code PHP

 
<?php get_header(); 
 
function string_limit_words($string, $word_limit)
{
  $words = explode(' ', $string, ($word_limit + 1));
  if(count($words) > $word_limit)
  array_pop($words);
  return implode(' ', $words);
}
?>

Dieser Code macht nichts anderes, als den selektierten Content des Artikels, auf die ersten 25 Wörter zu beschränken! Damit kann ich den Leser informieren, aber ich überlade ihn nicht mit dem kompletten Artikel.

2. Ausgabe des einleitenden Textes

Jetzt geben wir den obigen Teil, den Text der Seite an:

^?View Code PHP

<div class="single_wrap">
    <div class="single_post">
        <h2>Sorry, die angew&auml;hlte Seite existiert leider nicht.</h2>
        Die von dir angeforderte Seite existiert leider nicht oder ist umgezogen. Versuche &uuml;ber die Suchfunktion den von dir gew&auml;hlten Artikel zu finden.
    <!-- /single_post -->
<p>Ich kann dir hier ein paar Alternativen anbieten:</p>
<br />

Nachdem wir jetzt die Funktion und die ersten Zeilen der Seite haben, geht es mit der Ausgabe der letzten 5 Artikel weiter:

3. Selektion der letzten 5 Artikel von der Datenbank

Wir starten das Ganze wie bei einer “normalen” Selektion von Artikeln, mit dem folgenden Coding:

^?View Code PHP

<div class="aehnlichebox">
<h2>Die letzten 5 Artikel</h2><br />
<div class="related_post"><ul>
<?php
 
rewind_posts();
global $more;
$more = 0;
 
$my_query = new WP_Query('cat=0&showposts=5');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; 
 
$excerpt = get_the_excerpt();
$textaehnlich = string_limit_words($excerpt,20);

Dieses Coding selektiert aus eurer Datenbank einfach den Inhalt der letzten 5 Artikel und die beiden Variablen $excerpt und $textaehnlich werden zuerst mit dem Inhalt der Datenbank befüllt und dann auf die besagten 25 Wörter gekürzt! Als nächstes habe ich eine Funktion mit den Bildern (Thumbnails) eingebaut.

4. Thumbnails (Bilder) der letzten 5 Artikel mit ausgeben:

Ich habe in meinen Artikel ein Custom Fields / benutzerdefinierte Felder “thumbnail_url” in denen ich das Bild oben rechts ausgebe. Diese Custom Field, frage ich jetzt im nächsten Teil der 404.php Seite ab und gebe es aus, wenn es gefüllt ist. Wenn ihr diese Funktionalität nicht habt, bzw. wollt, dann könnt ihr das folgende Coding einfach weglassen:

^?View Code PHP

	//Set Default Thumbnail Image URL's  
     $test = get_post_meta($post->ID, 'thumbnail_url', true);
     if($test != ''){ 
     $aehnlich_thumbnail = "<img class='thumbnail thumbnailaehn' alt='minithumb' src='" . get_post_meta($post->ID, 'thumbnail_url', true) . "'/>";
     } else {
     $aehnlich_thumbnail == "";
     }

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

5. zeilenweise Ausgabe der letzten Artikel:

Hier jetzt die eigentliche Ausgabe der einzelnen Zeilen. Auch hier habe ich das Ganze in zwei Blöcke aufgeteilt:

mit Bildausgabe:

^?View Code PHP

<li>
<?php if ($aehnlich_thumbnail != '') { ?>
	<div class="img_related_post"><?php echo $aehnlich_thumbnail; ?></div>
<?php } else { ?>
<?php } ?>
<div class="text_related_post"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> - <?php echo $textaehnlich; ?> ..</div></li>
<div style="clear: both;"></div>
<?php endwhile; ?>
</ul>

nur reine Textausgabe:

^?View Code PHP

<li>
<div class="text_related_post"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> - <?php echo $textaehnlich; ?> ..</div></li>
<div style="clear: both;"></div>
<?php endwhile; ?>
</ul>

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

^?View Code PHP

1 2	</div> </div>

6. CSS – Formatierung:

Ich habe hier noch meine CSS – Formatierung angehängt, die müsst ihr dann einfach in eure CSS – Datei kopieren:

^?View Code CSS

 
.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;
}

Zusammenfassung:

Ich habe hier jetzt mein Coding Zusammenfassung angehängt:

Coding ohne Thumbnails:

^?View Code PHP

<?php get_header(); 
 
function string_limit_words($string, $word_limit)
{
  $words = explode(' ', $string, ($word_limit + 1));
  if(count($words) > $word_limit)
  array_pop($words);
  return implode(' ', $words);
}
?>
 
<div class="single_wrap">
    <div class="single_post">
        <h2>Sorry, die angew&auml;hlte Seite existiert leider nicht.</h2>
        Die von dir angeforderte Seite existiert leider nicht oder ist umgezogen. Versuche &uuml;ber die Suchfunktion den von dir gew&auml;hlten Artikel zu finden.
    <!-- /single_post -->
<p>Ich kann dir hier ein paar Alternativen anbieten:</p>
<br />
<div class="aehnlichebox">
<h2>Die letzten 5 Artikel</h2><br />
<div class="related_post"><ul>
<?php
 
rewind_posts();
global $more;
$more = 0;
 
$my_query = new WP_Query('cat=0&showposts=5');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; 
$excerpt = get_the_excerpt();
$textaehnlich = string_limit_words($excerpt,20);
?>
<li><div class="text_related_post"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> - <?php echo $textaehnlich; ?> ..</div></li>
<div style="clear: both;"></div>
<?php endwhile; ?>
</ul></div>
</div>
</div>
<?php get_sidebar(); ?>
</div>
<div class="footer" style="height:15px;margin-bottom:0;"></div>
<?php get_footer(); ?>

Coding mit Thumbnails:

^?View Code PHP

<?php get_header(); 
 
function string_limit_words($string, $word_limit)
{
  $words = explode(' ', $string, ($word_limit + 1));
  if(count($words) > $word_limit)
  array_pop($words);
  return implode(' ', $words);
}
?>
 
<div class="single_wrap">
    <div class="single_post">
        <h2>Sorry, die angew&auml;hlte Seite existiert leider nicht.</h2>
        Die von dir angeforderte Seite existiert leider nicht oder ist umgezogen. Versuche &uuml;ber die Suchfunktion den von dir gew&auml;hlten Artikel zu finden.
    <!-- /single_post -->
<p>Ich kann dir hier ein paar Alternativen anbieten:</p>
<br />
<div class="aehnlichebox">
<h2>Die letzten 5 Artikel</h2><br />
<div class="related_post"><ul>
<?php
 
rewind_posts();
global $more;
$more = 0;
 
$my_query = new WP_Query('cat=0&showposts=5');
while ($my_query->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 = "<img class='thumbnail thumbnailaehn' alt='minithumb' src='" . get_post_meta($post->ID, 'thumbnail_url', true) . "'/>";
     } else {
     $aehnlich_thumbnail == "";
     }
      $excerpt = get_the_excerpt();
      $textaehnlich = string_limit_words($excerpt,20);
	?>
	<li>
<?php if ($aehnlich_thumbnail != '') { ?>
	<div class="img_related_post"><?php echo $aehnlich_thumbnail; ?></div>
<?php } else { ?>
<?php } ?>
<div class="text_related_post"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> - <?php echo $textaehnlich; ?> ..</div></li>
<div style="clear: both;"></div>
<?php endwhile; ?>
</ul></div>
</div>
</div>
<?php get_sidebar(); ?>
</div>
<div class="footer" style="height:15px;margin-bottom:0;"></div>
<?php get_footer(); ?>

Solltet ihr Fragen oder Anmerkungen dazu haben, würde ich mich freuen in den Kommentaren darüber zu lesen. Ihr könnt mir aber auch über das Kontaktformular eure Frage zukommen lassen.

Ich werde in den nächsten Wochen weitere Artikel mit weiteren Features für die 404.php schreiben, die ich für sinnvoll erachte dort anzuzeigen. Hast du oder habt ihr vielleicht noch irgendwelche Ideen, was man in der 404.php Datei alles anzeigen lassen könnte?

alternative Artikel

Suche in WordPress erweitert und die Fehlerseite aus 404 auch bei der nicht erfolgreichen Suche ausgeben

wordpress

Google Suche in eurer 404.php Datei einbauen

22 comments

Pingback: newstube.de
Gilly
05/10/2009 @ 10:58

Danke für diesen wertvollen Tipp! Werde ich die nächsten Tage mal bei mir umsetzen!
Reply
Markus
05/10/2009 @ 11:35

Sehr schöner Artikel. So in der Form hab ich es auch. Nur fände ich es sinnvoller, die Artikel anhand der aufgerufenen falschen URL auszulesen. Oftmals ist ja nicht arg viel falsch und man kommt durch so eine Suche doch auf die richtige Seite. Leider vergess ich diese nette, kleine 4040 Seite regelmäßig^^
Reply
Kim
05/10/2009 @ 14:31

Ich habe in meiner 404-Seite eine simple Google-Site-Suche integriert, in die die URL-Bestandteile reingebaut werden, so dass der Besucher via Google mal nachschauen kann, was denn überhaupt irgendwie passen könnte…

Lieferte bisher auch immer mal wieder zufriedene Leser
Reply
Mac_BetH
05/10/2009 @ 22:55

Nabend zusammen,

@Gilly: Freut mich, das ich weiterhelfen konnte, sollten Probleme oder Rückfragen auftauchen, weißt du ja wo du mich findest!

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

@Kim: Ja das mit der Google Suche kommt noch! PSSSCCHHT! Nicht zuviel verraten! Aber das mit den Google Suchbegriffen hört sich echt interessant an! Darf man fragen, wie du das abfrägst?

Gruß

Matthias
Reply
Lizzy
06/10/2009 @ 02:38

Schöne Anleitung.

Das erinnert mich daran, dass ich meine 404-Seite bisher vernachlässigt habe.

@Kim: Das mit dem Suchfeld ist auch eine gute Idee…
Reply
plerzelwupp
06/10/2009 @ 07:02

Alter Falter – da hast Du es Dir aber gegeben. Sehr ausführlich und illustriert – Hut ab!

Wie im Vorfels besprochen, müsste meine 404-Seite auch aufgepeppt werden. Bei meinem alten Theme hab ich das gemacht; das neue wurde in diesem Hinblick vernachlässigt.
Aber jetzt hab ich ja zwei tolle Anleitungen
Reply
Mac_BetH
06/10/2009 @ 09:10

Morgen zusammen,

@Lizzy: Freut mich, dass dir der Artikel gefällt und das mit dem Suchfeld ist bzgl. der 404 Seite mein nächster Punkt auf der Liste. Und ja ich finde die 404 Seite, wie ich ja bereits schrieb, sehr wichtig, für die Besucher, die den gesuchten Artikel nicht finden. Und den Aufwand um meine Anleitung zu realisieren ist auch “relativ” gering.

@Plerzelwupp: Freut mich echt, und gibt mir echt Auftrieb, dass dir der Artikel gefällt! Ich habe schon in der Vergangenheit öfters versucht, mit Coding zu arbeiten, aber irgendwie wollten die nie so ankommen! Aber mit dem neuen Plugin, zum Darstellen des Codings, ist es in meinen Augen wirklich besser geworden. Ich werde in den nächsten Tagen auch meine alten Artikel, damit aufpeppen!

Und einen Anschlag bzgl. “Vorbesprechung” habe ich auch schon auf dich vor!

Ich hoffe es geht dir gesundheitlich wieder etwas besser!

Gruß

Matthias
Reply
- plerzelwupp
  07/10/2009 @ 14:44
  
  Dankeschön, es geht gesundheitlich tatsächlich besser und mittlerweile 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 funktional ist).
  Reply
Arven
06/10/2009 @ 11:18

*räusper* Das ist ja schlimmer als chinesisch….lol

Ich habe sowas gar nicht glaube ich…also eine 404 Seite*grübel*
Reply
Mac_BetH
06/10/2009 @ 12:00

Hallo Arven,

doch hast du:
www.kaffeejunkies.at/fred.php

Ich melde mich nachher! Ich helfe dir dann beim programmieren!

Gruß
Matthias
Reply
Mac_BetH
07/10/2009 @ 22:32

@Plerzelwupp: Freut mich, dass du wieder fast der Alte bist! Und das mit fester Nahrung ist schon mal ein gutes Zeichen!

Mein Plugin, das ich benutze um das Coding anzuzeigen heißt “WP-CODEBOX Plugin” und ich bin echt zufrieden damit!

Das Einzige was ich mal noch machen müsste ist, meine alten Artikeln durchgehen und anpassen, bei denen ich Coding verwendet habe!

Gruß

Matthias
Reply
Pingback: t3n.de/socialnews
hombertho
11/10/2009 @ 12:34

Sehr schöne Idee und toll umgesetzt. Ich muss zugeben ich mache es mir noch recht einfach und mach einfach eine redirection auf meine Startseite, 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
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 angehen! Es kommen noch ein zwei weitere Teile zu der 404 Seite. Dann kannst du alles in einem Aufwasch machen!

Gruß

Matthias
Reply
Pingback: 404-Fehlerseite erstellen - Wordpress, 404, Fehler, 404.php, bearbeiten, benutzerdefinierte Suche - Plerzelwupps Erfahrungen
Clemens
01/05/2010 @ 10:40

Danke, danke =)

Genau nach so einem Artikel hab ich gesucht. Vor allem nach dem letzten (sinnlosen) Updates der Permalinks landen viele User auf der 404-Page!

Nochmals danke!
Lg Clemens
Reply
- Mac_BetH
  01/05/2010 @ 22:14
  
  Hallo Clemens,
  
  kein problem, freut mich, dass es gefallen hat!
  
  Gruß
  
  Matthias
  Reply
Pingback: Claudius H. Küttner
Pingback: Jeffrey Nigg
ole
22/01/2011 @ 11:48

Hallo! Ich bin auf der Suche nach anpassungsmöglichkeiten für die 404 Seite auf diesen super Artikel gestoßen. Soweit klappt auch alles, aber wie bekomme ich die Übersichtsbilder dazu? bisher zeigt er mir nur die Auflistungspunkte an. Benötige ich dafür noch ein Plugin?
Habe die Css und die 404.php genau wie beschrieben angepasst.

Grüße
Ole
Reply
Pingback: ZenToDone