Guía de introducción al desarrollo de complementos de WordPress: construye tu primera extensión de funcionalidad desde cero.

Preparativos: Comprender los fundamentos de los plugins para WordPress

Antes de comenzar a escribir código, es de vital importancia establecer una base teórica sólida. Un plugin para WordPress es, en esencia, una colección de uno o más archivos PHP que funciona a través de las herramientas y funcionalidades proporcionadas por WordPress.Hook（钩子）El sistema permite expandir o modificar las funciones básicas de WordPress. Los plugins pueden ser tan simples como agregar un pequeño fragmento de código (un “shortcode”), o tan complejos como crear una aplicación completa para la administración del sitio web. Todos los plugins se almacenan en un lugar específico dentro del sistema de WordPress./wp-content/plugins/Bajo el directorio, cada complemento tiene su propia carpeta independiente.

El entorno de desarrollo es su escritorio de trabajo. Necesita un entorno de servidor local, como XAMPP, MAMP o Local by Flywheel, y debe instalar WordPress en él. Se recomienda encarecidamente que…wp-config.phpEl archivo se abrió en el programa.WP_DEBUGEstos patrones le ayudarán a localizar errores rápidamente durante el proceso de desarrollo. Además, un editor de código eficiente (como VS Code o PhpStorm) y un navegador moderno con herramientas para desarrolladores son también esenciales.

Creación del primer plugin: Estructura básica y activación

Comencemos creando el plugin más simple posible: su función será agregar una línea de información sobre los derechos de autor en la parte inferior de todas las páginas del sitio web. Este proceso le ayudará a comprender los componentes básicos de un plugin.

Lecturas recomendadas Guía para principiantes en el desarrollo de plugins para WordPress: Crea tu primera extensión de funcionalidades desde cero。

En primer lugar, en/wp-content/plugins/Crea una carpeta nueva en el directorio y asígnale el nombre demy-first-pluginDentro de esa carpeta, cree el archivo principal del plugin, que suele tener el mismo nombre que la carpeta.my-first-plugin.phpCada plugin debe contener una nota de cabecera estándar; esta es la única forma en que WordPress puede reconocer la información del plugin.

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://example.com/my-first-plugin
 * Description:       这是一个用于学习WordPress插件开发的入门插件，将在页面底部添加版权信息。
 * Version:           1.0.0
 * Author:            你的名字
 * 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”. Verá un plugin llamado “Mi primer plugin” en la lista. Haga clic en “Activar” para activarlo oficialmente; aunque, de momento, no realizará ninguna función.

Implementar la función principal: agregar contenido utilizando ganchos (hooks).

La gran ventaja de WordPress radica en que…Hook（钩子）El sistema se divide en…Action（动作）YFilter（过滤器）Hay dos tipos de ganchos (hooks). Los ganchos de acción (action hooks) le permiten insertar su propio código en momentos específicos (por ejemplo, cuando la página se carga completamente o cuando un artículo se publica) para ejecutar funciones determinadas. Por su parte, los ganchos de filtro (filter hooks) le permiten modificar los datos que se transmiten a lo largo del proceso (como el contenido del artículo o su título).

Para agregar texto al pie de página, necesitamos utilizar…wp_footerEste gancho de acción: agregamos el siguiente código al archivo principal del plugin.

// 这是一个安全措施，防止直接访问PHP文件
if ( ! defined( 'ABSPATH' ) ) {
    exit; // 如果ABSPATH未定义，则退出
}

/**
 * 在网站页脚输出自定义HTML内容
 */
function myfp_add_footer_text() {
    echo '<div style="text-align: center; padding: 20px; border-top: 1px solid #eee; margin-top: 40px;">';
    echo '<p>© '. date('Y') . ' Mi sitio web. Todos los derechos reservados. Este contenido ha sido creado por…<strong>Mi primer plugin</strong>Generar.</p>';
    echo '</div>';
}
// 将我们的函数挂载到 `wp_footer` 动作钩子上
add_action( 'wp_footer', 'myfp_add_footer_text' );

