Desarrollo de plugins para WordPress: Desde los principios hasta la maestría: Crea tu primer plugin funcional

¿Por qué aprender a desarrollar plugins para WordPress?

WordPress, como el sistema de gestión de contenidos más popular a nivel mundial, debe su gran capacidad de expansión a la enorme cantidad de plugins disponibles. Aprender a desarrollar plugins no solo te permite personalizar las funciones según tus necesidades, sino que también te ayuda a comprender en profundidad la arquitectura central de WordPress, mejorando así tus habilidades técnicas. Incluso puedes convertir tus ideas en productos listos para su publicación. Al desarrollar tus propios plugins, puedes controlar con precisión la calidad del código, garantizar la seguridad de tu sitio web y evitar problemas de compatibilidad que podrían surgir al utilizar plugins de terceros.

Un plugin básico para WordPress es, en esencia, uno o más archivos PHP ubicados en una carpeta específica. Este plugin interactúa con el sistema central de WordPress a través de la amplia API que ofrece el mismo (como ganchos de acción, ganchos de filtro, códigos cortos, widgets, etc.). Comprender este mecanismo es una premisa esencial para desarrollar con éxito cualquier plugin.

Preparar el entorno de desarrollo y la infraestructura básica

Antes de escribir la primera línea de código, es de vital importancia establecer un buen entorno de desarrollo. Necesitas un entorno de servidor local (como XAMPP, Local by Flywheel o DevKinsta), un editor de código (como VS Code o PhpStorm), así como una instalación de WordPress para realizar pruebas.

Lecturas recomendadas Guía definitiva para el desarrollo de plugins para WordPress: Domina los principios fundamentales y proyectos prácticos。

La entrada para el plugin es un archivo PHP principal. Las notas de encabezado de este archivo son clave para que WordPress reconozca el plugin. Primero, crearemos la estructura básica del plugin.

Crear el archivo principal del plugin

El archivo principal de un plugin suele llevar el mismo nombre que el plugin. Por ejemplo, si creamos un plugin llamado “Mi primer plugin”, su archivo principal podría llamarse “my_first_plugin.js”.my-first-plugin.phpEste archivo debe ser colocado en…/wp-content/plugins/my-first-plugin/En el directorio.

El encabezado del archivo debe contener las anotaciones de información estándar del plugin. A continuación se muestra un ejemplo básico:

<?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
 * Domain Path:       /languages
 */

Después de guardar este archivo, acceda a la página de “Plugins” en el panel de administración de WordPress. Deberías ver que el nuevo plugin aparece en la lista de plugins y podrás activarlo. Actualmente no tiene ninguna función, pero el marco básico ya está establecido.

Establecer la estructura de directorios básica para el plugin

Un plugin con una estructura clara facilita su mantenimiento a largo plazo. Se recomienda crear los siguientes directorios:
* /assets/Se utiliza para almacenar recursos estáticos como CSS, JavaScript e imágenes.
* /includes/Se utiliza para almacenar los archivos de clases y funciones PHP esenciales.
* /languages/Se utiliza para almacenar archivos de traducción internacional (.po/.mo).

Lecturas recomendadas Los principios esenciales de Tailwind CSS: Descubriendo el funcionamiento de este framework de CSS atomizado que da prioridad a la practicidad。

Archivo principalmy-first-plugin.phpSolo debería ser responsable de la inicialización del plugin, como definir constantes, incluir otros archivos, registrar ganchos (hooks), etc.

Implementar las funciones principales: crear menús y páginas de administración.

Una función común de los plugins es agregar una página de menú de administración en el backend de WordPress. Lo lograremos utilizando la “API de Páginas de Menú” de WordPress.

Añadir un menú principal en el backend.

Necesitamos utilizar…add_menu_page()Función. Esta función se utiliza generalmente en...admin_menuEste gancho de acción se ejecuta cuando se activa. Agregamos el siguiente código en el archivo principal:

// 定义在管理员菜单初始化时执行的功能
function mfp_add_admin_menu() {
    add_menu_page(
        '我的插件设置',         // 页面标题
        '我的插件',            // 菜单标题
        'manage_options',      // 所需权限
        'my-first-plugin',     // 菜单slug
        'mfp_display_settings_page', // 用于显示页面内容的回调函数
        'dashicons-admin-generic', // 菜单图标（Dashicon）
        6                      // 菜单位置
    );
}
// 将函数挂载到 `admin_menu` 钩子上
add_action('admin_menu', 'mfp_add_admin_menu');

Crear el contenido que se mostrará en la página de configuración.

En el código anterior,mfp_display_settings_pageEs una función de callback que se encarga de generar el contenido HTML de la página de configuración. Necesitamos definir esta función:

// 设置页面的显示内容
function mfp_display_settings_page() {
    // 检查用户权限
    if (!current_user_can('manage_options')) {
        wp_die(__('你没有权限访问此页面。'));
    }
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <form action="/es/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出设置字段和安全nonce字段
            settings_fields('mfp_options_group'); // 设置组的名称
            do_settings_sections('my-first-plugin'); // 页面slug
            submit_button('保存设置');
            ?>
        <input type="hidden" name="trp-form-language" value="es"/></form>
    </div>
    ¿php?  
}

Este código crea un marco de página de configuración estándar para WordPress, en el cual se utilizan elementos internos específicos para la configuración del sitio web.settings_fields()Ydo_settings_sections()Se trata de una función que implica que utilizaremos la API de Configuraciones de WordPress (WordPress Settings API) para gestionar nuestras opciones. Esta es la forma más segura y estándar para hacerlo.

Usar la API Settings para administrar las opciones de los plugins.

Tratarlo directamente.$_POSTExisten riesgos de seguridad en los datos. La API de Configuraciones de WordPress se encarga de la validación de datos, la seguridad y el almacenamiento, lo que la convierte en el método preferido para gestionar las configuraciones de los plugins.

Lecturas recomendadas Guía definitiva de plugins para WooCommerce: Cómo crear desde cero un sitio web independiente de comercio electrónico internacional profesional。

Configuraciones de registro, campos y secciones

Necesitamos que…admin_initIniciamos nuestras configuraciones dentro del “gancho” (hook). Para comenzar, utilizamos…register_setting()Registra una opción de configuración.

function mfp_register_settings() {
    // 注册一个设置：`mfp_options` 是存储在`wp_options`表中的键名
    register_setting(
        'mfp_options_group', // 设置组名，需与`settings_fields()`参数一致
        'mfp_options',       // 选项名
        'mfp_sanitize_options' // 可选：数据清洗回调函数
    );

// 添加一个设置章节
    add_settings_section(
        'mfp_main_section',                // 章节ID
        '主要设置',                         // 章节标题
        'mfp_main_section_callback',       // 章节介绍的回调函数
        'my-first-plugin'                  // 所属页面slug
    );

// 在章节中添加一个文本字段
    add_settings_field(
        'mfp_text_field',                  // 字段ID
        '示例文本',                         // 字段标签
        'mfp_text_field_callback',         // 用于渲染字段HTML的回调函数
        'my-first-plugin',                 // 所属页面slug
        'mfp_main_section'                 // 所属章节ID
    );
}
add_action('admin_init', 'mfp_register_settings');

Definir las funciones de renderización y limpieza de los campos

Ahora, necesitamos definir cada una de las funciones de callback que se utilizaron anteriormente, para generar el código HTML de los campos y limpiar los datos.

// 主章节的描述文本
function mfp_main_section_callback() {
    echo '<p>Aquí se encuentra la zona principal de configuración de los plugins.</p>';
}

// 文本字段的HTML输出
function mfp_text_field_callback() {
    // 从数据库获取现有值
    $options = get_option('mfp_options');
    $value = $options['mfp_text_field'] ?? ''; // PHP 7.0+ 空合并运算符
    echo '<input type="text" name="mfp_options[mfp_text_field]" value="' . esc_attr($value) . '" class="regular-text">';
}

// 数据清洗函数（可选但推荐）
function mfp_sanitize_options($input) {
    $sanitized_input = [];
    if (isset($input['mfp_text_field'])) {
        // 对文本字段进行基本的清洗，如去除标签
        $sanitized_input['mfp_text_field'] = sanitize_text_field($input['mfp_text_field']);
    }
    return $sanitized_input;
}

Hasta aquí, se ha completado un plugin completo que incluye una página de configuraciones de seguridad. Una vez que el plugin esté activado, podrá ver el menú “Mis plugins” en la interfaz administrativa de WordPress. Al hacer clic en él, podrá configurar y guardar un parámetro de texto. Todos los datos se almacenan de manera segura a través de la API de WordPress.wp_optionsEn la tabla.

Añadir funcionalidades frontales al plugin: crear códigos cortos.

Las funciones del backend son fundamentales, pero los plugins suelen necesitar también influir en la parte frontal ( frontend) del sitio web. Crear códigos cortos (shortcodes) es una excelente forma de integrar las funcionalidades de los plugins en artículos, páginas o herramientas adicionales.

Registre un código corto y sencillo.

Nos registramos en un servicio llamado…[my_greeting]Este es el código corto utilizado para mostrar un saludo en la parte frontal ( frontend) de una página web.add_shortcode()Función.

Añada lo siguiente en el archivo principal o en un archivo de funciones dedicado:

