Crear un plugin

Contenido

Cómo crear un plugin de WordPress

¿Qué es un plugin?

A la hora de crear un plugin, lo primero que tenemos que tener claro es, qué es un plugin.

Un plugin no es mas que una extensión para wordpress. Resumiendo mucho, al final es un fragmento de código que desde el panel de control se puede incluir o no mediante la activación y des-activación del plugin.

Prácticamente cualquier código que se utilice para la creación de un plugin se podría incluir en el fichero functions.php del tema activo. Las ventajas de usar el código propio en un plugin en vez de en el fichero functions.php son las siguientes:

  • El código se puede desactivar y activar fácilmente
  • Se puede llevar un mejor control de versiones
  • Se pueden separar las funcionalidades en distintos plugins
  • Si cambiamos el tema no se tiene que copiar el código ni efectuar ningún cambio
  • Evitamos tener que crear temas hijos si no los necesitamos nada mas que para el fichero functions.php

Cómo crear un plugin básico

Crear el directorio del plugin

Cada plugin tiene su directorio en:
DIRECTORIO_WORDPRESS/wp-content/plugins/NOMBRE-PLUGIN

Tras crear el directorio pasamos al siguiente paso, crear el fichero e incluir cabeceras.

Creando el fichero del plugin

El código del plugin tendrá como punto de entrada el fichero con el mismo nombre que el directorio que hemos creado.

Por ejemplo si hemos creado un directorio que se llama nuevo_plugin creamos el fichero /wp-content/plugins/nuevo_plugin/nuevo_plugin.php

Una de las cosas mas importantes que debe contener es la siguiente cabecera rellenada apropiadamente:

<\?php 
/** 
* Plugin Name: Nuevo_plugin
* Plugin URI: https://miweb/Nuevo_plugin
* Description: Mi nuevo plugin básico. 
* Version: 0.0.3 
* Requires at least: 5.2 
* Requires PHP: 7.2 
* Author: El Nombre del autor
* Author URI: https://WEBDELAUTOR/ 
* License: GPL v2 or later 
* License URI: https://www.gnu.org/licenses/gpl-2.0.html 
* Text Domain: Nuevo_plugin
* Domain Path: /languages 
**/ 

//Aqui va el codigo

Después de esta cabecera añadimos nuestro código. Podemos incluir otros ficheros o hacer exactamente lo que necesitemos dando forma a nuestro plugin.

Simplemente con la cabecera ya podemos ver como se reconoce el plugin en wordpress:

Plugin basico header

ver plugin creado

De momento el plugin no tiene ninguna funcionalidad, pero podemos hacer por ejemplo que el plugin configure un login personalizado utilizando el codigo que pusimos en el fichero functions.php en el artículo en el que personalizamos el login:

Ahora ya tenemos funcionalidad en el plugin, si lo tenemos desactivado podemos ver el login tradicional:

plugin active

Cuando lo activas:

plugin active

Resumen de creación de un plugin básico

Resumiendo el proceso de creación de un plugin básico para wordpress sería el siguiente:

 

  1. Creamos el directorio del plugin
  2. Creamos el fichero para el plugin
  3. Añadimos la cabecera del plugin al fichero
  4. Introducimos nuestro código

Se puede consultar mas información sobre plugins basicos en la web oficial de wordpress. Para ver más información sobre la cabecera pincha aquí

Creación de un plugin avanzado

Hasta aquí tendríamos un plugin funcional pero sin posibilidad de configuración desde el panel, en este apartado vamos a ver como hacer justamente esto, crear una pagina en el panel de control para configurar nuestro plugin.

Para añadir la posibilida de añadir a nuestro plugin opciones de configuración desde el panel debemos añadir los siguientes codigos.

El primero es para que tengamos una entrada en el menu de navegación del panel de administración de wordpress:

//MENU
function nuevo_plugin_menu(){
    $page_title = 'Nuevo Plugin settings';
    $menu_title = 'Nuevo Plugin settings';
    $capability = 'manage_options';
    $menu_slug  = 'nuevo-plugin';
    $function   = 'nuevo_plugin_page'; 
    //la linea anterior es la funcion a la 
    //que se llama para crear la pagina
    $icon_url   = 'dashicons-media-code';
    $position   = 4;
    add_menu_page( 
        $page_title, 
        $menu_title, 
        $capability, 
        $menu_slug,
        $function, 
        $icon_url, 
        $position 
    ); 
}
add_action( 'admin_menu', 'nuevo_plugin_menu' );

