Wer ein einfaches WordPress Theme hat, wünscht sich oft eine globale Seite für Optionen. Komplexere Themes bieten oft passende Funktionen. Auch gibt es diverse Plugins, die man für so etwas verwenden kann. Als Webentwickler, der u.a. viel mit WordPress zu tun hat, sehe ich oft die Kombination „ACF“ und „ACF Options Page“. Manchmal lohnt sich die Verwendung solcher Drittanbieter-Tools. Aber die Tatsache, dass diese nicht kostenlos sind und oft klassischen „Overload“ darstellen, schreckt mich meist davon ab, so etwas zu verwenden – zumindest wenn ich die freie Wahl habe. Anders schaut es da natürlich aus, wenn man komplexe Datenstrukturen global einbinden will, dann ist man meist schneller mit ACF und Options Page unterwegs, als wenn man es alleine programmiert. Trotzdem – traut man sich zu das eigene WordPress Theme zu erweitern, so ist man auf der recht sicheren Seite:
- Kein unnötiger Ballast, schlanker Code
- Für die Performance ist eine Integration in z.B. der functions.php besser
- Keine Abhängigkeit von anderen Entwicklern oder Unternehmen
Das schöne ist, dass das Programmieren einer eigenen WordPress Optionen-Seite relativ einfach ist. Ein kurzes Beispiel aus meinem Theme kann man im Folgenden sehen und hoffentlich nachvollziehen.
TL;DR.: Wer keine Lust zum Lesen hat und einfach nur übernehmen will, findet auf Github das fertige (simple) Beispiel und kann damit weiterarbeiten. In diesem Artikel ist das ganze nochmal wesentlich einfacher erklärt, als im Beispiel auf Github!
Wofür ich eine Optionen-Seite in WordPress verwende
Im Grunde brauche ich so eine Seite aus recht klassischen Gründen. Ich habe Elemente auf meinem WordPress Theme, die sich global wiederholen. Diese wären:
- Social Buttons (Facebook, Twitter, Linkedin, Github) im Header
- Social Buttons (Facebook, Twitter, Linkedin, Github) im Footer
- Share Buttons unter Artikeln (Facebook, Twitter und Co.)
- Teaser-Text unter jedem Artikel („Webentwickler gesucht? …“)
- Google Analytics-Tracking Code
Klar ist, dass ich alle Elemente problemlos in das Theme – zumal es eine Eigenentwicklung ist – hätte direkt schreiben können. Aber da bin ich faul und einiges ändere ich recht häufig – beispielsweise den Teasertext oder ändere den Tracking Code – mal Yandex, mal Google Analytics und dann wieder Piwik. Da hab ich einfach keine Lust Netbeans zu starten, um solche simplen Änderungen durchzuführen.
Schritt 1: Menü-Seite grob gestalten und einbinden
Wir legen hier den groben Rahmen der Optionen-Seite fest. Innerhalb des form-Tags wird definiert, wohin die Daten geschickt werden, die man später ein die Felder eintippt. Mit „do_settings_sections()“ legen wir hier schon drei Bereiche innerhalb der Optionen-Seite fest. Zum Schluss kommt der „Speichern“-Button. Mit „add_theme_menu_item()“ legen wir in der Sidebar des Admins einen neuen Menü-Eintrag fest und mir „add_action()“ wird das ganze auch ausgeführt, so dass WordPress damit etwas mitbekommt.
<?php
function theme_settings_page()
{
?>
<div class="wrap">
<h1>Optionen für "ds2016"-Theme</h1>
<form method="post" action="options.php">
<?php
settings_fields("section");
do_settings_sections("theme-options");
submit_button();
?>
</form>
</div>
<?php
}
function add_theme_menu_item()
{
add_menu_page("Theme-Optionen", "Theme-Optionen", "manage_options", "theme-panel", "theme_settings_page", null, 99);
}
add_action("admin_menu", "add_theme_menu_item");
Schritt 2: Einzelne Bereiche und Felder definieren
Das sieht erst einmal recht kompliziert aus, ist aber eigentlich einfach. Damit WordPress weiß, was es innerhalb der Optionen-Seite anzeigen muss, wird das definiert und später via „add_action()“ übergeben.
Wir fügen mit „add_settings_section()“ einen Bereich ein. Der erste hat die Kennung „theme-options“. Diesem Bereich ordnen wir dann mittels „add_settings_field()“ ein Feld zu – das kann ein Input, Textarea o.ä. sein. Der erste Parameter setzt den Namen, den WordPress später zum speichern und ausgeben des gespeicherten verwendet. Der zweite Parameter ist der Name und der dritte Parameter ist die Funktion, die später für die Anzeige sorgt. Vierter und fünfter Paramter ordnen das Feld dem Bereich zu. Anschließend – damit unsere Eingabe auch abgespeichert werden kann, muss das ganze registriert werden.
Ich habe hier außerdem einige weitere Felder (Social Buttons mit eigenem Bereich sowie Analytics Code), die genauso aufgebaut sind, wie das erste Beispiel.
function add_theme_options()
{
add_settings_section("section", "Einstellungsmöglichkeiten", null, "theme-options");
add_settings_field("article_teaser", "Unter jedem Artikel", "display_articleteaser", "theme-options", "section");
register_setting("section", "article_teaser");
}
add_action("admin_init", "add_theme_options");
Schritt 3: Felder gestalten
Bezogen auf der Beispiel aus Schritt 2 brauchen wir jetzt noch eine Funktion mit Namen „display_articleteaser()“, in der unser Feld gestaltet wird. Dort muss die ID und der „name“-Parameter mit dem innerhalb von „add_settings_field()“ festgelegten 1. Parameter übereinstimmen. Das wäre also article_teaser.
Das schaut dann in der Summe so aus:
<?php
function display_articleteaser()
{
?>
<textarea id="article_teaser" style="width:100%;height:100px" name="article_teaser"><?php echo get_option('article_teaser'); ?></textarea>
<?php
}
?>
Schritt 4: Die Theme Optionen-Seite ist fertig!
Das ganze sollte man nun z.B. in der functions.php des Themes abspeichern. Ich speichere solche Dinge eher in einzelnen Dateien und binde diese in die functions.php mit ein. Das macht vor allem Sinn, wenn man viele Theme-Optionen zur Verfügung stellen will. Dann lohnt es sich alledings auch mehrere Menüpunkte anzubieten und nicht alles auf einer einzigen Optionen-Seite anzubieten.
Schritt 5: WordPress-Funktion get_option() verwenden
Mit der Funktion „get_option()“ kann man nun das Feld bzw. dessen Inhalt an einer beliebigen Stelle im Theme ausgeben. Ich verwende hier eine zweite Datei, die in die functions.php eingebunden wird und dort habe ich einzelne Funktionen, die auf die Felder zugreifen und ausgeben oder etwas damit anstellen.
function teaser_under_singlearticle()
{
$teaser = get_option('article_teaser');
if ($teaser != '')
{
$teaser_html = '<div id="article-teaser-wrapper" class="row"><div class="col-lg-12"><div class="alert alert-info article-teaser">';
$teaser_html .= $teaser;
$teaser_html .= '</div></div></div>';
echo $teaser_html;
}
}
Jetzt habe ich eine Funktion mit Namen „teaser_under_singlearticle()“, die ich überall im Theme verwenden kann. Drum herum ist etwas HTML zur Darstellung. Die Funktion holt sich den Inhalt aus dem Option-Feld „article_teaser“, den wir im Vorfeld definiert haben (siehe 1. und 2.)!
Schritt 6: WordPress Theme anpassen – single.php zum Beispiel
Der letzte Schritt ist logisch – das ganze muss eben noch an einer geeigneten Stelle verwendet werden. Bei mir ist es die single.php. Da muss jeder selbst wissen, wie er was vor hat. Im Einsatz schaut das recht einfach aus:
<?php teaser_under_singlearticle(); ?>
Anmerkungen zum Thema „Optionen-Seite“
Der Quellcode ist relativ simple und prozedural geschrieben. Wer Wert auf Wiederverwendbarkeit legt, kann bzw. sollte sich überlegen, ob es nicht Sinn macht das ganze objektorientiert zu programmieren. Das Mischen von PHP und HTML ist ebenfalls alles andere als schön, wird aber (leider) bei WordPress Entwicklern durchgehend so gemacht. Wer Lust hat, der kann hier beispielsweise die Logik schön von der Darstellung trennen, in dem er passende Composer-Pakete verwendet. Für den Laien reicht es allerdings natürlich so wie oben gezeigt vollkommen aus. Nur wird der Quellcode größer, sollen nicht zwei sondern 50 Funktionen implementiert werden und wiederholen sich diese Elemente stark bzw. haben ähnlichen Aufbau, kann man da einiges abstrahieren und den Code schlank halten, ansonsten landet man in großem Wirr Warr, der viel Geld kostet.
Auf github.com findet man das komplette Beispiel in vereinfachter Form: Weiter zu github
