Preparación y configuración del entorno.
Antes de comenzar a escribir código, necesitas un entorno de desarrollo adecuado. Esto incluye un entorno de servidor local (como XAMPP, MAMP o Local by Flywheel) así como un editor de código (como VS Code, PhpStorm o Sublime Text). Asegúrate de que tu entorno local soporte PHP (versión 7.4 o superior) y MySQL/MariaDB.
A continuación, necesitarás acceder al directorio de instalación de WordPress.wp-content/themesCrea una nueva carpeta dentro de la carpeta existente; esta nueva carpeta se convertirá en tu directorio principal para los temas relacionados con tu proyecto. Por ejemplo, puedes crear una carpeta llamada…my-first-themeEs la carpeta correspondiente. Aquí se encuentran todos tus archivos relacionados con los temas; es, en esencia, el “hogar” de estos archivos.
Los archivos más básicos de un tema para WordPress son solo dos:style.cssYindex.phpEntre ellos,style.cssNo se trata solo de una hoja de estilo, sino también del “dNI” del tema; esta información es transmitida a WordPress a través de las notas en la parte superior del archivo, indicando el nombre del tema, el autor, la descripción y otros metadatos.
Lecturas recomendadas Análisis en profundidad del desarrollo de temas de WordPress: una guía de técnicas básicas desde el nivel principiante hasta el avanzado.。
Crear un archivo de información sobre el tema
En la carpeta de temas de tu proyecto, crea…style.cssArchivo, e ingrese la siguiente información básica:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习WordPress主题开发的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Esta nota es necesaria. Es precisamente a través de la lectura de estos datos que WordPress funciona.Theme NameEsta línea se utiliza para identificar y mostrar tu tema en la lista de temas del backend. Otra información, como…Text DomainEsto se hace para preparar el proceso de internacionalización (traducción).
Crear el archivo de plantilla principal
A continuación, crearemos lo más básico.index.phpEl archivo… Incluso si está vacío en estos momentos, siempre que…style.cssLa información está completa, por lo que tu tema aparecerá en la lista de “Temas” dentro de la sección “Apariencia” en el panel de administración de WordPress y podrás activarlo. Ahora, vamos a…index.phpEscribe la estructura HTML más simple posible para mostrar el título del blog y el contenido del artículo.
<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
¿
</head>
<body no numeric noise key 1011>
<header>
<h1><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
<p>¿¿php bloginfo( 'description' );?></p>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<article>
<h2><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
<div>¿¿php the_content(); ??</div>
</article>
<?php
endwhile;
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main>
<footer>
<p>© ¿¿¿ ¿¿¿</p>
</footer>
<?php wp_foot(); ?>
</body>
</html>Este código utiliza varias funciones y componentes del núcleo de WordPress.模板标签Por ejemplobloginfo()、the_title()、the_content()Funciónwp_head()Ywp_foot()Son los “ganchos” clave que permiten que el núcleo de WordPress, los plugins y otros scripts inserten el código necesario en la parte superior e inferior de la página.
Comprender los niveles de las plantillas y crear plantillas principales
WordPress utiliza un conjunto de herramientas y funciones denominado…模板层级Las reglas determinan qué archivo de plantilla se debe utilizar para renderizar una solicitud de página específica. Este es uno de los conceptos más fundamentales en el desarrollo de temas. En resumen, WordPress comienza buscando en el archivo de plantilla más específico; si no se encuentra, recurre a uno más general, y finalmente, si eso tampoco es posible, utiliza el archivo por defecto.index.php。
Lecturas recomendadas Guía para principiantes sobre el desarrollo de temas para WordPress: Cómo crear su primer tema personalizado desde cero。
Crear una plantilla para la página de detalles del artículo
Cuando un usuario accede a un artículo individual, WordPress busca primero…single-post.phpSi no existe, entonces se utiliza.single.phpY finalmente, viene lo último.index.phpVamos a crear uno.single.phpEsto se hace específicamente para controlar la forma en que se muestra un artículo individual.
¿¿php get_header();??
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
<div class="entry-meta">
Publicado el: | Por:
</div>
</header>
<div class="entry-content">
¿¿php the_content(); ??
</div>
<footer class="entry-footer">
分类：
</footer>
</article>
<?php
// 上一篇/下一篇导航
the_post_navigation();
// 评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
¿¿¿¿php get_sidebar();???
¿¿¿php get_footer();???Este template incorpora tres componentes de plantilla importantes:get_header()、get_sidebar()Yget_footer()Se utilizan respectivamente para introducir…header.php、sidebar.phpYfooter.phpLos archivos son clave para la reutilización de código y el diseño modular.
Crear una plantilla de página
Para las páginas estáticas (como “Sobre nosotros”), WordPress busca…page.phpCrearpage.phpSu estructura es similar a…single.phpSimilar, pero generalmente no muestra metadatos como categorías, etiquetas ni hora de publicación.
¿¿php get_header();??
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header>
<div class="entry-content">
¿¿php the_content(); ??
</div>
</article>
<?php
endwhile;
?>
</main>
¿¿¿¿php get_sidebar();???
¿¿¿php get_footer();???Implementar la funcionalidad y el estilo de un tema
Un tema completo no solo necesita archivos de plantilla, sino también que se debe implementar de manera adecuada a través de otros componentes o procedimientos específicos.functions.phpEl archivo se utiliza para agregar funciones, registrar menús, áreas de herramientas, y realizar otras operaciones relacionadas.style.cssAñadir estilo.
Archivo de funciones de funcionalidades temáticas
Cree un archivo en la carpeta raíz de su tema.functions.phpEste archivo se carga automáticamente al iniciar el tema y sirve para almacenar todas las funciones PHP personalizadas y los puntos de enlace (hooks).
<?php
/**
* 我的第一个主题的功能函数
*/
// 添加主题支持功能
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像（缩略图）功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单
register_nav_menus(
array(
'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
)
);
// 添加HTML5标记支持
add_theme_support(
'html5',
array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
'style',
'script',
)
);
}
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' ),
'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_first_theme_widgets_init' );
// 加载主题样式表和脚本
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载通用CSS
wp_enqueue_style( 'my-first-theme-main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );
// 加载通用JavaScript
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Añadir estilos básicos
Ahora, permítanos continuar con…style.cssDespués del encabezado de los comentarios, añade algunos códigos CSS básicos para embellecer tu tema.
Lecturas recomendadas Guía definitiva para el desarrollo de temas para WordPress: Cómo crear un tema personalizado para un sitio web de WordPress desde cero。
/* 基础重置与排版 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
header {
border-bottom: 2px solid #0073aa;
margin-bottom: 40px;
padding-bottom: 20px;
}
.entry-title {
color: #222;
}
.site-main {
float: left;
width: 70%;
}
/* 侧边栏样式 */
.widget-area {
float: right;
width: 25%;
padding-left: 5%;
}
/* 页脚样式 */
footer {
clear: both;
border-top: 1px solid #ddd;
margin-top: 60px;
padding-top: 20px;
text-align: center;
color: #666;
}Modularidad y componentes de plantilla
Para mejorar la mantenibilidad y reutilizabilidad del código, WordPress recomienda dividir las partes repetidas de una página (como el encabezado, el pie de página y los barras laterales) en archivos de componentes de plantilla separados.
Crear componentes para el encabezado y el pie de página
Crearheader.phpIncluye desde...<!DOCTYPE html>Desde el inicio hasta el momento en que se abre…<main>Todo el contenido que se encuentra antes de la etiqueta.
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
¿php_body_open();?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary">Ir al contenido principal</a>
<header id="masthead" class="site-header">
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) :
?>
<h1 class="site-title"><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home">¿¿php bloginfo( 'name' ); ??</a></h1>
<?php
else :
?>
<p class="site-title"><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home">¿¿php bloginfo( 'name' ); ??</a></p>
<?php
endif;
$my_first_theme_description = get_bloginfo( 'description', 'display' );
if ( $my_first_theme_description || is_customize_preview() ) :
?>
<p class="site-description"><?php echo $my_first_theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
¿¿php endif; ?>
</div>
<nav id="site-navigation" class="main-navigation">
'primary',
'menu_id' => 'primary-menu',
)
);
?>
</nav>
</header>
<div id="content" class="site-content">En consecuencia, se crea…footer.phpIncluye</div><!-- #content -->Todo el contenido que sigue.
</div><!-- #content -->
<footer id="colophon" class="site-footer">
<div class="site-info">
<p><?php printf( esc_html__( '主题：%1$s', 'my-first-theme' ), '<a href="https://example.com/">我的第一个主题</a>' ); ?></p>
</div>
</footer>
</div><!-- #page -->
¿php_footer();?>
</body>
</html>Crearsidebar.phpPara mostrar la zona de los widgets.
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) :
?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php
endif;
?>Una vez que hayas completado estos componentes, podrás utilizarlos.get_header()、get_footer()Yget_sidebar()Las funciones se invocan de manera sencilla y concisa en todos los archivos de plantillas.
resúmenes
A través de esta guía, has completado todo el proceso de construcción de un tema básico para WordPress desde cero. Has aprendido cómo configurar el entorno de desarrollo y cómo crear los archivos necesarios para el tema.style.cssYindex.php…) y comprendí en profundidad el sistema de niveles de plantillas de WordPress, lo que me permitió crear plantillas específicas para diferentes tipos de páginas (como artículos y páginas generales).single.php， page.phpHas aprendido cómo hacerlo a través de…functions.phpEl archivo incorpora funciones esenciales relacionadas con el tema, como un menú de registro, herramientas adicionales e imágenes destacadas de soporte. Finalmente, se aplicó el enfoque de desarrollo modular, dividiendo la cabecera, el pie de página y la barra lateral en componentes de plantilla reutilizables.header.php， footer.php， sidebar.phpEsto ha mejorado significativamente la mantenibilidad del código. Este es solo un comienzo; a partir de aquí, puedes continuar explorando tipos de artículos personalizados, opciones de temas avanzadas, diseño responsive e interacciones en JavaScript para construir gradualmente un tema para WordPress que sea potente y de diseño profesional.
FAQ Preguntas más frecuentes
¿Por qué mi tema no se muestra en el backend?
Asegúrate de que la carpeta de temas esté colocada en el lugar correcto.wp-content/themes/En el directorio, y dentro de él…style.cssEl encabezado del archivo contiene un bloque de comentarios con formato correcto, en particular…Theme Name:Esta línea debe existir y ser correcta. El código de codificación del archivo debe ser UTF-8 sin BOM (Byte Order Mark).
¿Cómo puedo agregar soporte para un logotipo personalizado a mi tema?
En tu…functions.phpLos documentos demy_first_theme_setupEn la función, añada una línea de código:add_theme_support( 'custom-logo' );Después de agregarlo, los usuarios podrán cargar y configurar su logotipo en la sección “Apariencia” -> “Personalizado” -> “Identidad del sitio” del panel de administración de WordPress. Necesitas…header.phpEn el uso chinothe_custom_logo()Función para generar y mostrar el Logo.
¿Qué hago si la página web muestra una pantalla en blanco después de modificar el archivo functions.php?
Esto generalmente significa…functions.phpExiste un error de sintaxis PHP en el archivo. WordPress se detendrá en su ejecución debido a este error fatal. Necesitas acceder al servidor a través de FTP o del administrador de archivos para corregir el problema.functions.phpRenombrar (por ejemplo, cambiar a…)functions.php.bakEs necesario restaurar el acceso al sitio web para que los usuarios puedan utilizarlo de nuevo. Luego, revisa y corrige tu código, y sube de nuevo los archivos correctos. Realizar pruebas en el entorno de desarrollo local es una buena práctica para evitar este tipo de problemas.
¿Cómo hacer que mi tema admita traducciones en varios idiomas?
Ya lo has hecho.style.cssEstá configurado en…Text Domain(Campo de texto), y enfunctions.phpEn la cadena de texto se utilizó…esc_html__( ‘文本’， ‘my-first-theme’ )Una función de traducción de este tipo. A continuación, necesitarás utilizar herramientas como Poedit para escanear las cadenas de texto que pueden ser traducidas en los archivos del tema y generar el contenido traducido..potLuego, cree un archivo de plantilla y, a continuación, cree el correspondiente para cada idioma..poY.moGuarda los documentos y colócalos en la carpeta correspondiente al tema./languagesEn la carpeta correspondiente, WordPress cargará automáticamente las traducciones adecuadas según la configuración del idioma del sitio.
¿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
- Guía Definitiva para la Creación de Sitios Web: El Proceso Completo desde la Concepción hasta la Lanzamiento, y Análisis de las Técnicas Esenciales
- Desarrollo de temas para WordPress desde cero: Crea una interfaz web única y diferenciada
- ¿Por qué elegir WordPress como la plataforma preferida para crear sitios web?
- Guía de iniciación para WordPress: Crea tu primer sitio web profesional desde cero
Español