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

Fundamentos del desarrollo de plugins de WordPress y preparación del entorno

Antes de empezar a escribir código, es fundamental comprender los conceptos básicos de los plugins de WordPress y tener preparado el entorno de desarrollo. Un plugin de WordPress es, en esencia, un conjunto de uno o varios archivos PHP que amplían o modifican la funcionalidad principal mediante el sistema de ganchos (Hooks) que proporciona WordPress. Un plugin puede ser tan sencillo como añadir un único shortcode, o tan complejo como construir un sistema completo de comercio electrónico.

El núcleo del entorno de desarrollo es establecer un entorno de servidor local. Puedes usar herramientas como XAMPP, MAMP, Local by Flywheel o Docker para configurar rápidamente un sitio local de WordPress que incluya PHP, MySQL y Apache/Nginx. Asegúrate de que tu versión de PHP coincida con la versión actualmente recomendada oficialmente por WordPress. En cuanto a los editores de código, Visual Studio Code, PhpStorm o Sublime Text son excelentes opciones; pueden ofrecer resaltado de sintaxis, sugerencias de código y soporte de depuración, lo que mejora significativamente la eficiencia del desarrollo.

Un plugin estándar de WordPress debe contener al menos un archivo PHP principal, y la cabecera de ese archivo debe incluir comentarios con información específica del plugin. Estos comentarios son la clave para que WordPress reconozca el plugin. Además, aunque no es obligatorio, crear un directorio independiente para tu plugin es una práctica excelente, ya que ayuda a gestionar los archivos de recursos, los paquetes de idioma y otras dependencias.

Lecturas recomendadas Desarrollo de plugins de WordPress de principio a fin: una guía completa para crear un sitio web personalizado。

Crea tu primer archivo de plugin.

Ahora, pongámonos manos a la obra para crear el archivo principal de tu primer plugin. Primero, debes entrar en el directorio de instalación de WordPress./wp-content/plugins/carpeta. Aquí, crea una nueva carpeta para tu plugin, por ejemplo, asígnale el nombre demy-first-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

Dentro de esa carpeta, crea un archivo PHP principal. Normalmente, este archivo principal tendrá el mismo nombre que la carpeta del plugin, por ejemplomy-first-plugin.phpEl principio de este archivo debe contener la información estándar de la cabecera del plugin.

<?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
 */

Este bloque de comentarios proporciona toda la metainformación necesaria para la administración del plugin de WordPress. Después de guardar el archivo, podrás ver y activar este plugin en la página de “Plugins” del panel de administración de WordPress. Por ahora todavía no tiene ninguna funcionalidad, pero la estructura ya está establecida.

Añadir una función sencilla al plugin.

Después de activar el plugin, le añadiremos su primera funcionalidad real: mostrar una línea de texto personalizado en el pie de página del sitio web. Usaremos WordPress para ello.wp_footerGancho.

En el archivo principal del pluginmy-first-plugin.phpDebajo del comentario de cabecera, añada el siguiente código:

Lecturas recomendadas Dominar el desarrollo de plugins para WordPress desde cero: Creación de funciones personalizadas y extensiones。

// 在网站页脚输出自定义文本
function mfp_add_footer_text() {
    echo '<p style="text-align: center; color: #666;">¡Gracias por usar este sitio web! Funciona con “Mi primer complemento”.</p>';
}
add_action( 'wp_footer', 'mfp_add_footer_text' );

Aquí,mfp_add_footer_textEs nuestra función personalizada, que contiene el contenido HTML que se va a mostrar.add_action()Es la función principal para añadir hooks de acción, y “engancha” nuestra función al núcleo de WordPresswp_footerEn este punto de ejecución. Guarda el archivo y actualiza la parte pública del sitio web; entonces podrás ver esta línea de texto en la parte inferior de la página.

Ampliar la edición de contenido con shortcodes

El shortcode es una potente función que ofrece WordPress y que permite a los usuarios insertar contenido dinámico en entradas o páginas mediante etiquetas sencillas. A continuación, vamos a crear un shortcode simple para mostrar la fecha actual.

En el mismo archivo principal, sigue añadiendo el siguiente código:

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 mfp_show_current_date( $atts ) {
    // 定义短码的默认属性
    $attributes = shortcode_atts(
        array(
            'format' => 'Y年m月d日',
        ),
        $atts
    );

// 根据属性中的格式返回日期
    return date( $attributes['format'] );
}
add_shortcode( 'show_date', 'mfp_show_current_date' );

