Los temas de WordPress son la esencia de la apariencia y las funcionalidades de un sitio web. A través del desarrollo personalizado, los desarrolladores pueden controlar completamente la lógica de diseño, el rendimiento y la extensión de las funcionalidades del sitio, liberándose de las limitaciones de los temas de terceros. Esta guía te guiará desde la estructura de directorios más básica para construir gradualmente un tema personalizado de WordPress que sea completo en funcionalidades y cumpla con los estándares de desarrollo modernos. Dominarás los conceptos fundamentales de la arquitectura de un tema, la lógica de organización de los archivos de plantilla y aprenderás cómo insertar contenido dinámico mediante funciones PHP y ganchos (hooks).
Fundamentos del desarrollo temático y preparación del entorno
Antes de comenzar a escribir el código, es de vital importancia establecer un entorno de desarrollo adecuado y comprender la estructura básica del tema en cuestión. Esto asegurará que tu trabajo de desarrollo sea eficiente y que cumpla con las normas de la comunidad de WordPress.
Establecer un entorno de desarrollo local
Recomendamos utilizar entornos de desarrollo locales, como Local, XAMPP o MAMP. Estos herramientas permiten instalar PHP, MySQL y Apache/Nginx con un solo clic. Crea una nueva instalación de WordPress en dicho entorno para usarla como plataforma de prueba para tus temas.
Lecturas recomendadas Guía para el desarrollo de temas para WordPress: Cómo crear temas profesionales desde cero。
Estructura de directorio estándar para comprender un tema
Un tema simplificado al máximo que sea reconocido por WordPress solo necesita dos archivos:style.css Y index.phpSin embargo, un directorio de temas personalizados bien estructurado debe organizar de manera adecuada los diferentes tipos de archivos. La estructura típica de un directorio de temas es la siguiente:
your-theme/
├── style.css (必需，主题样式表和信息头)
├── index.php (必需，主模板文件)
├── functions.php (主题功能增强文件)
├── header.php (头部模板)
├── footer.php (底部模板)
├── sidebar.php (侧边栏模板)
└── assets/ (静态资源目录)
├── css/
├── js/
└── images/Crear el archivo de la hoja de estilo principal
style.css Los archivos no son solo archivos de estilo, sino también el “dNI” de un tema. El bloque de comentarios que se encuentra al principio del archivo contiene toda la metainformación necesaria para que WordPress reconozca el tema.
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://example.com
Description: 一个从零开始开发的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/Entre ellos,Text Domain Se utiliza para la internacionalización y es el identificador que debe emplearse obligatoriamente en las llamadas posteriores a la función de traducción.
Construir un sistema de archivos de plantillas centrales
WordPress utiliza un sistema de niveles de plantillas para determinar qué archivo de plantilla se debe utilizar para cada tipo de página. La creación de estos archivos es el trabajo central en el desarrollo de temas.
Crear un archivo de plantilla básico.
Primero, cree las plantillas para la parte superior y la parte inferior que se dividirán. Archivo header.php Debería incluir el encabezado del documento HTML.En las áreas y en la parte inicial del cuerpo de la página, se suele utilizar… wp_head() Funciones para permitir que los plugins y las funciones principales inyecten código.
Lecturas recomendadas Desarrollo de temas para WordPress: Desde los principios hasta la maestría: Una guía completa para crear sitios web personalizados。
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
¿
</head>
<body no numeric noise key 1003>
¿php_body_open();?>
<header>
<h1><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
</header>papeles footer.php incluye el contenido del pie de página y wp_footer() La función ha finalizado.
<footer>
<p>© ¿¿¿ ¿¿¿</p>
</footer>
¿php_footer();?>
</body>
</html>Implementar el archivo de plantilla principal
index.php Como archivo de retroceso para el modelo final, su función principal es incorporar las partes superior e inferior del diseño y crear el ciclo principal que se utiliza para mostrar la lista de artículos.
¿¿php get_header();??
<main>
¿
¿
<article>
<h2><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
<div>¿¿php the_excerpt(); ??</div>
</article>
<p>No hay artículos disponibles.</p>
¿¿php endif; ?>
</main>
¿¿¿¿php get_sidebar();???
¿¿¿php get_footer();???Desarrollar plantillas de páginas específicas.
De acuerdo con la estructura jerárquica de los templates, puedes crear templates más específicos para páginas concretas. Por ejemplo, puedes crear… single.php Se utiliza para mostrar un único artículo.page.php Se utiliza para mostrar páginas independientes.archive.php Se utilizan para mostrar los archivos organizados por categorías. WordPress llama automáticamente a estos templates más específicos con prioridad.
Mejorar las funciones de un tema a través de archivos de funciones.
functions.php El archivo corresponde a tu tema “Centro de Control”, y sirve para agregar funciones, registrar menús, incorporar imágenes especiales, etc., sin necesidad de modificar los archivos principales.
Añadir soporte básico para temas.
En functions.php En chino, se usa add_theme_support() Se utiliza una función para declarar las funcionalidades soportadas por el tema. Este es un punto de partida estándar.
function my_custom_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
// 支持HTML5标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Área de herramientas en el sidebar de registro
utilizar register_sidebar() función para definir áreas de widgets, permitiendo a los usuarios añadir contenido dinámicamente desde el panel de administración.
Lecturas recomendadas Introducción al desarrollo de temas para WordPress: Crea tu primer tema personalizado desde cero。
function my_custom_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );Introducir scripts y estilos de manera segura
Nunca enlaces directamente archivos CSS y JS de forma rígida en la plantilla. Se debe usar wp_enqueue_style() Y wp_enqueue_script() Función, y luego montarla. wp_enqueue_scripts En el gancho.
function my_custom_theme_scripts() {
// 引入主题主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入自定义JavaScript文件
wp_enqueue_script( 'my-custom-theme-script', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );Implementar etiquetas de plantilla y bucles
Las etiquetas de plantilla son una serie de funciones PHP proporcionadas por WordPress que se utilizan para generar contenido dinámicamente en las plantillas, como títulos de artículos, contenido, fechas, etc. Por lo general, se utilizan dentro del bucle principal.
Comprender y utilizar el bucle principal
El bucle principal es el concepto más central en los templates de WordPress, y utiliza variables globales. $wp_query Es necesario recorrer los artículos que deben ser mostrados en la página actual. La estructura básica es la siguiente:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- 在这里使用模板标签 -->
<?php endwhile; else : ?>
<!-- 没有找到文章时的内容 -->
<?php endif; ?>Al realizar la llamada… the_post() Después de eso, los datos globales de los “artículos” están configurados, y se pueden utilizar diversas etiquetas de plantillas.
Utilizar las etiquetas de plantillas comunes para generar el contenido.
Dentro del bucle, puedes llamar a una serie de funciones para mostrar la información del artículo.
- the_title()Título del artículo:
- the_permalink()Generar un enlace permanente para el artículo.
- the_content(): Imprime el contenido completo del artículo.
- the_excerpt(): Genera un resumen del artículo.
- the_post_thumbnail(): Generar la imagen destacada del artículo.
- the_date() Y the_author()Fecha de publicación y autor.
Implementar la navegación de paginación de artículos
Después del final del bucle en la lista de artículos (como la página de inicio o la página de archivo), es necesario proporcionar una navegación de paginación. Se puede usar the_posts_pagination() Una función para mostrar una lista de enlaces de paginación atractiva y accesible.
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( '上一页', 'my-custom-theme' ),
'next_text' => __( '下一页', 'my-custom-theme' ),
) );resúmenes
Al crear con los encabezados de información correctos style.css y básico index.php Para empezar, ya has recorrido el camino fundamental para crear un tema personalizado de WordPress. Hemos profundizado en el sistema de jerarquía de plantillas, desglosado la header.php Y footer.php Para mejorar la reutilizabilidad del código y, a través de… functions.php El archivo ha incorporado de manera sólida la funcionalidad de temas y los recursos necesarios. Comprender y utilizar correctamente el “ciclo principal” (main loop) y las “etiquetas de plantilla” (template tags”) es clave para mostrar contenido dinámico en la página. Siguiendo estos pasos y buenas prácticas, no solo has creado un tema funcional, sino que también has establecido una base de proyecto que es fácil de mantener, expandir y que cumple con los estándares de WordPress.
FAQ Preguntas más frecuentes
¿Es necesario dominar PHP para desarrollar temas para WordPress?
Sí, PHP es una habilidad esencial que se debe dominar. El núcleo de WordPress está escrito en PHP; todos los archivos de plantillas, la lógica de funcionamiento y la interacción con la base de datos dependen de PHP. HTML, CSS y JavaScript se utilizan para construir la interfaz gráfica y las interacciones del usuario, pero PHP es la base que permite incorporar datos dinámicos en esa interfaz.
¿Por qué mi tema no aparece en el panel de administración o no se puede activar?
La causa más común es… style.css El formato del comentario de encabezado con la información del tema en la parte superior del archivo es incorrecto, faltan datos necesarios o hay un problema con la codificación del archivo. Por favor, rellena estrictamente la información del encabezado conforme a la normativa y asegúrate de que la codificación del archivo sea UTF-8 sin BOM. Además, comprueba si la carpeta del tema está colocada correctamente en/wp-content/themes/En el directorio.
¿Cuál es la diferencia entre el archivo functions.php y los plugins?
functions.php Las funciones del archivo están profundamente vinculadas al tema actual; cuando se cambie de tema, estas funciones dejarán de funcionar. Es adecuado para añadir funciones estrechamente relacionadas con la apariencia y el diseño del tema (como registrar menús, definir áreas de widgets y añadir opciones de compatibilidad del tema). En cambio, las funciones proporcionadas por los plugins suelen ser independientes del tema y siguen estando disponibles después de cambiarlo, por lo que son adecuadas para añadir funciones de uso general (como formularios de contacto, optimización SEO y caché).
¿Cómo puedo hacer que mi tema admita múltiples idiomas (internacionalización)?
Necesitas utilizar las funciones de internacionalización de WordPress para envolver todo el texto dirigido al usuario. En el código, usa () o _e() y otras funciones, y especifica en style.css Definido en chino Text DomainPor ejemplo:echo ( ‘阅读更多’, ‘my-custom-theme’ );Luego, utiliza herramientas como Poedit para generar el contenido deseado..potArchivo de plantilla de traducción para que los traductores lo creen.poY.moArchivos de idioma.
¿Se deberían modificar directamente los archivos de plantillas principales durante el desarrollo?
Nunca modifiques directamente los archivos principales de WordPress, ni tampoco los archivos principales de cualquier otro tema padre que estés utilizando (a menos que estés creando un tema hijo). Cualquier modificación se sobrescribirá en la próxima actualización. El desarrollo personalizado debe realizarse siempre en tu propio tema independiente o en un tema hijo; este es un principio básico del desarrollo en WordPress.
¿Qué sigue, qué sigue?
Lectura ampliada y conocimientos prácticos
Los siguientes están relacionados con el tema de este artículo y son adecuados para una lectura más profunda. A menudo es mejor priorizar empezando por el artículo que más se acerque a su problema actual y ampliando gradualmente a los temas circundantes.
- Guía para el desarrollo de temas para WordPress: Cómo crear sitios web personalizados desde cero
- Guía completa para el desarrollo de temas para WordPress: Un tutorial práctico para dominar el tema desde cero
- Guía completa para el desarrollo de temas para WordPress: Cómo crear plantillas de sitios web de nivel profesional desde cero
- Desarrollo práctico de temas para WordPress: Construcción de sitios web empresariales responsive desde cero
- Construcción de temas para WordPress sin código: Una guía completa para dominarlo desde cero
Español