Frameworks – Eine Übersicht, Vor- und Nachteile

Wenn man sich aktuell mit Webentwicklung beschäftigt, begegnet man einer Thematik immer öfter, den sogenannten Frameworks. Nur ein Trend? Bringt das Vorteile, oder eher nicht? Mit diesen Fragen und noch ein weniger mehr, möchte ich mich heute beschäftigen.

Man stellt sich vor, man arbeitet jeden Tag mit derselben Vorgehensweise. Irgendwann fragt man sich zwangsläufig, ob das nicht einfacher, kürzer und schneller geht. Sicher haben so auch die ersten Überlegungen bei der Entstehung sämtlicher Frameworks begonnen, aber ist schneller gleich besser? Was ist ein Framework genau?

An dieser Stelle zitiere ich zunächst mal den einleitenden Satz von Wikipedia:

»Ein Framework (englisch für Rahmenstruktur) ist ein Programmiergerüst, das in der Softwaretechnik, insbesondere im Rahmen der objektorientierten Softwareentwicklung sowie bei komponentenbasierten Entwicklungsansätzen, verwendet wird … «

Aha, Rahmen also. Wie jetzt Rahmen? Okay, schauen wir und noch eben die Beschreibung an, dort ist zu lesen:

»Ein Framework ist selbst noch kein fertiges Programm, sondern stellt den Rahmen zur Verfügung, innerhalb dessen der Programmierer eine Anwendung erstellt, wobei u. a. durch die in dem Framework verwendeten Entwurfsmuster auch die Struktur der individuellen Anwendung beeinflusst wird.«

Quelle: wikipedia.org

Das klingt schon verständlicher. Frameworks sind also Gerüste oder Rahmen, die wir nach Belieben einsetzen dürfen. Man könnte auch sagen, ein Framework ist ein Werkzeug zur Verallgemeinerung von Strukturen, um den Quellcode einfacher schreiben zu können, zu entwickeln und auch beliebig wiederzuverwenden. Dieser Code besteht meist aus Blöcken, man könnte diese auch Bausteine nennen, die nach Notwendigkeit verwendet werden.

Solche Frameworks in so gut wie allen Auszeichnungs- Skript- und Programmiersprachen.

frameworks

Abbildung bzw. Logos, einiger beliebten und weitverbreiteten Frameworks.

Hier finden sich Vertreter der Sprachen HTML & CSS, JavaScript und PHP.

 

Wie alles andere auch hat ein Framework natürlich Vor-und Nachteile. Diese schwanken je nach Einsatzbereich, nachfolgende Liste ist aber meist gültig.

 

Vorteile von Frameworks

  • Kosten

Die meisten populären Frameworks sind kostenlos verfügbar und an keine Lizenzbeschränkungen gebunden (von ein paar Ausnahmen abgesehen). Das ist nicht nur für die Beschaffungskosten der Entwickler gut, dies schlägt sich auch auf den Preis für den Endkunden nieder. Selbst mächtige PHP-Frameworks sind meist kostenlos verfügbar.

  • Dokumentation, Community & Unterstützung

Frameworks verfügen meist über eine umfangreiche Dokumentation (je nachdem, an wen sich das System richtet, mehr oder minder umfangreich), einem Support-Team oder einer großen Community. So findet man relativ schnell Antworten und auch entsprechende Hilfe.

Auf der Herstellerseite sind auch immer viele praktische Anwendungsbeispiele zu sehen, was auch bei der Entscheidung für das passende System wichtig und hilfreich ist.

  • Sicherheit

Bei der Webentwicklung immer ein Thema, so auch bei Frameworks. Für weitverbreitete Systeme ist Sicherheit und auch eine kompetente, zügige Reaktion auf Sicherheitslücken unabdingbar. Wer sich hier Fehler leistet, verliert garantiert Nutzer und riskiert den guten Ruf. Hier kommt als Nebeneffekt ein weiterer Vorteil zu tragen. Steckt eine große Community hinter dem Framework, arbeitet ein Teil der Nutzer meist mit an der Lösung von Sicherheitsschwächen. So fungiert die Community auch als Tester und gleichzeitig Mitentwickler. So werden gefundene Schwachstellen oft sofort gemeldet und so auch relativ schnell wieder behoben.

  • Geschwindigkeitsvorteil

