¿Cómo aprender a desarrollar complementos de WordPress desde cero? Guía completa y tutorial práctico.

Comprender la estructura básica de los plugins de WordPress.

Antes de comenzar a desarrollar, es esencial comprender los conceptos fundamentales y el funcionamiento de los plugins de WordPress. Un plugin es, en esencia, un conjunto de archivos PHP que permiten expandir las funcionalidades básicas de WordPress y generalmente incluye instrucciones, código ejecutable, archivos de recursos, etc. Su funcionamiento depende completamente del sistema de ganchos (Hooks) proporcionado por WordPress.

Explorar la estructura estándar de los archivos de plugins

Un plugin de WordPress estándar suele seguir una estructura de directorios específica. El archivo principal del plugin, por ejemplo… my-first-plugin.phpDebe colocarse en… /wp-content/plugins/ El archivo se encuentra dentro del directorio principal o en uno de sus subdirectorios. Es de suma importancia, ya que contiene información sobre el cabezal del plugin, que sirve para que el sistema de WordPress reconozca tu extensión.

Un directorio típico de plugins puede contener las siguientes partes: el archivo principal del plugin, así como las áreas destinadas a almacenar recursos estáticos como JavaScript y CSS. assets/ Carpeta para los archivos de clases PHP. includes/ Índice, para uso en la interfaz de usuario. admin/ Y public/ Carpeta, así como los archivos utilizados para la traducción. languages/ Índice. Una buena estructura ayuda a la organización y el mantenimiento del código, especialmente cuando las funciones de los plugins se vuelven más complejas.

Lecturas recomendadas Desarrollo de plugins para WordPress: Desde los principios hasta la maestría: Una guía completa para crear funciones personalizadas。

Conocer la información fundamental del encabezado del archivo del plugin

Cada plugin debe comenzar con información metadatos específica (Header), la cual se incluye dentro de bloques de comentarios en PHP. Esta información es clave para que WordPress reconozca el plugin. El formato básico es el siguiente:

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

<?php
/**
 * Plugin Name: 我的第一个插件
 * Plugin URI:  https://www.example.com/my-first-plugin
 * Description: 这是一个简短描述，介绍插件功能的句子。
 * Version:     1.0.0
 * Author:      你的名字
 * Author URI:  https://www.example.com
 * License:     GPL v2 or later
 * Text Domain: my-first-plugin
 * Domain Path: /languages
 */

Entre ellos,Plugin Name Es obligatorio proporcionar esta información; el resto de los datos es opcional, aunque se recomienda completarlos. Especialmente… Text Domain Y Domain PathEstos elementos están preparados para la internacionalización (soporte de múltiples idiomas) de los plugins. WordPress lee esta información y la muestra en la página de administración de plugins del lado backend.

Configurar un entorno de desarrollo local y crear el primer plugin

Antes de comenzar a codificar, es esencial disponer de un entorno de desarrollo local aislado y que permita iteraciones rápidas. Esto ayuda a evitar los riesgos que pueden surgir al probar directamente el sitio web en línea.

Configurar la cadena de herramientas de desarrollo local

Se recomienda utilizar entornos de integración basados en servidores locales, como Local by Flywheel, XAMPP o Laragon. Estos herramientas permiten instalar de forma sencilla los componentes necesarios para WordPress, como PHP, MySQL y el servidor web. Además, necesitarás un editor de código, como Visual Studio Code o PHPStorm, que ofrezca funciones de resaltado de sintaxis, sugerencias de código y depuración. Asegúrate de que la versión de PHP que utilices sea compatible con el servidor al que vas a instalar el sitio web; generalmente se recomienda PHP 7.4 o una versión más reciente.

Escriba e active un plugin sencillo.

Ahora, creemos el primer plugin funcional. /wp-content/plugins/ En el directorio, cree una nueva carpeta y nómenela… my-first-pluginDentro de esa carpeta, crea uno llamado my-first-plugin.php Los documentos.

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

