El desarrollo de temas para WordPress es esencial para crear sitios web personalizados. A diferencia del uso de temas preexistentes, el desarrollo propio implica tener el control total sobre el aspecto, las funciones y el rendimiento del sitio web. Esta guía te guiará desde los conceptos básicos hasta personalizaciones avanzadas, abarcando las mejores prácticas y las herramientas clave para el desarrollo de temas modernos.
Fundamentos y estructura de temas de WordPress
Un tema de WordPress es, en esencia, un conjunto de archivos que se encuentran en/wp-content/themes/Los archivos que se encuentran dentro de las carpetas del directorio determinan conjuntamente la presentación frontal ( frontend) del sitio web.
El archivo que constituye el núcleo del tema
Cada tema debe contener dos archivos básicos:style.cssYindex.phpEntre ellos,style.cssNo solo sirve para definir los estilos, sino que las notas en el encabezado del archivo también se utilizan para indicar a WordPress la metainformación del tema.
Lecturas recomendadas ¿Cómo elegir y personalizar tu primer tema de WordPress?。
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/index.phpEs el archivo de plantilla principal del tema, que sirve como plantilla de respaldo por defecto para todas las solicitudes de página. La versión más simple de este archivo es la que se utiliza en casos básicos.index.phpPuede contener únicamente las funciones básicas que se utilizan para incluir la cabecera de WordPress, el ciclo principal y el pie de página.
<h2>¿¿¿php the_title();???</h2>Comprender la jerarquía de plantillas
WordPress utiliza una estructura jerárquica de plantillas inteligente para seleccionar el archivo de plantilla más adecuado para mostrar el contenido. Por ejemplo, al acceder a un artículo en particular, WordPress busca los archivos de plantilla en orden de prioridad:single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.phpDominar este conjunto de reglas es clave para un desarrollo eficiente.
Técnicas de desarrollo central y funciones
Se recomienda encarecidamente el uso de la arquitectura de “temas basados en bloques” para el desarrollo de temas para WordPress modernos; no obstante, el método tradicional de desarrollo, que se centra en plantillas y funciones PHP, sigue siendo una base esencial que es necesario dominar.
Utilizar WordPress para mostrar contenido de forma recurrente.
The LoopEs la estructura de código PHP en WordPress que se utiliza para recuperar y mostrar artículos de la base de datos. Es el núcleo de toda la salida de contenido.
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
// 模板标签在这里使用，如 the_title(), the_content()
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
<h2><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
<div class="entry-content">
¿¿php the_excerpt(); ??
</div>
</article>
<?php
}
} else {
echo '<p>暂无文章。</p>';
}
?>Integración de funciones de menú y barra lateral
A través deregister_nav_menus()En la función, puedes registrar múltiples ubicaciones para los menús de navegación dentro del tema, como el “Menú Principal” y el “Menú de Pie de Página”.
Lecturas recomendadas Guía del proceso completo de creación de un sitio web: cómo construir un sitio web profesional y de alto rendimiento desde cero.。
function my_theme_setup() {
register_nav_menus( array(
'primary' => __( '主要菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );En la plantilla, use
para agregar un salto de línea.wp_nav_menu()La función llama al menú que ha sido registrado. En el caso del panel lateral de las herramientas, es necesario utilizarlo primero.register_sidebar()Regístrese y luego utilícelo en el modelo.dynamic_sidebar()Se muestra.
Funciones temáticas y personalizaciones avanzadas
Una vez que se ha completado la construcción de la infraestructura, agregar funcionalidades y realizar personalizaciones detalladas a través de los archivos de funciones temáticas y los ganchos (hooks) de WordPress es clave para distinguir entre temas comunes y temas de calidad superior.
Añadir compatibilidad con temas mediante el archivo de funciones
functions.phpEl archivo es el “centro de control” de tu tema. Aquí, puedes…add_theme_support()funciones para declarar las distintas características compatibles con el tema.
function my_theme_features() {
// 支持文章和评论的Feed链接
add_theme_support( 'automatic-feed-links' );
// 支持文章特色图像
add_theme_support( 'post-thumbnails' );
// 支持HTML5标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 支持标题标签功能
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_features' );Usar ganchos de acciones y filtros
Los “ganchos” (Hooks) son el núcleo de la arquitectura de plugins de WordPress y también se utilizan ampliamente en el desarrollo de temas.add_action()Permite que ejecutes código (ganchos de acción) en momentos específicos.add_filter()Se te permite modificar los datos (ganchos de filtro).
Por ejemplo, puedes utilizar…wp_enqueue_scriptsSe utilizan ganchos de acción (action hooks) para cargar de manera segura los archivos de estilo y los scripts, evitando su inclusión directamente en la parte superior de las plantillas.
function my_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
// 加载自定义JavaScript文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );Otro ejemplo común es el uso de…excerpt_lengthUn filtro para modificar el número de palabras predeterminado del resumen de un artículo.
Lecturas recomendadas Guía completa para la creación de sitios web: el proceso completo y las técnicas fundamentales para construir un sitio web profesional desde cero.。
function my_custom_excerpt_length( $length ) {
return 30; // 将摘要字数改为30个词
}
add_filter( 'excerpt_length', 'my_custom_excerpt_length' );Prácticas modernas de desarrollo y optimización del rendimiento.
Con la popularización del editor de WordPress (Gutenberg) y el avance de las tecnologías frontales, las formas de desarrollar temas también se están actualizando constantemente.
Abrazar el tema de los bloques y la edición en todo el sitio web.
A partir de WordPress 5.9, los temas basados en bloques (Block Themes) se han convertido en la dirección futura. Estos temas utilizan principalmente archivos de plantillas HTML para su configuración y funcionamiento.theme.jsonLos archivos de configuración se utilizan para definir los estilos y las opciones globales de un sitio web, lo que reduce significativamente la cantidad de archivos de plantillas PHP necesarios. Crear uno de estos archivos es un paso esencial para mejorar la organización y la mantenibilidad del código.theme.jsonEn los archivos, puedes controlar de manera centralizada el panel de colores, el formato, los espacios entre elementos, etc.
{
"version": 2,
"settings": {
"color": {
"palette": [
{ "slug": "primary", "color": "#007cba", "name": "主色" },
{ "slug": "secondary", "color": "#1e1e1e", "name": "次色" }
]
}
}
}Asegurarse de que el tema sea responsive (adaptable a diferentes dispositivos) y tenga un buen rendimiento (funcione de manera eficiente).
Todos los temas modernos deben ser responsivos. Esto significa que tu CSS debe utilizar consultas de medios (Media Queries) para adaptarse a diferentes tamaños de pantalla. Al mismo tiempo, la optimización del rendimiento es de vital importancia.
Optimización de imágenes: usarthe_post_thumbnail()Cuando se utilizan dichas funciones y sus correspondientes herramientas, WordPress genera automáticamente imágenes adaptativas (respuestas a diferentes resoluciones y dispositivos).srcsetAtributos.
Gestión de scripts y estilos: como se mencionó anteriormente, utilicewp_enqueue_script()Ywp_enqueue_style()Gestione todo y añada los scripts en los lugares adecuados.asyncodeferAtributos.
Reducir las solicitudes HTTP: combinar los archivos CSS/JS y utilizar la caché del navegador.
resúmenes
El desarrollo de temas para WordPress comienza con la comprensión de la estructura básica de los archivos, luego se avanza hacia el dominio de las jerarquías de las plantillas, las funciones centrales y los ciclos de programación, hasta finalmente llegar al uso de herramientas y técnicas más avanzadas para personalizar y mejorar el aspecto y el funcionamiento de los temas.functions.phpEl proceso de extensión de funcionalidades mediante el uso de ganchos (hooks). A medida que el desarrollo avanza, es necesario prestar atención a prácticas modernas, como la arquitectura de temas basada en bloques (block-based theme architecture).theme.jsonConfigura tu tema de WordPress de manera que el diseño responsive y el rendimiento del sitio web siempre estén en primer lugar. Al seguir estos pasos y buenas prácticas, podrás crear un tema personalizado que sea funcional, tenga un código elegante y ofrezca una experiencia de usuario excepcional.
FAQ Preguntas más frecuentes
¿Qué conocimientos previos se necesitan para desarrollar un tema de WordPress?
Es necesario contar con conocimientos básicos de HTML y CSS para construir la estructura y el estilo de las páginas web. Además, se debe tener un conocimiento elemental de PHP, ya que el núcleo de WordPress y su sistema de plantillas están impulsados principalmente por este lenguaje de programación. La comprensión de JavaScript (especialmente para interactuar con los editores de bloques) también es cada vez más importante en el desarrollo de temas modernos.
¿Cuál es la diferencia entre un subtema y un tema principal? ¿Cuándo se debe utilizar un subtema?
El tema padre es un tema de WordPress completo y que se instala de manera independiente. El tema hijo hereda todas las funciones y estilos del tema padre, y te permite modificarlo y personalizarlo sin tener que alterar los archivos centrales (core) de este último. Cuando deseas realizar modificaciones personalizadas en un tema popular existente (como Twenty Twenty-Four) y, al mismo tiempo, mantener la capacidad de recibir actualizaciones del tema padre de manera segura, es recomendable crear y utilizar un tema hijo.
¿Cómo crear una plantilla de página personalizada en un tema?
Basta con crear un archivo PHP que comience con un comentario de encabezado de archivo específico. Por ejemplo, cree un archivo llamadotemplate-custom.phpEl archivo, con una nota agregada al principio del mismo./* Template Name: 全宽页面 */Después de guardar los cambios, al editar una página en el backend de WordPress, podrás ver y seleccionar el tema personalizado “Página de ancho completo” en el menú desplegable “Plantillas” de las “Propiedades de la página”.
¿Por qué los cambios que he realizado en mi tema no se muestran después de la actualización?
Esto suele ocurrir debido a los mecanismos de caché del navegador o de WordPress. Primero, intenta realizar un “refresco forzado” en el navegador (generalmente presionando Ctrl+F5 o Cmd+Shift+R). Si el problema persiste, verifica si estás utilizando algún plugin de caché o un servicio CDN, y prueba a borrar su caché. Además, asegúrate de que estás modificando el archivo del tema correcto y de que las modificaciones se han guardado.
¿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.
- ¿Por qué elegir WordPress como la plataforma preferida para crear sitios web?
- Análisis completo del proceso de creación de sitios web: Guía práctica técnica desde cero hasta la puesta en línea y recomendaciones para la optimización SEO
- Guía de iniciación para WordPress: Crea tu primer sitio web profesional desde cero
- Solución integral para la creación de sitios web: Guía completa de implementación desde cero hasta la puesta en marcha.
- Prólogo: ¿Por qué elegir WordPress para el desarrollo?
Español