funciónmfp_show_current_dateSe definió la lógica del código corto.shortcode_atts()La función se utiliza para combinar las propiedades definidas por el usuario con las propiedades predeterminadas, con el objetivo de garantizar la robustez del código. Finalmente,add_shortcode()La función se encargará de…[show_date]Esta etiqueta se asocia con nuestra función de procesamiento personalizada.

Ahora, puedes ingresar texto en cualquier artículo, página o editor de texto de herramientas auxiliares.[show_date]Para mostrar la fecha en el formato predeterminado, o para utilizar otro formato a conveniencia…[show_date format="F j, Y"]Para mostrar la fecha en formato inglés.

Comprender a fondo los ganchos y filtros

La filosofía central del desarrollo de plugins de WordPress son los “hooks” (ganchos). Los hooks se dividen en dos tipos: acciones (Action) y filtros (Filter). Los que usamos anteriormenteadd_action()Solo hay que añadir un gancho de acción.

Lecturas recomendadas Desde cero: Crea tu primer plugin para WordPress。

Los ganchos de acción ejecutan tu código en momentos concretos y no esperan un valor de retorno; normalmente se utilizan para mostrar contenido o realizar alguna tarea, como añadir texto al pie de página. Los ganchos de filtro, en cambio, se utilizan para modificar datos. Reciben un valor y, después de que tu función lo procese, deben devolver un valor modificado.

Modificar el título del artículo con filtros

Vamos a crear un filtro para añadir automáticamente un prefijo a todos los títulos de los artículos. Añade lo siguiente en el archivo principal del plugin:

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 mfp_add_title_prefix( $title, $id = null ) {
    // 确保只在主循环且是文章页面的标题上生效
    if ( in_the_loop() && is_single() && get_post_type( $id ) === 'post' ) {
        $title = '【推荐阅读】' . $title;
    }
    return $title;
}
add_filter( 'the_title', 'mfp_add_title_prefix', 10, 2 );

Aquí,the_titleEs un gancho de filtro.add_filter()El tercer parámetro, “10”, es la prioridad (cuanto menor sea el número, antes se ejecuta), y el cuarto parámetro, “2”, indica que nuestra función de procesamiento acepta dos parámetros (el original$titley el ID del artículo). Esta función comprobará las condiciones y solo añadirá un prefijo al título cuando se trate de la página de una única entrada y esté dentro del bucle principal.

Seguridad de los complementos y mejores prácticas.

Al desarrollar complementos, la seguridad es la principal consideración. Nunca confíes en los datos introducidos por el usuario; deben validarse, sanearse y escaparse.

Validación de datos y escape

Cuando el plugin necesite procesar datos procedentes de formularios o de la URL, debe utilizar las funciones de seguridad proporcionadas por WordPress. Por ejemplo, usarsanitize_text_field()Para borrar el texto, usaesc_html()oesc_attr()para mostrar HTML o atributos, con el fin de prevenir ataques de scripts entre sitios (XSS).

Crear una página de configuración sencilla

Un plugin completo suele necesitar una página de ajustes en el panel de administración. Aquí se muestra cómo crear una página de opciones sencilla y guardar de forma segura un ajuste.

