Guía completa para el desarrollo de plugins para WordPress: Crea tu primer plugin funcional desde cero

Antes de comenzar, asegúrese de contar con un entorno local o en línea de WordPress para el desarrollo y pruebas. Entornos integrados como Local, XAMPP o MAMP son opciones muy buenas. Además, necesitará una computadora equipada con un editor de código (como Visual Studio Code o PhpStorm), así como conocimientos básicos de PHP, HTML, CSS y JavaScript.

Tener un entorno de desarrollo claro es la base para todo el trabajo posterior, ya que le permite centrarse en la lógica del código en lugar de en la configuración del entorno.

Crea tu primer archivo de plugin.

Un plugin para WordPress necesita, al menos, un archivo PHP principal, y dicho archivo debe contener una anotación de cabecera específica para proporcionar información metadatos al sistema de WordPress.

Lecturas recomendadas Guía completa para el desarrollo de plugins para WordPress: Cómo crear plugins profesionales desde cero。

Comentarios en la cabecera del plugin y el archivo principal

Primero, en el directorio de instalación de WordPress… wp-content/plugins/ Dentro de la carpeta, cree una nueva carpeta, por ejemplo… my-first-pluginDentro de esa carpeta, cree el archivo principal. my-first-plugin.phpAl comienzo del archivo, se debe agregar la anotación estándar del encabezado del plugin.

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

<?php
/**
 * Plugin Name:       我的第一个功能插件
 * Plugin URI:        https://yourwebsite.com/my-first-plugin
 * Description:       这是一个学习 WordPress 插件开发的示例插件，用于在前端页面底部添加自定义文本。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://yourwebsite.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 */

Esta nota es el “dossier de identidad” del plugin. WordPress lo lee para obtener información sobre su funcionamiento y configuración. Plugin Name El nombre del plugin se mostrará en la interfaz de administración del backend, y otra información como la versión y la descripción también se exhibirá en sus respectivos lugares. Después de guardar el archivo, podrá ver este plugin desactivado en la página de “Plugins” del backend de WordPress.

Implementación de la función: Adición de ganchos de acción (action hooks).

La lógica de los plugins se integra principalmente a través del sistema de ganchos (Hooks) de WordPress. Vamos a utilizarlo. wp_footer Este gancho de acción permite mostrar un texto en el pie de página del sitio web.

Debajo de las notas en el encabezado del plugin, añada el siguiente código:

// 在网站页脚添加自定义文本
function mfp_add_footer_text() {
    echo '<p style="text-align: center; color: #666;">¡Gracias por leer! Este pie de página fue generado por “Mi primer plugin de funcionalidades”.</p>';
}
add_action( 'wp_footer', 'mfp_add_footer_text' );

Aquí, hemos creado uno llamado mfp_add_footer_text Una función personalizada de… Luego, se utiliza… add_action() La función “monta” esta otra función en un lugar específico del sistema. wp_footer En este gancho: cuando WordPress llega a la sección del pie de página, nuestra función se ejecuta automáticamente y se muestra ese fragmento de HTML.

Lecturas recomendadas Crea tu primer complemento de WordPress paso a paso: desde lo básico hasta el desarrollo práctico.。

Añadir una página de configuración de administración para el plugin.

Un complemento (plugin) con funciones completas suele necesitar una interfaz de configuración en el backend que permita a los usuarios ajustar el comportamiento del mismo sin tener que modificar el código. Crearemos una página de opciones sencilla para ello.

Crear una entrada de menú de administración.

En primer lugar, necesitamos utilizar… add_action( ‘admin_menu’, … ) Vamos a agregar un nuevo elemento de menú en la interfaz de administración. Continúe agregando el siguiente código en su archivo principal del plugin:

