Nuestro Blog

Manuel Piquer Estudio

Crear Plugins para WordPress

Cómo crear un plugin ampliado para nuestro WordPress, de forma fácil.

Aunque haya múltiples formas de añadir código a nuestro WordPress, mediante un plugin personalizado, sin ningún tipo de duda, es la mejor. Es muy recomendado tener el control de todas las funcionalidades que añadamos y tengamos  modificarlas cuando sea necesario
Como siempre, para cualquier duda o pregunta podéis contactar conmigo y muy amablemente os echaré una mano en todo lo que pueda.

El primer paso para crear un plugin. que usaremos es el Generador repetitivo de complementos de WordPress . Esto nos permite ingresar algunas configuraciones clave y crea automáticamente el andamiaje para su complemento con todo perfectamente organizado.

Generador repetitivo de complementos de WordPress

El generador solo necesita completar algunas cosas:

  • Nombre del complemento: nombre del complemento.
  • Plugin Slug: Esto se usa internamente dentro de WordPress para el complemento. Asegúrate de que todo esté en minúsculas
  • URI del complemento: dirección del sitio web del complemento.
  • Nombre del autor
  • Correo electrónico del autor
  • URI del auto
<?php
/*
Plugin Name: Funciones personalizadas
Plugin URI: https://www.ManuelPiquer.es/
Description: Funciones personalizadas.
Version: 1.0
Author: Manuel Piquer.
Author URI: https://www.ManuelPiquer.es/
License: GPL
License URI: https://www.gnu.org/
*/

Una vez que hayas completado todos los campos, simplemente haz clic en crear complemento  «Build Plugin» los ficheros creados ya son los de un plugin basico.
Una vez que termine de descargarse, ya puedes intalarlo desde WordPress, o mueve la carpeta a la carpeta /wp-content/plugins dentro del WordPress instalado, de este modo tendrás creada la estructura base para comenzar a trabajar.

Elementos del menú del panel de administración de WP

Ahora que tenemos la base para el complemento,vamos a añadirle un área para administrar su configuración. Para eso, agregaremos primero la necesidad de agregar un elemento de menú para que podamos navegar hasta él.

Para esto, hay un par de funciones integradas de WordPress que debemos utilizar. Primero hay add_menu_page()add_submenu_page().

Con estas dos funciones podemos agregar un elemento de menú principal (principal) junto con dos elementos secundarios. En este caso, estamos agregando una página de configuración y una página secundaria.

Nota: si planea tener más de una página, una buena regla general es hacer que el elemento del menú principal y el primer elemento del menú secundario vayan a la misma página. Para hacer esto, tanto el elemento del menú principal como el del primer elemento secundario deben tener el mismo slug de menú.

Menú de administración de WP

En la imagen, puede ver cómo el siguiente código agregará un elemento de menú principal, luego 2 elementos de submenú adicionales. Puño que usaremos add_menu_pagepara agregar el elemento del menú principal. Luego usaremos add_submenu_pagepara agregar cada elemento del menú secundario.

public function add_admin_menu() {
    // Main Menu Item
    add_menu_page(
        'Custom Plugin',
        'Custom Plugin',
        'manage_options',
        'custom-plugin',
        array($this, 'display_custom_plugin_admin_page'),
        'dashicons-store',
        1);
    // Sub Menu Item One
    add_submenu_page(
        'custom-plugin',
        'Settings',
        'Settings',
        'manage_options',
        'custom-plugin',
        array($this, 'display_custom_plugin_admin_page')
    );
    // Sub Menu Item Two
    add_submenu_page(
        'custom-plugin',
        'Secondary Page',
        'Secondary Page',
        'manage_options',
        'custom-plugin/settings-page-two',
        array($this, 'display_custom_plugin_admin_page_two')
    );
}

Para lo siguiente, necesitaremos trabajar con las acciones de WordPress para que los elementos del menú se muestren. Puede leer más sobre las acciones de WordPress aquí . Son bastante sencillos de trabajar. Básicamente, solo estamos utilizando uno de los ganchos de WordPress. Solo tenemos que decirle a WordPress a qué enlace queremos que se llame la función, así como el nombre de la función.

Para implementar esto en el complemento, necesitaremos llamar a las funciones del menú en el momento adecuado. Para hacer eso, colocaremos estas llamadas de función en su propia función, que se llamará a través de una acción de WordPress. Así que en el constructor agregaremos una add_actionllamada.

public function __construct( $plugin_name, $version ) {
    // Let's add an action to setup the admin menu in the left nav
    add_action( 'admin_menu', array($this, 'add_admin_menu') );
}

Cuando WordPress llegue al admin_menu gancho, llamará a la add_admin_menu función dentro del complemento. Esto luego mostrará los elementos del menú.

Página de configuración del panel de administración de WP para el complemento