// 在后台管理菜单中添加一个选项页面
function mfp_add_admin_menu() {
    add_options_page(
        '我的第一个插件设置', // 页面标题
        '我的插件设置',       // 菜单标题
        'manage_options',     // 权限要求
        'my-first-plugin',    // 菜单slug
        'mfp_options_page_html' // 用于显示页面内容的回调函数
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

// 注册一个设置项
function mfp_settings_init() {
    register_setting( 'mfpPlugin', 'mfp_settings' ); // 设置组，选项名

add_settings_section(
        'mfp_plugin_section', // 区块ID
        '基础设置',           // 区块标题
        null,                 // 区块介绍的回调函数（此处为null）
        'my-first-plugin'     // 所属页面slug
    );

add_settings_field(
        'custom_text',        // 字段ID
        '自定义显示文本',     // 字段标签
        'mfp_custom_text_field_html', // 用于输出字段HTML的回调函数
        'my-first-plugin',    // 页面slug
        'mfp_plugin_section'  // 所属区块ID
    );
}
add_action( 'admin_init', 'mfp_settings_init' );

// 渲染设置字段的HTML
function mfp_custom_text_field_html() {
    $options = get_option( 'mfp_settings' );
    $value = isset( $options['custom_text'] ) ? esc_attr( $options['custom_text'] ) : '';
    ?>
    <input type='text' name='mfp_settings[custom_text]' value='<?php echo $value; ?>'>
    <p class="description">El texto introducido aquí se mostrará en el pie de página.</p>
    <?php
}

// 渲染整个选项页面的HTML
function mfp_options_page_html() {
    // 检查用户权限
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <div class="wrap">
        <h1>¿¿¿¿php echo esc_html( get_admin_page_title() ); ?&gt;</h1>
        <form action="/es/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            settings_fields( 'mfpPlugin' ); // 输出安全字段
            do_settings_sections( 'my-first-plugin' ); // 输出设置区块和字段
            submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="es"/></form>
    </div>
    ¿php?  
}

Este fragmento de código crea una subpágina situada en el menú “Configuración” para guardar un texto personalizado. Presta atención a la comprobación de los permisos del usuario que contiene.current_user_cany el escape de los datos de salidaesc_html, esc_attr), todo esto forma parte de las prácticas de seguridad. Después, puedes modificar la función que generaba el pie de página anteriormente, paraget_option( 'mfp_settings' )Se lee este valor para mostrarlo dinámicamente.

resúmenes

A través de este tutorial, has completado todo el proceso de crear desde cero un plugin de WordPress completamente funcional. Has aprendido a crear la estructura básica de archivos del plugin y a utilizar los ganchos de acciónadd_actionAñade contenido al pie de página a través deadd_shortcodeCrear códigos cortos personalizados, así como utilizar ganchos de filtros.add_filterModificar los datos del artículo. Más importante aún, has entrado en contacto con los conceptos fundamentales de la seguridad de los plugins y has practicado cómo crear una página de ajustes segura en el panel de administración para gestionar las opciones del plugin.

El desarrollo de plugins es un proceso de aprendizaje y práctica continuos. A continuación, puedes intentar añadir compatibilidad de internacionalización al plugin (usando__()Y_e()funciones), introducir recursos de JavaScript y CSS, o utilizar la programación orientada a objetos (POO) para refactorizar la estructura del código, haciéndola más fácil de mantener y ampliar. Recuerda que leer el manual oficial de plugins de WordPress y el código fuente del núcleo es la mejor manera de mejorar tus habilidades.

FAQ Preguntas más frecuentes

¿Cómo depuro mi plugin para WordPress?

Activar el modo de depuración de WordPress es el primer paso. En el sitio webwp-config.phpEn el documento, se indicará que...WP_DEBUGLos constantes se establecen entrueEsto mostrará directamente en la página los errores, advertencias y avisos de PHP. Para una depuración más compleja, se puede utilizarerror_log()La función escribe información en el registro de errores del servidor, o utiliza un complemento de depuración profesional como Query Monitor para ver las consultas de la base de datos, la ejecución de hooks y los datos de rendimiento.

¿Cómo puede mi plugin ser compatible con diferentes versiones de WordPress?

En el código del plugin, deberías usar comprobaciones condicionales para verificar la existencia de funciones, clases o constantes del núcleo de WordPress antes de usarlas. Puedes usarfunction_exists()、class_exists()odefined()realizar una evaluación. Al mismo tiempo, en el complemento dereadme.txtEn el archivo se indica claramente la versión mínima de WordPress que admite tu plugin (a través de…).Requires at leastcampo), lo que puede ayudar a los usuarios a comprender la compatibilidad.

¿Es necesario utilizar la programación orientada a objetos para desarrollar plugins?

No es obligatorio. Puedes utilizar programación puramente procedimental (como en los ejemplos de este tutorial) para desarrollar plugins completamente funcionales. La principal ventaja de la programación orientada a objetos (POO) radica en una mejor organización del código, encapsulación y reutilización, lo que resulta más beneficioso para proyectos de plugins grandes y complejos. Para plugins pequeños, la programación procedimental puede ser más simple y directa. Puedes elegir el método adecuado según la escala y la complejidad del proyecto.

¿Cómo publico mi plugin en el directorio oficial de plugins de WordPress?

En primer lugar, necesitas registrar una cuenta en WordPress.org y enviar el plugin. El código de tu plugin debe cumplir con los estándares y directrices oficiales de código, incluida la seguridad, la ausencia de código malicioso y el uso de una licencia compatible con GPL, entre otros. Necesitas crear una detalladareadme.txtel archivo y asegúrate de que el comentario de encabezado del archivo principal del plugin cumpla con las normas. Tras el envío, un voluntario del equipo de revisión de plugins lo revisará y, una vez aprobado, podrá publicarse.