Imagen del icono del menu:

 

La otra parte que nos falta, es la pagina, con este sencillo código, tenemos algo de texto en esa página:

//PAGINA
if( !function_exists("nuevo_plugin_page") ) { 
    function nuevo_plugin_page(){ ?>   
        <h1>Nuevo Plugin Settings</h1> <?php 
    } 
}

Como se puede ver aquí:

nuevo-plugin-page-blank

 

Por otro lado, nos falta poder guardar configuraciones, para eso, lo primero que tenemos que hacer es añadir un formulario a nuestra pagina de configuración:

admin_form

El aspecto sería este:

Nuevo-formulario

Este formulario envía las configuraciones de nuestro plugin guardando dentro de la base de datos, en la tabla wp_options, en la cual crea una fila en la cual en este caso el campo option_name en este corresponderá con nuevo_plugin_logo_url o con nuevo_plugin_color y el campo_option_value al valor que asignemos desde el panel.

db-settings

Para que se puedan crear estos campos en base de datos se tiene que añadir al fichero el código que registra estas configuraciones:

if( !function_exists("update_nuevo_plugin_settings") ) { 
    function update_nuevo_plugin_settings() {   
        register_setting( 'nuevo-plugin-settings', 'nuevo_plugin_color' ); 
        register_setting( 'nuevo-plugin-settings', 'nuevo_plugin_logo_url' ); 
    } 

}

//Esto hace que se registren los campos en cuanto cargue el admin si el plugin está activado
add_action( 'admin_init', 'update_nuevo_plugin_settings' ); 

Con esto ya tenemos un panel de control funcional pero nos falta que los cambios se aplique en el formulario de login cuando se guardan en el admin. Para terminar esta parte que nos falta vamos a crear una nueva función y a modificar nuestro código anterior. Añadimos la función que nos devuelve el valor el logo con un valor por defecto si no establecemos nada:

if( !function_exists("get_nuevo_plugin_logo_url") ) {    
    function get_nuevo_plugin_logo_url()   {     
        $n_logo = get_option( 'nuevo_plugin_logo_url' );
        if (empty($n_logo) )
            $n_logo = "/wp-admin/images/w-logo-white.png";    
        return $n_logo;
    }   
}

Y la función que nos devuelve el código de color seleccionado

if( !function_exists("get_nuevo_plugin_color") ) {    
    function get_nuevo_plugin_color()   {     
        $n_color = get_option( 'nuevo_plugin_color' );
        if (empty($n_color) )
            $n_color = "red";    
        return $n_color;
    }   
}

 

Y ahora modificamos el código anteriormente creado sustituyendo el #333333 por <?php echo get_nuevo_plugin_color();?> y la url del logo por <?php echo get_nuevo_plugin_logo_url();?> como se puede ver a continuación:

codigo_viejo
Código nuevo:

codigo_nuevo

Tras esto, si accedemos al formulario del login, lo veremos totalmente distinto:

login-default-plugin

Ahora si lo customizamos desde el panel podemos ver los cambios:

 

Otra cosa bastante interesante que podemos hacer por ejemplo es mostrar junto al contenido nuestro logo seleccionado para el login, para ello modificamos el contenido de un post (Esto no tendría sentido hacerlo con el mismo logo pero solo es un ejemplo de uso):

if( !function_exists("nuevo_plugin_logo") ) {    
    function nuevo_plugin_color($content)   {     
        $n_logo = get_nuevo_plugin_logo_url();
        return $content .'<img src="'.$n_logo. '" alt="$n_logo" />';   
    }  
    add_filter( 'the_content', 'nuevo_plugin_color' );  
}

logo-en-entrada

Empaquetar e instalar el plugin creado

Por ultimo, para distribuir el plugin creado podemos empaquetar en un fichero ZIP el directorio del plugin creado y sus ficheros, tal y como se ve en las imágenes:

nuevoplugin.zip
nuevoplugin2.zip

Para instalarlo, nos dirigimos a plugins y pinchamos en «Añadir nuevo»:

add_new_plugin

Después pinchamos en subir:

upload_plugin

Seleccionamos el fichero y pinchamos en «instalar ahora»:

installing

Por ultimo activamos el plugin:

activated_uploaded

Descargar el código completo

Si quieres descargar el código completo puedes hacerlo pinchando aquí si por el contrario quieres verlo en gitlab pincha aquí

También puede encontrarse el código en https://github.com/wpcomo/nuevo_plugin

Deja una respuesta