Geschwindigkeit nicht im Sinne von Arbeitsgeschwindigkeit, sondern der reinen Entwicklungszeit. Die eigentliche Arbeit, also unzählige Zeilen Code zu schreiben, entfällt hier zu großen Teilen. Dies wird hier mithilfe von vorgefertigten Funktionen und Codeblöcken umgesetzt. Unter dem Strich wird die Arbeit im Idealfall einfacher, schneller und damit effizienter.

  • Flexibilität

Frameworks bilden eine sehr flexible Grundlage, auf deren Basis sich Websites und Webanwendungen für verschiedenste Anwendungsbereiche erstellen lassen. Das Gerüst und die vordefinierten Inhalte sind so aufeinander abgestimmt, um jederzeit eine schnelle und flexible Anpassung zu ermöglichen. Von der Textzeile bis zu ganzen Funktionen.

Auch teambasierte Arbeit an Frameworks lässt sich durch z. B. cloudbasierte Arbeitsweise flexibel gestalten. Die Frameworks arbeiten hier mit verschiedenen Synchronisierungsmechanismen per Cloudserver.

Nachteile der Frameworks

  • Quellcode frei zugänglich

Jeder kann sich mit den Mechanismen des Quellcodes vertraut machen. So wären auch Missbräuche möglich, wenn das in der Praxis auch selten vorkommt.

  • Codeballast

Arbeitet man mit einer vorgegebenen Struktur, nutzt man in den seltensten Fällen alle Möglichkeiten aus. So kann es (je nach Umfang des verwendeten Frameworks) zu Ballast kommen, den man ungenutzt herumschleppt.

  • Strukturelle Einschränkungen

Die Struktur ist vorgegeben! Das bedeutet, jedes Framework hat seine Grenzen und Sie müssen Ihre Arbeit diesen anpassen. Dies sollte ein elementarer Punkt bei der Wahl des Frameworks sein.

  • Oberflächliche Sprachkenntnisse

Um es auf den Punkt zu bringen; man lernt mit der Sprache umzugehen, sich damit zu arrangieren, nicht sie zu beherrschen. Dies kann auch als Vorteil gewertet werden, aus meiner Sicht ein Nachteil, denn es geht viel Basiswissen verloren und es begegnet einem unglaublich viel Halbwissen mit teilweise gravierenden Folgen.

Fazit

Betrachtet man die bloße Anzahl der verfügbaren Frameworks, deren Verbreitung in der Branche und die Vielfalt der Möglichkeiten, so kommt man kaum drum herum, sich damit zu beschäftigen. Für Freiberufler oder kleinere Werbeagenturen ist meist schon der Kostenfaktor ein gewichtiger Grund. Ich persönlich nutze fast immer in irgendeiner Form ein Framework, sei es nur für einen einfachen Webauftritt oder als Ergänzung zu beispielsweise CMS-Systemen. Möglichkeiten gibt es da …

Weitere Info´s

Absolute & relative Maßeinheiten in CSS

Wenn man mit der Auszeichnungssprache CSS arbeitet, kommt man recht schnell zu dem Punkt, an dem man sich mit den verfügbaren Maßeinheiten beschäftigen sollte. Denn Maßeinheiten sind im Umgang mit CSS von enormer Wichtigkeit. Durch sie wird nicht nur die Größe von Elementen definiert, sondern auch deren Position im HTML-Dokument. Hierbei gibt es einiges zu beachten, also schauen wir uns heute diese Maßeinheiten und deren Beziehung zu umgebenden Elementen an.

