Introducción práctica para principiantes: te enseñaremos paso a paso cómo desarrollar complementos de WordPress.

Entorno de desarrollo de plugins para WordPress y preparaciones básicas

Antes de comenzar a escribir código, necesitas un entorno de desarrollo local adecuado. Esto generalmente incluye un servidor local (como XAMPP, MAMP o Local by Flywheel), un editor de código (como VS Code o PHPStorm) y una instalación de WordPress para realizar pruebas. Asegúrate de que la versión de PHP que estés utilizando sea compatible con la versión recomendada por WordPress.

El núcleo de un plugin para WordPress es una parte que se encuentra en…/wp-content/plugins/Los archivos se encuentran dentro de una carpeta situada en el directorio correspondiente. El nombre de esta carpeta será el identificador de tu plugin; es recomendable que utilices letras minúsculas, números y guiones. Dentro de esta carpeta, debe existir un archivo principal de PHP que tenga el mismo nombre que ella. Por ejemplo:my-first-plugin.phpEste archivo es el punto de entrada del plugin y contiene la metainformación del mismo.

Crea tu primer archivo de plugin.

Comencemos creando el plugin más simple posible: este plugin mostrará un mensaje de bienvenida en la página de administración del sitio web.

Lecturas recomendadas Análisis en profundidad del complemento WooCommerce: una guía completa desde la configuración inicial hasta la personalización avanzada.。

Redacción de comentarios en la cabecera de un plugin

Cada plugin de WordPress debe comenzar con unas notas de cabecera específicas. WordPress lee esta información para identificar y mostrar los plugins. En tu carpeta de plugins (por ejemplo…my-first-pluginEn ese proceso, se crea el archivo principal.my-first-plugin.phpY escriba el siguiente código:

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: 我的第一个WordPress插件
 * Plugin URI:  https://example.com/my-first-plugin
 * Description: 这是一个用于学习WordPress插件开发的入门插件，将在管理后台添加一个欢迎提示。
 * Version:     1.0.0
 * Author:      你的名字
 * Author URI:  https://example.com
 * License:     GPL v2 or later
 * Text Domain: my-first-plugin
 */

Después de guardar el archivo, inicie sesión en la página de administración de su WordPress y vaya a la sección de “Plugins”. Allí debería ver que “Mi primer plugin para WordPress” aparece en la lista de plugins. Puede activarlo en ese momento, aunque todavía no cuenta con ninguna función.

Añadir la primera función al plugin.

Ahora, añadamos una función sencilla a este plugin: mostrar una notificación de administración personalizada en la parte superior de la pantalla de administración. Para ello, utilizaremos las funcionalidades de WordPress.admin_noticesGancho.

En el archivo principalmy-first-plugin.phpDebajo del comentario de cabecera, añada el siguiente código:

// 在管理后台添加一个欢迎提示
function my_first_plugin_admin_notice() {
    ?>
    <div class="notice notice-success is-dismissible">
        <p>¡Bienvenido a usar “Mi primer plugin para WordPress”! Ha activado con éxito este plugin.</p>
    </div>
    &lt;?php
}
add_action( &#039;admin_notices&#039;, &#039;my_first_plugin_admin_notice&#039; );

Este código define un elemento llamado…my_first_plugin_admin_noticeSe trata de una función que genera un fragmento de HTML para crear una ventana de notificación de éxito que puede cerrarse.add_action()La función “monta” esta función personalizada en WordPress.admin_noticesEste comando se encuentra en el “gancho” correspondiente. Guarda el archivo y actualiza el backend de WordPress; así podrás ver el mensaje de bienvenida de color verde en la parte superior de la página.

Lecturas recomendadas Tutorial práctico para la creación de sitios web: proceso completo de desarrollo desde cero hasta su puesta en línea, con una guía para la selección de tecnología.。

Comprender los mecanismos centrales de los plugins de WordPress: los ganchos (hooks) y los filtros (filters)

El núcleo del desarrollo de plugins para WordPress radica en la interacción con el código base de WordPress, lo cual se logra principalmente a través de un mecanismo llamado “ganchos” (hooks). Existen dos tipos de ganchos: las acciones (actions) y los filtros (filters).

Uso de los ganchos de acción (Action Hooks)

Los ganchos de acción (action hooks) te permiten insertar código personalizado en momentos específicos durante la ejecución de WordPress, tal y como acabamos de utilizar.admin_noticesOtro ejemplo común es…initEl “gancho” (hook) se activa durante la inicialización de WordPress y se utiliza comúnmente para registrar tipos de artículos o categorías personalizados.

Por ejemplo, podemos establecer un valor de opción al inicializar el complemento:

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

function my_first_plugin_set_default_option() {
    // 如果选项不存在，则添加它
    if ( false === get_option( 'my_first_plugin_greeting' ) ) {
        add_option( 'my_first_plugin_greeting', 'Hello from my plugin!' );
    }
}
add_action( 'init', 'my_first_plugin_set_default_option' );

Uso de los ganchos de filtro (filter hooks)

Los ganchos de filtro (filter hooks) te permiten modificar los datos que se transmiten en el proceso. Por ejemplo,the_contentLos filtros te permiten modificar la forma en que se muestra el texto principal de los artículos. Podemos utilizarlos para agregar automáticamente una información sobre los derechos de autor al final de cada artículo.

function my_first_plugin_add_copyright( $content ) {
    // 仅对主循环中的单篇文章生效
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $copyright = '<p><em>Este artículo está protegido por derechos de autor. Por favor, indique la fuente al reproducirlo.</em></p>';
        $content .= $copyright;
    }
    return $content;
}
add_filter( 'the_content', 'my_first_plugin_add_copyright' );

En este ejemplo, la función…my_first_plugin_add_copyrightRecibir el original.$contentTras realizar una evaluación de condiciones (para garantizar que solo se aplique en la página de un artículo en particular), se agregó un fragmento de HTML al final de dicho artículo. Finalmente, es necesario asegurarse de que el contenido modificado se publique correctamente.$contentVolver.

Construir plugins más complejos: códigos cortos y páginas de configuración

Un plugin completo suele necesitar proporcionar interacción en el lado del usuario (como códigos cortos) y configuraciones en el lado del servidor (como la configuración de páginas).

Lecturas recomendadas Una herramienta poderosa para la optimización de motores de búsqueda: crear una estrategia de SEO para un sitio web de WordPress desde cero.。

Crear códigos cortos personalizados

Los códigos cortos permiten a los usuarios utilizar etiquetas sencillas para realizar ciertas acciones o acceder a funciones específicas.[my_greeting]) Inserir funciones de plugins en un artículo o página. Regístrese para utilizar un código corto.add_shortcode()Función.

