Mit dem heute vorgestellten Plug-in bringt man die Custom Fields in WordPress auf ein komplett neues Level! Ich verwende gerne Custom Fields bei viele Projekte, da ich damit mehr Flexibilität habe und gewisse Textbausteine perfekt im Design (Template) integrieren kann.

So verwende ich bspw. auf NachhilfeAkademie.org Custom Fields um Daten wie Adresse etc. der Nachhilfe-Institute dynamisch im Design zur Verfügung zu haben um so unabhängig zu sein und die Informationen dort darstellen kann wo ich sie möchte. Ähnliches wird auch auf FamilienBrettspiele.de verwendet um Daten der Brettspiele separat darstellen zu können.

Was sind Custom Fields?

Custom Fields können grundsätzlich auf jeder Seite eingefügt werden, du kannst sie aktivieren (falls noch nicht geschehen) wenn du auf “Optionen einblenden” gehst und dort “Benutzerdefinierte Felder” aktivierst. Custom Fields werden unter anderem auch von Plug-Ins verwendet um so Seiten-spezifische Daten zu speichern. Oder man kann freestyle selber custom fields definieren.

Custom Fields bestehen immer aus Key und Value, also den Namen des Custom Fields und der dazugehörige Wert. Der Name sollte immer eindeutig zuordenbar sein, da er später im Template-Code verwendet wird.

Nachteil von WordPress Custom Fields

Der Nachteil von Custom Fields ist, dass es eine bis dato sehr unsaubere Lösung ist. Bzw. kann man niemanden zumuten händisch mehrere Custom Fields für eine Seite einzutragen, wenn mehrere Informationen eingetragen werden müssen. Da kommt nun das Plug-In “Advanced Custom Fields” ins Spiel, damit kann man den Seiteneditor komplett neu gestalten und so mehrere Felder angeben die für eine Seite ausgefüllt werden müssen.

Custom Fields in WordPress

Das ist ein Beispiel von FamilienBrettspiele für eine Brettspiel-Beschreibung. Wie du sehen kannst kommen sehr schnell, sehr viele Custom Fields zusammen was das Eintragen neuer Artikel sehr mühselig macht, bzw. unübersichtlich.

Advanced Custom Fields in WordPress

Mit Advanced Custom Fields kannst du jetzt eigene Felder bestimmen und diese schön übersichtlich darstellen auf der Seite.

Installation von Advanced Custom Fields

Das Plug-In kannst du kostenlos auf WordPress.org runterladen oder bequem über den integrierten WordPress Plug-In installer installieren. Nach der Installation einfach wie gewohnt das Plug-in aktivieren und schon taucht in der Sidebar ein neuer Menüpunkt namens “Custom Fields” auf.

Advanced Custom Fields konfigurieren.

Nach der erfolgreichen Installation kannst du beginnen deinen neuen Seiteneditor zu erstellen.

1. Gehe auf Custom Fields
2. Wähle “Add New”
3. Nun einen Namen für den Editor vergeben und die jeweiligen Felder eintragen.

Mit Advanced Custom Fields kannst du 14 verschiedene Feldtypen auswählen und eine Beschreibung was das jeweilige Feld macht. Das ist natürlich sehr von Vorteil wenn andere Personen auch Seiten eintragen müssen. Somit kommt es zu keine Fragezeichen was die jeweiligen Felder bedeuten. Alle Felder im Editor können per Drag and Drop neu sortiert werden.

Nachdem alle Felder hinzugefügt sind kann man auch schon publizieren und das Meisterstück betrachten.

Verwenden von Custom Fields im Design

Nachdem du die ersten Seiten erstellt hast und die Custom Fields ausgefüllt sind, möchte man sie natürlich auch im Design einbinden. Advanced Custom Fields bietet hier zwei grundsätzliche Varianten an.

1. get_field()
2. the_field()

Einsatz von Advanced Custom Fields

Ich würde empfehlen ein eigenes Template für die Verwendung von Advanced Custom Fields zu erstellen. Dadurch bleibt das Standard Template noch erhalten  und man hat eine schöne Abgrenzung.

Viel Spass.

