Guía de inicio para el desarrollo de temas para WordPress: Crea tu primer tema desde cero

Preparación y configuración del entorno.

Antes de comenzar a escribir código, necesitas un entorno de desarrollo adecuado. Un entorno de desarrollo local te permite realizar pruebas y depuraciones sin afectar al sitio web en línea. Se recomienda utilizar paquetes integrados como XAMPP, MAMP o Local by Flywheel, ya que te permiten instalar Apache, MySQL/MariaDB y PHP con un solo clic.

Asegúrate de que tu versión de PHP sea 7.4 o superior, ya que esta es la versión mínima recomendada por WordPress. Además, necesitarás un editor de código, como Visual Studio Code, Sublime Text o PHPStorm, los cuales ofrecen funcionalidades de resaltado de sintaxis y sugerencias de código, lo que mejora significativamente la eficiencia del desarrollo.

Crear la estructura básica de un tema para WordPress

Un tema de WordPress es, en esencia, un conjunto de archivos que se encuentran en wp-content/themes/ El nombre de la carpeta que se encuentra en el directorio es tu identificador de tema. Se recomienda utilizar letras minúsculas, números y guiones, y no deben contener espacios. Por ejemplo, puedes crear una carpeta llamada… my-first-theme La carpeta correspondiente.

En esta carpeta, se necesitan al menos dos archivos principales:style.css Y index.php。style.css No se trata solo de una hoja de estilo; su función más importante es proporcionar metadatos sobre el tema, los cuales se muestran en la página “Apariencia” -> “Temas” del panel de administración de WordPress.

Escribir el encabezado de información del tema

En style.css En la parte superior del archivo, es necesario agregar un bloque de comentarios específico para definir la información sobre el tema. Aquí hay un ejemplo:

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

/*
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
*/

Entre ellos,Text Domain Se utiliza para la internacionalización (soporte de múltiples idiomas) y debe coincidir con el nombre de la carpeta de tu tema.index.php El archivo en cuestión es el archivo de plantilla predeterminado para el tema en cuestión y sirve como plantilla de respaldo para todas las páginas. Al principio, puedes escribir una estructura HTML simple en él para realizar pruebas.

Archivo de plantilla principal y estructura jerárquica de las plantillas

WordPress utiliza un conjunto de reglas denominado “Estructura de Jerarquía de Plantillas” para decidir qué archivo de plantilla utilizar para renderizar una solicitud de página específica. Comprender esta estructura es clave para el desarrollo de temas. La idea principal es que WordPress busca primero en el archivo de plantilla más específico; si no lo encuentra, retrocede a uno más general, y así sucesivamente, hasta llegar al archivo más básico. index.php。

Lecturas recomendadas Introducción al desarrollo de temas para WordPress: Crea tu primer tema personalizado desde cero。

Archivos de plantillas comunes y sus usos

• header.phpLa parte superior de una página web suele incluir la información del área geográfica a la que pertenece el sitio, el logotipo del sitio web y el menú principal de navegación.
• footer.phpLa parte inferior de una página web suele contener información sobre los derechos de autor, enlaces adicionales y otros elementos de utilidad.
• sidebar.phpZona del menú lateral.
• index.phpLa plantilla principal sirve como respaldo final para todas las páginas.
• single.phpSe utiliza para mostrar un artículo de blog individual.
• page.phpSe utiliza para mostrar una única página (como “Acerca de nosotros” o “Contacto”).
• archive.phpSe utiliza para mostrar la lista de archivos de artículos (como categorías, etiquetas, autor, fecha de publicación).
• front-page.phpSe utiliza para definir la página principal del sitio web (si se ha configurado una página estática como tal).
• home.phpSe utiliza para mostrar la página de índice de los artículos del blog (si se ha configurado una página principal estática, esta plantilla muestra la lista de artículos más recientes).
• 404.phpSe utiliza para mostrar la página de error “404: No encontrado”.
• search.phpSe utiliza para mostrar los resultados de la búsqueda.
• functions.phpEste no es un archivo de plantilla, sino un archivo funcional para el tema, utilizado para agregar funciones, registrar menús, barras laterales, etc.

Etiquetas de plantilla y bucles

En los archivos de plantillas, utilizas con frecuencia las “etiquetas de plantilla”. Estas son funciones PHP proporcionadas por WordPress que se utilizan para generar contenido dinámico, como… bloginfo('name') Título del sitio web:the_title() Título del artículo:

El concepto más central es el “bucle de WordPress”. Se trata de una estructura de código PHP que se utiliza para verificar si la página actual contiene artículos (o listas de artículos) que deben ser mostrados, y luego los imprime de forma iterativa (en bucle). Un ejemplo básico de este bucle es el siguiente:

¿php si (tiene publicaciones()): mientras (tiene publicaciones()): the_post();?>
    <h2>¿¿¿php the_title();???</h2>
    <div class="entry-content">
        ¿¿php the_content(); ??
    </div>
¿¿¿php endwhile; else : ??
    <p>¿Lo siento, no hay publicaciones que coincidan con tus criterios?</p>
¿¿php endif; ?&gt;

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

La integración de las funciones y estilos del tema

functions.php Se trata del “cerebro” de tu tema; todas las funciones que no forman parte de las funcionalidades centrales de renderizado del tema deben ser añadidas aquí. Este archivo se carga automáticamente al iniciar el tema.

Función de registro de temas

En functions.php En WordPress, puedes expandir las funcionalidades mediante los diversos “ganchos” (Hooks) disponibles, como los ganchos de acciones y los ganchos de filtros. Para comenzar, generalmente es necesario declarar que el tema admite ciertas funcionalidades. Por ejemplo, para agregar miniaturas de artículos (imágenes destacadas) y soporte para menús:

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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup Montado en WordPress after_setup_theme En este gancho de acción, asegúrate de que se ejecute en el momento adecuado.

Introducir estilos y scripts

Los temas modernos deben cargar los archivos de estilo (CSS) y JavaScript de manera correcta. wp_enqueue_style() Y wp_enqueue_script() Las funciones deben añadirse a una cola, en lugar de escribirse directamente en los archivos de plantilla utilizando las etiquetas `` o ``. Las ventajas de hacer esto son la mejor gestión de las dependencias, la prevención de cargas repetidas y el cumplimiento de las mejores prácticas de WordPress.

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' );

`getstylesheet_uri()` apunta a tu… (El texto se queda incompleto en el original. ¿Podrías proporcionar más información para completar la traducción?) style.css El archivo `get_template_directory_uri()` devuelve la URL del directorio del tema actual.

Lecturas recomendadas Guía de introducción al desarrollo de temas de WordPress: empieza desde cero a crear tu tema personalizado。

Construir el diseño de la página y los componentes de las plantillas

Una página web estándar generalmente consta de una cabecera, contenido principal y una pie de pie. WordPress te recomienda dividir las partes reutilizables en archivos independientes y luego incorporarlas en la plantilla principal mediante funciones específicas.

Dividir los componentes de una plantilla

Crear header.php、footer.php Y sidebar.php. En header.php En este caso, debes incluir la sección completa y finalizarla con un contenedor de encabezado claro (como la etiqueta «»). footer.php En general, terminan con las etiquetas `` y ``.

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

Montar la página completa.

En la plantilla de la página (por ejemplo…) index.php、single.phpEn ese contexto, puedes utilizar las siguientes funciones para incorporar estos componentes:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php El archivo se carga si no existe. template-parts/content.phpEsto ha mejorado significativamente la reutilizabilidad y el mantenimiento del código.

resúmenes

Construir un tema para WordPress desde cero es un proceso de aprendizaje sistemático. Lo primero que necesitas hacer es establecer un entorno de desarrollo local adecuado y comprender la estructura básica de los archivos de un tema. Lo más importante es dominar la jerarquía de las plantillas de WordPress, ya que esta determina cómo se renderizan los diferentes elementos del contenido. functions.php Para crear un tema, puedes agregar funciones y características avanzadas a su diseño y seguir las mejores prácticas para gestionar los estilos y los scripts. Además, al dividir la página en componentes como el encabezado, el pie de página y los barras laterales, y utilizar las funciones proporcionadas por WordPress para ensamblarlos, podrás generar un código de tema claro y fácil de mantener. Siguiendo estos pasos, no solo crearás tu primer tema, sino que también sentarás las bases para desarrollar proyectos más complejos y profesionales en el futuro.

Lecturas recomendadas Introducción al desarrollo de temas de WordPress: construye tu primer tema personalizado desde cero。

FAQ Preguntas más frecuentes

¿Es necesario dominar PHP para desarrollar temas de WordPress?

Sí, PHP es el lenguaje de programación principal de WordPress. Los archivos de plantilla de los temas (como… index.php、page.php）y los archivos de funciones (functions.phpTodos son archivos PHP. Necesitas dominar la sintaxis básica de PHP, las estructuras de condición, los bucles y el uso de funciones para poder generar y manipular datos dinámicamente en WordPress.

Durante el desarrollo de temas, ¿cuál es la diferencia entre `page.php` y `front-page.php`?

page.php Se utiliza para renderizar las páginas individuales creadas en WordPress, como “Sobre nosotros” o “Contacto”, entre otras. front-page.php Es un modelo diseñado específicamente para renderizar la “página principal” de un sitio web. En la interfaz de administración de WordPress, en “Ajustes” -> “Lectura”, si eliges “Una página estática” y estableces la “página principal” como una página concreta, WordPress utilizará esa página de forma predeterminada. front-page.php Para mostrar esta página… front-page.php Si no existe, se utilizará el valor por defecto. page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

utilizar wp_enqueue_style() Es el método recomendado oficialmente por WordPress. Permite asegurar que los archivos de estilo se carguen solo una vez, incluso si varios plugins o temas hacen referencia al mismo archivo. También facilita la gestión de las dependencias entre los archivos de estilo (por ejemplo, si tus estilos dependen de un framework base). Además, es más compatible con los sistemas de caché y con los plugins, y permite que los temas derivados (subtemas) modifiquen fácilmente los estilos del tema principal.

¿Cómo puedo hacer que mi tema admita múltiples idiomas (internacionalización)?

Hacer que un tema sea compatible con múltiples idiomas implica principalmente dos pasos. En primer lugar, en todos los strings de texto del tema, se deben utilizar las funciones de traducción de WordPress, como… ()、_e() o esc_html()Y especifique dónde deben ubicarse. style.css Definido en chino Text DomainPor ejemplo:_e( 'Hello World', 'my-first-theme' )En segundo lugar, utiliza herramientas como Poedit para analizar el código de tu tema y generar lo necesario. .pot Los archivos de plantilla, a partir de los cuales los traductores pueden crear versiones en diferentes idiomas. .po Y después de la compilación. .mo Archivos: Coloca los archivos de idioma en la carpeta correspondiente al tema. /languages/ En el directorio, WordPress carga automáticamente las traducciones correspondientes según la configuración de idioma del sitio web.