Copie la información sobre los cabezales de los plugins mencionada en la sección anterior al principio de este archivo. A continuación, agregaremos una función sencilla: agregar automáticamente un texto personalizado al final del contenido del artículo. Para esto, necesitaremos utilizar los ganchos (hooks) de los “filtros” (Filters) de WordPress. Agregue el siguiente código debajo de la información de los cabezales:

// 在文章内容后添加自定义文本
function myfp_add_footer_text( $content ) {
    // 仅对主循环中的单篇文章生效
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $custom_text = '<p><em>¡Gracias por leer! Este artículo cuenta con el apoyo de “Mi primer plugin”.</em></p>';
        $content .= $custom_text;
    }
    return $content;
}
// 将函数挂载到 ‘the_content’ 过滤器上
add_filter( 'the_content', 'myfp_add_footer_text' );

Después de guardar el archivo, inicie sesión en la consola administrativa de WordPress y vaya a la página de “Plugins”. Debería ver un nuevo plugin llamado “Mi primer plugin”. Haga clic en “Activar”. A continuación, visite un artículo de su sitio web y observará que el texto que agregamos ha aparecido al final del contenido del artículo. Con esto, su primer plugin para WordPress ya está funcionando correctamente.

Dominar las tecnologías fundamentales del desarrollo de plugins

La potente capacidad de expansión de WordPress se basa en varios conceptos fundamentales: los ganchos (Hooks), la API de Opciones (Options), los tipos de artículos personalizados (Custom Post Types, CPT) y las operaciones en la base de datos. Dominar estos conceptos es esencial para avanzar en el desarrollo de aplicaciones web basadas en WordPress.

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

Comprender en profundidad los ganchos (hooks) de acciones y filtros

El sistema de ganchos (Hook System) es la piedra angular del desarrollo de plugins para WordPress y se divide en Acciones (Actions) y Filtros (Filters). Los ganchos de acción se activan en puntos específicos de ejecución (como al cargar la cabecera de la página o al guardar un artículo), lo que te permite realizar ciertas acciones, como agregar menús o enviar correos electrónicos. add_action() Se utiliza una función para realizar el montaje.

Por ejemplo, agregar una página al menú de administración en segundo plano:

function myfp_add_admin_menu() {
    add_menu_page(
        '我的插件设置', // 页面标题
        '我的插件',     // 菜单标题
        'manage_options', // 权限
        'myfp-settings',  // 菜单slug
        'myfp_settings_page', // 回调函数，用于显示页面内容
        'dashicons-admin-generic', // 图标
        20
    );
}
add_action( 'admin_menu', 'myfp_add_admin_menu' );

Los ganchos de filtro (filter hooks) te permiten “modificar” los datos. Interceptan los datos antes de que sean utilizados (por ejemplo, antes de ser mostrados en el navegador o almacenados en una base de datos), y puedes modificarlos y devolver valores nuevos. Estos ganchos fueron utilizados en nuestro primer plugin. the_content Es simplemente un gancho (hook) para un filtro.

Lecturas recomendadas Análisis en profundidad de WooCommerce: una guía completa para construir un sitio web de comercio electrónico de alto rendimiento desde cero.。

Usar la API de opciones para almacenar la configuración de los plugins.

Los plugins suelen necesitar guardar ciertas configuraciones, como claves de API, estados de activación/desactivación, etc. WordPress proporciona herramientas para gestionar esto de manera sencilla. Options API Para manejar fácilmente este tipo de datos, las funciones clave incluyen: add_option(), get_option(), update_option() Y delete_option()。

Cree una página de configuración sencilla para utilizar estas funciones. Primero, defina las funciones de callback del menú mencionadas anteriormente. myfp_settings_page Para mostrar un formulario:

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 myfp_settings_page() {
    ?>
    <div class="wrap">
        <h1>Configuraciones de mi plugin</h1>
        <form method="post" action="/es/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'myfp_settings_group' ); // 输出安全字段
            do_settings_sections( 'myfp-settings' );  // 输出设置部分
            submit_button(); // 输出提交按钮
            ?>
        <input type="hidden" name="trp-form-language" value="es"/></form>
    </div>
    ¿php?  
}