Was bedeutet das? Nun, Maßeinheiten können in CSS entweder absolut (manchmal auch physisch genannt) oder relativ zu den umgebenden Elementen angegeben werden. Der Unterschied ist folgender, die absoluten Angaben beziehen sich auf fest vorgegebene Definitionen, z.B. auf eine Höhenangabe in Millimetern, welche exakten Vorgaben folgen. Sinn ist hier, dass die Anzeige überall möglichst gleich ausgegeben wird.

Die relativen Maßangaben hingegen, resultieren aus den Gegebenheiten des Systems oder Ausgabegerätes, und beziehen sich direkt auf diese Werte oder Vorgaben.

Zur Erklärung, die Anzeige eines Bildschirms besteht bekanntlich aus einer Vielzahl von Bildpunkten, eben den Pixeln. Die Anzahl dieser Punkte wird durch die verwendete Auflösung des Ausgabegerätes angegeben.

Eine Auflösung von z. B. 1024×768 gibt also an, dass 786.432 (das Ergebnis von 1024×768) unterschiedliche Bildpunkte angezeigt werden. Bildschirme sind allerdings in der Lage verschiedene Auflösungen auszugeben. Wird also die Anzahl der angezeigten Bildpunkte erhöht (z. B. 1930×1440; ergibt 2.779.200 Bildpunkte) oder wieder verringert (z. B. 1280×1024; ergibt 1.310.720 Bildpunkte), ändert der Bildschirm beim Wechsel der Auflösung nur die Größe der Pixel. Bei Pixeln könnte man genau genommen sogar sagen, dass auf die Anzeige bzw. den Inhalt bezogen eine absolute, auf Anzeigegeräte bezogen eine relative Maßeinheit ist. Zugeordnet wird sie aber meist den relativen Maßeinheiten.

Auch zu beachten wäre, dass in im Umgang mit CSS ein numerischer Wert mit einem Punkt und nicht mit einem Komma getrennt wird. Beispiel: richtig 1.25cm, falsch 1,25cm

Hier die Übersicht der verfügbaren Maßeinheiten, in der Auszeichnungssprache CSS:

MaßeinheitZuordnung absolut/relativErklärung
 pt absolut Punkt (1 Punkt = 1/72 Inch)
 pc absolut Pica (12 Punkt [pt] = 1 Pica)
 mm absolut Metrisches Maß Millimeter
 cm absolut Metrisches Maß Zentimeter
 in absolut Inch (1 in = 2,54 cm)
 %relativProzent relativ zur im Element definierten Größe,
zu der des Elternelements oder zu der obersten
Definition im Dokument.
 emrelativRelativ zur elementeigenen Schriftgröße. Hat dieses
die selbe Angabe, dann richtet sich der Wert nach dem
übergeordneten Element.
 exrelativBezieht sich auf die Höhe des Kleinbuchstaben x des
jeweiligen Elements. Außer Standardschriftgröße ist
identisch, dann richtet es sich nach der x-Angabe
im übergeordneten Element.
 pxrelativDie Darstellung steht im direkten Zusammenhang zu
der Pixeldichte des Anzeigegerätes.

Ich hoffe, der Artikel »Absolute und relative Maßeinheiten in CSS« konnte einen kleinen Überblick gewähren oder etwas Licht ins Dunkel bringen. Hier gilt die Regel, am besten einfach ausprobieren. Das veranschaulicht die Ausgabe der Maßeinheiten am deutlichsten, zumindest bei den meist genutzten Einheiten wie beispielsweise px, em oder %.

secutecc.de

Webauftritt der Leipziger Sicherheitsfirma SECUTECC Gbr. Hierbei handelte es sich um eine einfache Firmenwebseite mit Informationen zum Unternehmen und themenspezifischen Informationen. Da spätere Content-Pflege durch das Unternehmen getätigt wird, haben wir hier ein CMS-System zum Einsatz gebracht. Template Anpassungen an jegliche Monitorgrößen per CSS3 und Integration einer Javascript-Slideshow per Plug-in. Die Seiten finden Sie hier …

www.secutecc.de

5 kostenlose Grid Themes für WordPress

