DEV Community

loading...

Desarrollar una página de configuración para un plugin de wordpress

Roberto Morais
I am a web application software programmer, I love learning new things and sharing experiences and knowledge with others.
・4 min read

El primer paso es escoger el nombre de nuestro plugin y ese será el nombre de la carpeta y del fichero de instalación de nuestro plugin. Es este caso vamos a llamarlo fuenrob y podremos crear la carpeta y el fichero ejecutando los siguientes comandos dentro de nuestra carpeta de plugins de wordpress:

mkdir fuenrob
cd fuenrob
touch fuenrob.php

Ahora, vamos a editar el fichero fuenrob.php y lo mínimo que debemos añadirle para que nuestro wordpress considere a ese fichero php como un plugin son los siguientes comentarios:

/**
Plugin Name: [Nombre del Plugin]
Plugin URI: [Enlace a web con información sobre plugin]
Description: [Informar de que hace nuestro plugin]
Version: [La versión del plugin]
Author: [¿Quién ha desarrollado el plugin?]
Author URI: [La página web del autor]
License: [Que tipo de licencia de uso tiene tu plugin]
*/

Tan solo con esto conseguimos que nuestro wordpress entienda que ese fichero php sirve para instalar un plugin, pero claro, nadie quiere instalar un plugin que no haga nada, así que, vamos a añadir campos a nuestra tabla en options en el momento de la activación del plugin. Para ello, a nuestro fuenrob.php, vamos a añadirle lo siguiente:

function fuenrob_activate()
{
    /**
     * Si quieres añadir datos a la tabla de options 
     * la sintaxis de add_option es la siguiente: 
     * add_option($nombre,$valor,'',$carga_automatica)
     */
    add_option('nombrePersona','Roberto','','yes');
}
/**
 * Con esta función estamos pidiendo a wordpress que ejecute
 * la función activate cuando se active el plugin.
 */
register_activation_hook(__FILE__,'fuenrob_activate');

Añadiendo esto al fichero ya hacemos que al activar el modulo se agregue un nuevo valor a la tabla options, pero igual que lo añadimos, lo ideal es que lo eliminemos cuando lo desactivamos y para ello hay que añadir esto:

function fuenrob_desactivate()
{
    /**
     * A la función delete_option solo hay que pasarle el nombre
     * de la opción que habíamos añadido. 
     */
    delete_option('nombrePersona');
}
/**
 * Tal y como hicimos al activar, llamamos a la acción de 
 * wordpress que desactiva el módulo y le pedimos que ejecute
 * nuestra función.
 */
register_deactivation_hook(__FILE__,'fuenrob_desactivate');

De este modo nuestro fichero ya ejecuta el añadido y eliminación de un valor nuevo en la tabla de options de nuestro wordpress.
Ahora vamos a añadir una página de configuración que nos permita editar ese valor desde el escritorio de wordpress y para ello primero debemos crear una carpeta admin y un fichero al que podemos llamar como queramos, en mi caso lo llamaré configurations.php:

mkdir admin
cd admin/
touch configurations.php

Este fichero tendrá una clase y en ella vamos a configurar toda la página de administración de la información que vamos añadir y editar de nuestro campo nuevo nombrePersona:

class FuenRobSettingsPage
{
    // Contiene los valores que se utilizarán en los campos de devolución de llamada
    private $options;


    /**
     * Lo que ejecutamos al instanciar la clase:
     * admin_menu agrega una opción nueva al menú. Los detalles de esa 
     * nueva opción están en la function add_plugin_page
     * admin_init indica el contenido de la página de configuración.
     */
    public function __construct()
    {
        add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
        add_action( 'admin_init', array( $this, 'page_init' ) );
    }

    /**
     * Función que añade la opciones del menú, en este caso como un sub menú de ajustes.
     */
    public function add_plugin_page()
    {
        // This page will be under "Settings"
        add_options_page(
            'Settings Admin', 
            'Custom Settings', 
            'manage_options', 
            'fuenrob-setting-admin', 
            array( $this, 'create_admin_page' )
        );
    }

