¿Qué es y cómo crear un plugin de WordPress?

Los mexicanos siempre estamos navegando en páginas de internet, pero, te has preguntado cuántas consumes al día, y mejor aún, cómo se construyen. ¡Bueno pues si te late toda esta onda del mundo digital, estás a punto de conocer qué es y cómo puedes crear un plugin en WordPrees!

Este texto es apto para todas las edades, gustos, y profesiones. Porque cualquiera puede iniciar su negocio hoy y darlo a conocer a través de la web. ¡Toma nota!

¿Qué son los plugings de WordPress?

Un plugin de WordPress es un conjunto independiente de código que mejoran y amplían la funcionalidad de WordPress. Mediante el uso de cualquier combinación de PHP, HTML, CSS, JavaScript / jQuery, o cualquier otro lenguaje de programación web, un plugin puede dar nuevas características a cualquier parte de tu sitio web, incluyendo el Panel de control de administración. Puedes modificar el comportamiento predeterminado de WordPress o eliminar completamente el comportamiento no deseado. Los plugins te permiten modificar y personalizar fácilmente WordPress para satisfacer tus necesidades.

Debido a que los plugins de WordPress son independientes, no alteran físicamente ningún código básico de WordPress. Se pueden copiar e instalar en cualquier instalación de WordPress. Una manera alternativa (y fuertemente desalentada) de hacer cambios a WordPress es escribir nuevas funciones en el archivo functions.php de WordPress, que se almacena en la carpeta /wp-includes/, o en el archivo functions.php que forma parte de un tema . Esto viene con una serie de problemas potenciales.

WordPress y sus temas reciben actualizaciones periódicas. Y a menos que estés usando el tema hijo de WordPress, cuando el archivo functions.php sea sobrescrito por una actualización, tu nuevo código será borrado y tendrás que escribirlo de nuevo. Si escribes muchas funciones y una de ellas tiene un error que no puede depurar, puede que debas reemplazar todo el archivo por el original, eliminando todos los cambios realizados. Si sus funciones se eliminan del archivo, tu sitio web puede estar cubierto en errores de PHP donde intenta llamar a las funciones que faltan.

Los plugins nunca se sobrescriben o eliminan automáticamente al instalar actualizaciones de WordPress. Si su plugin tiene errores de codificación, por lo general sólo puedes desactivarlo en el Panel de control de administración mientras lo arreglas. Si su plugin tiene un error grave, WordPress usualmente los desactivará automáticamente. permitiendo así que tu sitio continúe funcionando.

¿Qué son los ganchos (hooks)?

Los Plugins de WordPress interactúan con código de núcleo utilizando ganchos. Hay dos tipos diferentes de ganchos.

1. Ganchos de acción (para agregar / quitar funciones)
2. Ganchos de filtro (Para modificar datos producidos por funciones)

Para conocer más sobre las acciones o ganchos de acción da clic aquí.

Ahora que tiene una comprensión básica de los ganchos y los filtros, vamos a crear un simple plugin de WordPress que añade un nuevo enlace y una página al Panel de control de administración.

Paso 1 – Almacenamiento de tu plugisn

El primer paso para crear tu plugin de WordPress es crear una carpeta para almacenar todos tus archivos. Los complementos se guardan en la siguiente carpeta: /wp-content/plugins/. La carpeta que crees, debe tener un nombre único y descriptivo para garantizar que no choque con ningún otro complemento. Conéctate a tu cuenta de alojamiento con un cliente FTP. Desde el directorio principal de WordPress, navega a wp-content, luego a plugins. Dentro de la carpeta de plugins, crea una nueva carpeta llamada my-first-plugin.

Para hacer las cosas mucho más fáciles para ti en el futuro, lo mejor es separar los distintos archivos que componen su plugin de WordPress y darles sus propias subcarpetas, en lugar de tener todos los archivos de tu plugin en la carpeta principal. Cuando un plugin crece y se vuelve complejo, es mucho más fácil encontrar un archivo específico cuando todo tiene su propio lugar. Si el plugin utiliza CSS personalizado, crea una carpeta CSS y guarda todos los archivos CSS. Si tu plugin utiliza JavaScript personalizado, crea una carpeta JavaScript.

Paso 2 – Creación del primer archivo

El primer archivo en tu plugin es importante. Contiene toda la información que WordPress necesita para mostrar tu complemento en la lista de complementos, lo que te permite activar el plugin.

En su carpeta my-first-plugin, crea un nuevo archivo PHP llamado my-first-plugin.php.
Es una buena práctica darle a este primer archivo un nombre similar al que le dio a su carpeta, pero puede tener cualquier nombre que le guste. Agrega la etiqueta PHP de apertura <?php a la primera línea. No es necesario agregar una etiqueta de cierre al final del archivo (para entender por qué, lee la nota en esta página del manual de PHP). Este archivo tendrá principalmente “comentarios de encabezado” con varias piezas de información que serán leídas / visualizadas por WordPress. Los comentarios de encabezado van en un comentario de PHP de varias líneas, uno por línea y cada línea comienza con un texto específico para definir a qué se refiere la línea. Éstos deben ir solamente en este primer archivo y no necesitan estar en ningún otro archivo.

