Desarrollo de plugins para WordPress de manera sencilla y comprensible: Crea tu primer plugin personalizado desde cero

Fundamentos de plugins para WordPress y entorno de desarrollo

Antes de comenzar a escribir código, es esencial comprender los conceptos básicos de los plugins de WordPress y establecer un entorno de desarrollo adecuado. Un plugin de WordPress es, en esencia, una carpeta que contiene código PHP que extiende las funciones principales del sistema a través de la API amplia que ofrece WordPress. Los plugins pueden ser tan simples como agregar un pequeño fragmento de código, o tan complejos como construir un sistema de gestión completo. El principio fundamental es “no modificar el código principal de WordPress”, lo que garantiza que tus funciones personalizadas no se perderán cuando se actualice el software.

Para un desarrollo eficiente, necesitas un entorno de desarrollo local. Puedes utilizar herramientas como XAMPP, MAMP, Local by Flywheel o Docker para configurar rápidamente un servidor que incluya PHP y MySQL. A continuación, instala la versión más reciente de WordPress. Durante el proceso de desarrollo, se recomienda que…wp-config.phpEl archivo está habilitado.WP_DEBUGPara poder detectar los errores de manera oportuna.

El “corazón” de un plugin es un archivo PHP principal. Las notas de encabezado de este archivo son su “identificación”; WordPress utiliza estas metadatos para reconocer y administrar el plugin en segundo plano. Las notas de encabezado de un archivo principal de plugin estándar se muestran a continuación:

Lecturas recomendadas ¿Qué son los temas de WordPress?。

<?php
/**
 * Plugin Name: 我的第一个自定义插件
 * Plugin URI:  https://example.com/my-first-plugin
 * Description: 这是一个用于学习插件开发的简单插件，它将在文章末尾添加自定义内容。
 * Version:     1.0.0
 * Author:      开发者名称
 * License:     GPL v2 or later
 * Text Domain: my-first-plugin
 */

Crea tu primer plugin de funcionalidad.

Comencemos con una función práctica: agregar automáticamente un texto personalizado al final de cada artículo en el sitio web. Este ejemplo ilustrará el proceso central del desarrollo de plugins.

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

El archivo principal del plugin y su proceso de inicialización

Primero, en WordPress…wp-content/pluginsCrea una nueva carpeta en el directorio, por ejemplo,my-first-pluginDentro de esa carpeta, cree el archivo principal de PHP; puede llamarse «main.php».my-first-plugin.phpCopie el código de las notas de encabezado anterior y colócalo en el lugar correspondiente.

A continuación, necesitamos un método seguro para ejecutar el código de inicialización del plugin. La mejor práctica es encapsular todas las funciones en una clase o utilizar funciones dentro de un espacio de nombres. Aquí utilizaremos una clase sencilla para organizar el código. Después de las notas de cabecera en el archivo principal, añada la siguiente definición de clase:

if ( ! defined( 'ABSPATH' ) ) {
	exit; // 防止直接访问文件
}

class My_First_Plugin {
    public function __construct() {
        // 构造函数，在这里挂载钩子
    }
}

// 初始化插件
new My_First_Plugin();

if ( ! defined( ‘ABSPATH’ ) )Este código cumple con los estándares de seguridad para el desarrollo de plugins para WordPress, y su función es evitar que los usuarios accedan directamente a los archivos de tu plugin a través de una URL.

Usar ganchos para agregar contenido al pie de página de los artículos.

La arquitectura de plugins de WordPress se basa en un sistema de “ganchos” (Hooks), que se dividen en Acciones (Actions) y Filtros (Filters). Las Acciones te permiten ejecutar código en momentos específicos, mientras que los Filtros te permiten modificar datos.

Lecturas recomendadas Guía definitiva para la optimización del rendimiento de sitios web WordPress: desde la configuración básica hasta un análisis completo de los plugins de caché。

Nuestro objetivo es agregar texto después del contenido del artículo; se trata de un proceso de “filtrado” del contenido. Por lo tanto, utilizaremos…the_contentEste filtro. Modifica el constructor y los métodos en la clase de la siguiente manera:

