De cero a uno: Una guía completa para desarrollar tu primer plugin para WordPress paso a paso

Preparación del entorno de desarrollo de plugins para WordPress

Antes de comenzar a escribir código, es de vital importancia establecer un entorno de desarrollo estable y aislado del equipo local. Esto no solo protegerá tu sitio web principal, sino que también te permitirá realizar pruebas y depuraciones de manera libre.

Un entorno eficiente generalmente consta de tres componentes principales. El primero es un software de servidor web, como Apache o Nginx. El segundo es el entorno de ejecución de PHP, cuya versión debe ser compatible con la versión de WordPress que se va a implementar. El tercero es la base de datos MySQL o MariaDB. Aunque es posible instalar estos componentes uno por uno de forma manual, recomendamos encarecidamente el uso de entornos integrados en servidores locales.

Existen en el mercado una variedad de herramientas de entornos integrados de excelente calidad entre las que se encuentran Local by Flywheel, XAMPP, MAMP y DevKinsta. Estas herramientas reúnen todos los componentes necesarios y ofrecen la posibilidad de instalación y puesta en marcha con un solo clic. Además, suelen incluir funciones útiles para los desarrolladores, como la captura de correos electrónicos, la clonación de sitios web y la configuración automática de SSL, lo que mejora significativamente la eficiencia de su trabajo.

Lecturas recomendadas Guía definitiva para el desarrollo de plugins para WordPress: Crea tu primer plugin personalizado desde cero。

Además del entorno de servidores, también necesitarás un editor de código. Puedes elegir un entorno de desarrollo integrado (IDE) con funciones completas, como PhpStorm, o un editor más ligero pero extensible, como Visual Studio Code. Para el desarrollo de plugins, es recomendable que estos incluyan, al menos, sugerencias de código en PHP, resaltado de sintaxis y funciones de gestión de archivos. Instalar algunos plugins específicos en el editor de texto (como fragmentos de código relacionados con WordPress o PHP Intelephense) hará que el proceso de programación sea más fluido.

Servidor de WordPress de UltaHost

Garantía de reembolso en 30 días, ancho de banda ilimitado y bases de datos, protección gratuita contra ataques DDoS; descuento del 50% al comprar por 3 años (versiones de 4 TB y 5 TB).

página de acceso

Comprender la estructura de los archivos centrales de un plugin

Los plugins de WordPress son, en esencia, una colección de uno o más archivos PHP que siguen una estructura y convenciones específicas, lo que permite que el sistema central de WordPress los reconozca y los cargue.

Cada plugin comienza con un archivo principal. Este archivo principal es el “punto de entrada” del plugin y debe contener una anotación de cabecera específica. Dicha anotación de cabecera es un bloque de comentarios de varias líneas que contiene la metainformación del plugin, como su nombre, descripción, versión, autor, etc. WordPress utiliza esta información para mostrar el plugin en la interfaz de administración en segundo plano. El nombre del archivo principal puede ser personalizado, pero generalmente… plugin-name.php En tal formato.

Aquí hay un ejemplo básico del contenido del archivo de cabecera del plugin principal:

<?php
/**
 * Plugin Name: 我的第一个自定义插件
 * Plugin URI:  https://example.com/my-first-plugin
 * Description: 这是我从零开始开发的第一个WordPress插件，用于演示和学习。
 * Version:     1.0.0
 * Author:      你的名字
 * Author URI:  https://example.com
 * License:     GPL v2 or later
 * Text Domain: my-first-plugin
 */

Una vez que el archivo principal esté listo, es necesario colocarlo en el lugar correcto. El archivo central del plugin debe encontrarse en la siguiente ubicación: /wp-content/plugins/ Dentro de una carpeta independiente que se encuentra en el directorio. El nombre de la carpeta debe ser breve, único y estar compuesto por letras minúsculas y guiones. Por ejemplo, nuestro complemento (plugin) puede ser almacenado en la carpeta «my-plugin». /wp-content/plugins/my-first-plugin/ En el camino (path), y el archivo principal (main file). my-first-plugin.php Colócalo en la carpeta principal de este directorio.

Lecturas recomendadas Análisis del desarrollo de plugins de WordPress: una guía completa para crear módulos de funcionalidad personalizada desde cero.。

Escribe tu primera función.

