Ein speziell angepasstes Theme oder entsprechende Plugins fallen dadurch weg. Der “reaktionsfähige Grundriss” der Seite funktioniert eigenständig und völlig automatisch, setzt aber mindestens den Internet Explorer in Version 9 vorraus. HTML5 wird hingegen für IE <9 mittels Fallback unterstützt. Zur besseren Darstellung sollte bei Windows 7 die Funktion ClearType aktiviert sein. Alle weiteren Features könnt ihr euch bei elmastudio.de anschauen.

Ihr könnt euch sicherlich vorstellen, dass ich ein paar Änderungen vornehmen musste, damit das Ganze am Ende so aussieht, wie ich das gerne hätte. Mit Hilfe eines Child Themes habe ich diverse Anpassungen realisiert:

Die Sidebar in der Mitte wurde mittels “display: none;” ausgeblendet, wobei diese notdürftige Methode nur vorübergehend gewählt wurde, und die jeweilige Seitenbreite angepasst wurde (Verhältnis 72% zu 28%). Wichtig ist hierbei die Prozentangaben nicht durch absolute Pixel-Angaben zu ersetzen, sonst verliert ihr euer responsive layout.

Integration einer Dachzeile über jedem Artikel, inklusive Datum und Anzahl der Kommentare (siehe dazu: WordPress-Tutorial: Dachzeile in Titel einfügen), Verschiebung des Artikelbildes und Entfernen von der Kategorie- und Tag-Anzeige:

Brotkrümel-Navigation (breadcrumb) oberhalb eines jeden Artikels:

Seiten-Navigation unterhalb des Artikel-Loops (Plugin: WP-PageNavi) ersetzt “vorheriger / nächster Artikel” auf der Start-Seite:

Die Seiten Blogroll und Stats funktionieren nur mit spezifischen Templates, um die einzelnen RSS-Feeds und den Teamspeak-Viewer anzeigen zu können. Hierzu mussten lediglich die entsprechenden Dateien vom alten Theme in den Ordner des neuen Child Themes kopiert und angepasst werden.

Bei den ganzen Anpassungen am neuen Theme ist mir aufgefallen, dass bei der Artikel-Ansicht zwei h1-title ausgegeben werden: blog-title und post-title. Da dies aus SEO-Sicht eher kontraproduktiv ist, wird nun der Titel eines Artikels als h2-title angezeigt.

Solltet ihr noch Fragen zum Child Theme haben, her damit

Mein altes Theme basierte übrigens auf dem Elegant Box-Theme von mg12:

PS: Seit kurzem gibt es ein sehr schickes Premium-Theme namens BUGIS bei elmastudio.de für nur 12 Euro. Ein fairer Preis wie ich finde. Mir gefällt YOKO trotzdem besser.

• 1 Los für sinnvolle Kommentare (nicht nur die Links)
• 1 Los – Für einen Tweet
• 1 Los – Facebook Teilen
• 1 Los – Google Plus
• 5 Lose – Blogbeitrag
• 3 Lose – Bild vom alten Notebook, auf dem man meine Webseite und die Facebook Seite von Dell sieht
• 6 Lose – Videobeitrag
• Bis zu 2 Lose extra als Kreativitätszuschlag

Da ich bereits schon am Anfang des Gewinnspiels einen Kommentar inklusive Video bei hombertho.de geschrieben hatte, besitze ich bereits 8 Lose:

Darauf folgte ein weiterer Kommentar meinerseits mit Links zu Twitter und Facebook. Der Zugang zu Google+ bleibt mir leider noch verwehrt. Es kommen 2 weitere Lose hinzu:

Hiermit reiche ich nun meinen Blog-Artikel nach, samt Bild meines alten hitzeanfälligen Laptops auf dem die Facebook-Seite von DELL und natürlich hombertho.de zu sehen sind. Nochmal 8 Lose dazu:

Wenn ich mich nicht verrechnet habe sind es somit 8 (Kommentar #1: Video & Kreativzuschlag) +2 (Kommentar #2: Twitter & Facebook) +8 (Blog-Artikel mit Bild) = 18 Lose. Gute Ausgangslage für das Gewinnspiel. Viel Glück an alle Teilnehmer

1. Schritt

Domain sichern: Ich habe mich für das Sonderangebot Business Spezial entschieden, da hier das Preis-Leistungsverhältnis stimmt:

• 5 GB Speicherplatz
• Traffic kostenlos!
• 5 GB E-Mail Speicher
• unbegrenzt E-Mail Adressen
• 3 Postfächer
• 1 .de Domain inklusive
• 1 Datenbank
• 3 Subdomains
• PHP5 / MYSQL5
• PHP Memory-Limit bis zu 64 MB
• PHP Konfiguration möglich

Kostenpunkt: 1 Euro / Monat + 5 Euro Einrichtungsgebühr (mit 5 Euro Neukunden-Gutschein).

2. Schritt

Die richtige Forensoftware auswählen: Zur Wahl standen WBBLite 2, myBB und phpBB3. myBB ist mir in der Administration zu umständlich und phpBB3 war damals recht Spam-belastet, weshalb ich mich für das eingeschränkte Burning Board Lite 2.1 von Woltlab entschieden habe. Falls etwas Geld in der Vereinskasse sein sollte, kann man dann bequem auf das Burning Board 3 upgraden (Lizenzkosten: 49,99 EUR).

Die Installation ist selbsterklärend und kinderleicht. Bei korrekter Eingabe der gewünschten Daten kann eigentlich nichts schiefgehen.

3. Schritt

Design-Anpassungen: Header, Favicon und Hintergrundbild machen den Großteil der Arbeit aus. Ausgangspunkt ist das Standard-Theme in grau. Aus 4 Einzelbildern lässt sich recht einfach via GIMP ein animierter Header erstellen:

Das Favicon wurde wie hier auch mit dem Generator von favicon.cc erstellt. Zum Schluss noch ein unauffälliges Hintergrundbild, das den relevanten Forenteil umfasst. Das Ganze sieht dann so aus:

4. Schritt

Portal-Einrichtung: Abschließend wurde eine Portal-Seite mit diesem Plugin realisiert und mittels einer angepassten .htaccess-Datei verlinkt:

.htaccess

DirectoryIndex index.php?page=Portal

Da sich das Forum unter SGNeUn.de/board befindet, musste noch eine Weiterleitung eingerichtet werden:

index.html

<html>
<head>
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
<meta HTTP-EQUIV=”REFRESH” content=”0; url=http://www.sgneun.de/board”>
</head>
</html>

Das Endergebnis könnt ihr unter SGNeUn.de bestaunen.

Damit sich meine Gewinnchance beträchtlich erhöht, verfasse ich diesen Artikel und erhalte somit 7 Lose. Mit diesem Tweet und einem Kommentar im Gewinnspiel-Formular habe ich die maximal mögliche Losanzahl von 11 erreicht. Dem High-Tech-Blog Nummer 1 wünsche ich noch viele Jahre, damit ich auch noch weiterhin tolle Artikel lesen kann.

1. Schritt: Benutzerdefiniertes Feld:

Beim Erstellen oder Bearbeiten eines Artikels könnt ihr unter dem eigentlichen Textbearbeitungsfeld ein neues benutzerdefiniertes Feld einfügen. Mittels “Neu eingeben” erstellt ihr das Feld “dachzeile” und gebt als Wert den Text an, den ihr über der Überschrift sehen wollt.

2. Schritt: index.php:

In eurer index.php müsst ihr nur den folgenden Eintrag über dem Titel (h2) einfügen. Das war’s schon.

<?PHP
$dachzeile = get_post_meta($post->ID, 'dachzeile', true);
if($dachzeile){
?>
<div class="dachzeile" style="padding-left:7px; font-style:italic;">
<span><?php the_time(__('j. F Y', 'elegantbox')) ?> » </span><?PHP echo $dachzeile; ?>
</div>
<?PHP
}
?>

3. Schritt: style.css:

Entweder ihr formatiert den Dachzeilen-Eintrag direkt in der index.php oder ihr nutzt die Datei style.css, um das Aussehen der Dachzeile definieren zu können. Ich habe bei mir nur das Format kursiv (font-style: italic;) ausgewählt. Mir reicht das völlig.

Abschließend nur noch die Seite aktualisieren (F5) und hoffen, dass alles geklappt hat

Wenn ihr die Dachzeile auch im jeweiligen Artikel anzeigen lassen wollt, müsst ihr analog die single.php ändern.

1. Schritt: index.php:

Ihr müsst lediglich bei <div class=”content”> um den Thumbnail-Eintrag…

…eine Permalink-Verlinkung legen:

Der Teil rel=”top” steht hier für die Verwandtschaft bzw. den Bezug zur Startseite. Abschließend nur noch abspeichern.

2. Schritt: F5:

Nach Aktualisierung (F5) der Seite verlinken nun die einzelnen Thumbnails auf die entsprechenden Artikel. Das wars schon.

PS: Danke an Patrick von techspread.de für diesen kleinen Tipp.

Noch detailliertere Informationen erhält man nach einem Klick auf einen Spieler, in diesem Fall Morvagor:

Da aber hier die bfbcs.com-API genutzt wird, muss ich mal testen, wie aktuell die Daten sind. Für ein regelmäßiges Update habe ich bei setcronjob.com 2 kostenlose Cronjobs erstellt, die in 30 Minuten Intervallen die Dateien update.php und signatures.php aktualisiert.

Die Installation des Boards ist recht einfach: hochladen, Datenbank einrichten, Spieler eintragen und fertig. Damit ich allerdings dieses Leaderboard in WordPress einbinden kann, habe ich als Installationsordner das WordPress-Verzeichnis gewählt. Während der Installation sollte WordPress als CMS angekreuzt, der korrekte Pfad zu ezStats angegeben (../ezStats/) und die geforderte ezstats.php Datei in das Plugin-Verzeichnis von WordPress kopiert worden sein. Anschließend musste ich nur noch eine neue Seite erstellen und diese mit einer Überschrift und dem entscheidenden Begriff [ez Stats] (ohne Leerzeichen) versehen. Durch diesen Eintrag wird das Leaderboard genau dort in dieser Seite dargestellt:

Damit die Stats aber auch auf die ganze Breite meines Blogs passten, musste ich ein Template ohne Sidebar erstellen. Optimierungen am Stylesheet via CSS-Änderungen wie beispielsweise Breite, Höhe und Hintergrundbild waren der Abschluss der ganzen Operation.

Hier gehts übrigens direkt zu meiner Stats-Seite.

1. Schritt: footer.php:

Zwischen “content” und “footer” müsst ihr einen neuen Bereich namens “downer” erstellen, in welchen ebenfalls neue Widget-Bereiche  eingefügt werden:

<div id="footer">
<div id="downer">
<div class="downer_widget1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('downer1_sidebar') ) : ?>
<p>Downer-Widget 1</p>
<?php endif; ?>
</div>
<div class="downer_widget2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('downer2_sidebar') ) : ?>
<p>Downer-Widget 2</p>
<?php endif; ?>
</div>
<div class="downer_widget3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('downer3_sidebar') ) : ?>
<p>Downer-Widget 3</p>
<?php endif; ?>
</div>
</div>

Wichtig ist hierbei die korrekte Angabe der entsprechenden Sidebar (downer_widget1-4 und downer1-4_sidebar).

2. Schritt: functions.php:

Jetzt müsst ihr die vier neuen Arrays noch registrieren, was dank Copy & Paste relativ einfach ist:

/** widgets */
if( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'downer1_sidebar',
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'downer2_sidebar',
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'downer3_sidebar',
'before_widget' => '<li class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));

Wie auch im ersten Schritt ist hier die Nomenklatur wichtig, damit das Ganze am Ende auch funktioniert.

3. Schritt: style.css:

Damit die korrekte Darstellung gewährleistet wird, müsst ihr noch die betreffenden Bereiche definieren:
#downer {
background-color: #222;
margin: 20px auto;
width: 960px;
overflow: hidden;
color:#999;
}
#downer h3 {
font-size: 14px;
font-weight: bold;
text-decoration: none;
color:#fff;
}
#downer li {
list-style: none outside none;
}
#downer ul li {
border-bottom:1px solid #333 !important;
}
#downer .widget {
margin-bottom:15px;
}
#downer .wp-post-image {
border:1px solid #444444;
box-shadow:none;
}
#downer .kjgrcGravatar {
border:none;
box-shadow:none;
}
#downer .downer_widget1 {
float: left;
padding: 15px 15px 15px 28px;
text-align: justify;
margin: 5px;
width:38%;
}
#downer .downer_widget2 {
float: left;
padding: 15px;
text-align: justify;
margin: 5px;
width:28%;
}
#downer .downer_widget3 {
float: left;
padding: 15px;
text-align: justify;
margin: 5px;
width:20%;
}

