Una guía práctica completa para el desarrollo de plugins para WordPress: construye tu primer plugin desde cero.

En el vasto mundo de Internet, WordPress ha conquistado una posición dominante entre los sistemas de gestión de contenidos gracias a su gran capacidad de expansión. La clave de esta capacidad de expansión son los plugins. A través del desarrollo de plugins para WordPress, puedes agregar a tu sitio web cualquier función que puedas imaginar. Este artículo te guiará paso a paso para crear tu primer plugin desde cero, ayudándote a comprender en profundidad su estructura central y su proceso de desarrollo.

Fundamentos de plugins para WordPress y configuración del entorno de desarrollo

Antes de comenzar a codificar, es esencial comprender la naturaleza de los plugins de WordPress y establecer un entorno de desarrollo adecuado. Un plugin es, en esencia, uno o más archivos PHP que siguen las especificaciones de WordPress y se integran de manera específica en el sistema de este framework.钩子(Hooks) Interact con los sistemas centrales.

Definición básica de un plugin

Cada plugin debe tener un archivo principal único, y en su parte inicial deben incluirse comentarios en un formato específico que contengan la información sobre el plugin. Estos comentarios son la base para que WordPress identifique y muestre en la página de administración de plugins el nombre del plugin, su descripción, la versión y otros metadatos.

Lecturas recomendadas Desvelando el desarrollo de complementos: construye tu primera extensión desde cero.。

Configuración del entorno de desarrollo local

Para desarrollar de manera eficiente y segura, se recomienda encarecidamente utilizar un entorno de servidor local. Puedes elegir herramientas como XAMPP, MAMP, Local by Flywheel o Docker. Los requisitos básicos son instalar PHP (en una versión compatible con tu servidor objetivo), MySQL/MariaDB y Apache/Nginx. A continuación, descarga los archivos más recientes del núcleo de WordPress y completa su instalación.

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

Crea tu primer plugin: una herramienta para saludos.

Ahora, vamos a crear un plugin sencillo. La función de este plugin es agregar automáticamente un saludo personalizado al final del contenido de los artículos en el sitio web.

Primero, en WordPress… wp-content/plugins En el directorio, cree una nueva carpeta y nómbrela… my-first-greeting-pluginLuego, dentro de esa carpeta, cree el archivo PHP principal; puede nombrarlo como «main.php». my-first-greeting-plugin.php。

Declaración de información de la cabecera del plugin

Abra el archivo principal e ingrese el siguiente código para definir el plugin:

<?php
/**
 * Plugin Name:       我的第一个问候语插件
 * Plugin URI:        https://yourwebsite.com/my-first-greeting-plugin
 * Description:       这是一个练习用的插件，用于在文章末尾添加问候语。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://yourwebsite.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-greeting-plugin
 */

Después de guardar el archivo, accede 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. Por supuesto, en este momento no tiene ninguna función disponible.

Lecturas recomendadas 10 consejos clave y guía práctica para optimizar el rendimiento de sitios web de comercio electrónico con WooCommerce。

Usar ganchos para agregar funciones esenciales.

El funcionamiento de WordPress depende en gran medida del mecanismo de “ganchos” (hooks), que se dividen en…动作钩子(Acción Hooks) y过滤器钩子(Filtro de Ganchos). Queremos agregar texto después del contenido del artículo, y para ello necesitamos utilizar… the_content Este gancho de filtro.

Debajo de los comentarios en la parte superior del archivo principal, añada las siguientes funciones y ganchos:

// 定义向文章内容添加问候语的函数
function mfgp_add_greeting_to_content( $content ) {
    // 确保只在主循环的单篇文章页面显示
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $greeting = '<p style="color:#666; font-style:italic;">¡Gracias por leer este artículo! ¡Te deseo un hermoso día!</p>';
        $content .= $greeting;
    }
    return $content;
}
// 将函数挂载到 ‘the_content’ 过滤器钩子上
add_filter( 'the_content', 'mfgp_add_greeting_to_content' );

Después de guardar el archivo y activar el plugin, abre cualquier artículo en el sitio web, desplázate hasta el final y deberías ver el saludo que has añadido. Con este ejemplo sencillo, has puesto en práctica los conceptos más fundamentales del desarrollo de plugins: declarar el plugin, escribir las funciones de su funcionalidad, y…add_filteroadd_actionMonta la función en el gancho correcto.

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

Mejoras en las funciones del plugin: se ha añadido una página de configuración y administración.

Un complemento (plugin) maduro suele permitir que los usuarios realicen configuraciones en el backend. A continuación, agregaremos una página de configuración sencilla para el complemento de saludos, para que los administradores puedan personalizar el texto que se muestra.

Crear una entrada de menú de administración.

