Beiträge

WordPress: Seite für Theme-Optionen im Backend ohne Plugin erstellen

Hochwertige WordPress-Themes bringen zumeist vielfältige Möglichkeiten mit sich, Einstellungen direkt aus dem Backend heraus vornehmen zu können. Dieser Artikel erklärt die grundlegenden 2 Schritte, wie man eine solche Theme-Option-Page erstellt, mit Optionen ausstattet und diese Optionen letztlich im Theme ausgibt/anzeigt/verwendet. In einem folgenden Artikel werden wir dann die Optionsseite funktionell und optisch aufmotzen.

WordPress: Seite für Theme-Optionen im Backend ohne Plugin erstellen

Theme Options Page anlegen

Zuerst muss die Seite für das Backend erstellt werden. Folgende Code gehört in die functions.php des Themes und sorgt für eine Optionsseite im Menü des Backends unter „Einstellungen“ > „Theme-Optionen“.

Weiterhin werden durch den Code ein Eingabefeld und eine Textarea in der Theme-Options-Page erstellt. Das Eingabefeld „Fußzeile“ ermöglicht beispielsweise einen Hinweis aus das Copyright, den Designer oder was auch immer. Die Textarea ermöglicht hier im Beispiel einen Trackingcode in den Fußbereich der Website (footer.php) einzubauen.

add_action( 'admin_init', 'theme_options_init' );
add_action( 'admin_menu', 'theme_options_add_page' );

// Einstellungen registrieren (http://codex.wordpress.org/Function_Reference/register_setting)
function theme_options_init(){
register_setting( ‚wellseo_options‘, ‚wellseo_theme_options‘, ‚wellseo_validate_options‘ );
}

// Seite in der Dashboard-Navigation erstellen
function theme_options_add_page() {
add_theme_page(‚Theme-Optionen‘, ‚Theme-Optionen‘, ‚edit_theme_options‘, ‚theme-optionen‘, ‚wellseo_theme_options_page‘ ); // Seitentitel, Titel in der Navi, Berechtigung zum Editieren (http://codex.wordpress.org/Roles_and_Capabilities) , Slug, Funktion
}

// Optionen-Seite erstellen
function wellseo_theme_options_page() {
global $select_options, $radio_options;
if ( ! isset( $_REQUEST[’settings-updated‘] ) )
$_REQUEST[’settings-updated‘] = false; ?>

<div class=“wrap“>
<?php screen_icon(); ?><h2>Theme-Optionen für <?php bloginfo(’name‘); ?></h2>

<?php if ( false !== $_REQUEST[’settings-updated‘] ) : ?>
<div class=“updated fade“>
<p><strong>Gespeichert!</strong></p>
</div>
<?php endif; ?>

<form method=“post“ action=“options.php“>
&lgt;?php settings_fields( ‚wellseo_options‘ ); ?>
<?php $options = get_option( ‚wellseo_theme_options‘ ); ?>

<table class=“form-table“>
<tr valign=“top“>
<th scope=“row“>Fußzeile</th>
<td><input id=“wellseo_theme_options[fusszeile]“ class=“regular-text“ type=“text“ name=“wellseo_theme_options[fusszeile]“ value=“<?php esc_attr_e( $options[‚fusszeile‘] ); ?>“ /></td>
</tr>
<tr valign=“top“>
<th scope=“row“>Trackingcode</th>
<td><textarea id=“wellseo_theme_options[trackingcode]“ class=“large-text“ cols=“50″ rows=“10″ name=“wellseo_theme_options[trackingcode]“><?php echo esc_textarea( $options[‚trackingcode‘] ); ?></textarea></td>
</tr>
</table>

<!– submit –>
<p class=“submit“><input type=“submit“ class=“button“ value=“Speichern“ /></p>
</form>
</div>
<?php }

// Strip HTML-Code:
// Hier kann definiert werden, ob HTML-Code in einem Eingabefeld
// automatisch entfernt werden soll. Soll beispielsweise im
// Copyright-Feld KEIN HTML-Code erlaubt werden, kommentiert die Zeile
// unten wieder ein. http://codex.wordpress.org/Function_Reference/wp_filter_nohtml_kses
function kb_validate_options( $input ) {
// $input[‚copyright‘] = wp_filter_nohtml_kses( $input[‚copyright‘] );
return $input;
}

Oder per include

Wenn der Code für die Optionsseite umfangreicher ausfällt, kann darüber nachgedacht werden, ihn in eine eigene Datei auszulagern und diese Datei in der functions.php zu inkludieren.

Nehmen wir also einmal an, wir hätten obigen Code in einer seperaten Datei gespeichert, welche da beispielsweise heisst wellseo-theme-options.php und welche wir direkt im Themeordner ablegen. Folglich inkludieren wir diese Datei in der functions.php durch folgenden Code.

require_once ( get_stylesheet_directory() . '/wellseo-theme-option.php' );

Erstellte Theme-Optionen im Theme ausgeben

