Tutorial para el desarrollo de plugins para WordPress: Crea tu primer plugin desde cero

Preparación y configuración del entorno.

Antes de comenzar a escribir código, es necesario asegurarse de que tu entorno de desarrollo esté configurado adecuadamente. Un buen entorno de desarrollo local puede mejorar significativamente la eficiencia del desarrollo y la experiencia de depuración.

En primer lugar, necesitas instalar un entorno de servidor web en tu ordenador local, lo que comúnmente se denomina “entorno de servidor local”. Una de las opciones más populares es XAMPP o MAMP, que integran Apache, MySQL/MariaDB y PHP. Otra solución potente es utilizar Docker para configurar un entorno similar al de producción. Independientemente de la opción que elijas, asegúrate de que la versión de PHP (se recomienda 7.4 o superior) y la versión de MySQL sean compatibles con la mayoría de los entornos de alojamiento de WordPress.

A continuación, descargue e instale la versión más reciente de WordPress. Descomprima los archivos de WordPress en la carpeta raíz de su servidor local (por ejemplo, la carpeta principal de XAMPP). htdocs Crea una carpeta y sigue el famoso proceso de instalación de “cinco minutos” para completar la configuración. Asegúrate de que puedas acceder correctamente a este sitio web de WordPress local.

Lecturas recomendadas Guía completa y sencilla para aprender a desarrollar plugins para WordPress, desde cero.。

Finalmente, y este es un paso de vital importancia: prepárese un editor de código. Se recomienda utilizar herramientas como Visual Studio Code, PhpStorm o Sublime Text, que cuentan con funciones de resaltado de código, sugerencias inteligentes y capacidad de depuración. Estas características son especialmente útiles para el desarrollo en PHP, ya que te ayudarán a evitar muchos errores de sintaxis de nivel básico.

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

Estructura básica de los plugins y el archivo principal

Un plugin para WordPress tiene una estructura de archivos estándar y obligatoria; su núcleo se encuentra en… /wp-content/plugins/ La carpeta con el mismo nombre que se encuentra en el directorio, así como el archivo PHP principal que se encuentra dentro de dicha carpeta.

Crear el archivo principal del plugin

En primer lugar, en /wp-content/plugins/ Cree una nueva carpeta en el directorio. El nombre de la carpeta debe ser breve, único y describir la función del plugin, por ejemplo, “my-first-plugin”. Luego, dentro de esa carpeta, cree un archivo PHP con el mismo nombre que la carpeta. my-first-plugin.php。

Este archivo principal es el “punto de entrada” del plugin; WordPress reconoce los metadatos del plugin al leer la información del encabezado del mismo, que se encuentra en la parte superior del archivo. La información del encabezado del plugin es un bloque de comentarios estándar en PHP y debe colocarse al principio del archivo. Como mínimo, debe contener el nombre y la descripción del plugin.

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个学习WordPress插件开发的示例插件，用于展示“Hello World”。
 * Version:           1.0.0
 * Author:            你的名字
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

En el código anterior,Plugin Name Estos campos son obligatorios; el resto son optativos, pero se recomienda completarlos. Esta información se mostrará en la página de administración de “plugins” del backend de WordPress.Text Domain Se utiliza para la internacionalización (soporte de múltiples idiomas) y coincide con el campo de texto que se utiliza en las llamadas posteriores a las funciones de traducción.

Lecturas recomendadas Dominar el desarrollo de plugins para WordPress desde cero: principios, práctica y técnicas avanzadas。

Definir las constantes básicas del plugin

Las buenas prácticas de desarrollo de plugins implican definir desde el principio algunas constantes útiles, como la ruta del archivo del plugin y su URL, para poder hacer referencias a ellas de manera sencilla en el código posterior. Esto evita la necesidad de codificar las rutas de forma fija (hard-coding), lo que hace que el código sea más fácil de mantener y trasladar a otros entornos.

