Antes de comenzar a escribir el código, necesitas un entorno de desarrollo local. Esto generalmente incluye un servidor local (como XAMPP, MAMP o Local by Flywheel), PHP, una base de datos MySQL y un editor de código (como VS Code o Sublime Text). Asegúrate de que la versión de PHP que utilizas cumpla con los requisitos oficiales de WordPress.
A continuación, en el directorio de instalación de WordPress:wp-content/themesDentro de la carpeta, cree una nueva carpeta, por ejemplo…my-first-themeEsta carpeta contendrá todos los archivos relacionados con tu tema.
Un tema básico de WordPress solo necesita dos archivos:style.cssYindex.phpPrimero, crea…style.cssSe debe crear un archivo y agregar una nota con información sobre el tema en la parte superior del mismo; esto es necesario para que WordPress pueda reconocer el tema.
Lecturas recomendadas Temas de WordPress personalizados: una guía completa para crear el aspecto de un sitio web exclusivo desde cero.。
/*
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
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Luego, crea el más simple de todos.index.phpEl archivo contiene, por el momento, solo un esqueleto HTML y la frase “Hello World”.
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
¿
</head>
<body no numeric noise key 1001>
<h1>¡Hola, Mundo! Este es mi primer tema (tema de diseño para un sitio web).</h1>
¿php_footer();?>
</body>
</html>Ahora, inicia sesión en el panel de administración de tu WordPress y ve a “Apariencia” -> “Temas”. Allí deberías ver aparecer “My First Theme” y podrás activarlo. Aunque por el momento sus funciones son muy básicas, has creado con éxito un tema que es reconocido por WordPress.
Crear el archivo de plantilla central para el tema
Un tema completo está compuesto por una serie de archivos de plantilla que controlan la visualización de las diferentes partes del sitio web. Comencemos construyéndolo a partir de los archivos más importantes.
Separar el encabezado (header) del pie de página (footer).
Separar el código repetitivo (como el contenido de la cabecera y el pie de página) en archivos independientes es el primer paso esencial. Crear estos archivos ayuda a mantener el código organizado y facilita su mantenimiento y actualización en el futuro.header.phpEl archivo contiene información proveniente de…<!DOCTYPE html>Hasta que se abra.<body>Todo el contenido que se encuentra antes de la etiqueta.
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
¿
</head>
<body no numeric noise key 1003>
¿php_body_open();?>
<header id="masthead" class="site-header">
<h1 class="site-title"><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
</header>Crearfooter.phpEl archivo contiene el contenido del pie de página y las etiquetas de cierre.
Lecturas recomendadas Desde cero, cree su tema personal para WordPress: una guía completa sobre arquitectura, diseño y desarrollo.。
<footer id="colophon" class="site-footer">
<p>© ¿¿¿ ¿¿¿</p>
</footer>
¿php_footer();?>
</body>
</html>Luego, modifica el tuyo.index.phpDocumentos, usandoget_header()Yget_footer()Se utilizan funciones para introducir estas partes.
¿¿php get_header();??
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 文章内容将在这里显示
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>No content found.</p>';
endif;
?>
</main>
¿¿¿php get_footer();???Crear un ciclo de artículos y una barra lateral
Lo que está arriba…index.phpYa se incluye el ciclo principal de WordPress (The Loop), que se utiliza para recuperar y mostrar la lista de artículos. A continuación, se creará…sidebar.phpVamos a agregar una barra lateral.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Para introducir una barra lateral en la página, necesitas…index.phpAjuste la estructura del área principal de contenido antes y después, y utilice…get_sidebar()Función. Además, es necesario crear una.functions.phpSe necesita un archivo para registrar esta área de herramientas del sidebar.
Implementar diseño y estilos adaptables
El diseño responsive asegura que tu tema se muestre de manera adecuada en una variedad de dispositivos. Comenzaremos con la estructura básica de CSS y las consultas de medios (media queries).
Configurar estilos básicos y el modelo de cajas flexibles
En tu…style.cssDebajo de las notas sobre la información del tema, se deben agregar instrucciones para restablecer el estilo y el diseño básico. Utilizar Flexbox para crear un diseño responsive (que se adapte a diferentes pantallas) es un buen punto de partida.
/* 基础重置与样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/* 主要布局容器 */
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1;
padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
background-color: #f8f9fa;
padding: 1rem 2rem;
text-align: center;
}Añadir consultas de medios (media queries).
Las consultas de medios son el núcleo del diseño responsive. Hemos añadido un punto de interrupción (breakpoint) sencillo que, cuando la anchura de la pantalla es inferior a 768 píxeles (lo que corresponde a dispositivos tablet típicos o menores), cambia el diseño del área de contenido y la barra lateral de estar uno al lado del otro a estar uno encima del otro.
Lecturas recomendadas Desarrollo de temas para WordPress: Una guía completa desde los principios hasta la maestría。
Primero, modifique la estructura HTML.index.phpSe utiliza un contenedor para envolver el contenido principal y la barra lateral.
<div class="content-area">
<main id="primary" class="site-main">
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?>
</div>Luego, agrega los estilos correspondientes en el CSS.
.content-area {
display: flex;
flex-wrap: wrap;
}
.site-main {
flex: 3;
min-width: 300px;
}
#secondary {
flex: 1;
min-width: 250px;
padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
#secondary {
padding-left: 0;
padding-top: 2rem;
}
.site-header, .site-footer, .site-main {
padding: 1rem;
}
}Mejorar las funcionalidades de un tema a través de functions.php
functions.phpEl archivo es el “cuarto de máquinas” de tu tema, utilizado para agregar funcionalidades, registrar características, así como para introducir scripts y estilos de manera segura.
Registro del menú de navegación y la zona de herramientas adicionales
Enfunctions.phpEn chino, se usaregister_nav_menusFunción para registrar la posición de los elementos de navegación del tema.
esc_html__( 'Primary Menu', 'my-first-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-first-theme' ),
) );
// 注册侧边栏小工具区域
register_sidebar( array(
'name' => esc_html__( 'Main Sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>Después de registrarte, podrás…header.phpYfooter.phpEn el uso chinowp_nav_menu()Ahora se puede utilizar una función para llamar a estos menús.
Cargar estilos y scripts de manera segura
Nunca debes crear enlaces directos (hard links) a archivos CSS o JavaScript dentro de los archivos de plantillas. En su lugar, es recomendable utilizar otros métodos para incluirlos en las páginas web.wp_enqueue_style()Ywp_enqueue_script()Función, y a través de…wp_enqueue_scriptsSe utilizan “ganchos” (hookes) para cargarlos.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载一个自定义JavaScript文件（如果需要）
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Cree más archivos de plantillas para enriquecer las funcionalidades.
Actualmente, solo tenemos un tema.index.phpSe utilizará en todas las páginas. El nivel de jerarquía de los templates de WordPress determina cómo se buscan templates más específicos para diferentes tipos de páginas. Creámos algunos.
Artículo individual y plantilla de página
Crearsingle.phpSe utiliza para mostrar un único artículo.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'single' );
// 显示文章导航
the_post_navigation();
// 如果评论开启，则加载评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Crearpage.phpSe utiliza para mostrar páginas estáticas. Su estructura es similar a…single.phpSimilar, pero generalmente no muestra metadatos como categorías o etiquetas.
Para seguir el principio DRY (Don’t Repeat Yourself, es decir, ‘No te repitas”), podemos extraer las partes del contenido que se muestran en los artículos y páginas y colocarlas en componentes de plantilla (Template Parts). Para ello, crea un directorio en la raíz del tema.template-partsCrea una carpeta y, dentro de ella, crea otros archivos o subcarpetas.content-single.phpYcontent-page.php。
Plantilla de la página de archivo de artículos
Creararchive.phpSe utiliza para mostrar páginas de archivo que contienen información sobre categorías, etiquetas, autores, etc. Puede ser reutilizado.index.phpEl ciclo se encuentra dentro del texto, pero generalmente se muestra el título del archivo en la parte superior.
¿¿php get_header();??
<main id="primary" class="site-main">
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation(); // 显示上一页/下一页导航
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>
¿¿¿¿php get_sidebar();???
¿¿¿php get_footer();???resúmenes
A través de esta guía, has completado la creación de un tema para WordPress que es básico pero completo y compatible con dispositivos móviles. Has comprendido la estructura básica de los archivos del tema, has aprendido a separar las partes de las plantillas (cabecera, pie de página, barra lateral), has implementado los ciclos esenciales de WordPress y has creado un diseño responsive utilizando consultas de medios (media queries) en CSS. Además, has adquirido conocimientos sobre cómo…functions.phpAprenderá cómo registrar menús, herramientas adicionales y recursos para su carga segura en el sitio web, y comenzará a familiarizarse con el potente sistema de niveles de plantillas de WordPress.
El desarrollo de temas es un proceso que continúa profundizándose. A continuación, puedes explorar más archivos de plantillas (como…).404.php、search.php），学习使用WordPress的Body Class和Post Class来增加样式控制的精细度，深入研究主题定制器（Customizer）API为用户提供可视化设置选项，甚至尝试将Sass或ES6等现代前端工作流集成到你的开发过程中。
FAQ Preguntas más frecuentes
¿Cuántos archivos son necesarios, como mínimo, para un tema de WordPress?
Un tema minimalista que pueda ser reconocido por WordPress solo necesita dos archivos:style.cssYindex.php。style.cssLa cabecera debe contener la anotación de información sobre el tema correcta.index.phpEntonces, se utilizará como el modelo predeterminado para todas las páginas.
¿Cómo hacer que mi tema admita traducciones en varios idiomas?
Tienes que hacer dos cosas. Primero, en…style.cssLas notas de cabecera y todos los lugares donde se utiliza el texto (por ejemplo, a través de…)__()o_e()La función utiliza un dominio de texto (Text Domain). En esta guía, el dominio de texto que utilizamos es “my-first-theme”. A continuación, se utiliza una herramienta como Poedit para crear los archivos .pot y luego se traducen a archivos .po y .mo, los cuales se colocan en la carpeta del tema correspondiente./languagesEn el directorio. Finalmente, enfunctions.phpEn el uso chinoload_theme_textdomain()Traducción de “Función de carga” (Function loading).
¿Por qué mis estilos personalizados o scripts no están funcionando?
Esto suele ocurrir porque los elementos no se cargan en el orden recomendado por WordPress. Por favor, asegúrate de que estés siguiendo los métodos adecuados para gestionar el proceso de carga de contenidos en tu sitio web.functions.phpEn el archivo, se utiliza…wp_enqueue_style()Ywp_enqueue_script()Funciones, y montarlas enwp_enqueue_scriptsSe pueden agregar estilos y scripts mediante los “ganchos” (hooks). Los enlaces que se escriben directamente en el archivo de plantilla pueden ser ignorados por los plugins de caché o, en algunos casos, cargarse en el orden incorrecto.
¿Cómo puedo agregar soporte para un logotipo personalizado a mi tema?
Esta es una función muy común. Necesitas…functions.phpEn la función de configuración del tema del archivo (a través de…)after_setup_theme(Agenda para la ejecución de los “ganchos”); agregar.add_theme_support( 'custom-logo' )Puedes ingresar un array de parámetros para definir las dimensiones y otros atributos del Logo. Una vez que se hayan añadido estos parámetros, los usuarios podrán cargar el Logo en la sección “Apariencia” -> “Personalizado” -> “Identidad del sitio”. En el lado front-end, puedes utilizar…the_custom_logo()Se utiliza una función para mostrarlo.
¿Cómo depurar errores en PHP durante el proceso de desarrollo?
Se recomienda utilizar un entorno de desarrollo local.wp-config.phpActiva el modo de depuración de WordPress en el archivo.WP_DEBUGLos constantes se establecen entrueTambién puedes configurar varios elementos al mismo tiempo.WP_DEBUG_LOGYWP_DEBUG_DISPLAYPermite controlar si los errores se registran en un archivo de registro o se muestran en la pantalla. Recuerde que, antes de lanzar el producto al mercado, asegúrese de desactivar el modo de depuración.
¿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.
- Desarrollo de temas para WordPress: Desde los principios hasta la maestría: Guía completa para crear sitios web personalizados
- Desarrollo de temas para WordPress desde cero: Crea una interfaz web única y diferenciada
- 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
Español