Luego, necesitas utilizar… register_setting(), add_settings_section() Y add_settings_field() Se utilizan funciones como estas para declarar e inicializar estos campos de configuración. Este proceso asegura que los datos se guarden de manera segura. wp_options En la tabla.

Construir un ejemplo completo de un plugin práctico

Integraremos el conocimiento que hemos aprendido hasta ahora para crear un plugin un poco más complejo, pero muy práctico: un plugin que calcula el tiempo estimado de lectura de un artículo. Este plugin mostrará el tiempo previsto de lectura debajo del título del artículo.

Crear el archivo principal del plugin y las funciones de sus características.

Crear una nueva carpeta para los plugins post-reading-time Y el archivo principal post-reading-time.phpRellene la información estándar del encabezado del plugin. Luego, crearemos las funciones principales para calcular el tiempo de lectura.

function prt_calculate_reading_time( $post_id ) {
    // 获取文章内容
    $content = get_post_field( 'post_content', $post_id );
    // 清除HTML标签和短代码，只计算文字
    $text = strip_tags( strip_shortcodes( $content ) );
    // 计算字数（中英文混合场景的简单处理）
    $word_count = mb_strlen( $text, 'UTF-8' );
    // 假设平均阅读速度为每分钟300字（可根据需要调整）
    $reading_speed = 300;
    // 计算分钟数，至少1分钟
    $minutes = floor( $word_count / $reading_speed );
    if ( $minutes < 1 ) {
        $minutes = 1;
    }
    // 返回包含时间的字符串
    return sprintf( _n( '约 %d 分钟读完', '约 %d 分钟读完', $minutes, 'post-reading-time' ), $minutes );
}

Mostrar en la interfaz frontal lo que está integrado con la administración en el backend.

A continuación, necesitamos decidir cómo mostrar esta hora. Una práctica común es agregarla a los metadatos del artículo (debajo del título). the_content Los filtros o temas proporcionan ciertos “ganchos” (hookes) específicos. En este caso, utilizaremos un gancho de acción más adecuado. thesis_hook_before_post(Dependiendo del tema), o de una manera más general, se puede filtrar directamente el contenido de los artículos.

Para obtener mayor flexibilidad, hemos creado un código corto (Shortcode) y una pequeña herramienta (Widget), y hemos proporcionado una opción de configuración sencilla para controlar si se debe mostrar automáticamente o no.

Primero, regístrese para obtener un código corto:

function prt_reading_time_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'id' => get_the_ID(),
    ), $atts, 'reading_time' );

$time_text = prt_calculate_reading_time( $atts['id'] );
    return '<span class="reading-time">'. $time_text .'</span>'php
add_shortcode('reading_time', 'prt_reading_time_shortcode');

Luego, podemos agregar los resultados automáticamente al principio del contenido del artículo (mediante un filtro):

function prt_prepend_to_content( $content ) {
    if ( is_single() && get_option( 'prt_auto_display', '1' ) == '1' ) {
        $time_html = '<div class="post-reading-time">' . prt_calculate_reading_time( get_the_ID() ) . '</div>';
        $content = $time_html . $content;
    }
    return $content;
}
add_filter( 'the_content', 'prt_prepend_to_content' );

También necesitas crear una opción de configuración en el backend. prt_auto_displayPermite que los usuarios elijan si desean activar la función de visualización automática. Con esto, se ha creado un complemento (plugin) completo en funcionalidades y con una estructura clara.

resúmenes

Comenzando por comprender la arquitectura básica de los plugins y la información de los cabezales de archivo, construimos gradualmente el entorno de desarrollo y creamos el primer plugin con una función sencilla. Al explorar en profundidad el núcleo de la extensibilidad de WordPress, el sistema de ganchos (hooks), aprendimos cómo intervenir en el flujo de ejecución y modificar datos sin alterar el código principal. Utilizando la API Options, pudimos crear configuraciones persistentes para nuestros plugins. Finalmente, al desarrollar un ejemplo completo del plugin “Estimación del tiempo de lectura de artículos”, combinamos el conocimiento teórico con la práctica, abarcando todo el proceso de desarrollo, desde la escritura de la lógica de funcionamiento, la creación de códigos cortos hasta la integración en la interfaz de usuario. Recuerden que el desarrollo de plugins de calidad comienza con una planificación clara, el cumplimiento de los estándares de codificación de WordPress, y siempre dando prioridad a la seguridad, el rendimiento y la experiencia del usuario.