Ahora, añadamos la primera función interactiva al plugin. WordPress permite que los plugins modifiquen o agreguen funcionalidades en momentos específicos mediante un mecanismo llamado “ganchos” (Hooks). Los ganchos se dividen principalmente en dos tipos: ganchos de acción (Action Hooks) y ganchos de filtro (Filter Hooks).

Los ganchos de acción (action hooks) te permiten ejecutar tu propio código en puntos específicos del funcionamiento de WordPress, como al publicar un artículo o al cargar una página. Un ejemplo muy común es agregar información personalizada en el pie de página de una página web. Podemos utilizarlos para ello. wp_footer Este accionador (action hook) se utiliza para implementar dicha función.

Necesitamos escribir una función personalizada y indicarle a WordPress que la utilice en… wp_footer Se ejecuta cuando se activa. Este proceso se denomina “montar” una función o método en un gancho (hook). A continuación, se muestra un ejemplo de implementación:

hosting.com Alojamiento compartido

Alto rendimiento con CPU AMD EPYC, almacenamiento SSD NVMe y LiteSpeed, asistencia interna de expertos 24 horas al día, 7 días a la semana, medidas de seguridad avanzadas como SSL, fuerza bruta, protección contra malware y DDoS, ahorro de hasta 73%.

página de acceso

// 在主文件中添加以下代码
function my_first_plugin_display_footer_text() {
    echo ‘<p style="text-align: center; color: #666;">Presentado por mi primer plugin para usted.</p>’;
}
add_action( ‘wp_footer’， ‘my_first_plugin_display_footer_text’ );

add_action() Es la función central que se encarga de realizar la acción de montaje (es decir, de incorporar el contenido del plugin en la página). Después de completar los pasos anteriores, borre la caché de su sitio web y actualice la página frontal; debería poder ver el texto del pie de página que ha añadido el plugin.

A continuación, vamos a hablar sobre los ganchos de filtro (filter hooks). Estos ganchos te permiten modificar los datos que se le pasan. Por ejemplo, si queremos cambiar el contenido del título de un artículo, podemos utilizarlos para hacerlo. the_title Filtros. El siguiente código demuestra cómo agregar un prefijo delante de los títulos de todos los artículos:

function my_first_plugin_prefix_title( $title ) {
    // 检查是否在主循环中且不是管理后台，避免影响后台标题显示
    if ( ! is_admin() && in_the_loop() ) {
        $title = ‘[插件前缀] ’ . $title;
    }
    return $title;
}
add_filter( ‘the_title’， ‘my_first_plugin_prefix_title’ );

Mejorar el plugin: agregar un menú de administración y una página de configuraciones.

Un complemento (plugin) con funciones completas suele requerir la interacción con el administrador del sistema, lo que implica la adición de propios elementos de menú y páginas de configuración. Esto permite que los usuarios configuren el complemento sin tener que modificar el código.

Lecturas recomendadas Desde cero: Guía completa y tutorial práctico para el desarrollo de plugins para WordPress。

Para agregar un nuevo elemento de menú de nivel superior al menú de administración situado en el lado izquierdo de la interfaz de WordPress, es necesario utilizar las herramientas proporcionadas por el sistema de administración de WordPress. Estas herramientas permiten crear, editar y organizar los menús de forma sencilla. add_menu_page() Función. Esta función requiere varios parámetros para definir el título del menú, los permisos, el identificador único y la función de callback, entre otros. Debes utilizarlos en el momento adecuado (generalmente…). admin_menu (La función de “action hook”) se llama para ejecutarlo.

A continuación, se muestra un ejemplo de cómo crear un menú principal simple y su página de configuración:

Alojamiento compartido InterServer

Alojamiento compartido $2.50 USD al mes , primer mes $0.1 USD código promocional tryinterserver, 461 scripts de aplicaciones en la nube, instalación en un clic.

página de acceso

function my_first_plugin_add_admin_menu() {
    add_menu_page(
        ‘我的第一个插件设置’， // 页面标题
        ‘我的插件’，           // 菜单标题
        ‘manage_options’，     // 所需权限（管理员）
        ‘my-first-plugin-settings’， // 菜单slug
        ‘my_first_plugin_render_settings_page’， // 渲染页面的回调函数
        ‘dashicons-admin-plugins’， // 图标（Dashicons）
        100                     // 菜单位置
    );
}
add_action( ‘admin_menu’， ‘my_first_plugin_add_admin_menu’ );

A continuación, necesitas definir la función de callback. my_first_plugin_render_settings_page() Para generar el contenido HTML de esta página de configuración, puedes usar el siguiente código. En esta función, se crea un formulario y se maneja el envío de los datos del formulario (sin utilizar tecnología Ajax).