Für CMS-Systeme gibt es unzählige Möglichkeiten ein Theme zu gestalten oder zu variieren. Erstes Kriterium ist natürlich der Einsatzzweck der Webseite oder der individuelle Geschmack. Auch der aktuelle Stand der Webentwicklung sollte berücksichtigt werden und diesen stelle ich heute in den Vordergrund. Den meisten ist Responsive Design ein Begriff, falls nicht, hier eine kurze Erklärung:

Bei Responsive Webdesign handelt es sich um eine Technik die Webseiten für verschiedenen Ausgabegrößen (Display-Größen) optimiert. Dies geschieht mit Hilfe der sogenannten CSS3 Media-Queries, meist in Verbindung mit HTML5 oder CMS-Systemen. Hierbei sind drei Größen relevant, nämlich die des herkömmlichen Computer Monitors,  ein Tablets und das Smartphones. Dabei wird das Layout entsprechend flexibel gestaltet und programmiert und bei Aufruf die entsprechende Ausgabe erkennt und das angepasste Layout aufruft. Natürlich hat jeder Monitor, jedes Tablet und erst recht jedes Smartphone eine unterschiedliche Auflösung, somit ist es unmöglich jede zu berücksichtigen, aber zumindest die Gängigsten.

Was hat das nun mit Themes zu tun? Vieles, denn durch diesen Umstand haben sich Darstellungen und Aufteilungen entwickelt, die es vorher in dem Umfang nicht gab. Und um einen Vertreter dieser Darstellung geht es heute, sogenannte „Grid-Themes“. Dabei ist der Name Programm, der Englische Begriff „Grid“ bedeutet in deutsch soviel wie Raster oder Gitter, beides lässt sich auf die Gestaltung solcher Themes projizieren. Dieses Raster lässt sich dann natürlich aus alle Display-Ausgaben übertragen.

responsive

Wie man sofort erkennt wurden diese Themes getreu dem Motto „Form follows function“ erstellt, die Form der Webseite ist der Funktionalität untergeordnet. Sämtliche Inhalte folgen streng einem vordefinierten Raster, auch Bilder und Grafiken. So eignet sich dieser Aufbau hervorragend für Portfolio-, Fotografen- oder Blog-Webseiten, also Bereichen die viel mit Grafiken arbeiten.

Ich habe einige kostenlos erhältliche Themes dieser Form zusammen getragen und stelle sie nachfolgend schnell vor. WICHTIG! Wie und in welchem Umfang ihr die Themes nutzen dürft, erfahrt ihr auf den entsprechenden Webseiten der Anbieter! Hier nun die Übersicht:

Wembley-Theme von FabThemes

Minimalistisch gestaltetes Theme mit einigen vordefinierten Bereichen, z.B. die Änderbarkeit per Backend von Begrüßungstext, CSS-Attributen und Logo. Startseite mit einem Bilderraster, unter welchem Beitragsname und Kategorie zu finden ist. das Theme ist voll flexibel und passt sich an jede Bildschirmgröße an. Der Seiteninhalt erstreckt sich automatisch über die ganze, verfügbare Monitor oder Display-Breite.

wembley_theme

Cell-Theme von alienwp.com

Ebenfalls ein recht einfach gehaltenes Theme, allerdings mit variabler Bildgröße auf der Startseite. Außerdem verfügt das Theme über zwei verschiedene Beitrags-Formate, konfigurierbaren Hintergrund für den Kopfbereich und die Seite. Natürlich ist dieses Theme auch für mehrere Bildschirmgrößen optimiert. Nachfolgend die Demo-Seite des Themes und der Download.

cell_theme

Onion-Theme von goresponsive.in

Der Name ist Programm, ein sehr vielschichtiges Theme mit vielen. vielen Extras. So enthält das Theme unter anderem Social Icons, Google Webfonts, Menü über mehrere Ebenen, individueller 404-Seite, vordefinierten Widgets uvm. Die Seitenformatierungen lassen sich universal einsetzen und sorgen für maximale Flexibilität. Für ein kostenloses Theme selten, sind auch eine ganze Hand voll sogenannter „Shortcodes“ verfügbar. Mit ihnen lassen sich bestimmte Elemente schnell per entsprechenden Platzhalter integrieren. Ein wirklich ungewöhnlich umfangreiches Paket.

