Guía de introducción al desarrollo de temas de WordPress: desde cero hasta la publicación en la práctica.

Preparación del entorno de desarrollo de temas para WordPress

Antes de comenzar a escribir código, es de vital importancia establecer un entorno de desarrollo local estable y eficiente. Esto no solo te permitirá trabajar sin conexión a internet, sino que también te evitará los riesgos que pueden surgir al realizar pruebas en servidores en línea.

Configuración del entorno de desarrollo local

El método más común es utilizar paquetes de software de servidores locales integrados, como XAMPP, MAMP o Laragon. Estas herramientas instalan automáticamente Apache, MySQL y PHP con solo un clic, eliminando así el proceso de configuración complicado. Para el desarrollo de WordPress, se recomienda utilizar entornos optimizados específicamente para esta plataforma, como Local by Flywheel o DesktopServer, que ofrecen funciones prácticas para crear sitios web, administrar bases de datos y cambiar versiones de PHP.

Elección de herramientas y editores esenciales

Necesitas un editor de código. Se recomiendan Visual Studio Code, PhpStorm o Sublime Text. Todos ellos ofrecen funciones avanzadas de resaltado de código, autocompletación y gestión de proyectos. En particular, Visual Studio Code, junto con plugins relacionados con WordPress (como WordPress Snippet y PHP Intelephense), puede mejorar significativamente la eficiencia del desarrollo.

Lecturas recomendadas Aprenda a desarrollar complementos de WordPress: construya su primera extensión de funcionalidad desde cero.。

Además, el sistema de control de versiones Git es esencial. Incluso si eres un desarrollador independiente, es una buena práctica utilizar Git para seguir los cambios en el código, crear ramas y realizar copias de seguridad del proyecto. Puedes inicializar un repositorio local y considerar la posibilidad de subirlo a plataformas de alojamiento remoto como GitHub, GitLab o Bitbucket en el futuro.

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

Comprender la estructura básica de un tema de WordPress

Un tema estándar de WordPress es una carpeta que contiene archivos específicos, ubicada en una determinada ruta del servidor. /wp-content/themes/ En el directorio, incluso el tema más simple debe contener dos archivos principales.

El archivo de estilo para el tema

style.css Se trata del “dossier de identificación” del tema y del archivo que define su apariencia. El bloque de comentarios en la parte superior de este archivo contiene toda la metainformación del tema, la cual será leída por WordPress y mostrada en la página “Apariencias” -> “Temas” del panel de administración. Un ejemplo básico de estos comentarios en la parte superior del archivo es el siguiente:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习 WordPress 主题开发的入门主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

En este archivo, continuarás escribiendo todas las reglas de estilo CSS para controlar la apariencia de la parte frontal del sitio web, como los fuentes, los colores, el diseño, etc.

El archivo de plantilla de índice principal

