Hosting WordPress Webempresa

Cómo crear un plugin WordPress personalizado

por | Sep 8, 2022 | Aprender WordPress

Como crear un plugin WordPress

Los plugins de WordPress, también llamados extensiones o módulos, son una forma sencilla de modificar, personalizar y mejorar las opciones de WordPress. En vez de modificar el core de WordPress, se pueden añadir funcionalidades a éste por medio de los plugins.
Según WordPress:

“ Un plugin es un programa, o un conjunto de una o varias funciones, escritas en el lenguaje de script PHP, que añaden un conjunto específico de características o servicios a una web WordPress

En definitiva, un plugin es esencialmente un fragmento de código que se conecta a WordPress. En términos humanos, eso significa que un plugin es algo que agrega una nueva funcionalidad o extiende una funcionalidad existente en WordPress.

Qué necesitas para crear un plugin en WordPress

 Aunque no necesitas ser un programador experimentado para desarrollar tus propios complementos de WordPress, si que se necesitan conocimientos básicos con PHP, CSS para WordPress y HTML para WordPress.

Entendiendo los Hooks o Ganchos de WordPress para poder crear un plugin en WordPress

Antes de empezar a meternos en materia creando un plugin para WordPress creo que es necesario entender que son los Hooks o Ganchos de WordPress.

¿No sería genial poder modificar la forma en la que WordPress funciona para adaptarse a cualquier proyecto en el que estemos trabajando? pues eso es lo que nos proporcionan los Hooks o ganchos.

WordPress incluye Hooks (Ganchos) que nos permiten añadir nuestro propio código siendo la forma en la que los complementos (plugins) y temas interactúan con el core de WordPress.

Imaginemos que estamos construyendo un puzzle con más de 5000 piezas, pues WordPress trabaja de la misma manera, ensambla cada pieza en su lugar correspondiente por medio de Hooks (ganchos) y los manda al navegador para que los muestre.

Tenemos dos tipos de Hooks, Acciones y Filtros.

Acciones:

Los Hooks de acción nos permiten cargar funciones de WordPress o crear nuestras propias acciones, por ejemplo las podemos utilizar para cargar archivos CSS , crear una acción cuando se pulsa un botón, mostrar un mensaje, etc…
Las acciones las podemos definir de la siguiente manera:

add_action ( $hook, $funsction_name, $priority, $acepted_args )

 

  • $hoock: Acepta un nombre de acción o el nombre de una acción creada por nuestra plantilla o plugin gracias a la función do_action (). En codex podemos ver una lista:
    -> https://codex.wordpress.org/Plugin_API/Action_Reference
  • $fuction_name: Acepta el nombre de la función donde se pasa la acción.
  • $prioriti: Sirve para especificar el orden en el que se debe ejecutar la acción, este dato es opcional y por defecto siempre será 10, cuanto más bajo sea ese valor, más pronto se ejecutara esa acción.
  • $acepted_arg: Sirve para especificar el nombre de los argumentos que se pasan a la función $function_name, Como el anterior es un dato opcional

Ejemplo:

Supongamos que tenemos varios empleados que acceden a la administración de WordPress utilizando un correo de empresa y queremos recordarle cuál es el correo que tiene que utilizar.
En este caso lo mejor sería añadir un aviso debajo del formulario de WordPress de inicio de sesión.

WordPress nos permite hacer esto gracias al uso de un gancho de acción.

Cuando WordPress genera el contenido del formulario de inicio de sesión, incluye la siguiente línea de código:

do_action( 'login_footer' );

Esto significa que podemos adjuntar una función de devolución de llamada a este gancho de acción para generar contenido en la página. Por ejemplo, podríamos agregar un aviso con el siguiente código:

/* aviso en pie de página login wordpress */
function we_login_footer_message() {

//nuestro mensaje en el área de pie de página de inicio de sesión
?>
<p style="border-top: 1px solid #0085ba; margin: 0 auto; width: 320px; padding-top: 10px;">Utiliza tu dirección de correo electrónico @dominio.com para iniciar sesión aquí.</p>
<?php
}

add_action( 'login_footer', 'we_login_footer_message' );