onion_theme

Pinbin-Theme von colorlib.com

Auch Pinbin ist ein waschechtes responsive Theme, welches allerdings mit einem ganz so minimalen Design daher kommt. Es zielt auf einen eher etwas edleren Eindruck, was ganz gut gelingt. Pinbin erstreckt sich ebenfalls über die gesamte Fensterbreite, is allerdings nicht zentriert angelegt. Details wie z.B. Logo lassen sich auch bequem per Backend ändern.

pinbin_theme

Grid Theme Responsive von dessign.net

Dieses Theme unterscheidet sich von seinen Vorgängern nur durch den endlosen  Bildlauf, welcher die Startseite fortsetzt solange Beiträge vorhanden sind. Ansonsten lassen sich auch hier beispielsweise Logo per Backend ändern. Insgesamt ein sehr stimmiges Theme.

grid_theme

Thats it! Ich hoffe der Artikel hilft euch bei der Wahl eines responsive Theme für WordPress. Noch ein kleiner Hinweis, bei der Installation der Themes unbedingt entsprechende Dokumentation oder ReadMe anschauen! Manche Funktionen erfordern ein wenig mehr als die gewohnte Installation.

Die eigene 404 Seite mit WordPress

Die meisten Internet-Nutzer kennen sie, die ominösen 404-Seiten. Sie wird standardmäßig aufgerufen wenn der in die Adresszeile eingetragene Link ins Leere führt. Jetzt haben Sie als WordPress-Nutzer die Möglichkeit auf Plugins zurück zu greifen um eine 404-Seite zu erhalten, wir machen uns aber eine Eigene.

Diese nutzt direkt Funktionen und Anweisungen aus dem WordPress-Kern, um dem User das weitere Vorgehen anhand von z.B. einer Suche zu erleichtern. Auch um die Gestaltung werden wir uns kümmern, also Grafiken einbinden und entsprechende Anweisungen erstellen. Als Beispiel nehme ich meine eigene Webseite her, für welche ich kürzlich einen Fehlerseite erstellt habe. Zunächst ein Beispiel wie so eine Seite standardmäßig aussehen könnte:

404_bsp

Das Bild zeigt die Fehlermeldung welche der Mozilla Firefox uns in Gesicht klatscht, schön ist anders.

Wie gehen wir vor? Um die Übersicht zu wahren, habe ich das Projekt in vier wesentliche Schritte aufgeteilt. Diese wären Planung, Ausarbeitung der Dateien, Implementierung und Testphase. Also fangen wir an …

1. Planung

Soll die Seite ein Thema besitzen? Wie soll die Seite Aussehen? Welche Funktionen für den User soll Sie enthalten? Wohin soll die Seite verweisen? Damit beschäftigen wir uns zunächst und das am Besten, indem wir ein Blatt Papier und einen Stift zu Hand nehmen und uns die wichtigsten Eckpunkte schnell skizzieren. In meinem Beispiel soll das Thema „Geisterseite“ verwendet werden, zudem soll eine ganzseitige Grafik verwendet werden (Also ein anderer Seitenaufbau ohne Teile der regulären Webseite). Funktionell sollen dem Nutzer die neuesten Beiträge oder Seiten zur Auswahl stehen, eine Suchfunktion, ein bis zwei Hinweise und eine Möglichkeit wieder zur Hauptseite zu gelangen. Skizziert habe ich das ganze folgendermaßen …

skizze

Dies soll nur als grobe Richtlinie dienen, alle gewünschten Bestandteile der Seite sollten aber schon hier zu finden sein. Bei meinem Beispiel eine Skizze des Hintergrundbildes mit ungefährer Aufteilung. Zudem die Anordnung der Textelemente und deren Größe. Sind wir uns sicher mit der Aufteilung und Anordnung der Seite, gehen wir zu Schritt 2.