// 注册短代码
function mfp_greeting_shortcode($atts, $content = null) {
    // 使用shortcode_atts设置默认属性并合并用户输入
    $atts = shortcode_atts(
        array(
            'name' => '访客', // 默认值
        ),
        $atts,
        'my_greeting' // 短代码名称
    );

// 获取插件选项中存储的文本
    $options = get_option('mfp_options');
    $custom_text = $options['mfp_text_field'] ?? '';

// 构造输出
    $output = '<div class="mfp-greeting">'$output .= '<p>Hola, '. esc_html($atts['name']) . '. ¡Bienvenido a nuestro sitio web.</p>';
    if (!empty($custom_text)) {
        $output .= '<p><strong>Mensaje personalizado:</strong>'`. esc_html($custom_text)`.'</p>'$output .= '</div>';

// 返回输出内容，而不是直接echo
    return $output;
}
add_shortcode('my_greeting', 'mfp_greeting_shortcode');

Ahora, los usuarios pueden ingresar texto en el editor de artículos.[my_greeting name="张三"]En el lado del frontend, se renderiza un mensaje de saludo personalizado; además, si en el backend se ha configurado un “texto de ejemplo”, este también se mostrará. Este método conecta de manera efectiva las configuraciones del backend con la información que se presenta en el frontend.

resúmenes

A través de los pasos anteriores, hemos completado un plugin para WordPress con funciones completas. Comenzamos desde cero, creando los archivos y la estructura básica del plugin, y utilizamos…add_menu_page()Se ha construido una página de configuración segura en el backend utilizando la API de Configuraciones (Settings API), y esta se ha integrado a través de…add_shortcode()Se ha logrado la salida de las funciones frontales. Este proceso abarca el flujo central del desarrollo de plugins: planificación, inicialización, integración con APIes del backend, manejo de datos y proporcionación de interfaces frontales.

Después de dominar estos conceptos básicos a fondo, puedes continuar explorando temas más avanzados, como la creación de tipos de artículos personalizados, metadatos (Meta Box), tablas de bases de datos personalizadas, puntos de acceso (endpoints) de API REST, el manejo de AJAX y la internacionalización de plugins. Recuerda que seguir los estándares de codificación y las mejores prácticas de WordPress es clave para desarrollar plugins de alta calidad y fáciles de mantener.

FAQ Preguntas más frecuentes

¿Qué conocimientos de PHP se deben dominar para desarrollar plugins?

Es esencial dominar al menos la gramática básica de PHP, incluyendo variables, arrays, funciones, condiciones de decisión y bucles. El conocimiento de programación orientada a objetos (POO) es de gran ayuda para desarrollar plugins de tamaño mediano y grande. Además, es necesario comprender cómo WordPress carga los plugins, así como cómo utilizar variables y funciones globales de manera segura.

¿Cómo depurar un plugin para WordPress que has desarrollado tú mismo?

En primer lugar, asegúrate de que enwp-config.phpEl archivo se abrió en el programa.WP_DEBUGYWP_DEBUG_LOGDe esta manera, los mensajes de error se registrarán en el archivo de registro. En segundo lugar, se puede utilizar…error_log()La función genera información de depuración. Para lógicas complejas, se pueden utilizar herramientas de depuración profesionales como Xdebug para ejecutar el código paso a paso.

¿Cómo asegurar la seguridad de un plugin al desarrollarlo?

Siempre verifique y limpie los datos introducidos por los usuarios. Utilice las funciones incorporadas en WordPress, como…esc_html(), esc_attr(), sanitize_text_field()Ywp_kses()Procesa el resultado. Utiliza un método que no sea basado en la tecnología CE (Common Edge).wp_nonce_field()Se utiliza para prevenir la falsificación de solicitudes entre sitios (CSRF, Cross-Site Request Forgery). Para las operaciones en la base de datos, se emplea…$wpdbLos métodos proporcionados por la clase, o su uso.prepare()Frases para prevenir inyecciones SQL.

¿Deberían los plugins instalarse localmente o desarrollarse en servidores en línea?

Se recomienda encarecidamente realizar el trabajo de desarrollo principal en un entorno local (como Local o XAMPP). Los entornos locales ofrecen una respuesta rápida, no están afectados por la red y permiten realizar pruebas y realizar cambios sin riesgo de dañar el sitio web en línea. Una vez que las funciones estén básicamente completas, se puede implementar el código en un entorno de prueba en línea para realizar pruebas de compatibilidad finales.

¿Cómo publicar mi propio plugin en el directorio oficial de WordPress?

Necesitas acceder a WordPress.org, registrarte para obtener una cuenta de desarrollador y enviar el código de tu plugin a través de Subversion (SVN). El plugin debe cumplir con los estándares oficiales de código y las requisitos de estructura de directorios, y debe incluir los elementos necesarios.readme.txtUna vez que el archivo sea aprobado, los usuarios de todo el mundo podrán buscar e instalar tu complemento directamente desde el backend.