Während wir ein großer Fan des WordPress-Customizers zum Hinzufügen von Theme-Optionen sind, bevorzugen einige Leute ein einfaches Admin-Panel für ihr Theme oder möchten zusätzlich zum Customizer ein einfaches Admin-Panel integrieren. In diesem Beitrag zeige ich Ihnen, wie Sie mit der nativen Einstellungs-API von WordPress über eine einfache Klasse, die leicht um weitere Optionen erweitert werden kann, ganz einfach Ihr eigenes Admin-Panel erstellen können. Dies ist nicht so sehr ein Tutorial, sondern eher ein Startcode, mit dem Sie Ihr Admin-Panel erstellen können, damit Sie sich im Code auskennen sollten, bevor Sie beginnen 😉
Erstellen des Themenoptionen-Panels
Unten finden Sie eine Klasse, mit der Sie Ihr Admin-Panel erstellen können. Die Klasse fügt ein neues Themenoptionen-Panel mit 3 verschiedenen Einstellungen für ein Beispiel hinzu (Checkbox, Eingabe und Auswahl). Fügen Sie einfach den folgenden Code ganz unten in Ihre Datei functions.php ein oder erstellen Sie eine neue Datei und verwenden Sie dann die Funktion require_once, um sie in Ihre Datei functions.php aufzurufen (bevorzugt).
Screenshot der Theme-Admin-Seite
Bevor ich Ihnen den Code zeige, möchte ich Ihnen einen Screenshot zeigen, wie das von Ihnen erstellte Admin-Panel aussieht.
Der Admin-Bildschirmcode
Hier ist der Code, den Sie benötigen, um das Admin-Panel zu erstellen und die Hilfsfunktion einzuschließen, um die Werte einer beliebigen Einstellung zu erhalten:
<?php
/**
* Create A Simple Theme Options Panel
*
*/
// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// Start Class
if ( ! class_exists( 'WPEX_Theme_Options' ) ) {
class WPEX_Theme_Options {
/**
* Start things up
*
* @since 1.0.0
*/
public function __construct() {
// We only need to register the admin panel on the back-end
if ( is_admin() ) {
add_action( 'admin_menu', array( 'WPEX_Theme_Options', 'add_admin_menu' ) );
add_action( 'admin_init', array( 'WPEX_Theme_Options', 'register_settings' ) );
}
}
/**
* Returns all theme options
*
* @since 1.0.0
*/
public static function get_theme_options() {
return get_option( 'theme_options' );
}
/**
* Returns single theme option
*
* @since 1.0.0
*/
public static function get_theme_option( $id ) {
$options = self::get_theme_options();
if ( isset( $options[$id] ) ) {
return $options[$id];
}
}
/**
* Add sub menu page
*
* @since 1.0.0
*/
public static function add_admin_menu() {
add_menu_page(
esc_html__( 'Theme Settings', 'text-domain' ),
esc_html__( 'Theme Settings', 'text-domain' ),
'manage_options',
'theme-settings',
array( 'WPEX_Theme_Options', 'create_admin_page' )
);
}
/**
* Register a setting and its sanitization callback.
*
* We are only registering 1 setting so we can store all options in a single option as
* an array. You could, however, register a new setting for each option
*
* @since 1.0.0
*/
public static function register_settings() {
register_setting( 'theme_options', 'theme_options', array( 'WPEX_Theme_Options', 'sanitize' ) );
}
/**
* Sanitization callback
*
* @since 1.0.0
*/
public static function sanitize( $options ) {
// If we have options lets sanitize them
if ( $options ) {
// Checkbox
if ( ! empty( $options['checkbox_example'] ) ) {
$options['checkbox_example'] = 'on';
} else {
unset( $options['checkbox_example'] ); // Remove from options if not checked
}
// Input
if ( ! empty( $options['input_example'] ) ) {
$options['input_example'] = sanitize_text_field( $options['input_example'] );
} else {
unset( $options['input_example'] ); // Remove from options if empty
}
// Select
if ( ! empty( $options['select_example'] ) ) {
$options['select_example'] = sanitize_text_field( $options['select_example'] );
}
}
// Return sanitized options
return $options;
}
/**
* Settings page output
*
* @since 1.0.0
*/
public static function create_admin_page() { ?>
<div class="wrap">
<h1><?php esc_html_e( 'Theme Options', 'text-domain' ); ?></h1>
<form method="post" action="options.php">
<?php settings_fields( 'theme_options' ); ?>
<table class="form-table wpex-custom-admin-login-table">
<?php // Checkbox example ?>
<tr valign="top">
<th scope="row"><?php esc_html_e( 'Checkbox Example', 'text-domain' ); ?></th>
<td>
<?php $value = self::get_theme_option( 'checkbox_example' ); ?>
<input type="checkbox" name="theme_options[checkbox_example]" <?php checked( $value, 'on' ); ?>> <?php esc_html_e( 'Checkbox example description.', 'text-domain' ); ?>
</td>
</tr>
<?php // Text input example ?>
<tr valign="top">
<th scope="row"><?php esc_html_e( 'Input Example', 'text-domain' ); ?></th>
<td>
<?php $value = self::get_theme_option( 'input_example' ); ?>
<input type="text" name="theme_options[input_example]" value="<?php echo esc_attr( $value ); ?>">
</td>
</tr>
<?php // Select example ?>
<tr valign="top" class="wpex-custom-admin-screen-background-section">
<th scope="row"><?php esc_html_e( 'Select Example', 'text-domain' ); ?></th>
<td>
<?php $value = self::get_theme_option( 'select_example' ); ?>
<select name="theme_options[select_example]">
<?php
$options = array(
'1' => esc_html__( 'Option 1', 'text-domain' ),
'2' => esc_html__( 'Option 2', 'text-domain' ),
'3' => esc_html__( 'Option 3', 'text-domain' ),
);
foreach ( $options as $id => $label ) { ?>
<option value="<?php echo esc_attr( $id ); ?>" <?php selected( $value, $id, true ); ?>>
<?php echo strip_tags( $label ); ?>
</option>
<?php } ?>
</select>
</td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div><!-- .wrap -->
<?php }
}
}
new WPEX_Theme_Options();
// Helper function to use in your theme to return a theme option value
function myprefix_get_theme_option( $id = '' ) {
return WPEX_Theme_Options::get_theme_option( $id );
}
Verwenden der Optionen in Ihrem Thema
Die Verwendung Ihrer Optionen ist sehr einfach, insbesondere mit der im obigen Code enthaltenen Hilfsfunktion. Hier ist ein Beispiel dafür, wie Sie die Hilfsfunktion verwenden würden, um den Wert für das Dropdown-Feld mit der ID „select_example“ abzurufen und anzuzeigen.
$value = myprefix_get_theme_option( 'select_example' );
echo $value;
Weitere Informationen zum Erstellen von Admin-Bildschirmen
Ich habe TONNEN von Admin-Seiten gesehen, die alle auf sehr unterschiedliche Weise erstellt wurden, aber ich persönlich mag die Methode, die ich Ihnen oben gezeigt habe. Es ist ganz einfach und direkt auf den Punkt. Es ist nicht nötig, mit Ihren Themenoptionen so verrückt zu werden! Wenn Sie weitere Informationen zum Erstellen von Admin-Bildschirmen benötigen, sollten Sie die Verwaltungsbildschirme Codex.