Para almacenar y recuperar de manera segura las configuraciones de los plugins, se debe utilizar la API de opciones de WordPress. Puedes hacerlo así: add_option()、get_option()、update_option() Y delete_option() Se utilizan funciones como para operar con elementos denominados… my_first_plugin_options Los datos de las opciones se deben incluir en el formulario utilizando las funciones integradas de WordPress. settings_fields() Y do_settings_sections() Existen funciones para generar la salida de los campos de configuración de manera segura, pero estas suelen utilizarse en combinación con “APIs de configuración” más formales. Para páginas de configuración sencillas, es común manejar manualmente el envío de los formularios, así como verificar y limpiar los datos recibidos.

resúmenes

Desarrollar tu primer plugin para WordPress es un proceso de aprendizaje sistemático. Comenzaste por configurar un entorno de desarrollo local seguro y comprendiste la estructura de archivos más básica y las normas de nombramiento de los plugins. Luego, dominaste el mecanismo central de extensibilidad de los plugins de WordPress: los ganchos (hooks). Lograste mostrar contenido mediante los ganchos de acción (action hooks) y modificar datos utilizando los ganchos de filtro (filter hooks). Finalmente, para que el plugin fuera más fácil de administrar, aprendiste a crear menús de administración en la interfaz posterior y páginas de configuración, así como a interactuar con la API de opciones de WordPress para almacenar datos de manera permanente.

Siguiendo estos pasos, no solo has creado un plugin funcional y útil, sino que, lo que es más importante, has construido una base de trabajo extensible. Sobre esta base, puedes seguir añadiendo características más complejas y potentes a tu plugin explorando otros mecanismos de interacción («hooks»), profundizando en el conocimiento de JavaScript (en particular, Ajax), creando tablas de bases de datos personalizadas o desarrollando código de uso simplificado.

FAQ Preguntas más frecuentes

¿Es posible desarrollar un plugin para WordPress sin tener experiencia en programación?
Aunque tener conocimientos básicos de PHP, HTML y un poco de CSS te facilitará el trabajo, es completamente posible comenzar desde cero. Lo importante es avanzar paso a paso: empieza modificando y imitando el código de plugins existentes, para luego ir comprendiendo gradualmente las funciones y los mecanismos («hooks») proporcionados por WordPress. Además, no olvides consultar la abundante documentación oficial y practicar constantemente.

¿Por qué mi plugin no se puede activar en segundo plano?

Por lo general, hay varias razones por las que la activación de un plugin falla. La más común es que el formato de la información del encabezado del archivo principal no es correcto o que faltan campos obligatorios (como el “Nombre del Plugin”). También es posible que existan errores de sintaxis en el código PHP; puedes localizar estos errores revisando los registros de errores del servidor web. Además, es posible que el nombre de la carpeta del plugin o del archivo principal coincida con el de otros plugins ya instalados, o que la versión de PHP requerida por el plugin sea más reciente que la que tiene tu servidor actual.

¿Cómo dividir las configuraciones avanzadas de un plugin en varias páginas de etiquetas?

Puedes hacerlo mediante múltiples llamadas. add_menu_page() Es posible crear un menú principal independiente, pero esto podría hacer que el aspecto del backend se vea desordenado. Una mejor opción es utilizar… add_submenu_page() Función para agregar una página de configuraciones adicional como un elemento de menú secundario al menú principal. Al crear el menú secundario, establece el primer parámetro (el slug del menú padre) como el slug de tu menú principal, y los parámetros siguientes se utilizan para definir el título y las funciones del menú secundario.

¿Cómo publicar de manera segura un plugin una vez que ha sido desarrollado?

Es de vital importancia garantizar la seguridad del código antes de publicarlo en el directorio de plugins de WordPress. Es necesario realizar una verificación estricta y la correspondiente escapación de todos los datos introducidos por los usuarios. Se recomienda utilizar las funciones proporcionadas por WordPress para ello. sanitize_text_field()、wp_kses() Y esc_html()Al mismo tiempo, todas las operaciones de base de datos que se realicen de forma directa deben utilizar… $wpdb Los métodos proporcionados por la clase sirven para proteger contra inyecciones SQL. Antes de su publicación, también se debe realizar el procesamiento de internacionalización del plugin y preparar archivos de traducción para todas las cadenas de texto visibles para los usuarios.