class My_First_Plugin {
    public function __construct() {
        // 将自定义方法挂载到‘the_content’过滤器上
        add_filter( 'the_content', array( $this, 'add_footer_to_content' ) );
    }

/**
     * 在文章内容后添加自定义页脚
     *
     * @param string $content 原始文章内容。
     * @return string 修改后的文章内容。
     */
    public function add_footer_to_content( $content ) {
        // 确保只在主循环的单篇文章页面显示
        if ( is_single() && in_the_loop() && is_main_query() ) {
            $custom_footer = '<div class="my-plugin-footer"><p>¡Gracias por leer este artículo! Fue generado por [Mi primer plugin].</p></div>';
            $content .= $custom_footer;
        }
        return $content;
    }
}

add_filter()La función ejecuta el método de la clase.add_footer_to_contentRegistrarse enthe_contentFiltros: Cuando WordPress se prepara para mostrar el contenido de los artículos, llama a nuestro método y le transmite el texto original. Mediante la evaluación de condiciones, aseguramos que el pie de página se añada únicamente en la página del artículo correspondiente, evitando su repetida aparición en la página principal o en las páginas de archivo. Finalmente, agregamos el HTML personalizado al contenido y lo devolvemos.

Agregar opciones para la administración del complemento desde la interfaz posterior.

Un complemento (plugin) maduro suele permitir que los usuarios realicen configuraciones en el backend. Vamos a agregar una opción de configuración sencilla para el texto del pie de página que acabamos de crear, para que los usuarios puedan personalizar el texto que se muestra.

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

Crear la página del menú de configuraciones

Necesitamos agregar una página secundaria en el menú “Ajustes” del panel de administración de WordPress. Para ello, debemos utilizar…add_options_page()La función, por lo general, se monta (se integra) en…admin_menuEn el gancho de acción.

En primer lugar, se debe agregar un nuevo método en la clase del plugin para registrar los menús y las páginas:

class My_First_Plugin {
    // ... 之前的构造函数和方法 ...

public function __construct() {
        add_filter( 'the_content', array( $this, 'add_footer_to_content' ) );
        // 挂载后台管理菜单
        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
        // 挂载初始化设置选项
        add_action( 'admin_init', array( $this, 'settings_init' ) );
    }

public function add_admin_menu() {
        add_options_page(
            '我的第一个插件设置', // 页面标题
            '自定义页脚设置',     // 菜单标题
            'manage_options',     // 所需权限
            'my-first-plugin',    // 菜单slug
            array( $this, 'options_page_html' ) // 回调函数，用于输出页面HTML
        );
    }
}

Campos de configuración de registro y página de renderizado

A continuación, necesitaremos utilizar la API de Configuraciones de WordPress (WordPress Settings API) para registrar, guardar y verificar las opciones de manera segura. Esto implica…register_setting(), add_settings_section()Yadd_settings_field()y otras funciones.

Lecturas recomendadas ¿Qué es WooCommerce? Un artículo que explica en detalle sus funciones principales y escenarios de aplicación.。

public function settings_init() {
    // 注册一个设置选项组
    register_setting( 'my_first_plugin_settings', 'my_first_plugin_options' );

// 在页面中添加一个设置区域
    add_settings_section(
        'my_first_plugin_section',
        '页脚内容配置',
        array( $this, 'section_callback' ),
        'my-first-plugin'
    );

// 向该区域添加一个字段
    add_settings_field(
        'footer_text',
        '页脚显示文本',
        array( $this, 'footer_text_field_render' ),
        'my-first-plugin',
        'my_first_plugin_section'
    );
}

public function section_callback() {
    echo '<p>Aquí se configura el texto que se mostrará al final del artículo.</p>';
}

public function footer_text_field_render() {
    $options = get_option( 'my_first_plugin_options' );
    $value = $options['footer_text'] ?? '感谢阅读本文！由【我的第一个插件】生成。'; // 默认值
    ?&gt;
    <input type='text' name='my_first_plugin_options[footer_text]' value='<?php echo esc_attr( $value ); ?>' style='width: 400px;'>
    <p class="description">Se soportan etiquetas HTML sencillas, como… <strong>, <em>, <a>。</p>
    <?php
}

public function 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( 'my_first_plugin_settings' );
            do_settings_sections( 'my-first-plugin' );
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="es"/></form>
    </div>
    ¿php?  
}

Finalmente, modifique la función de salida en el lado del frontend.add_footer_to_contentPara que lea el texto de las opciones de la base de datos:

public function add_footer_to_content( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $options = get_option( 'my_first_plugin_options' );
        $footer_text = $options['footer_text'] ?? '感谢阅读本文！由【我的第一个插件】生成。';
        $custom_footer = '<div class="my-plugin-footer"><p>'`. wp_kses_post($footer_text)`.'</p></div>';
        $content .= $custom_footer;
    }
    return $content;
}

