Guía para principiantes en el desarrollo de complementos de WordPress: crea tu primer complemento funcional desde cero.

En el vasto mundo de Internet, WordPress domina el mercado de los sistemas de gestión de contenidos gracias a su flexibilidad y su potente ecosistema. Sin embargo, su capacidad de extensión fundamental depende, en gran medida, de los complementos. Para los desarrolladores, dominar el desarrollo de complementos de WordPress no solo permite personalizar profundamente las funciones del sitio web, sino también convertir las ideas creativas en productos reutilizables. Este artículo te guiará paso a paso desde cero para crear tu primer complemento de WordPress con funciones prácticas, desvelando así los misterios del desarrollo de complementos.

Introducción a los plugins de WordPress y preparación previa.

Antes de comenzar a escribir la primera línea de código, es fundamental comprender los conceptos básicos de los plugins de WordPress y configurar un entorno de desarrollo adecuado. Un plugin de WordPress es, en esencia, una colección de uno o varios archivos PHP, que también pueden incluir recursos como JavaScript, CSS e imágenes. Puede agregar nuevas funciones o modificar las existentes, y es independiente del tema, lo que significa que las funciones del plugin generalmente no se verán afectadas al cambiar de tema.

Necesitas un entorno de desarrollo local (por ejemplo, Local by Flywheel, XAMPP, MAMP) o un sitio de pruebas para el desarrollo. Las herramientas básicas incluyen un editor de código (como VS Code, PhpStorm) y las herramientas para desarrolladores del navegador para la depuración. Comprender WordPress es fundamental.wp-content/pluginsLa estructura del catálogo es el primer paso, y todos los complementos se instalan en él.

Lecturas recomendadas Iniciar un viaje de desarrollo de plugins de WordPress significa que has dominado la creación de software para usuarios de todo el mundo.。

Crea tu primer archivo de plugin.

El punto de entrada del plugin es un archivo PHP principal ubicado en su propio directorio independiente. Este archivo debe incluir un comentario de encabezado de plugin estándar, que WordPress utiliza para identificar y mostrar tu plugin en la interfaz de administració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

Definición de la información de la cabecera del complemento

