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.

Sambasia Park / Abschlussprüfung

Mediengestalter Abschlussprüfung Winter 2012/2013. Aufgabenstellung war es, für den Zoo „Sambasia Park“ aus Nürnberg eine Internet-Präsentation zu entwickeln. Als Zielgruppe wurden sowohl Kinder als auch Erwachsene genannt und sollten möglichst gleichermaßen angesprochen werden.

Funktionalität sollten folgende Webseiten aufweisen; Home, Erlebnis Sambasia, Touren, Preise & Zeiten sowie das Impressum. Auf der Touren-Seite sollte ein interaktiver Plan des Parks erstellt werden, welche dem Besucher die Möglichkeit gibt sich im Vorfeld über Umfang und Dauer der Touren zu informieren.

Das Layout habe ich erstellt mit Adobe Photoshop CS3 und Adobe Illustrator CS3. Symbole des Lageplans wurden ebenfalls mit Illustrator erstellt, die Animation habe ich mit Adobe Flash CS4 gemacht. Programmiert habe ich die Webseite mit HTML & CSS (teilweise auch mit CSS3 Elementen), unter Verwendung von Adobe Dreamweaver CS3.

Die dazugehörige Dokumentation umfasste 19 Seiten und wurde mit Adobe Indesign CS3 erstellt.

Hier die fertige Internetpräsenz, belohnt wurde die Seite mit einem sehr guten Prüfungsergebnis.

sambasia.pixelero.de