Puedes agregar el siguiente código en el archivo principal, inmediatamente después de la información de cabecera del plugin, para definir las constantes:

// 防止直接访问
if ( ! defined( 'ABSPATH' ) ) {
    exit; // 如果 ABSPATH 未定义，则退出
}

// 定义插件路径和URL常量
define( 'MFP_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
define( 'MFP_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
define( 'MFP_PLUGIN_VERSION', '1.0.0' );

Aquí,plugin_dir_path( FILE ) Y plugin_dir_url( FILE ) Se trata de una función esencial proporcionada por WordPress que permite obtener de manera segura la ruta de directorio y la URL del archivo del plugin actual.MFP_PLUGIN_VERSION Las constantes se utilizan para almacenar el número de versión de los plugins, lo que facilita su uso al incorporar estilos de script o al realizar comparaciones de versiones.

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

Implementación de funciones clave y uso de ganchos (hooks)

La esencia del desarrollo de plugins para WordPress radica en el uso del sistema de “ganchos” (Hooks). Existen dos tipos de ganchos: Acciones (Actions) y Filtros (Filters). Estos te permiten insertar tu código en momentos específicos del funcionamiento de WordPress (como al cargar una página o al guardar un artículo), o modificar los datos devueltos por otras funciones.

Añadir un simple gancho de acción (action hook).

Vamos a implementar la función más simple: agregar una línea de texto en el pie de página del sitio web. Utilizaremos los ganchos de acción (action hooks). wp_footerSe activará antes de que el HTML sea generado en la zona del pie de página.

En el archivo principal, añada una función y luego utilícela a través de… add_action La función lo monta en… wp_footer En este gancho.

Lecturas recomendadas Guía para el desarrollo de plugins para WordPress: Te enseñamos paso a paso a crear tu propio plugin desde cero.。

/**
 * 在网站页脚输出自定义文本
 */
function mfp_display_footer_text() {
    echo '<p style="text-align: center; color: #666;">¡Gracias por utilizar mi primer plugin para WordPress!</p>';
}
add_action( 'wp_footer', 'mfp_display_footer_text' );

Ahora, activa tu plugin y accede a la parte frontal del sitio web. Desplázate hacia la parte inferior de la página; deberías ver este texto. Esta es la forma básica de usar los “ganchos de acción” (action hooks): realizar algo en un momento determinado.

Modificar el contenido utilizando filtros.

Los filtros se utilizan para modificar un valor ya existente. Por ejemplo, si queremos modificar el título de un artículo y agregar las palabras “【Recomendado】” al principio de todos los títulos, esto se puede lograr de la siguiente manera: the_title Se puede lograr mediante el uso de filtros.

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

Cree una nueva función que reciba como parámetro el título original que se desea filtrar y que devuelva el título modificado. Luego, utilice esta función para realizar el proceso de filtrado. add_filter Montar.

/**
 * 在所有文章标题前添加前缀
 * @param string $title 原始标题
 * @return string 修改后的标题
 */
function mfp_add_prefix_to_title( $title ) {
    // 确保只在主循环中修改，避免影响后台列表等其他地方
    if ( is_single() && in_the_loop() ) {
        $title = '【推荐】' . $title;
    }
    return $title;
}
add_filter( 'the_title', 'mfp_add_prefix_to_title' );

Este ejemplo sencillo demuestra el gran poder de los filtros: puedes verificar las condiciones (como…) is_single() Determinar si se trata de la página de un único artículo, y realizar modificaciones únicamente en el contenido específico de ese contexto.

Añadir página de administración y prácticas de seguridad

Un complemento (plugin) con funciones completas suele requerir una página de configuración en el backend, que permita a los administradores del sitio web realizar ajustes necesarios. Al mismo tiempo, garantizar la seguridad del código es de suma importancia.

Página de configuración para crear un plugin

Vamos a utilizar… add_menu_page La función añade un menú de administración principal y la página de configuración correspondiente al plugin.

Primero, crea una función para generar el contenido HTML de la página de configuración y, a continuación, úsala mediante un montaje (mounting) en el sitio web correspondiente. admin_menu La función del gancho de acción se utiliza para registrar este menú.

/**
 * 渲染插件设置页面的HTML内容
 */
function mfp_render_settings_page() {
    // 检查用户权限
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( __( '你没有足够的权限访问此页面。', 'my-first-plugin' ) );
    }
    ?>
    <div class="wrap">
        <h1>¿¿¿¿php echo esc_html( get_admin_page_title() ); ?&gt;</h1>
        <p>Esta es la página de configuración de mi primer plugin. En el futuro, se podrán agregar formularios y opciones aquí.</p>
        <form action="/es/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 后续可以在这里添加设置字段
            // settings_fields( 'mfp_options_group' );
            // do_settings_sections( 'mfp-settings-page' );
            // submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="es"/></form>
    </div>
    &lt;?php
}

/**
 * 注册插件管理菜单
 */
function mfp_add_admin_menu() {
    add_menu_page(
        &#039;我的第一个插件设置&#039;, // 页面标题
        &#039;我的插件&#039;,          // 菜单标题
        &#039;manage_options&#039;,    // 所需权限 (manage_options)
        &#039;mfp-settings-page&#039;, // 菜单slug
        &#039;mfp_render_settings_page&#039;, // 回调函数
        &#039;dashicons-admin-plugins&#039;, // 图标 (Dashicons)
        80                   // 菜单位置
    );
}
add_action( &#039;admin_menu&#039;, &#039;mfp_add_admin_menu&#039; );

Después de activar el plugin, verá un nuevo elemento de menú llamado “Mis plugins” en la parte izquierda de la pantalla de administración de WordPress. Al hacer clic en él, accederá a una página de configuración sencilla. En esta página, se proporciona una interfaz para agregar campos de formulario utilizando el WordPress Settings API, que es el método estándar para manejar de manera segura los datos introducidos por los usuarios.

Validación de datos y escape

Cualquier dato que se reciba de los usuarios o que se envíe al navegador debe ser procesado para evitar ataques de tipo Cross-Site Scripting (XSS) e inyecciones de SQL (SQL injection). WordPress ofrece una amplia gama de funciones de seguridad para ello.

• Output en formato escapado: Usar esc_html()、esc_attr()、esc_url() Y wp_kses_post() Se utilizan funciones como estas para purificar el contenido que se envía a HTML.
• Validación de datos: Uso sanitize_text_field()、sanitize_email() Se utilizan funciones como estas para limpiar los datos ingresados que se envían desde los formularios.
• Clave no CE: Para las operaciones en formularios que involucran la modificación de datos, es obligatorio utilizar esta clave. wp_nonce_field() Y wp_verify_nonce() para verificar la legitimidad de la solicitud.

La seguridad es la línea de vida en el desarrollo de plugins, y es esencial desarrollar buenos hábitos desde el principio.

resúmenes

A través de este tutorial, completamos un proceso de desarrollo de plugins para WordPress que, aunque pequeño, cumple con todas las funcionalidades esenciales. Comenzamos desde cero, establecimos el entorno de desarrollo, creamos la estructura principal del archivo del plugin de acuerdo con los estándares, y mediante la implementación de dos funciones (añadir texto al pie de página y modificar el título de los artículos), comprendimos en profundidad el uso fundamental de los ganchos de acción (action hooks) y los ganchos de filtro (filter hooks) en WordPress. Finalmente, agregamos una página de administración básica para el plugin y destacamos la importancia de prácticas de seguridad como la validación de datos, el control de permisos y la escapación de datos.

Este sencillo plugin de nivel “Hello World” ya incluye los elementos esenciales necesarios para un plugin comercial: una estructura estándar, el uso de “ganchos” (hooks), una interfaz de administración en segundo plano y consideraciones de seguridad. Partiendo de aquí, puedes intentar integrar la API de Configuraciones (Settings API) de WordPress para crear opciones reales, escribir tablas de bases de datos personalizadas, o desarrollar códigos más complejos y herramientas auxiliares. Recuerda que el aprendizaje continuo a través de los manuales oficiales de desarrollo y el estudio del código de plugins open source de calidad es la mejor forma de mejorar tus habilidades.

FAQ Preguntas más frecuentes

¿Cómo debo depurar mi plugin para WordPress (####)?
El primer paso es activar el modo de depuración de WordPress. En tu… wp-config.php En el documento, se indicará que... WP_DEBUG El valor de la constante se establece en trueTambién puedes configurar otros parámetros según tus necesidades. WP_DEBUG_LOG Para trueRegistre el mensaje de error en… /wp-content/debug.log En el archivo, se debe evitar que los mensajes de error se muestren directamente en la página, ya que podrían afectar negativamente al usuario.

Además, utilizar las herramientas de desarrollo del navegador (F12) en las secciones “Console” y “Network” para ver errores de JavaScript y solicitudes de API, así como integrar herramientas de depuración de PHP (como Xdebug) con tu editor de código (por ejemplo, VS Code) para realizar depuración con puntos de interrupción, son métodos muy eficientes y profesionales para resolver problemas de programación.

¿Por qué mi plugin muestra un “error fatal” al activarse?

Esto generalmente se debe a un error de sintaxis en PHP o a la llamada a una función/clase que no existe. Primero, revise los registros de depuración de WordPress (como se mencionó anteriormente). La información del error indicará con precisión en qué archivo y en qué línea se ha producido el problema.

Las causas comunes incluyen: la falta de puntos y comas, la incoincidencia de paréntesis o comillas, la llamada a una función sin incluir los archivos necesarios, o el intento de ejecutar código aun cuando un plugin está desactivado. Asegúrese de que su versión de PHP cumpla con los requisitos y de que todas las funciones estén definidas antes de ser utilizadas.

¿Cómo puedo hacer que mi plugin sea compatible con múltiples idiomas (internacionalización)?

WordPress utiliza el framework GNU gettext para implementar la internacionalización (i18n) y la localización (l10n). En primer lugar, como se indica en los tutoriales, es necesario configurar correctamente los datos de cabecera del archivo principal. Text Domain(Por ejemplo, my-first-plugin) y Domain Path。

En el código del plugin, todas las cadenas de texto que necesitan ser traducidas deben ser envueltas en una función de traducción. Por ejemplo:__( ‘文本’, ‘my-first-plugin’ ) o _e( ‘文本’, ‘my-first-plugin’ )Luego, utiliza herramientas como Poedit para analizar estas cadenas de texto en el código, generar un archivo de plantilla (.pot), y crear los archivos correspondientes en los formatos .po y .mo para el idioma deseado (por ejemplo, chino zh_CN). Estos archivos deben ser colocados en el lugar adecuado. /languages/ En el directorio.

¿Cómo interactuar de manera segura con una base de datos durante el desarrollo de plugins?

Nunca escriba directamente instrucciones SQL que combinen la entrada del usuario. Es necesario utilizar las clases de operación de bases de datos proporcionadas por WordPress. $wpdbOfrece funciones similares a… $wpdb->prepare() Este método permite procesar las consultas SQL de manera segura mediante el uso de sentencias preparadas, lo que previene efectivamente las inyecciones SQL.

Por ejemplo, al consultar datos se debe escribir de la siguiente manera:

global $wpdb;
$user_input = $_POST['some_input'];
$safe_query = $wpdb->prepare( "SELECT * FROM {$wpdb->prefix}table WHERE column = %s", $user_input );
$results = $wpdb->get_results( $safe_query );

Al mismo tiempo, se debe realizar una verificación estricta de los datos introducidos por los usuarios, así como su limpieza, por ejemplo, utilizando… sanitize_text_field() y otras funciones.