// 注册一个简单的问候短代码
function my_first_plugin_greeting_shortcode( $atts ) {
    // 使用 shortcode_atts 定义默认属性并合并用户输入
    $attributes = shortcode_atts( array(
        'name' => '访客',
    ), $atts );

// 获取我们之前设置的选项
    $greeting_text = get_option( 'my_first_plugin_greeting', 'Hello' );

// 生成输出
    $output = '<div class="my-plugin-greeting">';
    $output .= esc_html( $greeting_text ) . ', ' . esc_html( $attributes['name'] ) . '!';
    $output .= '</div>';

return $output;
}
add_shortcode( 'my_greeting', 'my_first_plugin_greeting_shortcode' );

Ahora, los usuarios pueden ingresar texto en el editor.[my_greeting name="张三"]En la parte frontal de la página se mostrará el texto “¡Hola desde mi plugin! ¡Zhang San!”.

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

Página de configuración de plugins

Para que los usuarios puedan personalizar sus saludos, necesitamos agregar una página de configuración en el backend de administración. Esto implica crear una página de menú principal o secundario, así como gestionar el proceso de almacenamiento de los datos ingresados a través de los formularios.

// 在后台“设置”菜单下添加子菜单页
function my_first_plugin_add_settings_page() {
    add_options_page(
        '我的插件设置',          // 页面标题
        '我的第一个插件',        // 菜单标题
        'manage_options',       // 所需权限
        'my-first-plugin',      // 菜单slug
        'my_first_plugin_render_settings_page' // 回调函数，用于输出页面内容
    );
}
add_action( 'admin_menu', 'my_first_plugin_add_settings_page' );

// 渲染设置页面的HTML
function my_first_plugin_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>La configuración de mi primer complemento</h1>
        <form method="post" action="/es/options.php/" data-trp-original-action="options.php">
            <?php
            settings_fields( 'my_first_plugin_settings_group' );
            do_settings_sections( 'my-first-plugin' );
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="es"/></form>
    </div>
    &lt;?php
}