El resultado como podéis ver es un aviso en el pie de página del inicio de sesión de WordPress:

página de inicio en WordPress

Filtros:

Los filtros en WordPress nos permiten cambiar datos durante la ejecución de WordPress. Una devolución de llamada adjunta a un filtro aceptará datos en forma de variable, realizará algunos cambios en esos datos y luego devolverá la variable.
Los filtros los podemos definir de la siguiente manera.

add_filter ( $hook, $funtion_name )
$hook: Nombre del filtro
$funtion_name: nombre de la función a la que le pasamos ese filtro.

Ejemplo:

Vamos a ver cómo podemos utilizar un filtro con un sencillo ejemplo.
Si nos fijamos en la ventana de edición de una entrada vemos que nos muestra un texto “ Añadir el título “

 

edición de código en WordPress

 

Si revisamos el código de WordPress donde genera ese texto vemos que lo carga de la siguiente manera:

apply_filters( ‘enter_title_here’, __( ‘Enter title here’ ), $post );

Debido a que la cadena “Enter title here” se ejecuta a través de un filtro (podemos saber esto porque está envuelto apply_filters()), significa que podemos cambiarlo, adjuntando una función de devolución de llamada al filtro.

El código podría ser algo como esto:

function we_title_here( $title ) {

// establecemos una nueva cadena de texto.
$title = __( 'Ingrese el título del artículo aquí.', 'text-domain' );

// devuelve el título al gancho.
return $title;
}
add_action( 'enter_title_here', 'we_title_here', 10 );

 

Sí nos fijamos en el código vemos que estamos asignando un nuevo valor a la variable $title ( $title = __( ‘Ingrese el título del artículo aquí.’, ‘text-domain’ ); ) esa variable será la que pasará el valor del nuevo dato y el resultado sería este:

 

ejemplo de wordpress para crear un plugin

Seguro que pensarás “ Vale Pepe todo esto está muy bien pero ¿ cuándo empezamos con el plugin ? “ pues ahora mismo empezamos ¿ Preparados ? venga vamos a dejarnos de teoría y empezamos a divertirnos un poco.

Crear un plugin WordPress

En este ejemplo crearemos un sencillo plugin que nos permitirá desactivar opciones de la página del producto de WooCommerce.

La estructura:

La estructura de un plugin se compone de varios archivos y carpetas, dependiendo de la complejidad del plugin puede ser sencillo con un par de archivos o complejo donde ya tendremos una carpeta para imágenes, js, css, Incluides….

El formato sería el siguiente:

  • carpeta del plugin
  • Archivo principal del plugin
  • uninstall.php (archivo para desinstalar el plugin)
  • /js: carpeta para los archivos javascript
  • /css: carpeta para los archivos de estilo
  • /includes: carpeta para los archivos php adicionales
  • /images: carpeta para la imágenes que necesite el plugin

Preparar elementos

Todos los plugins de WordPress se almacenan en la carpeta plugins que se encuentra dentro de wp-content así que lo primero que haremos será crear la carpeta de nuestro plugin.
Para crear la carpeta y los archivos podemos utilizar el administrador de archivos de WordPress de nuestra cuenta de WEPanel:
-> https://guias.webempresa.com/preguntas-frecuentes/administrador-archivos-cpanel/

Accedemos a la carpeta wp-content -> plugins y con el botón de la derecha seleccionamos del menú “ crear carpeta “

seleccionamos carpeta de wordpress

 

A la carpeta le pondremos el nombre “ we_custom_products

añadimos nombre a la carpeta de plugin de wordpress

La carpeta “ we_custom_products “ será la que almacene todos los archivos del plugin así que empezaremos por crear nuestro archivo principal.
Dentro de la carpeta “ we_custom_products “ que hemos creado vamos a crear un archivo con el nombre “ we_cp.php
Al igual que hicimos para crear la carpeta, con el botón de la derecha seleccionamos “ Crear archivo -> PHP:Código PHP

editamos php en wordpress
Al Archivo le pondremos el nombre “ we_cp.php

cambiamos el nombre al php de plugin