En este fragmento de código, primero definimos la función…myfp_add_footer_text()Su función es generar un fragmento de código HTML. Luego, lo utilizamos…add_action()La función “monta” esta función personalizada en…wp_footerEn este gancho. Esto significa que cada vez que WordPress llega a este punto…wp_footerCuando se trata de la ubicación (generalmente situada dentro del tema principal)...footer.phpCuando se abra el archivo, nuestra función se ejecutará automáticamente, lo que hará que la información de copyright que hemos definido se muestre en la parte inferior de la página.

Lecturas recomendadas Desde cero: Guía completa para el desarrollo de plugins para WordPress y compartición de las mejores prácticas。

Funciones avanzadas: Creación de páginas de administración y códigos cortos

Un complemento (plugin) con funciones completas suele requerir la interacción con el administrador del sistema. A continuación, agregaremos una página de configuración sencilla para el complemento y crearemos un código corto (short code) para facilitar su uso.

Añada una página de configuración al menú de administración.

Vamos a utilizar…add_menu_page()La función añade un nuevo elemento al menú de la izquierda en la parte posterior de WordPress. Modifique el archivo del plugin principal y añada el siguiente código:

/**
 * 注册插件管理菜单
 */
function myfp_add_admin_menu() {
    add_menu_page(
        '我的第一个插件设置', // 页面标题
        '我的插件',           // 菜单标题
        'manage_options',     // 所需权限
        'myfp-settings',      // 菜单slug
        'myfp_settings_page', // 显示页面内容的回调函数
        'dashicons-admin-plugins', // 图标（使用Dashicon）
        30                    // 菜单位置
    );
}
add_action( 'admin_menu', 'myfp_add_admin_menu' );

/**
 * 设置页面的HTML内容
 */