// 添加管理菜单
function mfp_add_admin_menu() {
    add_menu_page(
        '我的插件设置',          // 页面标题
        '我的插件',             // 菜单标题
        'manage_options',       // 权限要求
        'mfp-settings',         // 菜单slug
        'mfp_settings_page',    // 显示页面内容的回调函数
        'dashicons-admin-generic', // 图标（使用Dashicons）
        30                      // 菜单位置
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

add_menu_page() Las funciones son API proporcionadas por el núcleo de WordPress, utilizadas para agregar menús de nivel superior en la barra de navegación izquierda. Hemos especificado los permisos correspondientes. manage_optionsPor lo general, solo los administradores pueden acceder a ello.

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

Construir una página de configuración y un formulario

A continuación, necesitamos definir las funciones de callback mencionadas anteriormente. mfp_settings_page Se procede a renderizar el contenido HTML de la página de configuración y a gestionar el almacenamiento de los datos del formulario.

// 设置页面的HTML内容
function mfp_settings_page() {
    // 检查用户权限
    if ( !current_user_can( ‘manage_options’ ) ) {
        return;
    }

// 处理表单提交
    if ( isset( $_POST[‘mfp_footer_text’] ) ) {
        // 验证和清理输入数据
        $new_text = sanitize_text_field( $_POST[‘mfp_footer_text’] );
        // 使用 update_option 将数据保存到数据库
        update_option( ‘mfp_footer_text’, $new_text );
        echo ‘<div class="“notice" notice-success is-dismissible”><p>¡Los ajustes se han guardado!</p></div>’;
    }

// 从数据库获取现有值，用于填充表单
    $current_text = get_option( ‘mfp_footer_text’, ‘这是默认的页脚文本。’ );
    ?&gt;
    <div class="“wrap”">
        <h1>Configuraciones de mi plugin</h1>
        <form method="“post”" action="/es/“”/" data-trp-original-action="“”">
            <?php wp_nonce_field( ‘mfp_save_settings’, ‘mfp_settings_nonce’ ); ?>
            <table class="“form-table”">
                <tr>
                    <th scope="“row”"><label for="“mfp_footer_text”">Texto personalizado para el pie de página</label></th>
                    <td>
                        <input name="“mfp_footer_text”" type="“text”" id="“mfp_footer_text”" value="“NO NUMERIC NOISE KEY" 1001” class="“regular-text”">
                        <p class="“description”">Este texto se mostrará en la parte inferior de todas las páginas del sitio web.</p>
                    </td>
                </tr>
            </table>
            <?php submit_button(); ?>
        <input type="hidden" name="trp-form-language" value="es"/></form>
    </div>
    ¿php?  
}

Esta función realiza varias tareas clave: verificación de permisos y manejo del envío de formularios (utilizando…) update_option Almacenamiento, así como la renderización de la interfaz de formularios. Cabe destacar que se utilizó… sanitize_text_field() Y esc_attr() Se utilizan funciones de seguridad para prevenir ataques XSS.

Hacer que las funciones sean configurables.

Ahora, necesitamos modificar la función que genera el texto del pie de página para que lea los ajustes del usuario de la base de datos en lugar de mostrar texto codificado de forma fija.

Lecturas recomendadas Dominar el desarrollo de plugins de WordPress desde cero: una guía completa con tutoriales prácticos。

// 更新页脚文本函数，使其可配置
function mfp_add_footer_text() {
    // 从数据库获取保存的文本，如果没有则使用默认值
    $footer_text = get_option( ‘mfp_footer_text’, ‘感谢阅读！本页脚由“我的第一个功能插件”生成。’ );
    if ( !empty( $footer_text ) ) {
        echo ‘<p style="“text-align:" center; color: #666;”>’ . esc_html( $footer_text ) . ‘</p>’;
    }
}
add_action( ‘wp_footer’, ‘mfp_add_footer_text’ );

De esta manera, se ha completado un plugin que cuenta con funciones básicas de administración en el backend. Los usuarios pueden modificar el texto desde el backend, y dichas modificaciones se reflejarán en tiempo real en la página web del frontend.

Mejores prácticas de desarrollo de plugins y seguridad

Seguir las mejores prácticas no solo mejora la calidad del código, sino que también garantiza la seguridad y compatibilidad de los plugins.

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

Uso de prefijos y espacios de nombres

Todos los funciones, clases, variables y nombres de opciones que definas deben utilizar un prefijo único para evitar conflictos con el núcleo de WordPress, los temas u otros plugins. En este ejemplo, hemos utilizado… mfp_ “Mi primer plugin” (My First Plugin) puede utilizarse como prefijo para los plugins más simples. Para plugins más complejos, se podría considerar el uso de espacios de nombres (namespaces) en PHP.

Verificación, limpieza y escape de datos.

Este es el aspecto central de la seguridad de los plugins: toda entrada proveniente de los usuarios (incluidos los administradores) debe considerarse no fiable.
* 验证 (Validation): 检查数据是否符合预期格式（如是否为邮箱、数字）。
* 清理 (Sanitization): 在将数据存入数据库或用于其他操作前，移除其中的非法或危险字符。我们使用了 sanitize_text_field()。
* 转义 (Escaping): 在将数据从数据库输出到 HTML、JavaScript 或 URL 时，进行转义以防止 XSS 攻击。我们使用了 esc_html() Y esc_attr()。

Preparación para la internacionalización

Para que los plugins puedan ser traducidos por usuarios de todo el mundo, todas las cadenas de texto dirigidas al usuario deben ser envueltas en las funciones de internacionalización de WordPress. Modifiquemos la forma en que se muestran nuestros textos.

Echo ‘<p style="“text-align:" center; color: #666;”>’ . esc_html__( ‘感谢阅读！本页脚由“我的第一个功能插件”生成。’, ‘my-first-plugin’ ) . ‘</p>’;

Y asegúrate de que en las notas del encabezado del plugin se haya establecido lo correcto. Text DomainLuego, utiliza herramientas como Poedit para crear el archivo de plantilla (.pot).

Depuración, pruebas y preparación para el lanzamiento

Antes de implementar un plugin en un entorno de producción o de enviarlo al directorio oficial, realizar pruebas exhaustivas es de suma importancia.

Activar el modo de depuración.

En el archivo de configuración de WordPress wp-config.php Al activar el modo de depuración, podrás ver los errores, advertencias y notificaciones de PHP, lo cual es de gran ayuda para el desarrollo.

define( ‘WP_DEBUG’, true );
define( ‘WP_DEBUG_LOG’, true ); // 将错误记录到 wp-content/debug.log 文件
define( ‘WP_DEBUG_DISPLAY’, false ); // 不在页面上直接显示错误

Realizar pruebas de funcionalidad y compatibilidad.

• Pruebas de funcionalidad: Probar una por una todas las funciones del plugin: activar/desactivar, guardar configuraciones y verificar que la salida en la interfaz frontal sea correcta.
• Pruebas de compatibilidad: Realiza pruebas de tu plugin en diferentes versiones de WordPress (especialmente las más antiguas), versiones de PHP (7.4+ y 8.x), así como en temas populares y otros plugins comúnmente utilizados.
• Verificación de seguridad: se pueden usar herramientas automatizadas o una revisión manual del código para asegurarse de que no haya vulnerabilidades como inyección de SQL, XSS, CSRF, etc. El campo Nonce que agregamos anteriormente sirve para prevenir el CSRF.

Preparando la publicación del archivo.

Si se planea la publicación, se necesita una estructura de archivo estándar. Por lo general, esta incluye:
* 主插件文件 (如 my-first-plugin.php)
* readme.txtDebe ser escrito siguiendo el formato de WordPress.org, para su exhibición en la página del directorio de plugins.
* assets Carpeta: Utilizada para almacenar iconos, capturas de pantalla, etc.
* languages Carpeta: Alberga los archivos de traducción (.po/.mo).
* includes Carpeta: Alberga otros archivos de clases PHP.
* uninstall.phpDefinir las operaciones de limpieza que se realizan cuando un complemento es eliminado (por ejemplo, la eliminación de opciones de la base de datos).

resúmenes

A través de esta guía, ha completado todo el proceso para desarrollar un complemento funcional básico para WordPress: desde crear el archivo principal que contiene la información de cabecera estándar, hasta agregar funcionalidades utilizando ganchos de acción (action hooks), pasando por la creación de una página de configuración completa para el administrador y la garantía de su seguridad. Hemos destacado buenas prácticas como el uso de prefijos, el manejo seguro de datos y la internacionalización, y también hemos proporcionado una descripción breve de los pasos necesarios para la depuración y la preparación antes de la publicación.

Recuerde que la esencia del desarrollo de plugins radica en comprender y utilizar de manera inteligente el vasto sistema de ganchos (Hooks) y filtros (Filters) de WordPress. Partiendo de este pequeño plugin, puede continuar explorando cómo agregar códigos cortos (Shortcodes), widgets, tipos de artículos personalizados (Custom Post Types, CPT) o puntos de conexión (Endpoints) REST API, para crear plugins de nivel comercial que sean potentes, flexibles y cumplan con los estándares.

FAQ Preguntas más frecuentes

¿En qué directorio deben colocarse los complementos (plugins)?

Los plugins de WordPress deben colocarse en el directorio adecuado del servidor. Por lo general, este directorio se encuentra en `wp-content/plugins`. wp-content/plugins/ En el directorio correspondiente, cada plugin puede ser un archivo PHP independiente (esto es adecuado para plugins de tipo “minimalista”), pero lo más común es crear una carpeta con el nombre del plugin y colocar allí el archivo principal así como otros archivos de recursos.

¿Cómo eliminar los datos creados por un plugin?

Cuando un usuario hace clic en el botón “Eliminar” en el backend, por defecto solo se elimina el archivo del plugin. Sin embargo, las opciones del plugin que están almacenadas en la base de datos no se eliminan.wp_optionsLos datos contenidos en ese archivo se mantendrán. Para realizar una limpieza completa, es necesario crear un nuevo archivo o procedimiento que elimine todos los datos antiguos y no deseados. uninstall.php El archivo, y usarlo en su interior. delete_option() Se trata de una función diseñada para eliminar las opciones correspondientes. Este archivo solo se ejecutará cuando el usuario elimine el plugin a través de la función de eliminación de WordPress.

¿Cuál es la diferencia entre las acciones y los filtros en Hooks?

Ganchos de Acción (Action Hooks) – Uso add_action()Permite insertar y ejecutar un fragmento de código en un momento específico durante el funcionamiento de WordPress, sin que se espere que dicho código devuelva ningún valor. Por ejemplo, se podría utilizar para ejecutar una función en el encabezado de la página, en el pie de página o al publicar un artículo.

Ganchos de filtro (Filter Hooks) add_filter()Permite modificar los datos que se transmiten en el proceso. Recibe un valor y, después de procesarlo, debe devolver otro valor. Por ejemplo, modificar el título de un artículo, el contenido de un comentario o los resultados de una consulta.

¿Por qué mi plugin no se muestra en el backend?

Primero, por favor, asegúrese de que el archivo PHP principal de su plugin se encuentre en el directorio correcto y que las notas de cabecera del plugin (en particular…) Plugin Name:¿Es el formato correcto? En segundo lugar, verifica si el archivo contiene errores gramaticales. Puedes hacerlo… wp-config.php Activar en... WP_DEBUG Vamos a revisar la información posible sobre los errores.