wp_kses_post()La función asegura que el texto introducido por el usuario solo contenga etiquetas HTML seguras, lo cual constituye una medida de seguridad importante.

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

Internacionalización de plugins y mejores prácticas

Para que los plugins sean utilizables por usuarios de todo el mundo, la internacionalización (i18n) es un paso esencial. WordPress utiliza el framework GNU gettext para realizar las traducciones.

Campo de texto y función de traducción

Primero, asegúrate de que en las notas de la cabecera de tu plugin estén definidos todos los elementos necesarios.Text DomainPor ejemplomy-first-pluginLuego, en todos los lugares del plugin donde haya cadenas de texto que necesiten ser traducidas, se deben utilizar funciones específicas para envolver esas cadenas.

Modifiquemos el código que teníamos antes para agregar soporte a la traducción del texto que se muestra.

// Cargar el archivo de traducción en el constructor
public function __construct() {
    // ... otros ganchos ...
    add_action( 'plugins_loaded', array( $this, 'load_textdomain' ) );
}

public function load_textdomain() {
    load_plugin_textdomain(
        'my-first-plugin',
        false,
        dirname( plugin_basename( __FILE__ ) ) . '/languages/'
    );
}

// Modificar las cadenas de la página de configuración
public function section_callback() {
    echo ' '<p>'\n' . esc_html__( 'Aquí puede configurar el contenido del texto que se mostrará al final del artículo.', 'my-first-plugin' ) . '</p>'¿Podrías ayudarme a traducir esto al español? 

   
    }
}

?&gt;
    <input type='text' name='my_first_plugin_options[footer_text]' value='<?php echo esc_attr( $value ); ?>' style='width: 400px;'>
    <p class="description"><p><strong>Se admiten etiquetas HTML simples, como <strong>, <em>, <a>.</strong></p>  
&lt;?php esc_html_e( &#039;Se admiten etiquetas HTML simples, como <strong>, <em>, <a>.', 'my-first-plugin' ); ?&gt;</p>
    ¿php?
}

// Nota: el “texto del pie de página” que el usuario introduce en la interfaz gráfica normalmente no necesita traducción, ya que se trata de un contenido específico establecido por el administrador.

__()Se utiliza para traducir y devolver cadenas de texto.esc_html__()Se utiliza para traducir y escapar el contenido de salida en HTML._e()Se utiliza para traducir y mostrar directamente una cadena de texto. El segundo parámetro de la función es el campo de texto, el cual debe coincidir con el definido por el plugin.

Seguridad, rendimiento y organización del código

Además de la internacionalización, también es necesario seguir las siguientes buenas prácticas:
1. Seguridad: Se valida, limpia y escape todo el texto introducido por los usuarios. Se utiliza…sanitize_text_field(), esc_html(), wp_kses_post()y otras funciones. Utilice lawp_nonce_field()Prevenir ataques CSRF (Cross-Site Request Forgery).
2. Rendimiento: Utilice los “ganchos” (hooks) de manera adecuada para evitar realizar consultas a la base de datos que no sean necesarias en cada carga de página. También podría considerar la posibilidad de cachear temporalmente los resultados generados.
3. Organización del código: Para plugins complejos, los archivos deben dividirse en módulos funcionales. El archivo principal se encarga de la inicialización, mientras que las clases y métodos se deben colocar en otros archivos específicos.includes/El directorio donde se encuentran los recursos frontales (CSS, JS) es…assets/Catálogo.
4. Desinstalación y limpieza: Si tu complemento ha creado tablas de bases de datos u opciones, debería ofrecer una función de desinstalación para eliminar esos datos. Esto se puede lograr a través de un proceso independiente…uninstall.phpmediante archivos.

resúmenes

A través de este tutorial, completamos el proceso de desarrollo de un plugin personalizado para WordPress que cuenta con funciones básicas: desde la configuración del entorno, la creación del esqueleto del plugin, la adición de funcionalidades mediante el sistema de ganchos (hooks), hasta la implementación de la página de configuración en el backend, pasando por prácticas de internacionalización y seguridad. Has aprendido cómo utilizar todo esto para desarrollar plugins de manera efectiva.add_filterYadd_actionInteractar con el núcleo de WordPress: ¿cómo utilizar la API Settings para crear páginas de opciones fiables y cómo hacerlo?load_plugin_textdomainHaz que el plugin sea compatible con múltiples idiomas. Recuerda que, al desarrollar plugins, la seguridad, la mantenibilidad y la experiencia del usuario son los factores más importantes a considerar. Sobre esta base, puedes continuar explorando funciones más avanzadas como tipos de artículos personalizados, metadatos, códigos cortos y puntos de acceso a API REST, para crear extensiones para WordPress aún más potentes.