WordPress kommt per Standard mit der Kategorie-basis “Category“, das sieht in etwa so aus: http://www.diytheme.de/category/marketing/. Dieses Format stört natürlich, da man eigentlich die Kategorie nach der Domain stehen haben möchte und “category” in diesem Falle überflüssig ist.

Variante 1) Category umbenennen

Man kann innerhalb von WordPress diese “category” in ein frei definierbares Wort umbenennen. Einfach in WP-Admin zu Einstellungen > Permalinks navigieren und hier das Feld “Kategorie-Basis” je nach Wunsch ändern.

So kann man bspw. umstellen auf http://www.diytheme.de/info/marketing/ anstelle von “category”. Aber das Problem ist noch immer das selbe, es steht noch immer etwas zwischen der Domain und der eigentlich Kategorie – bei jeder Kategorie!

Variante 2) Category-base entfernen

Wer diese “category” komplett entfernen möchte, kann das Plug-In “WP No Category Base” installieren. Dieses WordPress Plug-In entfernt die Kategorie-Basis von WordPress und erstellt Permalinks mit dem Format http://domain/kategoriename/.

Plugin installieren, aktivieren und es kann los gehen.

Dieses Plug-In kann auch nachträglich auf einer bereits existierenden Website installiert werden, da es sich automatisch um korrekte Redirects der alten URLs kümmert. So werden alle alten URLs per 301 redirect auf die neue URL-Struktur weitergeleitet. Jeder SEO freut sich darüber.

Zum Plug-In

Ich habe auf einigen meiner Seiten testweise ein neues Plug-in im Einsatz. Das Plug-in heißt “Comment Redirect” und wurde von Yoast entwickelt. Yoast hat bereits einige tolle WordPress Plug-Ins entwickelt, wie beispielsweise das Breadcrumbs Plug-In, welches ich auch auf dieser Seite verwende.

Funktion von Comment Redirect

Das Plug-in ermöglicht es Besucher auf eine spezifische Seite weiterzuleiten wenn sie das erste mal ein Kommentar auf deiner Seite hinterlassen haben. Mag auf den ersten Blick recht unspannend klingen, macht aber sehr viel Sinn besonders auf Membership- oder Affiliate-Seiten.

Comment Redirect im Einsatz

Ich kenne es, man freut sich über jeden Webseitenbesucher und möchte zusehen, dass man diesen auch auf seiner Webseite behaltet (Stickyness) bzw. viel wichtiger – dafür zu sorgen, dass dieser Besucher wieder auf deine Seite kommt. Denn einer der größten Hebeln bei Affiliate-Marketing ist und bleibt Traffic um Einnahmen zu erzielen (klar und CTR-Optimierung, andere Story).

Eine Möglichkeit dazu ist den Besucher an deine Webseite zu “binden”. Dies kann inhaltlich geschehen (immer super Inhalte, Leute kommen von alleine wieder), oder über andere Kanäle (RSS-Feed, Newsletter, Twitter, you name it,..) über Updates informieren.

Nachdem der Besucher – wir gehen einmal davon aus, dass er kein Spammer ist – bereits motiviert genug ist ein Kommentar auf deiner Seite zu hinterlassen macht es durchaus Sinn ihn auch gleich Tipps zu geben wie er am Ball bleiben kann. Hier zum Beispiel: Trage dich in unseren Newsletter ein, abonniere unseren RSS-Feed, folge uns auf Twitter.

Und nicht zuletzt kann man auf dieser Seite sich noch einmal bedanken für das hinterlassen des Kommentars.

Tipp: Wer ganz motiviert ist kann hier auch ein Video integrieren wo man sich persönlich bedankt für das hinterlassen des Kommentars und noch einmal auf die weiteren Optionen eingeht (eintragen in den Newsletter,..).

Viel Spass mit dem Plug-In DIYers.

Hier geht es zum Download des Plug-Ins.

Custom templates ermöglichen es für definierte Seiten auf deiner Webseite andere Funktionalitäten oder sogar Design darzustellen.

Nur will es am Anfang nicht so ganz klappen mit den Custom templates. Aber keine Sorge, es ist wirklich einfach.