En primer lugar, necesitamos utilizar…add_actionEl gancho (hook) llama a una función, y esta función a su vez utiliza… add_options_page La función añade una página secundaria en el menú de “Ajustes” del backend de WordPress.

Siga agregando el siguiente código en el archivo principal:

Lecturas recomendadas De cero a uno: guía completa para el desarrollo de complementos de WordPress y tutorial práctico.。

// 添加设置菜单
function mfgp_add_admin_menu() {
    add_options_page(
        '问候语插件设置',          // 页面标题
        '自定义问候语',           // 菜单标题
        'manage_options',         // 权限要求（管理员）
        'my-greeting-plugin',     // 菜单 Slug
        'mfgp_settings_page_html' // 用于输出页面内容的回调函数
    );
}
add_action( 'admin_menu', 'mfgp_add_admin_menu' );

Construir la página de configuración y la lógica de salvado.

Ahora, necesitamos definir la función de devolución de llamada anterior. mfgp_settings_page_html Se trata de renderizar el formulario HTML de la página de configuraciones y de manejar el proceso de almacenamiento de los datos ingresados en dicho formulario. WordPress proporciona una API de configuración para simplificar este proceso, pero, a fin de comprenderlo más claramente, utilizaremos primero los métodos básicos.

// 定义设置页面的 HTML 结构
function mfgp_settings_page_html() {
    // 检查用户权限
    if ( !current_user_can( 'manage_options' ) ) {
        return;
    }

// 处理表单提交（非设置API方式）
    if ( isset( $_POST['mfgp_greeting_text'] ) ) {
        // 验证 Nonce 确保请求来源安全
        check_admin_referer( 'mfgp_save_settings' );
        // 清理并保存输入的数据
        $greeting_text = sanitize_textarea_field( $_POST['mfgp_greeting_text'] );
        update_option( 'mfgp_custom_greeting', $greeting_text );
        echo '<div class="notice notice-success is-dismissible"><p>¡Los ajustes se han guardado!</p></div>';
    }

// 获取已保存的问候语
    $saved_greeting = get_option( 'mfgp_custom_greeting', '感谢您阅读本文！祝你拥有美好的一天！' );
    ?&gt;
    <div class="wrap">
        <h1>¿¿¿¿php echo esc_html( get_admin_page_title() ); ?&gt;</h1>
        <form method="post" action="">
            <?php wp_nonce_field( 'mfgp_save_settings' ); ?>
            <table class="form-table">
                <tr>
                    <th scope="row"><label for="mfgp_greeting_text">Saludo personalizado</label></th>
                    <td>
                        <textarea name="mfgp_greeting_text" id="mfgp_greeting_text" rows="5" cols="50" class="large-text"><?php echo esc_textarea( $saved_greeting ); ?></textarea>
                        <p class="description">Este texto se mostrará al final de cada artículo.</p>
                    </td>
                </tr>
            </table>
            ¿
        <input type="hidden" name="trp-form-language" value="es"/></form>
    </div>
    ¿php?  
}

Actualizar la función de salida de la interfaz frontal.

Finalmente, necesitamos modificar la función de salida de la interfaz gráfica anterior para que obtenga los datos de las opciones almacenadas en la base de datos.get_optionLee los saludos de los datos almacenados en el archivo, en lugar de utilizar texto codificado de forma fija.

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 mfgp_add_greeting_to_content( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        // 从数据库选项中获取问候语，如果没有则使用默认值
        $greeting_text = get_option( 'mfgp_custom_greeting', '感谢您阅读本文！祝你拥有美好的一天！' );
        if ( ! empty( $greeting_text ) ) {
            $greeting = '<p style="color:#666; font-style:italic;">'`. esc_html($greeting_text)`.'</p>';
            $content .= $greeting;
        }
    }
    return $content;
}

Ahora, los administradores pueden modificar libremente el texto que se muestra en la página “Ajustes” -> “Saludos personalizados”, y la presentación en la interfaz de usuario se actualiza de inmediato.

Preparación para el lanzamiento del plugin: Internacionalización y fortalecimiento de la seguridad

Antes de compartir los plugins con otros o enviarlos al directorio oficial, es necesario realizar algunas tareas de finalización importantes, principalmente en relación con la internacionalización y el fortalecimiento de la seguridad.

Implementar la internacionalización del texto

La internacionalización (i18n) permite que tus plugins sean traducidos a otros idiomas. Es necesario que envuelvas todas las cadenas de texto dirigidas al usuario utilizando funciones específicas. Modifica los textos dentro de nuestro plugin:

1. 在插件头部注释中，我们已经定义了 Text Domain。
2. 在代码中，使用 () o esc_html() La función envuelve una cadena de texto. Por ejemplo:

    // 在设置页面函数中
    $greeting_text = get_option( 'mfgp_custom_greeting', __( ‘感谢您阅读本文！祝你拥有美好的一天！’， ‘my-first-greeting-plugin’ ) );
    echo ‘<h1>’ . esc_html__( ‘问候语插件设置’， ‘my-first-greeting-plugin’ ) . ‘</h1>’// En la función de salida del front-end (nota: la salida del front-end generalmente no requiere traducción, a menos que sea una temática o una decisión del usuario).  
// Pero si el saludo en sí necesita estar en varios idiomas, puede requerir una lógica más compleja.

3. 使用工具如 Poedit 创建 .pot Los archivos de plantilla, a partir de los cuales los traductores pueden crear. .po Y .mo Documentos.

Fortalecer la protección de seguridad

La seguridad es de vital importancia. Hemos utilizado algunas funciones de seguridad, como…sanitize_textarea_field、esc_html、esc_textareaYwp_nonce_fieldAdemás, también es necesario prestar atención a lo siguiente:
* 权限检查：在管理页面函数开始处使用 current_user_can Realiza una inspección.
* 数据验证与清理：对所有用户输入（如 $_POST, $_GET）进行验证（是否符合预期格式）和清理（移除非法字符）。
* 非竞态条件更新：对于重要的选项，考虑使用 wp_options Al crear tablas, una forma más segura es utilizar la API de Configuraciones (Settings API), la cual incorpora mecanismos para evitar concurrencia (como los valores “nonce”) y comprobaciones de permisos.

resúmenes

A través de esta guía, hemos completado el proceso completo de desarrollo de un plugin para WordPress, desde su creación hasta su publicación. Comenzamos entendiendo los conceptos básicos de los plugins, creando el archivo principal que incluye la información de cabecera estándar; luego, practicamos el mecanismo de ganchos (hooks) esencial de WordPress mediante una función sencilla de saludo; a continuación, agregamos una página de configuración en el backend para permitir que los usuarios personalizaran el plugin; finalmente, analizamos los pasos clave antes de la publicación: la internacionalización y el fortalecimiento de la seguridad. Cada paso incluyó el uso de funciones fundamentales de WordPress y las mejores prácticas. Al dominar estos conocimientos básicos, podrás intentar desarrollar plugins más complejos e innovadores y contribuir al ecosistema de WordPress a nivel mundial.

FAQ Preguntas más frecuentes

¿Qué conocimientos previos se necesitan para desarrollar un plugin de WordPress?

Es necesario contar con conocimientos básicos de programación en PHP, entender HTML y CSS, así como tener cierta familiaridad con las operaciones básicas de WordPress (como la creación de artículos, páginas y menús). No es obligatorio estar familiarizado con la programación orientada a objetos (OOP), pero esto sería de gran ayuda para desarrollar plugins de mayor envergadura.

¿Por qué mi plugin no se muestra en el menú de fondo después de ser activado?

La causa más común son los problemas de permisos. Por favor, verifica los permisos que tienes al realizar la llamada.add_options_pageCuando se utiliza una función similar, ¿se ha configurado correctamente el segundo parámetro (capability)? ‘manage_options’Además, asegúrate de que tu función haya sido implementada correctamente.add_action( ‘admin_menu’， ...)El gancho se ha montado correctamente, y no hay errores gramaticales que impidan la ejecución de la función. Puedes agregarlo al inicio del código.error_logSe utiliza una función para realizar el depurado (debugging).

¿Cómo depuro mi plugin para WordPress?

Primero, asegúrate de que en tu… wp-config.php El modo de depuración de WordPress está activado en el archivo: define( ‘WP_DEBUG’， true ); Y define( ‘WP_DEBUG_LOG’， true );De esta manera, los mensajes de error se registrarán. /wp-content/debug.log En el archivo. En segundo lugar, se pueden utilizar las opciones “Consola” y “Red” de las herramientas de desarrollo del navegador para realizar el depurado del código front-end. Para lógicas más complejas, se recomienda…error_log( print_r( $variable， true ) );Exportar los valores de las variables al registro es un método comúnmente utilizado.

¿Cómo puedo asegurarme de que mi plugin sea compatible con otros plugins o temas?

Para garantizar la compatibilidad al máximo, tu plugin debería: 1) utilizar prefijos únicos para nombrar todas las funciones, clases, variables y opciones (tal como lo hemos hecho nosotros).mfgp_Evite los conflictos de nombres. 2) Cuando agregue o modifique el estilo del front-end o del back-end, intente utilizar nombres de clase de selectores únicos. 3) Cuando sea posible, proporcione ganchos de filtro.apply_filtersPermite que otros desarrolladores modifiquen el comportamiento de tu plugin. 4) Evita modificar directamente las tablas o archivos del banco de datos central de WordPress.