2. Ausarbeitung der Dateien

In diesem Schritt erstellen wir das Hintergrundbild und alle notwendigen PHP und CSS-Dateien. Das Hintergrundbild habe ich, passend zum Thema, mit Adobe Photoshop gebastelt und als PNG-Grafik in der Größe von 1920 x 1080 Pixeln abgespeichert. Da meine 404-Seite flexibel sein soll, decke ich so die meisten Monitorgrößen ab. Hier können Sie sich austoben, lassen Sie Ihrer Phantasie freien Lauf! Meine sieht wie folgt aus:

404_small

Nachdem die Grafik fertig ist, kümmern wir uns um die notwendigen PHP & Anweisungen. Mein Entwurf lässt sich am einfachsten in zwei Bereiche aufteilen, den Head-Bereich welcher noch die Verlinkung zu den sozialen Netzwerken beinhaltet, und den Content-Bereich in dem alle Funktionen untergebracht sind.

Das bedeutet wir erstellen 2 Dateien, eine 404.php Datei und eine header-404.php, die CSS-Anweisungen schreiben wir in die im Template enthaltene style.css. Was machen diese Dateien denn? Hier kurz eine Erläuterung:

header-404.php
Diese Datei ist im Prinzip nichts anderes als eine Kopie der header.php aus dem Template-Verzeichnis, aus welcher wir alles löschen was wir nicht brauchen. In meinem Beispiel bleiben nur teilweise die Social-Buttons übrig, der Rest fliegt raus.

404.php
Diese Datei ist für die Ausgabe unserer eigentlichen Inhalte verantwortlich. Hier erzeugen wir mit PHP einige Funktionen die auf das CMS-System zugreifen. Hier verschaffen wir uns Zugriff auf das Archiv und lassen uns die letzten 10 Beiträge anzeigen, lassen uns die Suche noch einmal ausgeben und verweisen auf die Startseite. Der Rest ist Formatierung mit HTML&CSS.

style.css
Hier ergänzen wir nur die Template Style-Anweisungen mit den notwendigen Angaben unserer 404-Seite.

2.1 – header-404.php – Inhalt und Ausgabe

Diese Datei hat zwei Aufgaben, das einbinden der CSS-Datei des verwendeten Templates und das Verbinden mit den Sozialen Netzwerken. Dies sieht natürlich je nach verwendetem Theme anders aus, deswegen schreibe ich hier nur die allgemein notwendigen Anweisungen:

Quellcode:

<!-- Aufruf des Webseiten.Titels: -->
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<!-- Einbinden der CSS-Datei: -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" title="no title"/>

Den Aufruf der Social-Buttons spare ich mir, da ich diese Funktion selbst geschrieben habe und sie somit nicht allgemein gültig ist.

2.2 – 404.php – Content der Fehlerseite erzeugen

In dieser Datei greifen wir auf bordeigene Mittel von WordPress zurück.

Ganz wichtiger Hinweis: Wer sich jetzt noch nicht mit dem WordPress-Codex beschäftigt hat sollte dies jetzt tun. Hier sind alle Platzhalter, vordefinierten Funktionen oder hilfreiche Tipps zur Arbeit mit dem WordPress-Kern zu finden.
Zu finden unter folgender url: codex.wordpress.org

Nun zurück zu unserer Datei, hier rufen wir zunächst unsere vorbereitet header-404.php datei auf, dies tun wir mit folgenden Zeilen:

<?php
get_header('404');
?>

Vergleicht man diesen Aufruf mit der Standard-Integration des Headers, nämlich get_header(‚ ‚); fällt auf das lediglich das 404 zwischen den Hochkommas ergänzt wurde. Betrachtet man dann den Namen „header-404.php“ erkennt man, dass WordPress nur zwischen die Hochkommas schaut und diese Bezeichnung nur hinter dem Bindestrich des Dateinamens stehen muss. Diese „404“ ist nicht zwingend, Sie können die Datei benennen wie Sie möchten.