Una vez que tengamos los elementos del menú de administración en su lugar. Podemos vincularlos a algunas páginas reales dentro del complemento. Dentro de las funciones add_menu_page() y add_submenu_page()hay un lugar para una función de devolución de llamada. Esto le dice a WordPress qué función llamar cuando se hace clic en cada elemento del menú. Cuando agregamos el elemento del menú principal con la add_menu_page función, le dijimos que llamara a la display_custom_plugin_admin_page función. Esto, a su vez, mostrará una plantilla que ya hemos creado.

public function display_custom_plugin_admin_page(){
    require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/wordpress-custom-plugin-admin-display.php';
}

Con los elementos del menú ahora vinculados a páginas reales, podemos agregar algunos formularios en la página de configuración para que podamos permitir que los usuarios configuren nuestro complemento. Dentro del código fuente del plugin personalizado hay ejemplos de diferentes tipos de entrada y uno de uso de imágenes y la biblioteca multimedia integrada de WordPress.

Configuración del complemento de administrador de WP

Configurar campos de formulario es bastante sencillo. Dentro del archivo de plantilla ( admin/partials/wordpress-custom-plugin-admin-display.php), podemos repetir los formularios y campos que queramos.

<div>
  <h1>Wordpress Custom Plugin Settings</h1>
  <?php
  // Let see if we have a caching notice to show
  $admin_notice = get_option('custom_wordpress_plugin_admin_notice');
  if($admin_notice) {
    // We have the notice from the DB, let's remove it.
    delete_option( 'custom_wordpress_plugin_admin_notice' );
    // Call the notice message
    $this->admin_notice($admin_notice);
  }
  if ( isset( $_GET['settings-updated'] ) && $_GET['settings-updated'] ){
    $this->admin_notice("Your settings have been updated!");
  }
  ?>
  <form method="POST" action="options.php">
  <?php
    settings_fields('wordpress-custom-plugin-options');
    do_settings_sections('wordpress-custom-plugin-options');
    submit_button();
  ?>
  </form>
</div>

Dentro de las etiquetas de formulario hay un par de funciones que debemos llamar. primero es settings_fields(). Esto generará todos los campos que agregamos. En segundo lugar do_settings_sections(), esto generará los títulos de las secciones y cualquier información adicional que podamos haber establecido. En tercer lugar, configuramos el botón de enviar para el formulario llamando a submit_button().

Campos de formulario

Para configurar los campos de formulario individuales para cada sección, hay algunas funciones auxiliares en el código fuente del complemento personalizado que pueden ayudarlo fácilmente a configurar los campos que necesita. Hay 3 funciones que necesita usar.

  1. setup_sections() Esta función se utiliza para configurar las diferentes secciones de su página de configuración. Esta función es una función de llamada add_settings_section()para cada sección que desee.

  2. section_callback() Por lo tanto, la función se utiliza como devolución de llamada para add_settings_section. Le dice a WordPress qué información mostrar para cada sección. Puede usar esto para generar una descripción de una sección de configuración particular con algún texto para ayudar a guiar al usuario en la configuración del complemento.

  3. setup_fields() Esta función tiene una matriz de todos los campos de formulario que queremos en la página. Hay un ejemplo de la mayoría de los tipos de entrada del usuario, incluido uno que le permite cargar una imagen con la biblioteca multimedia integrada en WordPress.

    Al final de esta función, hay un ciclo en el que se ejecuta a través de cada configuración que especifique en la matriz de configuración. Utiliza dos funciones de WordPress. add_settings_fieldregister_setting.

    // Let's go through each field in the array and set it up
    foreach( $fields as $field ){
        add_settings_field( $field['uid'], $field['label'], array($this, 'field_callback'), 'wordpress-custom-plugin-options', $field['section'], $field );
        register_setting( 'wordpress-custom-plugin-options', $field['uid'] );
    }

    Primero está agregando el campo a la sección de configuración elegida, luego está registrando esta configuración con WordPress.

  4. field_callback() Esta función se llama como una devolución de llamada de la setup_fields función. Tiene lógica sobre cómo marcar cada entrada con el marcado necesario.

Esta es una descripción bastante general de la configuración de formularios y campos de formulario para la página de configuración, pero es bastante sencillo. Todo este código está contenido en el admin/class-wordpress-custom-plugin-admin.phparchivo.

Reescrituras de URL para URL de complemento personalizado

Cada complemento personalizado viene con una URL personalizada. La muestra del complemento personalizado muestra datos personalizados en una URL única, lo que también permite la paginación. La siguiente sección cubrirá la parte de paginación.