    /**
     * Controlador de la página de configuración a la que llama la opción del menú.
     */
    public function create_admin_page()
    {
        // Set class property
        $this->options = get_option( 'nombrePersona' );
        ?>
        <div class="wrap">
            <h1>My Settings</h1>
            <form method="post" action="options.php">
            <?php
                // This prints out all hidden setting fields
                settings_fields( 'my_option_group' );
                do_settings_sections( 'fuenrob-setting-admin' );
                submit_button();
            ?>
            </form>
        </div>
        <?php
    }

    /**
     * Indica la sección que tendrá la página de configuración
     */
    public function page_init()
    {        
        register_setting(
            'my_option_group', // Grupo de opciones
            'nombrePersona', // Nombre de la opción que queremos editar
            array( $this, 'sanitize' ) // Función que depura la información
        );

        add_settings_section(
            'fuenrob-setting_section_id', // ID de la sección
            'My Custom Settings', // Título de la página
            array( $this, 'print_section_info' ), // Función que añade un texto explicativo
            'fuenrob-setting-admin' // Nombre de la página
        );

        add_settings_field(
            'nombrePersona', // Nombre de campo en base de datos
            'Nombre de persona', // Label del formulario
            array( $this, 'nombrePersona_callback' ), // Función que muestra el input
            'fuenrob-setting-admin', // Nombre de la página en la que se muestra
            'fuenrob-setting_section_id' // ID de la sección en la que se muestra
        );      
    }

    /**
     * Debuguear el dato es necesario.
     *
     * @param array $input Contiene todos los campos de configuración como claves de matriz
     */
    public function sanitize( $input )
    {
        $new_input = array();

        if( isset( $input['nombrePersona'] ) )
            $new_input['nombrePersona'] = sanitize_text_field( $input['nombrePersona'] );

        return $new_input;
    }

    /** 
     * Función para añadir información a la página
     */
    public function print_section_info()
    {
        print 'Enter your settings below:';
    }

    /** 
     * Función para mostrar en input con la información de base de datos
     */
    public function nombrePersona_callback()
    {
        printf(
            '<input type="text" id="nombrePersona" name="nombrePersona[nombrePersona]" value="%s" />',
            isset( $this->options['nombrePersona'] ) ? esc_attr( $this->options['nombrePersona']) : ''
        );
    }
}

if( is_admin() )
    $fuenrob_my_settings_page = new FuenRobSettingsPage();

Una vez hayamos completado esta clase, debemos importar el fichero en nuestro fuenrob.php que es el fichero que se ejecutará al instalar el plugin. Vale con añadir después de los comentarios la siguiente línea:

include(plugin_dir_path(__FILE__) . 'admin/configurations.php');

Con esto ya tenemos un plugin de wordpress con su página de configuración para poder editar los datos adicionales que queremos añadir a nuestra base de datos.
Si en algún momento queremos consultar ese dato para mostrarlo en el frontend vale con ejecutar la siguiente función:

// get_option($nombre)
get_option( 'nombrePersona' )

Discussion (2)

Collapse
eruizdechavez profile image
Erick Ruiz de Chavez

Buen ejemplo de cómo hacer una pagina de configuración. Espero no te moleste si te dejo unos comentarios:

Tal vez para quienes nos dedicamos a hacer plugins sea obvio, pero no estaría por ademas mencionar que después de crear los archivos, tienes que ir a la pagina de plugins y activar tu plugin para que funcione.

Creo que unas capturas de pantalla ayudarían mucho a visualizar lo que estas proponiendo. Por ejemplo, cómo se ve el nuevo link en el sidebar, cómo se ve la pagina de configuración, etc.

Finalmente, creo que para quienes empiezan con el desarrollo de plugins (y de WordPress en general) seria muy util los links a la documentación oficial de las funciones que estas usando en tu ejemplo.

developer.wordpress.org/plugins/pl...

Collapse
fuenrob profile image
Roberto Morais Author

Hola,

Gracias por tus indicaciones y consejos, todos los comentarios que ayuden a mejorar son buenos y bienvenidos :D

Un saludo.