function myfp_settings_page() {
    // 检查用户权限
    if ( !current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <div class="wrap">
        <h1>¿¿¿¿php echo esc_html( get_admin_page_title() ); ?&gt;</h1>
        <p>Bienvenido a la página de configuración de “Mi primer plugin”. Este es un ejemplo de una interfaz de administración sencilla.</p>
        <form action="/es/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 未来可以在这里添加设置字段
            ?>
            <p>Más funciones avanzadas (como guardar configuraciones) se explicarán en tutoriales futuros.</p>
        <input type="hidden" name="trp-form-language" value="es"/></form>
    </div>
    ¿php?  
}

Después de guardar los cambios y actualizar la página en el servidor, verá un nuevo elemento de menú llamado “Mis plugins” en la parte izquierda. Haga clic en él para acceder a la página de configuración vacía que acabamos de crear.

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

Crear y registrar un código corto.

Los códigos cortos permiten a los usuarios realizar acciones sencillas y rápidas mediante frases simples o comandos concisos.[shortcode]Las etiquetas se utilizan para insertar contenido dinámico en artículos o páginas. Vamos a crear un código corto que muestre la hora actual del servidor.

/**
 * 短代码处理函数
 * @param array $atts 短代码属性
 * @param string $content 短代码包裹的内容
 * @return string 返回要替换的HTML
 */
function myfp_current_time_shortcode( $atts = [], $content = null ) {
    // 设置默认属性并合并用户传入的属性
    $atts = shortcode_atts(
        array(
            'format' => 'Y-m-d H:i:s',
        ),
        $atts,
        'current_time'
    );

// 根据format属性格式化当前时间
    $current_time = date( $atts['format'] );

// 返回输出内容
    return '<div class="myfp-time"><strong>Hora actual:</strong> '`. esc_html($current_time)`.'</div>'// Registro del código corto [current_time]
add_shortcode( 'current_time', 'myfp_current_time_shortcode' );

Ahora, puede ingresar texto en cualquier artículo, página o cuadro de texto de una herramienta auxiliar.[current_time]Para mostrar la hora en el formato predeterminado, o bien utilizar otro formato a conveniencia…[current_time format="F j, Y"]Para mostrar la hora en un formato personalizado, WordPress llamará automáticamente a nuestro código.myfp_current_time_shortcode()Se utiliza una función para procesar y reemplazar este código corto.

resúmenes

A través de esta guía, ha completado los pasos clave para crear un plugin de WordPress completamente funcional desde cero. Ha comprendido la estructura básica de un plugin, la importancia de las notas en la cabecera del mismo, y ha practicado el sistema de ganchos (hooks), que es esencial para el desarrollo en WordPress. Ha logrado utilizar estos conceptos de manera efectiva para desarrollar su propio plugin.add_action()Se ha añadido contenido a la interfaz frontal del sitio web.add_menu_page()Se ha creado una interfaz de administración y se ha comenzado a utilizarla.add_shortcode()Se han registrado códigos cortos que pueden ser utilizados por los editores de contenido.

Lecturas recomendadas Guía de introducción al desarrollo de plugins de WordPress.。

Esto es solo el punto de partida en el mundo del desarrollo de plugins. A partir de aquí, puede explorar áreas más complejas, como crear tablas de bases de datos para almacenar datos, utilizar…add_settings_section()Yadd_settings_field()Construya páginas de opciones reales, maneje el envío de formularios, agregue interacciones AJAX, cree tipos de artículos y clasificaciones personalizadas, y siga los estándares de codificación de WordPress así como las mejores prácticas de seguridad para publicar su plugin. Continúe practicando y explorando, y podrá desarrollar plugins para WordPress potentes y profesionales.

FAQ Preguntas más frecuentes

¿Cuántos archivos debe contener un plugin?

Un complemento (plugin) puede contener únicamente un archivo PHP principal. Para complementos sencillos, esto es más que suficiente. Sin embargo, a medida que las funciones de un complemento se vuelven más complejas, se recomienda dividir los diferentes módulos de funcionalidad en archivos separados (como archivos de CSS, JavaScript, definiciones de clases, etc.) para mantener la claridad y la facilidad de mantenimiento del código. Estos archivos deben ser organizados y cargados a través del archivo principal.

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

¿Por qué mi plugin no aparece en la lista de plugins del backend?

Esto generalmente ocurre debido a un formato incorrecto de las notas en la cabecera del plugin o a un error en la ruta del archivo. Por favor, asegúrese de que el archivo PHP principal de su plugin se encuentre en la ubicación indicada directamente./wp-content/plugins/your-plugin-folder/El archivo se encuentra dentro del directorio especificado, y el bloque de comentarios en la parte superior del mismo tiene el formato correcto. En particular…Plugin Name:Esta línea es esencial. Después de verificar que todo esté en orden, simplemente actualice la página del plugin.

¿Cuál es la diferencia entre los ganchos de acción (action hooks) y los ganchos de filtro (filter hooks)?

Los ganchos de acción se utilizan para “ejecutar un fragmento de código” en momentos específicos; no requieren un valor de retorno y se emplean principalmente para activar funciones adicionales, como agregar contenido HTML o enviar correos electrónicos. Por su parte, los ganchos de filtro se utilizan para “modificar algún dato” y deben devolver un valor (generalmente el valor modificado). Se usan principalmente para intervenir antes de la salida del contenido, por ejemplo, para cambiar el título de un artículo o agregar enlaces al mismo.

¿Cómo eliminar de manera segura los ganchos (hooks) que se han añadido?

Puede utilizar la funciónremove_action()oremove_filter()Existe una función para eliminar los ganchos (hooks) que se agregaron anteriormente. Sin embargo, es necesario asegurarse de que la operación de eliminación se realice después de la operación de agregación original, y que el parámetro de prioridad sea el mismo que el utilizado en el momento del agregado.add_action()oadd_filter()La prioridad en este caso es la misma. Generalmente, se recomienda realizar la operación de eliminación cuando los ganchos de los plugins están desactivados o bajo condiciones específicas.