Hierfür müsst ihr  euch allerdings auf eurer eigenen Seite bewerben, ein spezielles Banner einbauen und den Link zum entsprechenden Artikel oder Foreneintrag einschicken. Das Team, welches mit seiner Bewerbung und dem nötigen Teamspirit überrascht, erhält das Battlefield 3 Team Sponsoring Paket.

Zusätzlich werden 2x Battlefield 3 für Einzelpersonen verlost. Ihr müsst nur die Frage beantworten, warum ihr euch so sehr auf das Spiel freut und es unbedingt spielen wollt.

Mit diesem Blogeintrag nehme ich somit am Gewinnspiel teil: Ich freue mich auf Battlefield 3, weil es das Spiel 2011 werden wird und mit modernster Grafik alles andere in den Schatten stellt. Ich will BF3 unbedingt spielen, weil es für mich die perfekte Kombination aus Battlefield 2 und Bad Company 2 darstellt.

Falls ich gewinnen sollte, hätte ich gerne ein Exemplar für den PC.

Ziel: Widget-fähiger Footer in einem Child-Theme

Sidebars in der functions.php registrieren

Da es sich hier um eine Child-Theme handelt, müsst ihr beachten, dass die functions.php-Datei nicht automatisch überschrieben wird, wie es beispielsweise bei der style.css-Datei der Fall ist. Die Inhalte einer eigenen functions.php-Datei im Child-Theme werden zusätz­lich zu den Inhalten der functions.php-Datei des Parent-Themes auf­ge­rufen und zwar direkt davor. Deshalb genügt der folgende Inhalt, um drei neue Sidebars zu registrieren:

<?php

if ( function_exists ('register_sidebar')) { 

    register_sidebar( array (
    	'name' => __( 'Footerbar 1', 'yoko' ),
		'id' => 'sidebar-3',
		'description' => __( '1st Footer Sidebar', 'yoko' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

    register_sidebar( array (
        'name' => __( 'Footerbar 2', 'yoko' ),
		'id' => 'sidebar-4',
		'description' => __( '2nd Footer Sidebar', 'yoko' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

    register_sidebar( array (
        'name' => __( 'Footerbar 3', 'yoko' ),
		'id' => 'sidebar-5',
		'description' => __( '3rd Footer Sidebar', 'yoko' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => "</aside>",
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );
}
?>

Sidebars in der footer.php einbauen

Im Footer-Bereich (colophon) der footer.php-Datei müssen nun die soeben erstellten Sidebars eingetragen werden, damit sie auch angezeigt werden können:

<footer id="colophon" class="clearfix">
		<div id="supplementary" class="clearfix">
            <div id="first" class="widget-area"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 1') ) : ?>
<p>First</p>
<?php endif; ?></div>
            <div id="second" class="widget-area"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 2') ) : ?>
<p>Second</p>
<?php endif; ?></div>
            <div id="third" class="widget-area"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('Footerbar 3') ) : ?>
<p>Third</p>
<?php endif; ?></div>
        </div>

Wenn sich kein aktives Widget in der jeweiligen neuen Sidebar befindet, werden die Texte “First”, “Second” und “Third” ausgegeben. So sieht es dann im Dashboard aus:

Layout in der style.css festlegen

Damit das Ganze gut aussieht und auch zum responsive layout passt, müssen ein paar Angaben in der style.css-Datei eingetragen werden:

#colophon {width:100%; padding:0 !important;}
#colophon #supplementary {font-size:1.3em;padding: 0 0 60px;}
#supplementary {padding:15px !important;}
#supplementary #first.widget-area, #supplementary #second.widget-area {float: left;margin-right: 5.567%;width: 29.55%;}
#supplementary #third.widget-area {float: left;margin-right: 0;width: 29.55%;}

/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width : 620px) {
#supplementary #first.widget-area, #supplementary #second.widget-area, #supplementary #third.widget-area {float: none;margin-right: 0;width: 100%;}
}

Wichtig sind hierbei die Angaben zu “width” in Prozent. Die Optik wie Hintergrundfarbe (background-color) und Schatten (box-shadow) könnt ihr hier ebenfalls festlegen. So sieht der neue Footer im Smartphone aus:

Das war’s schon. Weitere Tipps und Tutorials gibt es direkt bei elmastudio.de.

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

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.

Deshalb wünsche ich mir lediglich, dass alle gesund und munter bleiben. Jetzt gilt es erst einmal die Weihnachtspfunde los zuwerden und die erhaltenen Geschenke zu genießen. Im speziellen möchte ich hierbei meine neue Errungenschaft von QNAP erwähnen:

TS-110 Turbo NAS:

Ein All-in-one Network Attached Storage Server mit integrierter 1 TByte Festplatte. Endlich hat das lästige Umstöpseln der externen Festplatten und das Anschließen des Druckers an den entsprechenden Rechner ein Ende. Detaillierte Produktinformationen findet ihr unter obigem Link.

Damit ihr auch etwas von diesem Artikel habt, möchte ich euch auf den bald endenden Steam-Weihnachtskatalog hinweisen (bereits verbloggt), der heute beispielsweise den Rollenspiel-Klassiker Neverwinter Nights 2 in der Platinum-Version (enthält auch die beiden Addons Mask of the Betrayer und Storm of Zehir) für 9,99 EUR beinhaltet. Das Angebot dürfte wohl noch bis heute Abend 19 Uhr gelten.

In diesem Sinne wünsche ich euch einen guten Start ins neue Jahr und mögen eure Vorsätze und Ziele in Erfüllung gehen.

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.

Mit Hilfe von Piwik ist die Webseitenstatistik und -analyse ein Kinderspiel und man erhält die Informationen entweder im WordPress Dashboard oder direkt von der eigenen Piwik-Seite:

Übersicht im WordPress Dashboard.

Übersicht auf der eigenen widget-fähigen Piwik-Seite.

Was nutzt ihr an Statistik-Tools oder braucht ihr sowas garnicht?

Nach kleineren Anpassungen am Design, fehlte mir nur noch ein schicker Hintergrund. Als Inspiration diente mir hierfür die Seite GamerMezzo.de, wobei ich die Ressourcen hauptsächlich aus Fansite-Kits bezog und für die Bildbearbeitung GIMP benutzte. Im neuen Hintergrundbild sind jetzt  Szenen und Charaktere aus StarCraft 2, Age of Conan, Guild Wars 2, Mass Effect 2 und OpenTTD zu sehen.

Solltet ihr Darstellungsprobleme oder einen Fehler entdeckt haben, schreibt einen Kommentar oder kontaktiert mich direkt.