public function setup_rewrites() {
    // Slug we are using for URL
    $url_slug = 'custom-plugin';
    // Let's setup our rewrite rules
    add_rewrite_rule( $url_slug . '/?$', 'index.php?custom_plugin=index', 'top' );
    add_rewrite_rule( $url_slug . '/page/([0-9]{1,})/?$', 'index.php?custom_plugin=items&custom_plugin_paged=$matches[1]', 'top' );
    add_rewrite_rule( $url_slug . '/([a-zA-Z0-9-]{1,})/?$', 'index.php?custom_plugin=detail&custom_plugin_vehicle=$matches[1]', 'top' );
    // Let's flush rewrite rules on activation
    flush_rewrite_rules();
}

Agregar una regla de reescritura es bastante fácil en su mayor parte. Necesitas llamar a la función de WordPress add_rewrite_rule. En este ejemplo, debe pasar la URL que desea. En este caso es /custom-plugin/. Si WordPress encuentra que se está utilizando esa URL, la asigna a index.php?custom_plugin=index. Hacer la paginación también puede ser un poco complicado. Sin embargo, con el ejemplo anterior, puede ver cómo maneja la paginación, mostrando diferentes resultados para diferentes números de página, así como una página de detalles para un solo vehículo.

Al final de las reescrituras, debemos vaciar las reglas de reescritura para que WordPress vea las nuevas reglas. Esto se hace usando la flush_rewrite_rules()función. Una vez que tengamos las nuevas reescrituras de URL en su lugar, podemos agregar una acción para configurar las reescrituras.

$this->loader->add_action( 'init', $plugin_admin, 'setup_rewrites' );

Esta acción está configurada en el includes/class-wordpress-custom-plugin.phparchivo. Encuentra esta línea en la define_admin_hooks() función. La devolución de llamada es la setup_rewritesfunción en el admin/class-wordpress-custom-plugin-admin.phparchivo. Esta acción también está configurada para el initgancho dentro de WordPress. De esta manera, se configura antes de que se realice cualquier procesamiento de URL.

Una vez que tengamos las reescrituras de URL en su lugar, necesitamos una forma de procesar esas solicitudes. También verá que en las reescrituras también hay variables de consulta personalizadas. En el archivo public/class-wordpress-custom-plugin-public.phpencontrará dos funciones que usamos para mostrar la plantilla adecuada para cada reescritura personalizada.

Primero necesitamos definir los parámetros de consulta personalizados. Si un parámetro de consulta no está registrado, WordPress no lo procesará.

public function register_query_values($vars)
{
    // Equivalent to array_push($vars, 'custom_plugin', ..)
    $vars[] = 'custom_plugin';
    $vars[] = 'custom_plugin_paged';
    $vars[] = 'custom_plugin_vehicle';
    return $vars;
}

Una vez que los parámetros se definen como el código anterior, podemos registrarlos con WordPress. El complemento utiliza la add_filterfunción de WordPress para esto. Ahora podemos asignar las reescrituras de URL personalizadas a URL utilizando parámetros de consulta personalizados.

$this->loader->add_filter( 'query_vars', $plugin_public, 'register_query_values' );

Ahora que WordPress conoce nuestras URL personalizadas y los parámetros de consulta personalizados a los que realmente apuntan, podemos agregar lógica para que el complemento sepa qué plantilla de página mostrar para esas URL.

public function register_custom_plugin_redirect()
{
    // Check if we have the custom plugin query, if so let's display the page
    if (get_query_var('custom_plugin')) {
        add_filter('template_include', function () {
            return plugin_dir_path(__FILE__) . 'partials/wordpress-custom-plugin-public-index.php';
        });
    }
    // Check if its a detail page for a vehicle
    if (get_query_var('custom_plugin') && get_query_var('custom_plugin_vehicle')) {
        add_filter('template_include', function () {
            return plugin_dir_path(__FILE__) . 'partials/wordpress-custom-plugin-public-detail.php';
        });
    }
}

En el código anterior, solo estamos haciendo una ifverificación simple para ver si la URL que llega contiene nuestros parámetros de consulta personalizados. Si coincide, podemos mostrar la plantilla correspondiente. De manera típica, debemos notificar a WordPress que tenemos alguna lógica que puede elegir una plantilla personalizada basada en los parámetros de consulta. Para esto agregaremos otra acción agregando este cheque en el template_redirectgancho de WordPress.

$this->loader->add_action( 'template_redirect', $plugin_public, 'register_custom_plugin_redirect' );

Una vez que esté configurado, WordPress ahora puede escuchar si hay una coincidencia de URL con nuestras reescrituras, y si hay una coincidencia, dirigirlo a la plantilla de página adecuada.

Visualización de datos personalizados en páginas de complementos

Ahora que WordPress muestra la plantilla adecuada para la reescritura, mostremos algunos datos personalizados en estas páginas. Para nuestra reescritura de URL principal, que es si la URL es /custom-plugin, mostremos algo de contenido personalizado. Para este complemento de muestra hay una matriz de 50 vehículos con datos asociados. En nuestro archivo de plantilla de índice public/partials/wordpress-custom-plugin-public-index.php, llamaremos clase pública a nuestros complementos. Esto nos permite acceder a nuestros datos dentro de la clase.