FAQ Preguntas más frecuentes

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

Es esencial que cuentes con una base sólida en programación PHP, ya que el código de los plugins está compuesto principalmente por este lenguaje. Además, es necesario tener un conocimiento básico de HTML, CSS y JavaScript para manejar la presentación y la interacción en la parte frontal de la página web. Estar familiarizado con los conceptos básicos de MySQL te ayudará a comprender cómo WordPress almacena y consulta datos. Lo más importante de todo es acostumbrarte a leer el manual de desarrollo oficial de WordPress (Codex) y la referencia para desarrolladores (Developer Reference).

¿Cómo puedo asegurarme de que el plugin que he desarrollado sea seguro?

La seguridad es de vital importancia. Siempre valide y desinfecte los datos introducidos por los usuarios, y escape los datos que se muestran en la pantalla. Utilice los valores no aleatorios (nonces) proporcionados por WordPress para evitar los ataques de solicitud falsa entre sitios (CSRF). Al crear consultas a la base de datos, asegúrese de seguir las prácticas de seguridad adecuadas. $wpdb Los métodos proporcionados por la clase (por ejemplo…) prepare()Se utilizan métodos específicos para prevenir las inyecciones SQL. Es importante evitar el uso de funciones inseguras. eval()Actualiza tus plugins de manera regular para corregir las vulnerabilidades conocidas.

¿En qué directorio debería colocarse el plugin?

Los plugins de WordPress deben colocarse en el sitio web. /wp-content/plugins/ En el directorio correspondiente, puedes colocar el archivo PHP principal del plugin directamente en la raíz del mismo. No obstante, una práctica más recomendable es crear una carpeta subordinada para cada plugin, y almacenar allí todos los archivos relacionados (PHP, JS, CSS, imágenes, etc.). Esto permite mantener una estructura de archivos organizada y evita posibles conflictos con otros plugins.

¿Cómo agrego una página de configuración para mi complemento?

Para agregar una página de configuración a un plugin, generalmente se siguen varios pasos: en primer lugar, se utiliza… add_action( ‘admin_menu’, ‘your_function’ ) El “gancho” (hook) registra un nuevo elemento de menú de administración o un submenú. Luego, en la función de callback, se genera el código HTML del formulario de la página. A continuación, se utiliza… register_setting()、add_settings_section() Y add_settings_field() Usa las funciones de la API de configuración (Settings API) para declarar y asociar tus campos de configuración. Esto permitirá que se realicen automáticamente comprobaciones de permisos, verificaciones de validez (no relacionadas con el protocolo CE) y el almacenamiento de opciones. Finalmente, utiliza estos campos en el formulario. settings_fields() Y do_settings_sections() La función se utiliza para generar los campos necesarios.

¿Qué son los “ganchos” (Hooks) y por qué son tan importantes?

Los “ganchos” (hooks) son puntos específicos en el código central de WordPress que permiten que los plugins y temas se conecten (o “enganchen”) a su flujo de ejecución. Se dividen en ganchos de acción (Actions) y ganchos de filtro (Filters). Los ganchos de acción se ejecutan cuando ocurren eventos específicos, lo que permite agregar nuevas funcionalidades. Los ganchos de filtro, por su parte, te permiten modificar los datos antes de que sean utilizados o guardados. El sistema de ganchos es el núcleo de la extensibilidad de WordPress, ya que permite a los desarrolladores modificar o mejorar significativamente el comportamiento de WordPress sin tener que modificar los archivos centrales, asegurando así la pureza y la capacidad de actualización del mismo.