Si bien somos un gran admirador del personalizador de WordPress para agregar opciones de tema, algunas personas prefieren un panel de administración simple para su tema o buscan incorporar un panel de administración básico además del Personalizador. En esta publicación, le mostraré cómo puede crear fácilmente su propio panel de administración utilizando la API de configuración nativa de WordPress a través de una clase simple que se puede extender fácilmente para agregar más opciones. Esto no es tanto un tutorial sino más un código de inicio que puede usar para crear su panel de administración, por lo que debe conocer el código antes de comenzar 😉
Creación del panel de opciones del tema
A continuación se muestra una clase que puede utilizar para crear su panel de administración. La clase agregará un nuevo panel de opciones de tema con 3 configuraciones diferentes para un ejemplo (casilla de verificación, entrada y selección). Simplemente inserte el siguiente código directamente en su archivo functions.php en la parte inferior o cree un nuevo archivo y luego use la función require_once para llamarlo en su archivo functions.php (preferiblemente).
Captura de pantalla de la página de administración del tema
Antes de mostrarte el código, quería compartir contigo una captura de pantalla de cómo se verá el panel de administración que crearás.
El código de la pantalla de administración
Aquí está el código que necesita para crear el panel de administración e incluir la función auxiliar para obtener los valores de cualquier configuración:
<?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 );
}
Uso de las opciones en su tema
Usar sus opciones es muy fácil, especialmente con la función de ayuda incluida en el código anterior. A continuación, se muestra un ejemplo de cómo utilizaría la función auxiliar para obtener y mostrar el valor del campo desplegable que tiene un ID de «select_example».
$value = myprefix_get_theme_option( 'select_example' );
echo $value;
Más información sobre la creación de pantallas de administración
He visto TONELADAS de páginas de administración, todas creadas de formas muy distintas, pero personalmente me gusta el método que les mostré anteriormente. Es muy simple y directo al grano. ¡No hay necesidad de volverse tan loco con las opciones de su tema! Si necesita más información para crear pantallas de administración, querrá consultar la Códice de pantallas de administración.