Inicio/conocimiento/WordPress/Detalles del contenido

Guía completa para el desarrollo de temas para WordPress: Cómo crear temas de nivel profesional desde cero

Lectura en 4 minutos
2026-03-15
2026-06-03
2,648
Gano comisiones cuando compras a través de los enlaces de abajo, sin coste adicional para ti.

Preparación y configuración del entorno.

Antes de comenzar a escribir código, es fundamental contar con un entorno de desarrollo local eficiente. Recomendamos utilizar paquetes que integren Apache/Nginx, PHP y MySQL, como Local by Flywheel, MAMP o XAMPP. Asegúrese de que su versión de PHP sea 7.4 o superior, y la de MySQL 5.6 o superior, y se recomienda utilizar la última versión del código central de WordPress.

Los temas de WordPress son, en esencia, un conjunto de archivos que se encuentran en/wp-content/themes/Para las carpetas del directorio, solo se necesitan dos archivos como estructura básica. Deberás crear una nueva carpeta en tu entorno local, por ejemplo,my-professional-themeY crea el primer archivo clave en él.

Crea la información de configuración central del tema

Cada tema debe tener uno.style.cssEl archivo, cuya sección de anotaciones de cabecera se utiliza para declarar la información básica del tema a WordPress. El nombre de este archivo es fijo, y WordPress lo utiliza para identificar y enumerar tus temas al leer la información de su cabecera.

Lecturas recomendadas Guía completa para dominar el desarrollo de temas para WordPress: desde los principios hasta la maestría。

/*
Theme Name: My Professional Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 一个用于学习构建的专业级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-professional-theme
*/

Text DomainPara la internacionalización, servirá como identificador para las llamadas a las funciones de traducción posteriores.

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).
LOGO de UltaHost página de acceso

Crear un archivo de inicio central para el tema

El segundo documento necesario esindex.phpEs la plantilla de retroceso predeterminada de todas las páginas. Pero el archivo de inicio más importante esfunctions.phpNecesitas crear este archivo en el directorio del tema, ya que es el “cerebro” de todo el tema y se utiliza para incluir hojas de estilo, scripts de JavaScript, registrar menús, barras laterales, etc.

<?php
// 安全措施：防止直接访问文件
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// 1. 引入样式表和脚本
function my_theme_enqueue_scripts() {
	// 引入主样式表
	wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
	// 引入自定义样式
	wp_enqueue_style( 'my-theme-custom-style', get_template_directory_uri() . '/assets/css/main.css' );
	// 引入JavaScript
	wp_enqueue_script( 'my-theme-main-js', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>

Construir una jerarquía de plantillas temáticas.

La estructura de plantillas de WordPress es su filosofía de diseño central. Cuando se accede a una página, WordPress busca el archivo de plantilla correspondiente según una prioridad específica. Comprender y crear estos archivos de plantilla clave es la base para construir temas flexibles.

Crear una plantilla de diseño universal para sitios web.

header.phpYfooter.phpEstos componen la parte superior e inferior de todas las páginas del sitio web. Podemos hacerlo mediante get_header() Y get_footer() Los funciones las introducen en cualquier plantilla. Crearheader.phpEn él debería incluirse el documento HTML.<head>Las partes y el área visible en la parte superior del sitio web (como el logotipo y el menú de navegación).

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	¿
</head>
<body no numeric noise key 1003>
	<header id="masthead" class="site-header">
        <div class="site-branding">
            <h1 class="site-title"><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
        </div>
        <nav id="site-navigation" class="main-navigation">
            'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            ) );
            ?&gt;
        </nav>
	</header>

footer.phpEntonces, incluye la información del pie de página del sitio web, así como la introducción de los scripts (a través de…). wp_footer()) y la etiqueta de cierre final.

Lecturas recomendadas Crear un sitio web profesional: una guía completa para construir un tema de WordPress personalizado desde cero.。

Crear un ciclo de contenido para los artículos y un modelo para la página principal.

index.phpEs la plantilla de retroceso final para todas las páginas, pero para un mejor control, se deben crear plantillas más específicas. Por ejemplo, la página de lista de artículos de blog generalmente está compuesta porhome.phpoindex.phpControle. Y la plantilla de la página de detalles de un solo artículo essingle.phpEl núcleo de estas plantillas es “The Loop”, que es el mecanismo que utiliza WordPress para recorrer y mostrar el contenido de los artículos.

Crearhome.phpPara mostrar la lista de artículos del blog:

¿¿php get_header();??
<main id="primary" class="site-main">
	
			<article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
				<header class="entry-header">
					<h2 class="entry-title"><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
				</header>
				<div class="entry-content">
					¿¿php the_excerpt(); ??
				</div>
			</article>
		
		<p><?php esc_html_e( 'No posts found.', 'my-professional-theme' ); ?></p>
	¿¿php endif; ?&gt;
</main>
¿¿¿¿php get_sidebar();???  
¿¿¿php get_footer();???

Implementar la plantilla de página y barra lateral.

Se utilizan páginas estáticas parapage.phpModelo. Esta es una opción ideal para mostrar páginas como “Acerca de nosotros”, “Contáctenos”, etc. Su estructura es similar a la desingle.phpEs similar, pero por lo general no incluye metainformación como categorías y etiquetas.

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%.
LOGO hosting.com página de acceso

El panel lateral, por su parte, está compuesto porsidebar.phpLa definición del archivo, que normalmente incluye una zona para gadgets. Enfunctions.phpEn este caso, necesitas usar register_sidebar() Un función para registrar una o más áreas de gadgets, y luego ensidebar.phpEn el uso chino dynamic_sidebar() Llámalo para usarlo.

// 在functions.php中注册侧边栏
function my_theme_widgets_init() {
	register_sidebar( array(
		'name'          =&gt; esc_html__( 'Main Sidebar', 'my-professional-theme' ),
		'id'            =&gt; 'sidebar-1',
		'description'   =&gt; esc_html__( 'Add widgets here.', 'my-professional-theme' ),
		'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
		'after_widget'  =&gt; '</section>',
		'before_title'  =&gt; '<h2 class="widget-title">',
		'after_title'   =&gt; '</h2>',
	) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Implementar funciones de temas avanzados.

Un tema profesional no solo debe tener una estructura, sino que también debe contar con funciones completas y una excelente experiencia para los usuarios y desarrolladores. Esto incluye soporte para personalizadores de temas, sistemas de menú, imágenes destacadas, soporte para miniaturas, etc.

Integrar el sistema de menús de WordPress.

Enfunctions.phpEn chino, se usa register_nav_menus() Una función para registrar la ubicación de los menús admitidos por el tema. Lo anteriorheader.phpEn el ejemplo, ya se ha llamado a una función llamadamenu-primaryLa ubicación de los platos.

Lecturas recomendadas Guía completa para el desarrollo de temas para WordPress: Cómo crear temas personalizados desde cero。

function my_theme_register_menus() {
	register_nav_menus(
		array(
			'menu-primary' => esc_html__( 'Primary Menu', 'my-professional-theme' ),
			'menu-footer'  => esc_html__( 'Footer Menu', 'my-professional-theme' ),
		)
	);
}
add_action( 'init', 'my_theme_register_menus' );

Añadir soporte para imágenes destacadas y miniaturas de artículos.

Las imágenes destacadas son un elemento básico del diseño web moderno. A través de ellas, se puede atraer la atención de los usuarios hacia un contenido específico o hacia la página en general. add_theme_support() Función, puedes habilitar esta función para tu tema y definir varios tamaños de miniatura de artículos.

function my_theme_setup() {
	// 支持特色图片
	add_theme_support( 'post-thumbnails' );
	// 为特色图片添加自定义尺寸
	add_image_size( 'my-theme-blog-thumbnail', 800, 400, true ); // 裁剪模式
}
add_action( 'after_setup_theme', 'my_theme_setup' );

En el archivo de plantilla, se utiliza… the_post_thumbnail( 'my-theme-blog-thumbnail' ) ¿Puedes imprimir esta imagen?

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.
LOGOTIPO DE INTERSERVER página de acceso

Obtenga un control mejorado del personalizador de WordPress.

El personalizador de WordPress permite a los usuarios previsualizar y modificar la configuración del tema en tiempo real. Puede agregar configuraciones a él.settings), controles (controls) y la lógica de salida. Por ejemplo, agregar una opción de información de derechos de autor en el pie de página:

function my_theme_customize_register( $wp_customize ) {
	// 添加一个设置
	$wp_customize->add_setting( 'footer_copyright_text', array(
		'default'           => '© 2026 Your Company Name. All rights reserved.',
		'sanitize_callback' => 'sanitize_text_field',
	) );
	// 添加一个控件（输入框）到该设置
	$wp_customize->add_control( 'footer_copyright_text', array(
		'label'    => __( 'Footer Copyright Text', 'my-professional-theme' ),
		'section'  => 'title_tagline', // 放在“站点身份”区域
		'type'     => 'text',
	) );
}
add_action( 'customize_register', 'my_theme_customize_register' );

Enfooter.phpEn chino, se usa get_theme_mod( 'footer_copyright_text' ) Para obtener y mostrar este valor.

Optimización del tema y preparación para la publicación

Después de finalizar el desarrollo, asegurarte de que tu tema sea fluido, seguro y fácil de distribuir es el último paso clave.

Asegúrate de que el tema cuente con soporte internacional.

La internacionalización (i18n) permite que tu tema se traduzca a cualquier idioma. Enfunctions.phpEl primer paso es cargar el campo de texto del tema en chino.

function my_theme_load_theme_textdomain() {
	load_theme_textdomain( 'my-professional-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_theme_load_theme_textdomain' );

Después de eso, todas las cadenas de texto que necesiten ser traducidas en el tema deben ser marcadas de la siguiente manera: ()、_e() o esc_html() Envoltura de funciones como await.

Realizar la revisión del código siguiendo los estándares de codificación.

WordPress tiene estándares oficiales de codificación en PHP, CSS y JavaScript. Seguir estos estándares puede mejorar la legibilidad y la capacidad de mantenimiento del código, además de facilitar su aceptación por parte de la comunidad. Puede utilizar herramientas como PHP_CodeSniffer, en combinación con las reglas de los estándares de codificación de WordPress, para revisar automáticamente su código.

Llevar a cabo el refuerzo de seguridad y la limpieza final.

La seguridad es una prioridad absoluta. Además de enfunctions.phpCompruebe el principio.ABSPATHAdemás de las constantes, todos los datos de entrada de los usuarios y la salida dinámica deben validarse, limpiarse y escapar. Las funciones más comunes incluyen:
Escape: esc_html(), esc_attr(), esc_url()
Limpieza: sanitize_text_field(), sanitize_email()
Verificación: is_email(), absint()

Antes de la publicación, elimine todo el código utilizado para la depuración (por ejemplo, var_dump()， print_r()Asegúrese de que todas las funciones funcionen según lo esperado y realice pruebas exhaustivas en diferentes entornos.

resúmenes

Construir un tema profesional de WordPress desde cero es un proyecto sistemático que requiere que el desarrollador no solo comprenda PHP/HTML/CSS/JavaScript, sino que también domine los principios fundamentales de WordPress, como la estructura de plantillas, los bucles, el sistema de ganchos y las funciones de soporte de temas. A través de esta guía, ha completado sistemáticamente todo el proceso, desde la configuración del entorno, la creación de plantillas y la implementación de funciones hasta la optimización y la publicación. El núcleo del asunto es que un tema excelente debe ofrecer funcionalidades potentes y un diseño atractivo, al tiempo que mantiene el código claro, eficiente y seguro, y proporciona una buena escalabilidad tanto para los usuarios como para los desarrolladores posteriores. Practicar constantemente y hacer referencia al código central y a los temas excelentes es la mejor manera de mejorar el nivel de desarrollo.

FAQ Preguntas más frecuentes

¿Qué lenguajes de programación se deben dominar para desarrollar temas de WordPress?
Para desarrollar temas de WordPress, es necesario dominar el lenguaje PHP, ya que es el lenguaje en el que está escrito WordPress y la mayoría de las etiquetas de plantillas. Al mismo tiempo, es necesario dominar HTML y CSS para controlar la estructura y el estilo de la página. Conocer JavaScript básico (especialmente jQuery) es fundamental para implementar efectos de interacción en el front-end. Además, comprender algunos conocimientos de SQL puede ayudar a comprender la lógica de consulta de datos de WordPress.

¿Por qué mi nuevo tema no se muestra en la lista de “Temas” del panel de control de WordPress?

Esto generalmente se debe a que…style.cssEsto se debe a que la información de los comentarios en la cabecera del archivo no es correcta o porque falta el archivo. Asegúrate de que: 1) tu carpeta de temas esté ubicada en el lugar correcto./wp-content/themes/1) Bajo la ruta; 2) Existe un archivo dentro de la carpeta.style.css1) El archivo está en formato .zip y contiene todos los archivos necesarios para instalar el tema. 2) El archivo; 3) La información de los encabezados del archivo (Nombre del tema, Autor, etc.) está completamente correcta y no tiene errores de sintaxis. Si falta cualquiera de la información obligatoria, WordPress no podrá reconocer el tema.

¿Cómo puedo crear una plantilla de página personalizada para mi tema?

Para crear una plantilla de página personalizada, debes crear un nuevo archivo PHP en la carpeta raíz del tema y agregar un bloque de comentarios con el nombre de la plantilla en la parte superior del archivo. Por ejemplo, para crear una plantilla de “página de ancho completo”, el nombre del archivo debería ser…template-fullwidth.phpSu inicio debería ser:<?php /* Template Name: 全宽页面 */ ?>Luego, cuando el usuario esté en la página de edición, podrá seleccionar “Página de ancho completo” en el menú desplegable “Plantilla” de “Propiedades de la página”. En este archivo, puedes escribir algo completamente diferente de lo que hay actualmente.page.phpEl diseño y la lógica de la aplicación.

¿Qué papel desempeñan los ganchos (Hooks) en el desarrollo de temas?

Los ganchos (que se dividen en ganchos de acción y ganchos de filtro) son la piedra angular de la arquitectura de los plugins y la extensibilidad de los temas de WordPress. En el desarrollo de temas, utiliza principalmente ganchos de acción (mediante <). add_action()Inserte su propio código de funcionalidad en momentos específicos (por ejemplo, al inicializar, cargar el script o mostrar el pie de página). Al mismo tiempo, también utilizará los ganchos de filtro (mediante <). add_filter()Para modificar el contenido que se muestra en WordPress u otros complementos (por ejemplo, cambiar la longitud del resumen de un artículo o personalizar el nombre de la categoría de un artículo), es posible utilizar los ganchos de manera adecuada. Esto permitirá que el código de tu tema sea más modular, fácil de mantener y ampliable.

¿Cómo envío un tema al directorio oficial de temas de WordPress una vez desarrollado?

Subir un tema al directorio oficial de WordPress.org es un proceso riguroso. Primero, necesitas solicitar una cuenta SVN en WordPress.org. Luego, tu tema debe cumplir con la licencia GPL v2 o superior y ser revisado por el equipo oficial de revisión de temas. Los criterios de revisión incluyen calidad del código, seguridad, ausencia de errores, cumplimiento de los estándares de codificación y brindar suficiente soporte de accesibilidad. Antes de enviarlo, se recomienda leer detenidamente el manual oficial de desarrollo de temas y las pautas de envío, y utilizar el complemento Theme Check para realizar una autoevaluación y asegurarse de que cumple con todos los requisitos.

¿Qué sigue, qué sigue?

Si estás creando o optimizando un sitio web de WordPress, te recomendamos que continúes leyendo sobre optimización de rendimiento, configuración de complementos y personalización de temas.

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.

Etiquetas.