Cada complemento debe comenzar con un bloque de comentarios PHP específico. Este bloque de información define la identidad básica del complemento en el panel de administración de WordPress. En el directorio de tu complemento (por ejemplo,wp-content/plugins/my-first-pluginEn el archivo app.js, crea uno llamadomy-first-plugin.phpLos documentos.

<?php
/**
 * Plugin Name:       我的第一个功能插件
 * Plugin URI:        https://yourwebsite.com/my-first-plugin
 * Description:       这是一个学习用的WordPress插件，用于在文章末尾添加自定义提示框。
 * Version:           1.0.0
 * Requires at least: 5.6
 * Requires PHP:      7.4
 * Author:            你的名字
 * Author URI:        https://yourwebsite.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 */

Después de guardar el archivo, inicie sesión en el área de administración de WordPress y vaya al menú “Plugins”. Debería poder ver el plugin llamado “Mi primer plugin de funcionalidad” en la lista de plugins, y en este punto, puede activarlo. Aunque aún no tiene ninguna funcionalidad, ya ha dado el primer paso con éxito.

Construir la estructura básica del complemento

A medida que aumentan las funciones, un solo archivo se vuelve difícil de mantener. Una buena práctica es crear una estructura de directorios organizada. Por ejemplo, crear uno debajo de la carpeta raíz del complemento.includes/La carpeta almacena los archivos de las clases o funciones principales de PHP.assets/La carpeta almacena los archivos JavaScript y CSS.admin/Ypublic/Manejar por separado la lógica de fondo y la de interfaz. Archivo principal.my-first-plugin.phpLuego, es responsable de guiar y cargar estos módulos.

Implementar la función principal: ganchos y filtros.

La filosofía central del desarrollo de plugins de WordPress es el uso de “ganchos”, que te permiten insertar tu propio código en momentos específicos sin necesidad de modificar los archivos principales. Los ganchos se dividen en dos tipos: acciones y filtros. Las acciones te permiten ejecutar funciones cuando ocurren eventos específicos, como publicar un artículo o cargar la interfaz de usuario; los filtros, en cambio, te permiten modificar los datos, como el contenido o el título del artículo.

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

Modificar el contenido de un artículo utilizando filtros.

Añadamos la primera función sustancial al complemento: agregar automáticamente un cuadro de mensaje personalizado al final del contenido de cada artículo. Para ello, utilizaremosthe_contentFiltros.

En primer lugar, en el archivo principal del complemento, debajo de los comentarios de encabezado, agregue las siguientes funciones y ganchos:

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

/**
 * 在文章内容末尾添加自定义提示框
 *
 * @param string $content 原始文章内容。
 * @return string 修改后的文章内容。
 */
function mfp_add_notice_box( $content ) {
    // 仅在主循环的单篇文章页面显示
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $notice_box = '<div class="mfp-notice" style="background-color: #f0f8ff; border-left: 4px solid #3498db; padding: 15px; margin: 20px 0; border-radius: 5px;">'$notice_box = '<p><strong>Consejo:</strong> Este artículo ha sido mejorado con la visualización de “Mi primer complemento funcional”. ¡Espero que te guste este contenido!</p>'$notice_box = '</div>'funciona perfectamente. Gracias por tu ayuda.;

funciónmfp_add_notice_boxReceber el contenido original.$contentComo parámetro, se comprueba si el entorno actual es una página de un solo artículo; si es así, se concatena un bloque HTML que contiene información de aviso y, finalmente, se devuelve el contenido modificado.add_filterLa función monta esta función personalizada en WordPress.the_contentEn el filtro.

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

Usar acciones para agregar un menú de configuración al complemento

Para que el complemento sea más perfecto, generalmente necesitamos proporcionar una página de configuración en segundo plano. Aquí necesitamos usar ganchos de acción.admin_menuPara agregar una opción de menú.

**
 * Añadir un menú de configuración del plugin en el backend de WordPress
 */
function mfp_add_admin_menu() {
    add_options_page(
        'Configuración de mi plugin',   // Título de la página
        'Mi primer plugin',   // Título del menú
        'manage_options',   // Permisos necesarios
        'my-first-plugin',   // Slug del menú
        'mfp_render_settings_page'   // Función de devolución de llamada para mostrar el contenido de la página
    );
}
add_action( 'admin_menu', 'mfp_add_admin_menu' );

/**
 * Renderizar el contenido de la página de configuración
 */
function mfp_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>La configuración de mi primer complemento</h1>
        <form action="/es/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            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?  
}

A través de este ejemplo, has aprendido cómo extender la interfaz de administración de WordPress mediante ganchos de acción. Para una página de configuración completa, generalmente también se necesita usarregister_setting, add_settings_sectionYadd_settings_fieldSe utilizan funciones como estas para definir y guardar las opciones, lo que constituye la base de la interactividad de los complementos.

Agregar estilos y scripts al complemento

Un complemento profesional no solo debe funcionar bien, sino que también debe tener una apariencia adecuada. Necesitamos incluir los archivos CSS y JavaScript de la manera correcta para evitar conflictos con el tema u otros complementos.

Lecturas recomendadas ¿Cómo elegir y desarrollar un plugin de WordPress de alta calidad? Una guía desde el nivel principiante hasta el avanzado.。

Registrar y cargar los recursos del front-end de forma segura.

WordPress ofrece…wp_enqueue_styleYwp_enqueue_scriptUtilizamos funciones para agregar recursos de forma segura. Deberíamos usarwp_enqueue_scriptsUsamos ganchos de acción para cargarlos.

/**
 * 注册并加载插件的前端样式和脚本
 */
function mfp_enqueue_public_assets() {
    // 获取插件URL
    $plugin_url = plugin_dir_url( __FILE__ );

// 注册并排队样式表
    wp_enqueue_style(
        'mfp-public-style',
        $plugin_url . 'assets/css/mfp-public.css',
        array(),
        '1.0.0'
    );

// 注册并排队JavaScript文件（示例）
    wp_enqueue_script(
        'mfp-public-script',
        $plugin_url . 'assets/js/mfp-public.js',
        array('jquery'), // 依赖jQuery
        '1.0.0',
        true            // 在页脚加载
    );
}
add_action( 'wp_enqueue_scripts', 'mfp_enqueue_public_assets' );

Necesitas crear primero en el directorio de plugins.assets/css/mfp-public.cssLuego, podemos agregar estilos para embellecer el cuadro de mensaje que creamos anteriormente.

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

/* assets/css/mfp-public.css */
.mfp-notice {
    background-color: #f0f8ff;
    border-left: 4px solid #3498db;
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}
.mfp-notice p {
    margin: 0;
    color: #2c3e50;
}

Cargar los recursos en segundo plano.

El método de registro de los recursos de fondo es similar, pero el gancho que se utiliza es diferente.admin_enqueue_scriptsNecesitas determinar si la página actual es la página de configuración de tu complemento (por ejemplo, usandoget_current_screen()Para cargar los recursos de manera selectiva y evitar gastos de rendimiento innecesarios, se puede utilizar la función MODULE_LOADED.

resúmenes

Comenzando por definir una simple cabecera de plugin, pasando por utilizar el potente sistema de ganchos de WordPress (acciones y filtros) para modificar dinámicamente el contenido y la estructura del sitio web, y finalizando con una gestión profesional de los recursos de estilo y script, ya has recorrido todo el proceso de creación del primer plugin funcional. La clave está en comprender y seguir las normas de desarrollo de WordPress: usar ganchos en lugar de modificar directamente el núcleo, registrar y ordenar correctamente los recursos, y estructurar archivos de manera clara. Esto es solo el comienzo del mundo del desarrollo de plugins. A continuación, puedes explorar temas más avanzados, como la creación de códigos cortos, tipos de publicaciones personalizados, interacción con la base de datos, puntos finales de REST API e internacionalización de plugins, para hacer que tu plugin sea más robusto y fácil de usar para los usuarios.

FAQ Preguntas más frecuentes

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

Necesitas tener conocimientos básicos de programación en PHP, que incluyen la comprensión de funciones, sentencias condicionales, bucles y operaciones con matrices. Al mismo tiempo, sería muy útil que tuvieras conocimientos de HTML, CSS y un poco de JavaScript, especialmente cuando necesites modificar la interfaz de usuario. Lo más importante es que debes comprender los principios básicos del funcionamiento de WordPress, como la jerarquía de plantillas, el bucle principal y la estructura básica de la base de datos.

¿Cómo depuro mi plugin para WordPress?

Activar WordPressWP_DEBUGEl modelo es el primer paso en el proceso de depuración. Se encuentra en la carpeta raíz de tu sitio web.wp-config.phpEn el archivo, se establecen los ajustes.define( 'WP_DEBUG', true );Esto mostrará los errores y advertencias de PHP en la pantalla y los registrará en un archivo.wp-content/debug.logEn el archivo. Al mismo tiempo, el uso de los paneles Console y Network de las herramientas para desarrolladores del navegador puede ayudar a depurar JavaScript y solicitudes Ajax. Para la lógica compleja, se puede utilizarerror_log()Un funcionamiento o un complemento de depuración especializado enviará la información de las variables al registro.

¿Cómo debo agregar opciones configurables a mi complemento?

El método estándar para agregar opciones de configuración a un plugin es utilizar la API de configuración de WordPress. Esto implica una serie de funciones:register_setting()Se utiliza para registrar un grupo de opciones de configuración y guardarlo de forma segura en la base de datos;add_settings_section()Agrega un bloque en tu página de configuración;add_settings_field()Agregue campos de formulario específicos (como cuadros de entrada y menús desplegables) dentro del bloque. Su función de devolución de llamada en la página de configuración debe incluir lo siguiente:settings_fields()Ydo_settings_sections()La llamada a esta función es necesaria para generar y validar correctamente el formulario.

¿Cómo puedo asegurarme de que mi complemento no entre en conflicto con otros complementos o temas?

Seguir las mejores prácticas es clave para evitar conflictos. Agrega un prefijo único o un espacio de nombres a todos tus funciones, clases, constantes, nombres de acciones/filtros, así como a las clases CSS en tu HTML. Por ejemplo, utiliza algo como…myplugin_function_nameEstos son nombres de funciones, no solo...function_name. Utilicewp_enqueue_styleYwp_enqueue_scriptCargue los recursos y asegúrese de que los identificadores de estilos y scripts sean únicos. Cuando sea posible, envuelva su código en clases para aislar aún más las variables y las funciones.

¿Cómo puedo publicar mi complemento una vez que esté desarrollado?

Si desea enviar un complemento al catálogo oficial de complementos de WordPress, debe asegurarse de que cumpla con los estándares de codificación y la licencia GPL de WordPress. Necesitará registrar una cuenta en WordPress.org y enviar el complemento para que sea revisado. El equipo de revisión verificará la seguridad, la funcionalidad y la documentación del código. Antes de enviarlo, asegúrese de leer detenidamente el manual oficial de desarrollo de complementos y las pautas de envío. En el caso de los complementos comerciales, puede optar por distribuirlos en su propio sitio web o en mercados de terceros.