El primer comentario que debes añadir a my-first-plugin.php es el nombre de tu plugin. Comience por escribir el abridor de comentarios de varias líneas de PHP / * en la segunda línea del archivo, justo debajo de la etiqueta PHP de apertura. En la tercera línea, escriba Plugin Name: My First Plugin. En la cuarta línea, cierre la sección de comentarios con */. Su archivo se verá así:

<?php
/*
Plugin Name: My First Plugin
*/

Guarda el archivo y cargarlo en la carpeta my-first-plugin. Navega a la página de plugins del Panel de control de administración de WordPress. Ahora verás un plugin en la lista denominada My First Plugin con enlaces para activar, editar y eliminar el complemento. Hay diferenctes piezas de información que puedes agregar desde ahora, tales como una descripción del plugin, el nombre, un enlace al sitio web, la versión actual de tu plugin, etc Por ahora, sólo agrega una descripción y tu nombre.

Editar my-first-plugin.php como se ve en el siguiente ejemplo, subelo y sobrescribe el archivo antiguo cuando se te pregunte:

?php
/*
Plugin Name: My First Plugin
Description: This is my first plugin! It makes a new admin menu link!
Author: Your Name
*/

Una vez que este cargado, actualiza la página Plugins en el área de administración de WordPress y ahora debes ver tu plugin con tu nueva descripción.

Paso 3 – Escribir las funciones de tu plugin

Como se mencionó anteriormente, la mejor práctica al desarrollar un plugin es separar cuidadosamente su código en archivos y carpetas apropiados. Dado que el trabajo primario del primer archivo es mantener los encabezados de los comentarios, tiene sentido colocar el resto del código del complemento en archivos separados en su propia subcarpeta, utilizando las funciones de “incluir” de PHP para acceder a ellos. Cualquier archivo almacenado en subcarpetas se llama directamente por nuestro código y sólo por nuestro código, por lo que los nombres de subcarpeta no necesitan un prefijo. Sin embargo, es muy recomendable que dé a todos tus archivos, funciones y variables un prefijo único en su nombre para evitar conflictos con otros plugins. En este caso, usamos mfp como un prefijo, la cual es la abreviatura de ‘My First Plugin’.

En la carpeta principal de tu pkugin, crea una nueva carpeta llamada includes. Cualquier archivo que sea “incluido” por otro archivo irá en esta carpeta. Cree un nuevo archivo PHP en la carpeta includes y guárdalo como mfp-functions.php. Debes darle la apertura <?php etiqueta en la primera línea. Este nuevo archivo es donde se almacenarán todas las funciones de tu plugin.

Ahora regresa a my-first-plugin.php en la carpeta principal de tu plugin. Necesitamos hacer que incluya el archivo mfp-functions.php para que podamos usar las nuevas funciones. Ahora este es el archivo principal del plugin, incluyendo mfp-functions.php aquí hace que las funciones estén disponibles para cualquier otro archivo en su plugin. Utiliza require_once para asegurarte de que el plugin sólo funcione si el archivo de funciones está disponible. La forma más fácil de incluir archivos de su carpeta de complementos es mediante la función WordPress plugin_dir_path (__ FILE__), que da la ruta completa al directorio donde se encuentra nuestro complemento, luego use a . (punto) para añadir el nombre de la subcarpeta que creamos anteriormente (includes), seguido del nombre del archivo que creamos (mfp-functions.php).

Editar my-first-plugin.php como se muestra a continuación, a continuación, guardar y cargar una vez más, sobrescribiendo la versión anterior cuando se te pregunte.

<?php
/*
Plugin Name: My First Plugin
Description: This is my first plugin! It makes a new admin menu link!
Author: Your Name
*/

// Include mfp-functions.php, use require_once to stop the script if mfp-functions.php is not found
require_once plugin_dir_path(__FILE__) . 'includes/mfp-functions.php';

Vuelve a mfp-functions.php en la subcarpeta includes.

Es una gran idea agrupar funciones similares y escribir un comentario de varias líneas sobre cada grupo que describe el grupo, seguido de un breve comentario de una sola línea sobre cada función describiéndolo brevemente. De esa manera no tienes que leer todo el código para encontrar una función y averiguar lo que hace. Nombraremos la función mfp_Add_My_Admin_Link(). La función agregará un nuevo enlace de nivel superior al menú de navegación del Panel de control del administrador.

Para recapitular – escribir una nueva función implica los siguientes pasos:

• Escribe un comentario describiendo la función
• Nombra la función
• Escribe la función

En mfp-functions.php, escribe lo siguiente:

<?php
/*
 * Add my new menu to the Admin Control Panel
 */
 
// Add a new top level menu link to the ACP
function mfp_Add_My_Admin_Link()
{
 // My code goes here
}

