Inicio/conocimiento/WordPress/Detalles del contenido

Introducción al desarrollo de temas para WordPress: Crea paso a paso tu primer tema personalizado

Lectura en 3 minutos
2026-03-15
2026-06-03
1,891
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 la primera línea de código, necesitas un entorno de desarrollo adecuado. Esto incluye un servidor local y un editor de código. Se recomienda utilizar herramientas como XAMPP, MAMP o Laragon para configurar el servidor local, ya que permiten instalar y ejecutar automáticamente Apache, MySQL y PHP con un solo clic. Elige el editor de código que prefieras, como Visual Studio Code, Sublime Text o PHPStorm; su soporte para la resaltación del código y la autocompletación mejorará significativamente tu eficiencia en el desarrollo.

A continuación, necesitarás crear un directorio para tu nuevo tema en la instalación local de WordPress. Todos los temas de WordPress se almacenan en un determinado directorio dentro del sistema de archivos de WordPress. /wp-content/themes/ Dentro del directorio, crea una nueva carpeta para el tema que vas a desarrollar. Por ejemplo, nómbrala como «my_new_project». my-first-themeEl nombre de esta carpeta es tu identificador de tema, y se reflejará en la lista de temas del backend.

Al mismo tiempo, es necesario comprender los dos pilares fundamentales del desarrollo de temas para WordPress: los archivos de plantilla y los archivos de estilo. Un tema básico de WordPress solo necesita dos archivos:style.css Y index.php。style.css No solo controla el estilo visual del sitio web, sino que el bloque de comentarios en la cabecera del archivo constituye la “identificación” del tema, conteniendo metadatos como el nombre del tema, el autor y una descripción.index.php Es el archivo de plantilla principal por defecto.

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

Crear el archivo de temas principales

Definir estilos y información para los temas

Todo comienza con… style.css Comencemos. Cree este archivo en la carpeta raíz de la carpeta de temas y añada un bloque de comentarios formateado al principio del archivo. Este bloque de comentarios es clave para que WordPress lo reconozca y cargue el tema. El código siguiente muestra un ejemplo básico de cabecera de una hoja de estilo (stylesheet header):

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 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Entre ellos,Text Domain Esto se utiliza para la internacionalización (i18n), con el fin de prepararse para futuras traducciones a múltiples idiomas. Una vez que hayas creado este archivo, inicia sesión en la página de “Apariencia” -> “Temas” del backend de WordPress y deberías poder ver tu tema; aunque por el momento no cuenta con ninguna funcionalidad.

Construir la estructura básica de un modelo

A continuación, se creará el archivo esqueleto para el tema. index.phpEste es el modelo más básico; cuando WordPress no encuentra un archivo de modelo más específico (por ejemplo… single.php o page.phpSe utiliza cuando sea necesario. Uno de los ejemplos más simples… index.php Puede contener únicamente funciones básicas que se utilizan para incluir la cabecera de WordPress, los bucles y la parte final del código.

<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1008>
    ¿php_body_open();?&gt;
    <header>
        <h1><a href="/es/</?php echo esc_url( home_url( '/' ) ); ?>">¿¿php bloginfo( 'name' ); ??</a></h1>
        <p>¿¿php bloginfo( 'description' );?&gt;</p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 文章内容输出
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>© ¿¿¿  ¿¿¿</p>
    </footer>
    ¿php_footer();?&gt;
</body>
</html>

Este archivo utiliza las etiquetas de plantilla principales de WordPress. bloginfo() Obtener información sobre un sitio web.the_title() Y the_content() En un ciclo, se deben imprimir el título y el contenido del artículo.wp_head() Y wp_footer() Son ganchos de vital importancia, ya que permiten que el núcleo de WordPress, los plugins y otros scripts interactúen con las páginas. <head> Y <footer> Inyección de código en la zona (Regional code injection).

Separación de plantillas e incorporación de funciones

Archivos de plantillas modulares

Se va a convertir en un problema si no hacemos algo al respecto. index.php Escribir todo el código en un solo archivo hace que sea difícil de mantener. La mejor práctica es dividirlo en varias partes de plantilla (Template Parts). Crea los siguientes archivos para organizar la estructura del código:
* header.phpAlmacenar <head> Contenido de la cabecera común, como las áreas y la navegación superior del sitio web.
* footer.phpSe utiliza para almacenar información sobre derechos de autor y otros contenidos de tipo “pie de página” (public tail content) que se muestra en la parte inferior del sitio web.
* sidebar.phpÁrea para almacenar los widgets de la barra lateral (opcional).
* functions.phpArchivo de funciones funcionales del tema.

Lecturas recomendadas Desde cero: Te enseñamos paso a paso a desarrollar un tema personalizado para WordPress.。

Luego, utiliza… get_header()、get_footer() Y get_sidebar() Las funciones de tipo “espera” (como “wait”) se utilizan en... index.php Se las incorpora en el proceso. La versión modificada… index.php La parte central se volverá muy sencilla y concisa:

¿¿php get_header();??

<main>
    ¿php si (tiene publicaciones()): mientras (tiene publicaciones()): the_post();?&gt;
        <article>
            &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        </article>
    ¿¿¿php endwhile; else : ??
        <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
    ¿¿php endif; ?&gt;
</main>

¿¿¿¿php get_sidebar();???  
¿¿¿php get_footer();???

Fíjese que hemos utilizado… esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) Este es el enfoque estándar para la internacionalización.

Mejorar las funciones temáticas

functions.php El archivo es el “centro de control” de tu tema. Se utiliza para agregar funciones de soporte al tema, registrar menús y barras laterales, cargar hojas de estilo y scripts, etc. No se trata de un archivo de plantilla, sino que se carga automáticamente al iniciar el tema.

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

Lo que sigue es información básica. functions.php Ejemplo:

__( '主导航菜单', 'my-first-theme' ),
    ) );

// 添加对 HTML5 标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 添加标题标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
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()-&gt;get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?&gt;

En este archivo, hemos definido una función. my_first_theme_setupY a través de… add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) Montarlo en un gancho de acción específico del tema de inicialización de WordPress. De la misma manera, utilizamos… register_sidebar La función registró una zona para herramientas adicionales y, a través de ello… wp_enqueue_style La función ha introducido correctamente la tabla de estilos del tema.

Crear plantillas y estilos personalizados

Personalizar plantillas para diferentes tipos de páginas.

La estructura jerárquica de las plantillas de WordPress te permite crear archivos de plantillas específicos para diferentes tipos de páginas. Por ejemplo:
* front-page.phpSe utiliza como página de inicio estática.
* home.phpPágina de lista de artículos del blog.
* single.phpPágina de detalles de un artículo individual.
* page.phpPágina única.
* archive.phpPáginas de archivo para categorías, etiquetas, autores, etc.
* search.phpPágina de resultados de búsqueda.
* 404.phpPágina de error 404.

Lecturas recomendadas Guía práctica para principiantes en el desarrollo de temas para WordPress: Cómo crear desde cero una arquitectura y plantillas de temas personalizados。

Crear page.php Permite controlar de manera independiente el aspecto de todas las páginas sin afectar a las páginas que contienen el contenido del artículo. Su estructura es… index.php Similar, pero generalmente no es necesario mostrar los metadatos de publicación del artículo (como la fecha o el autor).

Diseñar layouts e interacciones responsivas

Los temas para WordPress modernos deben ser responsive, lo que significa que tu código CSS debe adaptarse a todos los tamaños de pantalla, desde teléfonos móviles hasta ordenadores de escritorio. Se recomienda utilizar la estrategia de CSS “Mobile First”, que consiste en definir primero los estilos básicos para las pantallas pequeñas y luego agregar estilos adicionales para las pantallas más grandes mediante consultas de medios (Media Queries).

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

Al mismo tiempo, es posible que tu tema requiera un poco de JavaScript para proporcionar funciones interactivas, como menús desplegables o galerías de imágenes en rotación. Lo correcto es incorporar ese código JavaScript de manera adecuada en el diseño del sitio web. functions.php En el uso chino wp_enqueue_script() Se trata de una función que se utiliza para registrar y poner en cola los scripts, asegurando que las dependencias (como jQuery) se declaren de manera correcta. Esto evita conflictos entre scripts y cargas repetidas, y también garantiza la compatibilidad con las funciones de optimización de scripts de WordPress.

resúmenes

Mediante los pasos anteriores, has completado un tema personalizado para WordPress que es básico y funcional. Has aprendido cómo crear y definir la información del tema. style.cssConstruir lo básico… index.php Plantillas: Dividir las plantillas en componentes modulares. functions.php Se ha mejorado la función de personalización de temas. También has aprendido sobre la potente estructura jerárquica de plantillas de WordPress, lo que facilita la creación de páginas de plantillas personalizadas más complejas.

El desarrollo de temas es un proceso continuo de iteración y profundización. A continuación, puedes explorar el desarrollo de temas secundarios (Child Themes) para modificar de manera segura temas existentes, aprender a utilizar la API del WordPress Customizer, que permite a los usuarios ajustar las configuraciones del tema en tiempo real desde la administración, o estudiar en profundidad la API REST de WordPress para crear temas que se integren con marcos frontales. Mantenerse al día con los documentos oficiales de desarrollo y participar activamente en la comunidad es clave para mejorar constantemente tus habilidades.

FAQ Preguntas más frecuentes

¿Es necesario dominar PHP para desarrollar temas para WordPress?

Sí, tener una base sólida en PHP es una condición necesaria para el desarrollo de temas para WordPress. Dado que WordPress está escrito en PHP, todos los archivos de plantilla (como… index.php、single.php）y los archivos de funciones (functions.phpTodos ellos requieren el uso de código PHP para generar contenido dinámicamente, llamar a funciones de WordPress y manipular datos.

Al mismo tiempo, también es necesario estar familiarizado con HTML y CSS para construir la estructura y el estilo de las páginas, así como tener un conocimiento básico de JavaScript (especialmente jQuery, ya que está incluido en el núcleo de WordPress) para agregar funciones interactivas.

¿Por qué los cambios que he realizado en mi tema no se muestran en la interfaz administrativa de WordPress?

Esto generalmente es causado por el caché del navegador o del servidor. Primero, intenta presionar en el navegador… Ctrl + F5(Windows/Linux) o Cmd + Shift + R(En Mac): Realiza un refresco forzado para eliminar el caché del navegador.

Si el problema persiste, es posible que el servidor o los plugins de caché de WordPress (como W3 Total Cache o WP Super Cache) estén almacenando archivos obsoletos. Intente borrar el caché de todos estos plugins. Durante la fase de desarrollo, se recomienda desactivar temporalmente estos plugins para evitar cualquier interferencia en el funcionamiento del sitio web.

¿Cómo puedo hacer que mi tema admita múltiples idiomas?

Hacer que un tema sea compatible con múltiples idiomas (internacionalización y localización, i18n y l10n) depende principalmente de las funciones de traducción de WordPress. En los temas, todos los textos dirigidos al usuario no deben escribirse de forma directa, sino que deben ser envueltos en funciones de traducción.

Por ejemplo, usar (‘文本’， ‘my-first-theme’) Realiza la traducción, o utiliza… echo esc_html(‘文本’， ‘my-first-theme’) Realiza la salida y la escapación de datos. Necesitas... style.css La cabeza y load_theme_textdomain() Ajuste correcto en la llamada a una función Text Domain(En el campo de texto), luego utiliza una herramienta como Poedit para crearlo. .pot Plantillas de traducción y… .po/.mo Archivos de idioma.

¿Cuál es la diferencia entre las funciones que se encuentran en el archivo `functions.php` del tema y las funciones de los plugins?

functions.php La función del código contenido en el archivo es similar a la del código del plugin; ambos pueden utilizarse para expandir las capacidades de WordPress. La principal diferencia radica en su ámbito de aplicación y su propósito específico.

functions.php Las funciones incluidas están estrechamente vinculadas al tema actual. Cuando el usuario cambia de tema, estas funciones generalmente dejan de estar disponibles. Es adecuado utilizar estas funciones para agregar elementos que estén directamente relacionados con la presentación visual del tema, su diseño o sus plantillas (por ejemplo, la ubicación del formulario de registro o la opción de agregar soporte para ese tema).

Las funciones proporcionadas por los plugins son independientes del tema utilizado; es decir, no importa qué tema se esté usando, siempre que el plugin esté activado, sus funciones estarán disponibles. Son ideales para agregar funcionalidades generales que no tienen relación con el aspecto visual del tema (como formularios de contacto, optimización para motores de búsqueda SEO o funciones de comercio electrónico). Si alguna función debe mantenerse incluso después de cambiar de tema, entonces debería implementarse como un plugin.

¿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.