Als nächstes erstellen wir unser HTML-Gerüst, indem wir ein einfach einen DIV-Container erstellen und mit einigen Listen und Absätzen füllen. Das Grundgerüst in meiner Datei sieht so aus:

<div class="content_vier">

<h2>Überschrift der Fehlerseite</h2>

<p>Textabsatz</p>
<ol> <!-- Erste Liste für die letzten Beiträge -->
<p>Textabsatz</p>
<ul>
<li>Ausgabe der letzten Beiträge, Seiten</li>
</ul>
<br/><!-- Erzwungener Umbruch -->
<li >Alternative Ausgabe</li>
<p>Textabsatz</p>
<ol>
<br/><!-- Erzwungener Umbruch -->
<br/>
<li>
<p>Überschrift der Suche</p>
<form><!-- Suchfeld -->
<input type="text"/><input type="submit"/>
</form>
</li>
<br/><!-- Erzwungener Umbruch -->
<br/>
<li>Platz für weitere Hinweise</li>
<br/><!-- Erzwungener Umbruch -->
<br/>
<li>Link zu Startseite</li>
</ol>
</div>

Noch kein Hexenwerk, ungewöhnlich sind die vielen erzwungenen Umbrüche. Das war aber die schnellste Lösung, ohne gleich meine ganze CSS-Formatierung der restlichen Webseite zu überarbeiten.

Hier ist die Datei gefüllt mit allen notwendigen PHP-Anweisungen und etwas CSS-Code um meine Template-CSS Anweisungen durch die höhere Hierarchie zu übergehen.

<div class="content_vier">

<h2 style="font-family: 'rokkittregular', Arial, sans-serif; font-size: 42px; color: #33acbe;"><span style="font-size: 70px;">404 !?</span> WUAAAAAAAH! Eine Geisterseite!</h2>

<p class="plop">Ganz ruhig, lass uns zusammen suchen, ich helf dir besser ...</p>
<?php
$s = preg_replace("/(.*)-(html|htm|php|asp|aspx)$/","$1",$wp_query->query_vars['name']);
$posts = query_posts('post_type=any&name='.$s);
$s = str_replace("-","",$s);
if (count($posts) == 0) {
$posts = query_posts('post_type=any&s='.$s);
}
if (count($posts) > 0) {
echo "<ol  style='margin-left: 30px;'><li style='border: none;'>";
echo "<p><strong>I.</strong> Suchst du vielleicht einen <strong>der letzten Beitr&auml;ge oder Seiten</strong>?</p>";
echo "<ul style='margin-left: 30px;'>";
foreach ($posts as $post) {
echo '<li><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>';
}
echo "</ul>";
echo "<br/>";
echo "<li style='border: none;'><p style='background:#FFFFFF; line-height: 1.6; display:inline;'><strong>Nichts gefunden?</strong> Nicht traurig sein, ich habe noch ein paar Ideen:</p></li>";
} else {
echo "<p><strong>Immernoch nicht weinen!</strong> Ich hab noch mehr Tipps:</p>";
echo "<ol>";
}
?>
<br/><br/>
<li style="border:none;">
<label for="s"><strong>II.</strong> Oder <strong>such</strong> einfach <strong>nochmal</strong> danach:</label>
<form style="display:inline;" action="<?php bloginfo('siteurl');?>">
<input type="text" value="<?php echo esc_attr($s); ?>" id="s" name="s"/> <input type="submit" value="boing"/>
</form>
</li>
<br/>
<br/>
<li style="border:none;">
<strong>III. Wenn du eine URL eingetragen hast...</strong> pr&uuml;fe auf Schreibfehler und Gross- und Kleinschreibung, z.B. "SuCHbriFf".

</li>
<br/>
<br/>
<li style="border:none;">
<strong>IV. Kein Erfolg? Starte einfach neu</strong> auf meiner <a href="<?php bloginfo('siteurl');?>"><strong>Startseite</strong></a>.
</li>
</ol>
</div>