El Archivo “ we_cp.php “ será el archivo principal donde tendremos la cabecera para que WordPress reconozca el plugin y llamaremos a los demás archivos.

Vamos a dar un poco de seguridad a nuestro plugin impidiendo que externamente se pueda acceder a la carpeta de nuestro plugin, para ello vamos a crear otro archivo con el nombre index.php.

Editamos el archivo seleccionando con el botón de la derecha del ratón y pulsamos en “ Editar

seleccionamos el editor ace

 

Dentro añadiremos lo siguiente:

<?php
# silence is golden

 

Si algún usuario intenta acceder a la carpeta donde tenemos nuestro plugin lo primero que leerá será el archivo index.php con el mensaje “ silence is golden “ y no se mostrarán los archivo que se encuentran dentro de esa carpeta. Podemos añadir el mensaje que queramos incluso dejarlo en blanco.

Mostrar el plugin en la administración.

Para que WordPress reconozca el plugin y lo muestre en los plugins añadiremos un encabezado en el archivo “ we_cp.php “ que creamos anteriormente.
El encabezado sería el siguiente:

<?php

/**
* @link https://webempresa.com/
* @since 0.0.1
* Plugin Name: Webempresa Custom Products
* Plugin URI: https://webempresa.com/
* Description: Personalice la página del producto eliminando elementos
* Version: 0.0.1
* Author: webempresa
*/

añadimos el código para hacer nuestro plugin de WordPress
El único dato que nos hace falta en la cabecera para que WordPress lo reconozca es el nombre “ Plugin Name “, los demás datos se utilizarán para crear la tabla con los datos que mostrará en la página de plugins.

Sí accedemos a la administración de WordPress podemos ver qué se muestra el plugin, pero claro aunque lo activemos no tendrá ninguna función ya que está vacío solo con el encabezado.

 

plugins dentro de la administración de wordpress

 

Vamos a darle un poco de alegría al plugin y añadirle la funcionalidad que estamos buscando.

Añadir funcionalidad al plugin de WordPress

Para lo que buscamos al crear el plugin de WordPress nos harán falta dos archivos, uno para el backend y otro para el frontend, estos archivos, para tenerlo todo un poco controlado, los crearemos dentro de la carpeta includes así que lo primero será crear la carpeta includes donde almacenaremos los archivos:

 

 

Accedemos a la carpeta includes y creamos dos carpetas más con el nombre Backend y Frontend.

 

Accedemos a la carpeta Backend y crearemos el archivo “ we-backend-init.php “ y hacemos lo mismo para el Frontend, accedemos a la carpeta y creamos el archivo “ we-frontend-init.php
Ahora mismo ya tenemos toda nuestra estructura del plugin que quedaría de la siguiente forma:

  •  we_custom_products
  • __we_cp.php
  •  __index.php
  •  __includes
  •   __Backend
  •    __we-backend-init.php
  •   __Frontend
  •    __we-frontend-init.php

Archivo we_cp

Edita el archivo we_cp y añade lo siguiente después del encabezado:

if(!defined('ABSPATH')){die('-1');}

function start(){
if(is_admin()==true){
require plugin_dir_path( __FILE__ ).'includes/Backend/we-backend-init.php';
}
require plugin_dir_path( __FILE__ ).'includes/Frontend/we-frontend-init.php';
}
function runit(){
add_action('init','start');
}
runit();

 

Si revisamos el código vemos que solo estamos llamando a dos archivos “ we-backend-int.php “ que es donde añadiremos los códigos para las opciones del plugin en el administrador y “ we-frontend-int.php “ .
El archivo “ we-backend-int.php “ solo será cargado cuando estemos en el administrador, para ello le pasamos el parametro “ if(is_admin()==true)

Opciones de back-end

El siguiente paso será añadir las opciones del plugin en el administrador de WordPress
Aquí, vamos a crear un elemento de menú en el panel de administración de WordPress el cual permitirá acceder al plugin y nos permitirá elegir algunas opciones para ocultar o mostrar los elementos en la página del producto de WooCommerce.
Accedemos a la carpeta includes -> Backend y editamos el archivo “ we-backend-int.php
Dentro del archivo añadimos lo siguiente:

<?php
add_action('admin_init', 'webempresa_display_options');
add_action('admin_menu', 'webempresa_cp_AdminMenu');
function webempresa_cp_AdminMenu(){
add_menu_page( __('Webempresa Productos personalizados', 'wecp'), __('Webempresa Productos personalizados', 'wecp'), 'manage_options', 'wecp', 'webempresaOptionsPage' );
}
function webempresaOptionsPage() {
?> <form action="options.php" method="post"> <?php
settings_fields('plugin_we_Page');
do_settings_sections('plugin_we_Page');
submit_button(); ?>
</form><?php
}

function webempresa_display_options(){

register_setting('plugin_we_Page', 'wecp_options', 'callbackValidation');

add_settings_section(
'webempresa_pluginPage_section',
__('Webempresa Backend Options', 'wecp'),
'webempresaSettingsSectionCallback',
'plugin_we_Page'
);
add_settings_field(
'webempresa_checkbox_field_1',
esc_attr__('Titulo', 'wecp'),
'webempresaCheckboxRender_1',
'plugin_we_Page',
'webempresa_pluginPage_section'
);
add_settings_field(
'webempresa_checkbox_field_2',
esc_attr__('Cantidad', 'wecp'),
'webempresaCheckboxRender_2',
'plugin_we_Page',
'webempresa_pluginPage_section'
);
add_settings_field(
'webempresa_checkbox_field_3',
esc_attr__('SKU', 'wecp'),
'webempresaCheckboxRender_3',
'plugin_we_Page',
'webempresa_pluginPage_section'
);
add_settings_field(
'webempresa_checkbox_field_4',
esc_attr__('Meta', 'wecp'),
'webempresaCheckboxRender_4',
'plugin_we_Page',
'webempresa_pluginPage_section'
);
add_settings_field(
'webempresa_checkbox_field_5',
esc_attr__('Descripción', 'wecp'),
'webempresaCheckboxRender_5',
'plugin_we_Page',
'webempresa_pluginPage_section'
);
add_settings_field(
'webempresa_checkbox_field_6',
esc_attr__('Precio', 'wecp'),
'webempresaCheckboxRender_6',
'plugin_we_Page',
'webempresa_pluginPage_section'
);
}

function webempresaSettingsSectionCallback(){
echo wp_kses_post('Página de configuración para el complemento personalizado ');
}

function webempresaCheckboxRender_1(){
$options = get_option('wecp_options');
?>
<input name="wecp_options[webempresa_checkbox_field_1]" type="checkbox" value = "1" />
<?php }

 

function webempresaCheckboxRender_2(){
$options = get_option('wecp_options');
?>
<input name="wecp_options[webempresa_checkbox_field_2]" type="checkbox" value = "1" />
<?php }

function webempresaCheckboxRender_3(){
$options = get_option('wecp_options');
?>
<input name="wecp_options[webempresa_checkbox_field_3]" type="checkbox" value = "1" />
<?php }

function webempresaCheckboxRender_4(){
$options = get_option('wecp_options');
?>
<input name="wecp_options[webempresa_checkbox_field_4]" type="checkbox" value = "1" />
<?php }

function webempresaCheckboxRender_5(){
$options = get_option('wecp_options');
?>
<input name="wecp_options[webempresa_checkbox_field_5]" type="checkbox" value = "1" />
<?php }

function webempresaCheckboxRender_6(){
$options = get_option('wecp_options');
?>
<input name="wecp_options[webempresa_checkbox_field_6]" type="checkbox" value = "1" />
<?php } ?>

 

Accedemos a la administración de WordPress y activamos el plugin que hemos creado en WordPress.
Veremos que hay un nuevo elemento en el menú de WordPress con el nombre “ Webempresa Productos personalizados” :

 

 

Utilizamos La API de configuración de WordPress para almacenar estos datos en la tabla wp_options de la base de datos, puedes consultar la documentación de codex de WordPress si quieres obtener más información:
-> https://codex.wordpress.org/Settings_API

Si accedemos a phpMyAdmin podemos ver que la tabla wp_options almacena un array con los datos del plugin:

 

plugin creado en WordPress

 

