Schlagwort: functions.php

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.

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!