Muy buenas tardes por la mañana, hoy lo que vamos a hacer es dedicarnos a crear una página de configuración para un plugin de WordPress.

Yo estoy aquí creando un plugin de perfil de usuarios y necesito que se puedan modificar algunas opciones.

Por internet hay muchos ejemplos pero sinceramente ninguno me termina de convencer. Entonces lo que voy a hacer es explicarlo aquí en directo con un ejemplo real.

Paso 1. Crear la página de opciones

Eso se hace con la función nativa de WordPress llamada add_options_page(). Y luego que digan que los nombres de las funciones que trae nuestro querido WordPress no son claros.

Hay una serie de parámetros que rellenamos así:

function crear_pagina_de_ajustes(){
    add_options_page(
    'Ajustes de perfiles',        /* Título de la página de ajustes */
    'Perfiles',                   /* Nombre que aparece en el menú */
    'manage_options',             /* Permiso necesario para ver este menú */
    'pagina_ajustes_perfiles',    /* Identificador único para esta página*/
    'mostrar_ajustes_perfiles',   /* Nombre de la función que muestra el contenido */
    3                             /* Posición de este menú en el panel lateral */
    );
}
add_action('admin_menu', 'crear_pagina_de_ajustes');

¿Fácil no?

Pues la verdad que sí.

Tú pon lo que quieras, dale vida a tu lado creativo.

El caso es que una vez añadamos ese código a nuestro plugin, en el menú de ajustes aparecerá la opción que hemos creado.

Fíjate que aparece en la posición 3 (en realidad es la cuarta, pero ten en cuenta que estamos empezando a contar por el cero: 0, 1, 2, 3).

Aunque esto está fatal ahora mismo porque hemos establecido que la función que va a mostrar el contenido de dicha página se llamará mostrar_ajustes_perfiles(), pero no hemos creado dicha función.

Si lo usamos así pues lo primero que va a pasar es que va a fallar.

Como no hay tiempo que perder, la creamos ahora mismo:

function mostrar_ajustes_perfiles(){
    echo '
    <h2>Ajustes de Perfiles</h2>
    <p>Aquí puedes poner lo que te dé la gana.</p>
    ';
}

Ahora sí funciona perfectamente, y te lo voy a demostrar con una captura de pantalla.

Pero esto que tenemos así tal cual no nos sirve para nada, tenemos que meterle toda la lógica que permita realizar cambios en la base de datos para guardar las configuraciones que necesitemos.

Bueno, en realidad esa lógica ya está creada dentro de WordPress, lo que tenemos que hacer ahora es usar las funciones que nos ayudan a adaptar esa lógica a nuestras necesidades.

Como las configuraciones posibles son infinitas, lo que haremos nosotros es crear un campo editable de ejemplo.

Lo bueno es que podemos agrupar los campos editables en distintas secciones, para ayudar al usuario a encontrar la parte que necesita configurar con más facilidad.

Paso 2. Crear las secciones y campos

Para esto necesitamos mantener la concentración porque puede parecer un poco lioso.

Pero no lo es, piensa todo lo que tendrías que programar desde cero si estas funciones no existieran, así que simplemente aprende del ejemplo y adáptalo a tu situación.

// Crear las secciones y campos editables
function crear_secciones_y_campos(){

    // Crear una sección de ajustes
    add_settings_section(
    'seccion_ajustes_generales',                     /* Identificador de la sección */
    'Ajustes generales',                             /* Título de la sección */
    'mostrar_encabezado_seccion_ajustes_generales',  /* Función para mostrar contenido de cabecera */
    'pagina_ajustes_perfiles'                        /* Página de ajustes a la que va asociada */
    );

    // Registrar una opción
    register_setting(
    'grupo_ajustes',  /* Nombre del grupo de opciones */
    'opcion_ejemplo'  /* Nombre de la opción */
    );

    add_settings_field(
    'opcion_ejemplo',                        /* Identificador único de este campo */
    'Título de este campo',                  /* Título que se muestra junto a este campo */
    'mostrar_input_del_campo_de_ejemplo',    /* Función que imprime el input para el formulario */
    'pagina_ajustes_perfiles',               /* Página de ajustes a la que va asociado */
    'seccion_ajustes_generales'              /* Sección de ajustes a la que va asociado */
    );

}
add_action('admin_init', 'crear_secciones_y_campos');

A la derecha de cada cosa te he dejado la descripción de lo que es.

Fíjate que hemos definido dos funciones como parámetros, que son:

  • La que muestra el encabezado de la sección: mostrar_encabezado_seccion_ajustes_generales()
  • La que muestra el input en el campo editable de ejemplo: mostrar_input_del_campo_de_ejemplo()

Pues vamos a crearlas.

// Función que muestra el texto de encabezado de la sección
function mostrar_encabezado_seccion_ajustes_generales(){
    echo '<p>Encabezado de la seccion de ajustes generales</p>';
}

// Función que muestra el input del campo
function mostrar_input_del_campo_de_ejemplo(){

    echo '<input
    type="text"
    name="opcion_ejemplo"
    value="'.esc_attr(get_option('opcion_ejemplo')).'" />';

}

Ya casi está, solo falta modificar la función que imprime el contenido que se muestra en la página de ajustes.

Esa ya la teníamos creada de antes pero ahora lo que hacemos es ampliarla para meterle toda la gracia del asunto.

// Función que muestra el contenido de la página de ajustes
function mostrar_ajustes_perfiles(){
    echo '
    <h1>Ajustes de Perfiles</h1>
    <p>Aquí puedes poner lo que te dé la gana.</p>
    ';

    // Formulario de opciones
    echo '<form action="options.php" method="post">';

    // Decirle a WordPress que genere los campos
    settings_fields('grupo_ajustes');                 /* Id del grupo de opciones */
    do_settings_sections('pagina_ajustes_perfiles');  /* Id de la página de ajustes */

    // Mostrar el botón de Guardar y cerrar el formulario
    echo '
    <input
      type="submit"
      name="submit"
      class="button button-primary"
      value="Guardar"
    />
    </form>';
}

Y ahora sí que ya está todo listo.

Si nos vamos al área de administración y accedemos a la página de ajustes, veremos que ya tiene otra pinta.

Para comprobar que está todo en orden podemos escribir algún valor en el campo de texto y darle a Guardar.

Debería de salir el mensaje de que se han guardado los ajustes.

Así de fácil.

Pues ahora ya sabes cómo crear secciones y meterle todos los campos que quieras a cada sección.

Hay que admitir que es un poco lioso pero antes de ponerte a llorar piensa que no es para tanto e intenta extraer la esencia del asunto, que es muy sencilla:

  • Por un lado añades la página de opciones al menú.
  • Luego creas la función que genera el contenido de esa página de opciones.
  • Y finalmente registras tanto las secciones como los campos editables
  • Dichas secciones y campos editables están asociados a un grupo de opciones editables que en nuestro caso hemos llamado skpu_ajustes, pero que tú puedes llamar como más te guste.

Lo primero que te recomiendo es que copies el ejemplo tal cual yo lo he hecho. Y luego empieza a tocar parámetros para ponerlos acorde a tu propio plugin.

Luego lo que te toca es crear más campos, que se hacen igual que el primero pero poniéndole otro identificador, obviamente.

También hay que decir que no es obligatorio que tu input sea de tipo texto. Puedes poner cualquier cosa igual que en un formulario normal de toda la vida.