Como tenemos acceso a esos datos vamos a utilizarlos para permitir a los usuarios ocultar o mostrar varios elementos de la página del producto de WooCommerce.

Opciones fronted

Para agregar las opciones del frontend copia y pega el siguiente código en el archivo “ we-frontend-init.php “.

Este código recoge los datos que hay almacenados en la base de datos y ocultará los elementos de la página del producto según las opciones que le hemos pasado en el plugin.

<?php
$options = get_option('wecp_options');
if(!is_string($options)):
// Titulo
if(isset($options['webempresa_checkbox_field_1'])){
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
}
// Cantidad
if(isset($options['webempresa_checkbox_field_2'])){
add_filter( 'woocommerce_is_sold_individually',
function ( $return, $product ) {
return true;
}, 10, 2
);
}
// SKU
if(isset($options['webempresa_checkbox_field_3'])){
add_filter( 'wc_product_sku_enabled',
function ( $enabled ) {
return $enabled;
}
);
}
// Meta
if(isset($options['webempresa_checkbox_field_4'])){
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
}
// Descripción
if(isset($options['webempresa_checkbox_field_5'])){
add_filter( 'woocommerce_product_tabs',
function ( $tabs ) {
unset( $tabs['description'] );
return $tabs;
}, 11
);
}
// Precio
if(isset($options['webempresa_checkbox_field_6'])){
add_filter( 'woocommerce_get_price_html',
function ($price){
return ;
}
);
}
endif;

Revisando el código vemos que lo estamos envolviendo con una condición “ if(!is_string($options)): “ que nos permite verificar si no hay ninguna celda seleccionada con lo que evitamos tener que ejecutar todo el código, si tenemos alguna casilla marcada ejecutará las funciones y eliminará los elementos que tenemos seleccionados.

Archivo unistall

WordPress elimina los archivos cuando desinstalamos los plugins pero ¿ Qué pasa con los datos del plugin que se crearon en la base de datos ? pues eso es lo que vamos hacer ahora.

Al crear un plugin para WordPress< es importe que no deje rastros tanto de archivos como en la base de datos de WordPress y eso lo conseguimos con el archivo unistall.php. Este archivo se ejecutara siempre que eliminemos él plugin y no hay que llamarlo ni enlazarlo solo tiene que estar presente en la raíz de la carpeta del plugin.

Lo primero vamos a crear un archivo en la raíz del plugin con el nombre ” unistall.php ”

 

crear archivo en la raíz del plugin de WordPress

 

Editamos el archivo y en añadimos lo siguiente:


<?php


// if uninstall.php is not called by WordPress, die
if (!defined('WP_UNINSTALL_PLUGIN')) {
    die;
}
// borrar opciones del plugin
$option_name = 'wecp_options';

delete_option($option_name);

// para opciones de sitio en Multisitio
delete_site_option($option_name);

Lo primero que hemos realizado es añadir una capa de seguridad en WordPress if (!defined(‘WP_UNINSTALL_PLUGIN’)) exit; ” impidiendo que externamente se pueda ejecutar el archivo y siempre tiene que estar al principio del archivo.

Una vez comprobado eliminamos las opciones que se encuentran en la tabla wp_options para ello le pasamos el nombre que añadimos en el plugin a nuestras opciones  y se lo asignamos en la variable $option_name ” ($option_name = ‘wecp_options’ ) “, para terminar utilizamos el parametro delete_options con la variable para eliminar los datos.

 

Y con esto ya hemos terminado, hemos creado un plugin WordPress sencillo que nos permite ocultar algunos de los elementos de la página del producto.

 

Conclusión

Hemos creado un complemento bastante simple en este artículo, pero en el proceso, seguimos las prácticas y estándares que nos permitirían mantener y extender este complemento fácilmente.

Programar y escribir plugins de WordPress puede parecer complicado al principio, especialmente como principiante. Pero con las herramientas adecuadas y algunos recursos de aprendizaje, puedes desarrollar plugins en muy poco tiempo. Solo se necesitan algunas habilidades de codificación y determinación y estás a mitad de camino.

¿Te ha resultado útil este artículo?

Hosting WPFácil