ATENCIÓN AL CLIENTE: +34 923 199 148

Crear la página de configuración de un plugin de WordPress

Si has necesitado alguna vez un pequeño fragmento de código PHP para WordPress, seguro que te has quedado con ganas de programar un plugin.

Y si has programado un plugin, has tenido fijo la necesidad de montar una página de configuración.

En este post, te voy a enseñar cómo hacer una sencilla página de configuración / opciones para tu plugin de WordPress en PHP.

Vamos a suponer que nuestro plugin se llama NOMBREPLUGIN (he puesto este nombre para que sea más sencillo copiar el código y sustituir el nombre), entonces, dentro del directorio del mismo tendremos un fichero llamado nombreplugin.php con un contenido similar a este:

<?php
/*
Plugin Name: NOMBREPLUGIN
Version: 0.0.1
Description: Plugin de pruebas
Author: Dámaso Velázquez

require_once( plugin_dir_path( __FILE__ ) . 'includes/configuracion.php' );
require_once( plugin_dir_path( __FILE__ ) . 'includes/pagina-configuracion.php' );
require_once( plugin_dir_path( __FILE__ ) . 'includes/cosas_que_hace_mi_plugin.php' );

?>

En este caso, vamos a poner la parte de la página de configuración, dentro del fichero pagina-configuracion.php con la siguiente estructura:

En este fichero, vamos a empezar agregando la página a la sección de ajustes de nuestro WordPress y “pintándola” con cada carga del backend:

<?php

// Agregar la página de configuración al menú de administración
function agregar_pagina_configuracion() {
    add_options_page('Configuración de NOMBREPLUGIN', 'NOMBREPLUGIN', 'manage_options', 'nombreplugin-config', 'renderizar_pagina_configuracion');
}
add_action('admin_menu', 'agregar_pagina_configuracion');

// Renderizar la página de configuración
function renderizar_pagina_configuracion() {
    ?>
    <div class="wrap">
        <h1>Configuración de NOMBREPLUGIN</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('nombreplugin_config');
            do_settings_sections('nombreplugin-config');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

En este ejemplo simplemente he puesto un par de campos de opciones:

  • Una caja de texto libre, llamada nombreplugin_texto
  • Un elemento de tipo verdadero/falso (checkbox) llamado nombreplugin_checkbox

En el siguiente código, lo que vamos a hacer es a registrar esos campos:

// Registrar los campos de configuración
function registrar_campos_configuracion() {
    // Registrar la sección de configuración
    add_settings_section('nombreplugin_config_seccion', 'Configuración General', '', 'nombreplugin-config');

    // Registrar la caja de texto
    add_settings_field('nombreplugin_texto', 'Texto de Configuración', 'renderizar_campo_texto', 'nombreplugin-config', 'nombreplugin_config_seccion');

    // Registrar el checkbox
    add_settings_field('nombreplugin_checkbox', 'Checkbox de Configuración', 'renderizar_campo_checkbox', 'nombreplugin-config', 'nombreplugin_config_seccion');

    // Registrar los campos
    register_setting('nombreplugin_config', 'nombreplugin_texto');
    register_setting('nombreplugin_config', 'nombreplugin_checkbox');
}
add_action('admin_init', 'registrar_campos_configuracion');

Y por último, sólo nos queda “pintar” los campos cuando se cargue la página de configuración con el siguiente código:

// Renderizar el campo de texto
function renderizar_campo_texto() {
    $texto = get_option('nombreplugin_texto');
    echo '<input type="text" name="nombreplugin_texto" value="' . esc_attr($texto) . '" />';
}

// Renderizar el campo de checkbox
function renderizar_campo_checkbox() {
    $checkbox = get_option('nombreplugin_checkbox');
    echo '<input type="checkbox" name="nombreplugin_checkbox" value="1" ' . checked(1, $checkbox, false) . ' />';
}

?>

De esta forma tan sencilla, cambiando nombreplugin por el nombre de nuestro plugin, tendremos montada nuestra página de configuración/opciones del plugin.

Quizá te interese...

Deja un comentario...

Suscribirme
Notificación de
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios