Guía de introducción al desarrollo de complementos de WordPress: crea tu primer complemento desde cero.

Preparación y configuración del entorno.

Antes de empezar a escribir código, debes asegurarte de contar con un entorno de desarrollo adecuado. Esto incluye una instalación local de WordPress y un editor de código. Un entorno local te permite probar y depurar libremente sin afectar al sitio web en producción. Entre los programas de entorno de desarrollo local más utilizados se encuentran Local by Flywheel, XAMPP o MAMP.

Necesitas idear un nombre único para tu plugin; este nombre se utilizará como nombre del directorio principal del plugin y como nombre del archivo principal. Por ejemplo, si tu plugin se llama “Hello World”, entonces tu archivo principal del plugin puede llamarse hello-world.phpAsegúrate de que el nombre y la descripción de tu plugin sean únicos en el directorio de plugins de WordPress; esto puede evitar eficazmente conflictos con otros plugins.

Además, es fundamental estar familiarizado con el manual oficial de desarrollo y la referencia de código de WordPress. Comprender los conceptos básicos de WordPress, como los ganchos de acción (Action Hooks), los ganchos de filtro (Filter Hooks), los códigos cortos (Shortcodes) y la API de ajustes, sentará una base sólida para tu desarrollo.

Lecturas recomendadas Guía completa para el desarrollo de plugins de WordPress: crea plugins PHP profesionales desde cero.。

Crear el primer archivo de plugin

El núcleo de un plugin es uno o varios archivos PHP. En el caso más sencillo, un plugin puede estar compuesto por un solo archivo PHP. Para crear un plugin válido, necesitas añadir un comentario estándar con la información del plugin en la cabecera del archivo principal del plugin. Este bloque de comentarios le indicará a WordPress todos los metadatos sobre tu plugin, como el nombre, la descripción, la versión, el autor, etc.

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

Escribir la información de cabecera del plugin

WordPress identifica y muestra la información del plugin leyendo comentarios con un formato específico en la parte superior del archivo. A continuación se muestra un ejemplo del encabezado de plugin más básico:

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个用于学习和演示的简单 WordPress 插件。
 * Version:           1.0.0
 * Requires at least: 5.2
 * Requires PHP:      7.2
 * Author:            你的名字
 * Author URI:        https://example.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

Guarda este código como un nuevo archivo PHP, por ejemplo my-first-plugin.phpLuego, coloca este archivo en el directorio de tu instalación local de WordPress wp-content/plugins En la carpeta. En este momento, al entrar en la página de “Plugins” del panel de administración de WordPress, deberías poder ver un nuevo plugin llamado “Mi primer plugin” en la lista y activarlo. Por ahora todavía no tiene ninguna función.

Agregar funcionalidades básicas al plugin

Después de activar el plugin, le añadiremos una función sencilla: añadir automáticamente un texto personalizado al final del contenido de la entrada. Para ello, necesitaremos utilizar el gancho de filtro de WordPress. the_content。

Puedes añadir el siguiente código debajo de la información de cabecera del plugin que acabas de ver:

Lecturas recomendadas Desde cero: explicación detallada de todo el proceso de desarrollo de plugins de WordPress。

/**
 * 在文章内容末尾添加自定义文本
 *
 * @param string $content 当前文章内容。
 * @return string 修改后的文章内容。
 */
function mfp_add_footer_text( $content ) {
    // 仅针对主循环中的单个文章页面
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $custom_text = '<p><em>Gracias por leer este artículo, presentado por “Mi primer complemento”.</em></p>';
        $content .= $custom_text;
    }
    return $content;
}
// 将自定义函数挂载到 `the_content` 过滤器上
add_filter( 'the_content', 'mfp_add_footer_text' );

Este código define un elemento llamado… mfp_add_footer_text la función que recibe el contenido del artículo $content Como parámetro. Dentro de la función, primero se utilizan etiquetas condicionales (is_single(), in_the_loop(), is_main_query()）para asegurarnos de que solo modificamos el contenido en el bucle principal de una única página de artículo, evitando afectar a otras páginas como la página de inicio o las páginas de archivo. Luego, crea un fragmento de texto HTML personalizado y lo añade al contenido original. Por último, mediante add_filter La función “monta” esta función personalizada en WordPress. the_content En el filtro.

Después de guardar el archivo, actualiza la página de un artículo en el frontend y verás el texto añadido al final del contenido del artículo.

Desarrollar funciones avanzadas: crear menús de administración y páginas de opciones

Un plugin con funciones completas suele requerir la interacción con el administrador, lo que generalmente se logra agregando páginas de configuración en el lado del servidor (backend). WordPress ofrece una amplia API para crear menús de administración y páginas de opciones.

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

Añadir un elemento de menú para plugins en el backend.

Crearemos una página de menú de administración independiente para el plugin, que se utilizará para configurar algunas opciones. Esto requiere el uso de add_action Ganchos y… admin_menu Acción.

Sigue añadiendo el siguiente código en el archivo principal de tu plugin:

/**
 * 在 WordPress 后台管理菜单中添加一个新的顶级菜单项
 */
function mfp_register_admin_menu() {
    add_menu_page(
        '我的插件设置',          // 页面标题
        '我的插件',             // 菜单标题
        'manage_options',       // 所需权限
        'my-first-plugin',      // 菜单 slug
        'mfp_render_settings_page', // 渲染页面的回调函数
        'dashicons-admin-plugins', // 图标（可选）
        80                      // 菜单位置
    );
}
add_action( 'admin_menu', 'mfp_register_admin_menu' );

add_menu_page La función se utiliza para registrar un nuevo menú de nivel superior. Entre ellos,manage_options Es un identificador de permisos, lo que significa que solo los usuarios que tienen el permiso de “opciones de administración” (normalmente administradores) pueden ver este menú.mfp_render_settings_page Es el nombre de la función que vamos a definir a continuación para generar el contenido HTML de la página de ajustes.

Lecturas recomendadas Guía definitiva para el desarrollo de complementos de WordPress: crea tu primer complemento personalizado desde cero.。

Crear el contenido de la página de configuración

Ahora debemos definir la función de devolución de llamada mencionada anteriormente mfp_render_settings_page Renderiza una página de configuración sencilla.

/**
 * 渲染插件设置页面的内容
 */
function mfp_render_settings_page() {
    ?>
    <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
            // 输出设置字段、安全 nonce 字段等
            settings_fields( 'mfp_settings_group' );
            do_settings_sections( 'my-first-plugin' );
            submit_button( '保存设置' );
            ?>
        <input type="hidden" name="trp-form-language" value="es"/></form>
    </div>
    ¿php?  
}

Esta función genera una estructura básica de página de administración de WordPress, que incluye un título y un formulario. Utiliza dos funciones principales de la API de ajustes de WordPress:settings_fields Y do_settings_sectionsPara que esto funcione, también necesitamos registrar la configuración, las secciones y los campos.

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

Registrar opciones con la API de ajustes

La API de ajustes de WordPress proporciona una forma segura y estandarizada de gestionar el registro, el guardado y la validación de las opciones de formularios. Seguimos añadiendo el siguiente código para registrar un campo de texto simple.

/**
 * 初始化插件的设置
 */
function mfp_settings_init() {
    // 注册一个新的设置项 `mfp_options` 到数据库
    register_setting( 'mfp_settings_group', 'mfp_options' );

// 在页面内添加一个新的节
    add_settings_section(
        'mfp_section_basic',
        '基础设置',
        'mfp_section_basic_callback',
        'my-first-plugin'
    );

// 向节中添加一个字段
    add_settings_field(
        'mfp_field_custom_text',
        '自定义页脚文本',
        'mfp_field_custom_text_callback',
        'my-first-plugin',
        'mfp_section_basic',
        array( 'label_for' => 'mfp_field_custom_text' )
    );
}
add_action( 'admin_init', 'mfp_settings_init' );

/**
 * 节描述的回调函数（可以为空）
 */
function mfp_section_basic_callback() {
    echo '<p>Configure aquí las opciones básicas del complemento.</p>';
}

/**
 * 字段 `mfp_field_custom_text` 的回调函数，用于输出 HTML 输入框
 */
function mfp_field_custom_text_callback() {
    // 从数据库获取现有值
    $options = get_option( 'mfp_options' );
    $value = isset( $options['custom_text'] ) ? $options['custom_text'] : '';
    ?&gt;
    <input type="text"
           id="mfp_field_custom_text"
           name="mfp_options[custom_text]"
           value="<?php echo esc_attr( $value ); ?>"
           class="regular-text" />
    <p class="description">Este texto se mostrará al final del artículo.</p>
    ¿php?  
}

Ahora, tenemos que modificar lo anterior mfp_add_footer_text la función, para que use los valores de opción que acabamos de crear, en lugar de texto codificado de forma rígida.

function mfp_add_footer_text( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $options = get_option( 'mfp_options' );
        $custom_text = isset( $options['custom_text'] ) ? $options['custom_text'] : '';
        if ( ! empty( $custom_text ) ) {
            $content .= '<p><em>' . esc_html( $custom_text ) . '</em></p>';
        }
    }
    return $content;
}

En este punto, tu plugin ya dispone de una página completa de ajustes en el panel de administración. Los administradores pueden encontrar la página de ajustes en el menú “Mi plugin”, introducir un texto personalizado para el pie de página y guardarlo. Este texto se mostrará dinámicamente al final de los artículos en la parte pública del sitio web.

Optimización de plugins y prácticas de seguridad

Al desarrollar complementos, seguir las mejores prácticas es fundamental para la seguridad, el rendimiento y la capacidad de mantenimiento. Aquí se presentan algunos principios básicos.

Garantizar la seguridad del código

Todos los datos recibidos desde el frontend o la interfaz de administración deben validarse, limpiarse y escaparse antes de mostrarse en el navegador o almacenarse en la base de datos. Esto puede prevenir vulnerabilidades de seguridad como los scripts entre sitios (XSS) y la inyección SQL.

• Salida con escape: usar funciones como esc_html(), esc_attr(), esc_url(), wp_kses_post() para escapar el contenido dinámico.
• Limpia la entrada: usa funciones como sanitize_text_field(), sanitize_email(), intval() Para procesar los datos del formulario enviados por el usuario.
• Comprobación de permisos: en la función de devolución de llamada del administrador, usar current_user_can() Realiza una segunda comprobación de permisos. En los endpoints AJAX o de la API REST que impliquen la modificación de datos, asegúrate de utilizar un nonce (token numérico) para la verificación.

Seguir los estándares de codificación de WordPress.

Adoptar los estándares de codificación de WordPress puede garantizar que el estilo de tu código sea coherente con el del núcleo, mejorar la legibilidad y facilitar la colaboración con otros desarrolladores. Esto incluye usar la indentación correcta, el estilo de llaves, las convenciones de nomenclatura (funciones y variables en minúsculas con guiones bajos), etc. Puedes usar PHP CodeSniffer junto con las reglas estándar de WordPress para comprobar automáticamente el código.

Implementar soporte para internacionalización

Añadir compatibilidad de internacionalización a tu plugin desde el principio permite que usuarios de todo el mundo lo traduzcan fácilmente a su propio idioma. Esto se logra principalmente mediante los siguientes pasos:
1. Configúralo correctamente en las notas del encabezado del plugin. Text Domain Y Domain Path。
2. Utiliza las funciones de traducción de WordPress alrededor de todas las cadenas que necesiten traducirse, como (), _e(), esc_html() etc.
3. Utiliza herramientas como Poedit para generar .pot Archivo de plantilla para que lo creen los traductores .po Y .mo Traducir el documento.

Por ejemplo, internacionalizar el texto descriptivo de la página de configuración:

function mfp_section_basic_callback() {
    echo '<p>' . esc_html__( '在这里配置插件的基础选项。', 'my-first-plugin' ) . '</p>';
}

resúmenes

Este artículo te guía desde cero a lo largo de todo el proceso de creación de un plugin de WordPress básico pero completamente funcional. Hemos cubierto desde la preparación del entorno, la creación de los archivos del plugin y la redacción de la información de cabecera del plugin, hasta el uso de los hooks de acción y los hooks de filtro para añadir contenido a las entradas, así como el uso de la API de ajustes de WordPress para construir una compleja interfaz de administración en el panel. Por último, exploramos prácticas de optimización fundamentales en el desarrollo de plugins, como la seguridad, los estándares de codificación y la internacionalización.

A través de esta práctica, ya deberías haber dominado el flujo principal y las herramientas básicas del desarrollo de plugins de WordPress. El siguiente paso es que intentes desarrollar funciones más complejas, como crear tipos de contenido personalizados, tablas de base de datos personalizadas, usar jQuery para mejorar la interacción o enviar tu plugin al directorio oficial de plugins de WordPress. Recuerda que seguir aprendiendo y leer el código del núcleo es la mejor manera de mejorar tus habilidades de desarrollo.

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 tu wp-config.php En el documento, se indicará que... WP_DEBUG Los constantes se establecen en trueEsto mostrará directamente en la página los errores, advertencias y avisos de PHP.

También puede usar error_log() La función escribe información de depuración personalizada en el registro de errores del servidor, o utiliza las herramientas de desarrollo del navegador (la consola y la pestaña Red) para depurar JavaScript y las solicitudes AJAX. Para la lógica compleja, usar herramientas de depuración profesionales como Xdebug hará que el trabajo sea mucho más eficaz.

¿Mi complemento entrará en conflicto con el tema o con otros complementos?

Es posible, especialmente al manejar los mismos hooks, usar nombres genéricos de variables globales o nombres de clases. Para minimizar al máximo los conflictos, asegúrate de añadir un prefijo único a todos tus nombres de funciones, clases, variables y opciones. Por ejemplo, no uses add_footer_textsino utilizar algo como myplugin_add_footer_text nombre.

Antes de modificar contenido global (como las variables de consulta), realiza comprobaciones exhaustivas y establece las restricciones necesarias. Antes de publicar, prueba tu plugin tanto como sea posible en distintos entornos y con diferentes combinaciones de temas.

¿Qué tecnologías necesito aprender para desarrollar complementos avanzados?

Además de una sólida base de PHP, también necesitas comprender en profundidad:
- JavaScript: se utiliza para la interacción en el front-end y el desarrollo del Personalizador de WordPress.
- jQuery: aunque WordPress está haciendo la transición hacia frameworks modernos de JS, jQuery sigue utilizándose ampliamente.
- API REST: se utiliza para crear aplicaciones frontend desacopladas o interactuar con servicios externos.
- Conocimientos de bases de datos: comprender la estructura de la base de datos de WordPress, así como cómo realizar consultas personalizadas de forma segura o crear nuevas tablas.
- Composer: se utiliza para gestionar las dependencias de PHP.
- Herramientas de compilación: como Webpack, utilizadas para gestionar la compilación de JavaScript moderno y SASS.

¿Cómo puedo publicar mi plugin en el directorio oficial de WordPress?

En primer lugar, asegúrate de que tu plugin cumpla plenamente las directrices oficiales de desarrollo de plugins y las mejores prácticas de seguridad. Necesitas una cuenta de WordPress.org. Con esa cuenta, envía el archivo comprimido de tu plugin para su revisión. El proceso de revisión comprobará la calidad del código, la seguridad, la licencia (debe ser compatible con GPL), etc.

Si tu plugin supera la revisión, se añadirá al repositorio SVN, y podrás usar SVN para actualizar y mantener tu plugin. Una vez publicado, los usuarios podrán buscar, instalar y actualizar tu plugin directamente desde el panel de administración de WordPress.