FAQ Preguntas más frecuentes

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

Esto generalmente se debe a problemas de permisos o errores en el código. Primero, asegúrate de que…add_options_pageoadd_menu_pageLos parámetros de permisos especificados en la función (por ejemplo…)‘manage_options’Debe coincidir con el rol de usuario con el que está conectado en estos momentos. En segundo lugar, realice una comprobación.admin_menu¿Está el hook montado correctamente y la función de callback no contiene errores de sintaxis que pudieran interrumpir la ejecución de PHP? La forma más sencilla de verificarlo es activar los hooks en la interfaz administrativa de WordPress.WP_DEBUGVerifique si hay alguna información de error relacionada que se haya generado.

¿Cómo agregar archivos CSS y JavaScript personalizados a un plugin?

La forma correcta de hacerlo es utilizar…wp_enqueue_style()Ywp_enqueue_script()Funciones. En el caso de los recursos frontales, deben ser montados (es decir, cargados y disponibles para su uso) en el sitio web correspondiente.wp_enqueue_scriptsEn los ganchos de acción; para los recursos del backend de administración, se montan allí.admin_enqueue_scriptsEn el gancho.

En tu clase de plugin, puedes agregar el siguiente método:

public function enqueue_frontend_assets() {
    wp_enqueue_style( ‘my-plugin-style’, plugin_dir_url( __FILE__ ) . ‘assets/css/style.css’, array(), ‘1.0.0’ );
}

Luego, en el constructor, se realiza esto a través de…add_action( ‘wp_enqueue_scripts’, array( $this, ‘enqueue_frontend_assets’ ) );Regístrese. Esto asegurará que la gestión de las dependencias se realice de manera correcta y que no haya conflictos con otros plugins o temas.

¿Cómo puedo limpiar las opciones de datos que he creado cuando un usuario desinstala el complemento?

WordPress ofrece dos métodos principales para desinstalar plugins. El primero consiste en registrar un “hook” de desinstalación, pero este método no se utiliza frecuentemente en plugins orientados a objetos. El método más recomendable y estándar es crear un nuevo plugin específico para la desinstalación.uninstall.phpEl archivo se encuentra en el mismo nivel que tu archivo de plugin principal.

Cuando un usuario elimina un plugin desde el panel de administración de WordPress, WordPress verifica automáticamente y ejecuta el archivo correspondiente.uninstall.phpEn este caso, primero necesitas realizar una inspección.WP_UNINSTALL_PLUGIN¿Se definen las constantes y, a continuación, se eliminan de manera segura todos los datos creados por el plugin, como las opciones personalizadas y las tablas de la base de datos? Por ejemplo:

if ( ! defined( ‘WP_UNINSTALL_PLUGIN’ ) ) {
    exit;
}
delete_option( ‘my_first_plugin_options’ );
// 如果有自定义表：$wpdb->query( “DROP TABLE IF EXISTS {$wpdb->prefix}my_table” );

¿Cómo puedo asegurarme de que mi plugin sea compatible con más versiones de WordPress?

La clave para mantener la compatibilidad radica en utilizar con precaución las funciones y características de las nuevas versiones, y en proporcionar alternativas para las versiones anteriores. Antes de llamar a una función que podría no estar disponible en las nuevas versiones, es necesario verificar si existe una versión compatible con las versiones actuales.function_exists()Realiza una comprobación. Por ejemplo, si deseas utilizar las funcionalidades introducidas en la versión 5.0…wp_dateLas funciones pueden:

if ( function_exists( ‘wp_date’ ) ) {
    $date = wp_date( get_option( ‘date_format’ ), $timestamp );
} else {
    $date = date_i18n( get_option( ‘date_format’ ), $timestamp );
}

Al mismo tiempo, se debe indicar claramente en las notas del encabezado del plugin y en el archivo de instrucciones (readme) la versión mínima de WordPress para la que se han realizado pruebas. Realizar pruebas periódicamente en versiones antiguas de WordPress es la mejor forma de garantizar la compatibilidad.