$custom_plugin_obj = new WordPress_Custom_Plugin_Public('wordpress-custom-plugin', '1.0.0');

La línea anterior nos permite instanciar nuestra clase pública. Luego podemos acceder a una función de esa clase para devolver los datos que necesitamos mostrar. En este ejemplo, accederemos a la get_vehicle_listings()función que devolverá una lista de vehículos de nuestros datos de ejemplo que se almacenan dentro de la clase pública del complemento. Esta podría ser cualquier función y podría devolver cualquier tipo de datos que desee.

$vehicle_listings = $custom_plugin_obj->get_vehicle_listings(10, $custom_plugin_current_page);

Luego, con los datos de listados de vehículos que se devuelven, podemos simplemente recorrerlos y mostrarlos en la página.

Paginación para datos de complementos personalizados

La paginación no es demasiado necesaria para implementar. Necesitamos seguir algunos de los mismos pasos que se enumeran anteriormente en Visualización de datos personalizados en las páginas de complementos. Además de crear una instancia de nuestra clase pública, necesitamos descubrir algunas otras variables para dividir todos los listados en tamaños de página manejables.

// Set our current page for pagination
$custom_plugin_current_page = get_query_var('custom_plugin_paged') > 0 ? get_query_var('custom_plugin_paged') : 1;
// Instatiate our Custom Plugin Public Class
$custom_plugin_obj = new WordPress_Custom_Plugin_Public('wordpress-custom-plugin', '1.0.0');
// Let's get the listings needed for this "page"
$vehicle_listings = $custom_plugin_obj->get_vehicle_listings(10, $custom_plugin_current_page);

En el código anterior, primero vamos a verificar un parámetro de consulta y ver si contiene algunos datos. En este caso, estamos comprobando un parámetro personalizado que contiene el número de página en el que estamos. A continuación, configuraremos la clase pública para nuestro complemento. Una vez hecho esto, ahora podemos acceder a la función dentro del complemento, get_vehicle_listings(). Con esta llamada podemos pasar cuántos vehículos queremos enumerar y la página actual en la que estamos.

En el get_vehicle_listings()podemos hacer algo de lógica para devolver 10 listados basados en la página en la que nos encontramos. La siguiente lógica obtendrá todos los vehículos, luego sacará los que necesitamos mostrar.

public function get_vehicle_listings($page_count, $page_num)
{	
    // Get all listings of vehicles and let's store it for use
    $this->$vehicles = $this->get_vehicles();
    // Some vars for pagination
    $total_listings = count($this->$vehicles);
    $total_pages = ceil($total_listings / $page_count);
    $listings_offset = ($page_num - 1) * $page_count;
    $listings_length = $page_count;
    // Let's return our pagination and listings
    $page_setup = [];
    $page_setup['vehicles'] = array_slice($this->$vehicles, $listings_offset, $listings_length, true);
    $page_setup['page_count'] = $total_pages;
    $page_setup['page_current'] = $page_num;
    // Let's set our page title as well
    add_filter('wpseo_title', function ($title) use ($page_num) {
        return 'Custom Plugin - Page ' . $page_num;
    });
    // Let's return back our past sales listings
    return $page_setup;
}

Después de recorrer los vehículos devueltos, necesitaremos generar algunas marcas para mostrar en qué página estamos y también permitir una navegación básica a otras páginas. En el archivo de plantilla, llamaremos a nuestra función de paginación especial que devolverá el marcado deseado.

$custom_plugin_obj->generatePagination($vehicle_listings['page_count'], $custom_plugin_current_page);

La función generatePagination()que llamamos es bastante simple. Toma en cuántas páginas en total y en qué número de página se encuentra actualmente. Con esa entrada, devolverá el marcado correcto para que se represente con los enlaces correctos para navegar a la página siguiente o anterior.

public function generatePagination($pages = '', $page_num = 1)
{
    // Let's store our pagination html some place
    $pagination_html = '';
    if (1 != $pages) {
        $pagination_html =  '<div><span>Page '.$page_num.' of '.$pages.'</span>'.paginate_links( array(
        'format' => 'page/%#%',
        'prev_text' => __('&laquo;'),
        'next_text' => __('&raquo;'),
        'total' => $pages,
        'current' => $page_num
        )).'</div>';
    }
    // Let's return back our pagination html
    return $pagination_html;
}

Conclusión

Espero que puedas obtener mucha información sobre cómo crear su propio plugin personalizado en WordPress  a partir de esta publicación.
Esto es una breve descripción general de muchos temas relacionados con la escritura de un plugin, pero espero que con el código de muestra ya puedas escribir el suyo propio con relativa facilidad.  Ver Github

Otros Articulos