Die custom_template-Wahl in DIYTheme, als auch die Datei custom_template.php machen zunächst einmal wenig. Daher kommt wieder unsere beliebte custom_functions.php mit ins Spiel. Und so funktioniert es:

Erster Schritt: Das Template auswählen

Beim erstellen einer neuen Seite in WordPress unter Attribute in der Dropdown “Custom template” auswählen. Wie gewohnt deinen Inhalt verfassen und speichern.

Zweiter Schritt: Deine Anpassung durchführen in custom_functions.php

Als zweiten Schritt öffnen wir unsere bereits bekannte custom_functions.php (themes/thesis_1xx/custom/) und fügen folgende Zeilen hinzu:

function meineSeite() {
  if(is_page('meine_seite')) {
    echo "Hier folgt mein Custom Inhalt oder Design oder was auch immer.";
  }
}
remove_action('thesis_hook_custom_template','thesis_custom_template_sample');
add_action('thesis_hook_custom_template','meineSeite');

Wenn du noch nicht mit Hooks gearbeitet hast, gibt es hier weitere Infos zu remove_action und add_action.

Du kannst einen beliebigen Funktionsnamen vergeben (es macht Sinn, die Funktion nach der Seite zu benennen), wichtig ist aber, dass die WordPress-Funktion is_page die richtige Seitenurl angegeben wird. Das ist die Permalink URL (ohne Domain usw.). Ich empfehle auch zusätzlich die Seiten ID mit anzugeben, also mit einem || zu verbinden.

Wie du in Zeile 3 sehen kannst, kannst du alles was dir beliebt einfügen, hier kommt dein tatsächlicher Inhalt rein. Aber aufpassen, denn…

Dritter Schritt: Custom Template in das richtige Design bekommen.

Wie oben bereits beschrieben wird der Text / Layout ausgegeben, was du aber auf alle Fälle berücksichtigen musst, ist, dass der CSS-Container noch hinzugefügt gehört. Das ist natürlich abhängig von deinem HTML-Framework, ich beschreibe es hier für das Page Framework.

Wenn du möchtest, dass dein Text innerhalb des “content”-DIVs ausgegeben wird, bzw. deine Sidebars vollständig erhalten bleiben, dann würde ich folgende Zeilen als Wraper in deiner custom Funktion verwenden:

				  Hier dein Inhalt!
				



		thesis_sidebars();

Somit wird dein Inhalt in das Framework eingenestet.

Vierter Schritt (optional): Tricks für die richtige Anwendung

Ich verwende die Custom Templates sehr häufig, wie zum Beispiel auf NachhilfeAkademie.org für die Darstellung von verschiedenen Seitenstrukturen. Damit deine custom_function.php aber nicht unübersichtlich wird, empfehle ich dir folgendes:

1. Erstelle einen Ordner “pages” in deinem /custom/ Ordner
2. In diesen Ordner kommen alle deine Custom erstellten Seiten (somit wird nichts überschrieben bei einem Update!)
3. Den Inhalt deiner custom Funktion wandert jetzt in seine eigene Datei (bspw. c_meineFunktion.php)
4. Anstelle des Codes aus Schritt 2 führst du folgendes aus:

   require_once('pages/c_meineFunktion.php');

   Somit wird der PHP-Code geladen und du hast eine übersichtlichere custom_functions.php

Und wie schon immer…. DIY!

Google hatte ja vor einiger Zeit bereits den +1 Button getestet und nun steht er für alle zur Verfügung. Mit diesem Tutorial kannst auch du den Google +1 in deiner Website integrieren.

Voraussetzung für +1

Damit Websiten-Besucher den Google +1 verwenden können, müssen sie über einen Google-Konto verfügen, sowie ein Google-Profil. Für die Integration auf deiner Website benötigst du aber keines von beiden.

+1 erstellen

Google bietet dir zur Erstellung des +1-Buttons einen einfachen Konfigurator, mitdem du bequem deinen gewünschten +1 erstellen kannst. Du findest diesen Konfigurator hier und die Seite sieht wie folgt aus:

Der Konfigurator ist selbsterklärend und man benötigt auch lediglich die Standard-Optionen. Google liefert dazu auch passend eine Video Anleitung:

Schritt 1: Google +1 Integration in Thesis integrieren

So flexibel wie das Thesis Framework ist, haben wir natürlich mehrere Integrationsmöglichkeiten.

• Option 1: Copy & Paste
  Du kannst den vorgefertigten Code von Google’s Konfigurator kopieren und direkt in der Administrationsoberfläche einfügen.Gehe einfach zu Thesis > Site Options und füge den Code unter “Stat and Tracking Scripts” ein und bestätige die Änderung, indem du die Änderungen speicherst.
• Option 2: Custom Functions
  Natürlich kannst du auch den selbigen Code in der custom_functions.php einfügen und eine eigene Funktion dafür erstellen. Diese Option werde ich nicht ausführlicher erklären, da sie im nächsten Schritt noch dargestellt wird.

Wir haben jetzt erfolgreich den JavaScript Aufruf für Google +1 in WordPress integriert.

Schritt 2: +1 Anzeigen

In Schritt 2 kümmern wir uns darum, dass der Google +1 auch angezeigt wird. Hier bietet es sich an, dass man den +1 Button nur auf einzelnen Inhaltsseiten anzeigt. Für das Anzeigen des +1 Buttons müssen wir die Datei custom_functions.php Datei editieren.

Füge folgenden Code am Ende deiner custom_functions.php ein:

function google_one() {
if (is_single()) { ?>

< ?php }
}
add_action('thesis_hook_before_post', 'google_one');

Zeile 4 variiert je nachdem welche Optionen du bei Google +1 Konfigurator gewählt hast.
Der +1 Button von Google wird jetzt erfolgreich auf deiner Seite angezeigt.

Schritt 3: (optional) Design ändern

Du kannst nun mittels deiner custom.cssnun die Ausrichtung des Google +1 verändern. Hier bietet sich die rechte obere Seite sehr gut an für die Integration.

Die Datei custom.css öffnen und folgende Ergänzung hinzufügen:

.custom .google-plus-one { float:right; }

Viel Spass nun damit! Wenn du andere Anwendungsfälle kennst, bitte einfach via Kommentar melden!

Google bietet ja einige Dienstleistungen für einen Webseitenbetreiber an. Zuletzt hab ich über die Integration von der Google Suche in WordPress geschrieben. Heute möchte ich über die Übersetzung der Webseite mittels Google Translate schreiben. Natürlich ist die Übersetzung nicht immer perfekt, aber dennoch eine sehr nette Funktion.

Google Translate einbinden

Den nachstehenden Code einfach in die custom_functions.php einfügen. In der Zeile 6 musst du angeben, um welche Sprache es sich auf deiner Webseite handelt. Ich habe hier standardmäßig ‘de’ eingestellt für Deutsch.

<?php
function addGoogleTranslate() {
?>
< script >
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
     pageLanguage: 'de'  
  }, 'google_translate_element');    }    
< /script >
< script src=" http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" >< /script >
    <?php
}
add_action('thesis_hook_before_sidebars', 'addGoogleTranslate');
?>

Natürlich kannst du jetzt noch in der custom.css das Design anpassen.

Oft fragen mich Leute, warum ich gerade das Thesis DIYTheme empfehle. Ich versuche dann immer die Vorteile des Themes zu erklären, aber meistens geht der Knopf dann auf, wenn man es Hands-on sieht und damit spielen darf. Jedes neue Projekt das ich beginne ist Thesis basierend, weil es mir viel Arbeit abnimmt, bzw. bin ich sogar schon dabei ältere Projekte auf Thesis umzustellen.

Hier ein Auszug von Webseiten, die Thesis als Theme verwenden.

Matt Cutts

Seines Zeichens Webspam Team Leiter bei Google verwendet bei seinem privaten Blog Thesis DIYTheme. Leider dürfte Matt nicht viel Zeit haben, den sein Blog läuft noch in der Version 1.5.

Zur Webseite.

Internetmarketing News

Das Blog wird von Johann Siemers betrieben der bereits seit 2005 über interessante Marketing-Erkenntnisse schreibt. Leider hat Jojo nicht viel Zeit in das Design gesteckt, dafür zählen die Inhalte.