Es ist klar, dass dieses Tutorial abgeändert werden muss, wenn ihr ein anderes Theme verwendet.

Ganz umsteigen wollte ich nicht, da ich schon ein paar tiefgreifende Änderungen direkt im iNove Theme vorgenommen hatte, die ich erstens nicht mehr wiederfinde und zweitens auch nicht mehr reproduzieren kann. Deshalb habe ich mich für die relativ umfangreiche OP entschieden, die beiden Themes zu kombinieren, wobei das iNove Theme als Grundlage dienen sollte.

Ich bin ehrlich gesagt noch nicht ganz fertig, denn die komplette linke Seite ist noch leer. Hier sollen später, wie auch im OneRoom Theme ersichtlich, Artikel-Datum, Kommentar-Anzahl und Tags dargestellt werden. Den freien Platz könnte ich aber auch etwas anderes nutzen, wie beispielsweise RSS- und Twitter-Icons. Was meint ihr dazu?

Selbstverständlich hab ich sofort aktualisiert und anschließend die beiden Plugins AntiSpamBee und WP-Ban aktiviert, da mich zur Zeit ein kleiner Medikamenten-Spammer nervt. Mit ersterem werden Spam-Kommentare gefiltert und mit letzterem lassen sich unter anderem IPs bannen.

Bisher konnte ich keine Nebenwirkungen feststellen. Solltet ihr aber Fehler auf der Seite finden, hinterlasst mir bitte eine Nachricht.