index.php Es el modelo predeterminado del tema y también es obligatorio. Cuando WordPress no encuentra un archivo de modelo más específico (por ejemplo… single.php o page.phpCuando se utiliza, se emplea para renderizar la página. Por lo general, contiene las etiquetas de plantilla de WordPress, que sirven para llamar al encabezado, iterar sobre el contenido de los artículos, mostrar los elementos de la barra lateral y el pie de página.

Lecturas recomendadas Guía completa para el desarrollo de temas para WordPress: Desde los principios hasta la práctica, las habilidades esenciales para crear sitios web personalizados。

Además de estos dos archivos, un tema completo y funcional suele incluir los siguientes archivos de plantilla:
* header.phpLa zona de cabecera del sitio web (<head> (Y el menú de navegación en la parte superior).
* footer.phpEl área del pie de página del sitio web.
* functions.phpSe utiliza para agregar funciones temáticas, menús de registro, barras laterales, etc.
* page.phpSe utiliza para renderizar páginas estáticas.
* single.phpSe utiliza para renderizar un artículo individual.
* archive.phpSe utiliza para renderizar páginas de archivo que contienen categorías, etiquetas, etc.

Crea tu primer tema desde cero.

Ahora, pongámonos a trabajar para crear el tema más simple posible, a fin de comprender cómo colaboran las diferentes partes.

Crear archivos y directorios básicos

Primero, en tu sitio web local de WordPress… /wp-content/themes/ En el directorio, cree una nueva carpeta y denle el nombre de… my-first-themeLuego, dentro de esa carpeta, cree dos archivos vacíos:style.css Y index.phpEscribe las notas de cabecera CSS mencionadas en la sección anterior. style.css Documentos.

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

Construir una plantilla de índice básica

A continuación, edite. index.php Un archivo. Una versión básica puede contener llamadas a las funciones centrales de WordPress. Para comenzar, utilizamos… get_header() Se utiliza una función para incluir el contenido del encabezado (header).

¿¿php get_header();??

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 在这里输出文章内容
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

¿¿¿php get_footer();???

Este código implementa el “ciclo principal” (The Loop) de WordPress: verifica si existen artículos, luego los itera y muestra el título y el contenido de cada uno. Al final, se utiliza… get_footer() Introducir el pie de página.

Añadir funcionalidades y menú de registro

Para que el tema sea más práctico, hemos creado… functions.php Archivo. En este archivo, podemos utilizar las funcionalidades que ofrece WordPress. add_theme_support() Funciones para habilitar las funciones temáticas, como las miniaturas de los artículos (imágenes destacadas) y el logotipo personalizado.

Lecturas recomendadas Guía completa para el desarrollo de temas para WordPress: Cómo crear temas de sitios web de nivel profesional desde cero。

<?php
function my_first_theme_setup() {
    // 让主题支持文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册一个侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( '在此添加小工具。', 'my-first-theme' ),
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Luego, necesitas… header.php Se utiliza en el archivo. wp_nav_menu() Una función para mostrar el menú que has registrado.

Desarrollo avanzado del tema y preparación para su publicación

Una vez que el tema básico esté completo, puedes mejorar sus funciones y su flexibilidad utilizando plantillas y mecanismos más detallados (hookes).

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

Optimizar la estructura utilizando componentes de plantilla.

Los componentes de plantilla (Template Parts) son una excelente forma de modularizar fragmentos de plantillas reutilizables, como las tarjetas con resúmenes de artículos. Puedes crear uno de estos componentes para que sea fácilmente incorporado en otras plantillas. template-parts/content.php En el archivo, coloca el código que imprime el contenido de cada artículo dentro del bucle. Luego, continúa con el resto de las instrucciones. index.php En el ciclo de..., se utiliza... get_template_part() Se necesita una función para llamarlo.

while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_type() );
endwhile;

Utilizar ganchos de acciones y filtros

Los “ganchos” (Hooks) son la piedra angular de la personalización de plugins en WordPress y también se utilizan ampliamente en el desarrollo de temas. Los “ganchos de acción” (Action Hooks) te permiten insertar código en momentos específicos, por ejemplo, para agregar contenido después del cuerpo de un artículo. Los “ganchos de filtro” (Filter Hooks) te permiten modificar datos, como por ejemplo ajustar la longitud del resumen de un artículo.

Por ejemplo, usar wp_enqueue_scripts Utiliza los ganchos de acción (action hooks) para introducir correctamente los archivos de JavaScript y CSS.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Realizar las pruebas finales y el empaquetamiento.

Antes de publicar, es necesario realizar pruebas exhaustivas. Asegúrate de que el tema se muestre correctamente en diferentes navegadores (Chrome, Firefox, Safari, Edge). Comprueba también cómo se comporta el diseño adaptativo (responsive) tanto en teléfonos móviles como en ordenadores. Activa el modo de depuración en la interfaz administrativa de WordPress. wp-config.php Configuración en… define( 'WP_DEBUG', true );Repare todos los avisos y errores de PHP. Compruebe si todas las funciones esenciales de WordPress (como los comentarios, la búsqueda y la paginación) funcionan correctamente.

Finalmente, elimine los archivos de registro, los archivos de respaldo y cualquier otro contenido innecesario generado durante el proceso de desarrollo. Comprima toda la carpeta del tema en un archivo ZIP; este archivo podrá luego ser utilizado para la instalación.

resúmenes

El desarrollo de temas para WordPress comienza con la comprensión de su estructura básica.style.css, index.phpComienza con un enfoque básico y luego profundiza gradualmente en los niveles de los templates, los hooks de funciones y los componentes modularizados. Esto se logra mediante la creación de un entorno local, la generación de archivos clave y el uso de herramientas adecuadas. functions.php Al mejorar las funcionalidades y realizar pruebas exhaustivas, podrás crear temas que cumplan con los estándares y cuenten con un gran número de características. Una vez que domines estos conceptos fundamentales, estarás en capacidad de personalizar el aspecto y las funcionalidades de cualquier sitio web que desees, y además establecerás una base sólida para aprender frameworks más avanzados, como Underscores y Sage.

FAQ Preguntas más frecuentes

¿Es necesario dominar PHP para desarrollar temas para WordPress?

Sí, para desarrollar temas para WordPress de manera avanzada es esencial dominar PHP. Dado que WordPress está escrito en PHP, todos los archivos de plantilla (.php) contienen código PHP que se utiliza para generar contenido de manera dinámica. Aunque es posible modificar el estilo de los subtemas sin escribir demasiado código PHP, el conocimiento de este lenguaje es indispensable para crear plantillas personalizadas, implementar funciones complejas o modificar la lógica de las consultas.

¿Qué función tiene el archivo functions.php del tema?

functions.php El archivo es el “centro de funcionalidades” de un tema. Se utiliza para agregar o modificar las funcionalidades de ese tema sin necesidad de alterar los archivos principales. Sus principales funciones incluyen: habilitar soporte para funciones específicas del tema (como imágenes destacadas, fondos personalizados), registrar áreas para menús de navegación y herramientas en los lados del sitio, gestionar la carga secuencial de archivos de estilo y scripts, definir funciones personalizadas, así como utilizar ganchos de acciones y filtros para modificar el comportamiento predeterminado de WordPress.

¿Qué es un subtema y por qué se debe utilizar?

Un subtema es un tema que depende de otro tema (el tema principal); hereda todas las funciones, estilos y archivos de plantilla de este último, pero permite que usted sobrescriba o añada nuevas funcionalidades de manera segura. El propósito principal de utilizar subtemas es mantener sus modificaciones personalizadas cuando se actualiza el tema principal. Si modifica directamente los archivos del tema principal, las modificaciones realizadas se perderán, mientras que las del subtema se conservarán. Esta es la mejor práctica para la personalización y el mantenimiento de temas.

¿Cómo puedo hacer que mi tema sea compatible con la traducción a múltiples idiomas?

Para que un tema sea compatible con múltiples idiomas (internacionalización y localización, i18n/l10n), se deben seguir principalmente dos pasos. En primer lugar, es necesario envolver todas las cadenas de texto del tema utilizando las funciones de traducción de WordPress. Por ejemplo, se puede utilizar… esc_html__( ‘文本’, ‘text-domain’ ) o _e( ‘文本’, ‘text-domain’ )En segundo lugar, se utilizan herramientas (como Poedit) para generar el archivo de plantilla .pot. A partir de este, los traductores pueden crear los archivos .po y .mo (por ejemplo, zh_CN.po). style.css La configuración de la cabecera está correcta. Text Domain Es clave.