Dentro de nuestra función, necesitamos usar la función incorporada de WordPress add_menu_page () para dar a nuestro menú un nombre, un título y dictar quién está autorizado a verlo. Entonces le decimos qué mostrar cuando ves lla página. También puedes asignar al icono de menú un icono y establecer su posición en el menú de navegación del panel de control de administración. Estos son opcionales, por lo que los dejaremos fuera de este tutorial.
El ícono predeterminado de cog aparecerá en el enlace a nuestra página. Nuestro enlace aparecerá en la parte inferior del menú de navegación del panel de control de administración.
Toda esta información se introduce como parámetros de add_menu_page ().

Los cuatro parámetros requeridos de add_menu_page() todos aparecen en su propia línea para mejorar la legibilidad, en este orden:

1. El título de la página que ves después de hacer clic en el enlace (que se muestra en la pestaña del navegador)
2. Texto para mostrar como el enlace de menú (que se muestra en la lista de navegación del panel de control de administración), este debe ser el nombre de tu plugin
3. Requisito de capacidad del usuario para ver el menú, en este ejemplo sólo los usuarios con la capacidad ‘manage_options’ pueden acceder a la página (no te preocupes por eso por ahora)
4. El archivo que se usará al mostrar la página real (lo crearemos a continuación), que se almacenará en la subcarpeta includes y se llamará mfp-first-acp-page.php. La URL introducida aquí se conoce como “slug”.

Antes de continuar, es importante tener en cuenta que hay una forma alternativa de utilizar esta función. El cuarto parámetro puede ser simplemente una cadena de texto que se muestra en la url después de ‘wp-admin/admin.php?Page=‘. Si ingresas ‘mi-página de plugin’, la URL se convertirá en ‘wp-admin / admin.php? Page = my-plugin-page’. El quinto parámetro debe ser el nombre de una función que genera algo. Puedes escribir una función que sólo hace eco de ‘Bienvenido a la página 1’ por ejemplo. Es significativamente más fácil crear un archivo PHP para sostener tu página.

Editar mfp-functions.php, remove // Mi código va aquí, sustituirlo por add_menu_page() y darle los parámetros como se muestra a continuación:

<?php
/*
 * Add my new menu to the Admin Control Panel
 */
 
// Add a new top level menu link to the ACP
function mfp_Add_My_Admin_Link()
{
 add_menu_page(
 'My First Page', // Title of the page
 'My First Plugin', // Text to show on the menu link
 'manage_options', // Capability requirement to see the link
 'includes/mfp-first-acp-page.php' // The 'slug' - file to display when clicking the link
 );
}

Para que esta función se ejecute realmente, necesitamos usar la función de WordPress llamada add_action() con dos parámetros, como se describe en la sección “Añadir Funciones a una Gancho de Acción” de este tutorial. Es posible que desee volver a leer esa sección antes de continuar.

• El primer parámetro es el gancho de acción que desea segmentar. En nuestro caso, el gancho de acción es admin_menu – esto significa que nuestra función se ejecuta cuando se genera el menú Admin.
• El segundo parámetro es sólo el nombre de la función a ejecutar. La función que escribimos se llama mfp_Add_My_Admin_Link. Ten en cuenta que los paréntesis NO se utilizan aquí. Recuerd que el PHP evalúa todo el script antes de ejecutarlo, lo que le permite usar add_action () antes de definir la función nombrada en el parámetro 2.

Nuestro archivo final tiene este aspecto:

<?php
/*
 * Add my new menu to the Admin Control Panel
 */
 
// Hook the 'admin_menu' action hook, run the function named 'mfp_Add_My_Admin_Link()'
add_action( 'admin_menu', 'mfp_Add_My_Admin_Link' );
 
// Add a new top level menu link to the ACP
function mfp_Add_My_Admin_Link()
{
 add_menu_page(
 'My First Page', // Title of the page
 'My First Plugin', // Text to show on the menu link
 'manage_options', // Capability requirement to see the link
 'includes/mfp-first-acp-page.php' // The 'slug' - file to display when clicking the link
 );
}

Carga mfp-functions.php en la carpeta includes y sobrescribe la antigua.

Paso 4 – Creación de la nueva página de administración

Ahora podemos crear la página que se mostrará cuando hagas clic en el enlace del panel de control de administración. Vuelve a la subcarpeta includes y crea un nuevo archivo PHP llamado mfp-first-acp-page.php. Las etiquetas de apertura de PHP no son necesarias en este archivo, ya que sólo estamos usando HTML. Escriba el HTML a continuación y cargue el archivo.

<div class="wrap">
 <h1>Hello!</h1>
 <p>This is my plugin's first page</p>
</div>

Al crear las páginas de administración, WordPress recomienda adjuntar tu propio HTML con una div y darle la clase “wrap”, como se muestra arriba. Esto garantiza que todo tu contenido aparezca en el lugar correcto, al igual que cualquier otra página de administración. Si no lo envuelves así, la página puede volverse muy desordenada.

Regresa a tu lista de plugins en el Panel de control de WordPress Admin y activa el plugin. Una vez que se cargue la página, busca en la parte inferior del menú de navegación del panel de control de administración. Hay el nuevo enlace llamado ‘My First Plugin’. Haga clic en él, y ya tienes tu propia página del panel de control de administración!