// 注册设置、区域和字段
function my_first_plugin_register_settings() {
    register_setting(
        &#039;my_first_plugin_settings_group&#039;, // 设置组名
        &#039;my_first_plugin_greeting&#039;        // 选项名
    );

add_settings_section(
        &#039;my_first_plugin_main_section&#039;,    // 区域ID
        &#039;问候语设置&#039;,                     // 区域标题
        null,                            // 区域回调函数（可为空）
        &#039;my-first-plugin&#039;                // 页面slug
    );

add_settings_field(
        &#039;greeting_text_field&#039;,            // 字段ID
        &#039;问候语文本&#039;,                     // 字段标题
        &#039;my_first_plugin_greeting_field_callback&#039;, // 字段HTML的回调函数
        &#039;my-first-plugin&#039;,                // 页面slug
        &#039;my_first_plugin_main_section&#039;    // 所属区域ID
    );
}
add_action( &#039;admin_init&#039;, &#039;my_first_plugin_register_settings&#039; );

// 渲染问候语输入字段
function my_first_plugin_greeting_field_callback() {
    $greeting = get_option( &#039;my_first_plugin_greeting&#039; );
    echo &#039;<input type="text" name="my_first_plugin_greeting" value="' . esc_attr( $greeting ) . '" class="regular-text" />';
}

Este código crea una página de configuración estándar para WordPress. Cuando un usuario modifica el saludo en la página de configuración y lo guarda, los códigos cortos (shortcodes) creados anteriormente utilizarán el nuevo texto del saludo.

resúmenes

A través de este tutorial, hemos creado un plugin para WordPress desde cero que cuenta con funciones básicas. Has aprendido cómo estructurar los archivos de un plugin, cómo escribir la información de cabecera del mismo, cómo utilizar los ganchos de acción (action hooks) para enviar notificaciones en el backend, cómo modificar el contenido mediante filtros, cómo crear códigos cortos (shortcodes) que los usuarios puedan utilizar en la interfaz frontal, y cómo diseñar una página de configuración completa para administrar las opciones del plugin. Estas son las habilidades más esenciales y fundamentales para desarrollar plugins en WordPress. Una vez que las hayas dominado, podrás consultar el manual oficial de plugins de WordPress y profundizar en el conocimiento de otras API, como las tablas de bases de datos personalizadas, los puntos de acceso del REST API y el manejo de AJAX, lo que te permitirá desarrollar plugins más potentes y profesionales.

FAQ Preguntas más frecuentes

¿Qué conocimientos de lenguajes de programación se necesitan para desarrollar plugins para WordPress?

Para desarrollar plugins para WordPress es esencial conocer el lenguaje PHP, ya que el núcleo de WordPress está escrito en este lenguaje. Además, es necesario estar familiarizado con HTML, CSS y JavaScript básico para crear la interfaz gráfica y la lógica de interacción del plugin. Tener un conocimiento básico de SQL también es útil para manejar operaciones de datos más complejas.

¿Cómo depuro mi plugin para WordPress?

Primero, asegúrate de que en tu…wp-config.phpEl archivo se abrió en el programa.WP_DEBUGEste modo mostrará los errores y advertencias de PHP en la pantalla. En segundo lugar, es posible utilizar…error_log()La función escribe información de depuración en el registro de errores del servidor. Para un depurado más avanzado, se puede considerar utilizar herramientas de depuración específicas para PHP, como Xdebug, o instalar plugins de depuración para WordPress para ayudar a resolver problemas.

¿Cómo puedo publicar el plugin que he desarrollado en el directorio oficial de plugins de WordPress?

Debes acceder a WordPress.org y crear una cuenta de desarrollador. A continuación, utilizarás la herramienta Subversion (SVN) para enviar el código de tu plugin al repositorio de código oficial que se te haya asignado. Tu plugin debe cumplir con la licencia GPL, y la calidad del código, su seguridad así como la documentación deben cumplir con ciertos estándares de revisión. Una vez que la revisión sea aprobada, tu plugin aparecerá en el directorio oficial para que los usuarios lo puedan descargar.

¿Cómo se deben cargar correctamente los archivos de CSS y JavaScript del lado del cliente ( frontend) de los plugins?

Para evitar conflictos y garantizar el rendimiento, no se debe introducir directamente los recursos en los archivos de plantillas. El método correcto es utilizar…wp_enqueue_style()Ywp_enqueue_script()Funciones. En cuanto a los recursos del backend de administración, deberían ser montados (es decir, vinculados) en el sistema correspondiente.admin_enqueue_scriptsGancho; en el caso de los recursos del front end de un sitio web, deben ser montados (es decir, vinculados) en el lugar adecuado.wp_enqueue_scriptsGanchos (hooks). Esto asegura que las dependencias estén configuradas correctamente y que el mismo archivo no se cargue repetidamente.