Die nun erstellten Werte können theoretisch überall im Theme angezeigt werden. In unserem Beispiel geben wir über fusszeile einen Hinweis auf den Designer aus. trackingcode wird auch seiner Bestimmung nach genutzt.

<?php
$options = get_option('wellseo_theme_options');
echo $options['fusszeile'];
echo $options['trackingcode'];
?>

Fragen, Anregungen oder konstruktive Kritik? Ich freue mich auf den Dialog!

Bilder verursachen Ladezeit. Wir sprechen nicht nur von Datenmenge, sondern auch von HTTP-Anfragen: jedes einzelne Bild verursacht eine neue HTTP-Anfrage, welche den Seitenaufbau verlangsamen. Statistiken zeigen, das eine Website oftmals geschlossen wird, bevor sie überhaupt geladen ist. Warum? Zu lange Ladezeit. Lazy Load hilft (nicht nur) diese Gegebenheit erfolgreich zu umgehen.

Lazy Load: Websites und Bilder auf der Überholspur

Was ist Lazy Load?

“Lazy Load” ist die Bezeichnung für eine Technik, Bilder erst dann zu laden, wenn sie gebraucht werden. Dein Besucher scroolt also über deine Website und sobald ein Bild im Viewport (der sichtbare Bereich deiner Website im Browser) erscheinen soll, wird es geladen. Nicht schon beim Seitenaufrauf.

Alternativ gibt es Lösungen, welche Bilder schon dann laden, wenn sie kurz vor dem Viewport sind. Beispielsweise 100 oder 200 Pixel. Mit hoher Wahrscheinlichkeit wird dein Besucher das Bild also gleich sehen wollen – Du hat also einen kleinen zeitlichen Vorsprung das Bild schon zu laden.

Warum ist Lazy Load wichtig?

User-Experience

Die Benutzererfahrung (neudeutsch User-Experience) wird durch Lazy Load steigen, da deine Website schlanker ist und schneller lädt. Fühlen sich die Besucher auf deiner Website wohl, bleiben sie länger und empfehlen sie öfters weiter. Bleiben sie länger, passiert was? Sie können deine Website besser erforschen, lesen mehr Inhalte und Du wirst somit relevanter für Google. Wenn deine Besucher deine Website empfehlen, passiert was? Doofe Frage…

Site-Speed

Google wird registrieren, das deine Website wesentlich schlanker ist, was nur von Vorteil ist. Google hat bereits mehrmals betont, das schlanke, schnell ladende Websites bevorzugt werden. Sicher, das ist nur ein Faktor, um in den SERPs zu steigen, aber es ist einer. Wieder einer. Und sei es nur ein Kleiner. Und demnächst optimierst Du den nächsten Punkt. Dann ist es wieder einer. Am Ende hast Du eine High-Performance-Website. Tut das alles Not? Frage Dich, was deine Mitbewerber alles tun und ob Du besser dastehen willst. Sodann, alles klar.

Traffic, Traffic, Traffic!

Ebenso erwähnenswert ist der Trafficverbrauch deines Servers. Der wird nämlich sinken. Ebenso der Trafficverbrauch jener Besucher. Bei Flatrates am Home-PC mag das noch irrelevant sein. Nicht aber unbedingt, wenn sie mit Mobilgeräten deine Website besuchen.

Und wenn die Trafficdrosseln der Internetrprovider erst einmal eingeführt sind oder diverse Netzagenturen entscheiden welche Websites bevorzugt schnell ausgeliefert werden, spätestens dann solltest Du Dir Gedanken machen, wie Du deine Website möglichst schlank hältst.

Die Zeit kommt, in welcher 80000er-DSL-Leitung zzgl. Flatrate und uneingeschränkter Nutzung der Vergangenheit angehören. Besser Du bereitest Dich schon jetzt darauf vor, statt später das böse erwachen zu bekommen.

Kurze Frage, kurze Antwort. Der meta-tag “generator” wird nicht vom verwendeten Theme generiert, sondern stammt aus dem Kern der WordPress-Installation. Wie immer: möchte man eine Kernfunktion von WordPress ändern, sollte man nicht direkt im Kern eingreifen und modifizieren, sondern die gewünschte Änderung in der functions.php des verwendeten Themes vornehmen. Von hieraus harkt man sich dann im Kern ein und veranlasst die Änderung.

WordPress Meta-Tag “generator” ohne Plugin entfernen

Warum man die functions.php bearbeitet und nicht direkt im Kern

Da sind 2 wichtige Gründe. Erstens zerschießt es dir, sofern Du etwas falsch machst (was man ja aber auch wieder rückgängig machen kann), erstmal nur das Theme und nicht gleich die ganze Website. Zweitens: sobald die neue Version von WordPress erscheint und man updatet, gehen leicht alle Änderungen im Kern verloren. Daher immer in der functions.php Funktionen des Kern ändern.

Ja, und wie nun das meta-tag “generator” ändern?

Einfach folgenden Codeschnipsel in die functions.php des verwendeten Themes eintragen:

remove_action('wp_head', 'wp_generator');

So einfach ist das. Schon ist das meta-tag “generator” aus dem Header von WordPress verschwunden.