Hui, ganz schön viel Input, zerlegen wir das Schlamassel und erörtern wir die Datei Schritt für Schritt. Zunächst schauen wir uns den oberen Teil der Datei an, denn dieser ist für die Ausgabe der letzten 10 Artikel oder Seiten verantwortlich.

<?php
$s = preg_replace("/(.*)-(html|htm|php|asp|aspx)$/","$1",$wp_query->query_vars['name']);
$posts = query_posts('post_type=any&name='.$s);
$s = str_replace("-","",$s);
if (count($posts) == 0)
{
$posts = query_posts('post_type=any&s='.$s);
$posts = query_posts( 'posts_per_page=5' );
}
if (count($posts) > 0)
{
echo "<ol  style='margin-left: 30px;'><li style='border: none;'>";
echo "<p><strong>I.</strong> Suchst du vielleicht einen <strong>der letzten Beitr&auml;ge oder Seiten</strong>?</p>";
echo "<ul style='margin-left: 30px;'>";
foreach ($posts as $post) {
echo '<li><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>';
}
echo "</ul>";
echo "<br/>";
echo "<li style='border: none;'><p style='background:#FFFFFF; line-height: 1.6; display:inline;'><strong>Nichts gefunden?</strong> Nicht traurig sein, ich habe noch ein paar Ideen:</p></li>";
} else {
echo "<p><strong>Immernoch nicht weinen!</strong> Ich hab noch mehr Tipps:</p>";
echo "<ol>";
}
?>

Im Detail passiert hier folgendes:

  • Die zweite Zeile mit der Funktion „preg_replace“ prüft oder der vom Nutzer eingegebene Link, mit der falschen Dateiendung abgesendet wurde und versucht gegebenenfalls diese zu korrigieren.
  • Die dritte Zeile „$posts = query_posts“ ist die Verbindung zu den Beiträgen des CMS-Systems
  • Die vierte Zeile „$s = str_replace(„-„,““,$s);“ entfernt alle vorkommenden Bindestriche
  • Zeile fünf bis neun holt die Beiträge aus der Datenbank, wobei die Zeile mit dem Eintrag „$posts = query_posts( ‚posts_per_page=5‘ );“ die ausgegebenen Beiträge auf 5 reduziert.
  • Die restlichen Zeilen generieren über die echo-Anweiszngen das HTML-Gerüst. Der Eintrag „<a href=“‚.get_permalink($post->ID).'“>‘.$post->post_title.'</a>“ erzeugt den eigentlichen Link zum Beitrag.

Es lassen sich hier im Prinzip alle möglichen Ausgaben von WordPress integrieren. Das hängt von Ihren Wünschen und Ihrem Projekt ab. Die wahrscheinlichsten habe ich schon im Beispiel verwendet, alternativ können sie sämtliche Teile Ihrer Webseite einbinden.

2.3 – CSS-Styling

Die CSS-Anweisungen sind natürlich abhängig von dem Layout welches Sie sich ausgedacht haben. In meinem Fall wollte ich einfach ein paar Zeilen untereinander. Auch die Ausgabe der letzten Posts nicht als Liste, sondern in einer Zeile.

3. Implementierung in das CMS-System

Was müssen wir tun um das ganze im CMS-System zum laufen zu bringen? Nichts! Einfach die Dateien header-404.php, die 404.php und (falls geändert) die style.css in das Verzeichnis Ihres Templates laden. WordPress erkennt die 404.Datei automatisch. Da die anderen beiden Dateien über die 404-Datei integriert werden ist da auch keine Nacharbeit notwendig.

4. Testphase sämtlicher Funktionen

Gehen Sie jede Kontaktmöglichkeit komplett durch! Testen Sie alle Möglichkeiten die der Nutzer auf der 404-Seite hat. Testen Sie ob z.B. E-Mails ankommen, testen Sie ob die Suche korrekt arbeitet, usw. Hier sollten Sie nicht zu wenig Zeit investieren, dies dankt Ihnen der verirrte Nutzer.

Ergebnis:

So sieht meine 404-Seite aus, ich hoffe der Artikel war verständlich und es folgt die eine oder andere Fehlerseite.