Zur Webseite.

Wlan Info

Eine sehr schöne Anpassung des DIYThemes siehst du auf Wlan-info.net, betrieben von Maximilian Schirmer. Hier findest du die passenden Wlan Router.

Zur Webseite.

Building 43

Das Projekt rund um Robert Scoble der Tech-Firmen interviewt verwendet Thesis DIYTheme, mit sehr schön angepasstem Design. Alles ist möglich mit Thesis. Leider hatten die Verantwortlichen auch noch nicht die Gelegenheit ein Thesis 1.8 update durchzuführen.

Zur Webseite.

Es gibt noch unzählige weitere Seiten die das Thesis Theme einsetzen, wenn du ein besonderes Gusto-Stückchen hast, einfach mich kontaktieren und ich werde die Seite gerne in die Liste aufnehmen.

Viele von euch verwenden bestimmt den beliebten Twitter Dienst. Für WordPress gibt es unzählige Plug-Ins um Wordprses mit Twitter zu verbinden. Die – meiner Meinung – eleganteste Lösung aber bietet WP to Twitter.

Du kannst das Plug-In kostenlos von der WordPress Seite runterladen. Die Installation ist denkbar einfach. Wo es jedoch zu Schwierigkeiten kommen könnte ist bei der Konfiguration.

Warum mir WP to Twitter gefällt

1. Gegenüber anderen Plug-Ins stellt WP to Twitter eine Verbindung zu Twitter über einen API Key. Das heißt, jedesmal wenn du einen Tweet aussendest erscheint unter anderem der Name deiner Applikation.
2. Nahtlose Integration der API von bit.ly, cli.gs oder anderen Services für die automatische Kürzung der URL.
3. Integration mit Google Analytics
4. Einstellungen des Tweets – also der eigentlichen Nachricht.

Die Konfiguration

Du brauchst noch nichts vorab um das Plug-In zu aktivieren. Sobald du es aktiviert hast, gibt dir das Tool die richtungsweisenden Links, damit du an die API Daten von Twitter rankommst, solltest du die Informationen noch nicht haben.

Die Token sehen so ähnliche wie bei mir oben aus. Natürlich ist das nicht der ganze Token. Für den Access Token musst du auf der Developer-Ebene “Access Token” auswählen, dann erhälst du diese Informationen, nach der Registrierung wird nämlich nur der Consumer Key angezeigt.

Viel Spaß.

Links der Woche gab es auf DIYTheme bis jetzt noch nicht. Ich möchte euch hier einmal in der Woche News aus der WordPress & DIYTheme-Szene geben, die ich für interessant halte.

Also fangen wir an.

WordPress sicherstes CMS?!

WordPress Deutschland hat auf dem offiziellen Blog geschrieben, dass WordPress als CMS eines der sichersten CMS-Systemen ist. Getestet wurden ca. 1 Millionen Seiten. Auf newsdash.de findest du weitere Informationen zur “Studie”. Traue keiner Statistik, die du nicht selber gefälscht hast sag ich da einmal dazu. Aber eins stimmt schon: WordPress ist sehr flink beim Updaten von Security Bugs. Was mich jedoch traurig stimmt: Viele verwenden die vor-installierte WordPress Version seines Webhosts und die sind teilweise echt langsam unterwegs, was Updates betrifft… leider.

Zum Artikel.

WordPress 3.1

An der nächsten Version von WordPress wird ja  bereits brav getüfftelt. Laut T3n und WordPress Entwicklern wird in der Version 3.1 eher Updates eingeführt und Front-End verbessert, jedoch wenige neue Features. Diese sollen dann mit Version 3.2 kommen. Das Release von 3.1 ist kurz vor Weihnachten am 15. Dezember geplant.

Zum Artikel.

Überschriften in WordPress

WordPress-Fanatiker Joost de Valk hat vor kurzem über die richtige Einsetzung von Überschriften geschrieben und wie man sie einsetzen soll. Sehr lesenswert und gute Tipps. Würde ich sehr empfehlen. Wenn du Inhaltsverzeichnisse erstellen möchtest, ist eine solche Gliederung pflicht.

Zum Artikel.