Introducción al desarrollo de temas para WordPress: Crea tu primer tema desde cero

Preparación y configuración del entorno.

Antes de comenzar a escribir cualquier código, necesitas un entorno de desarrollo adecuado. Esto incluye un entorno de servidor local (como XAMPP, Local by Flywheel o MAMP), así como un editor de código (como VS Code, Sublime Text o PHPStorm). Asegúrate de que en tu entorno local estén instalados PHP, MySQL y Apache/Nginx.

A continuación, necesitarás hacerlo en el servidor local.wp-content/themes/Crea una nueva carpeta dentro del directorio. El nombre de esta carpeta será el mismo que el nombre de tu tema, por ejemplo…my-first-themeEste es el “hogar” de todos tus archivos de temas.

Un tema básico de WordPress solo necesita dos archivos:style.cssYindex.phpEntre ellos,style.cssNo se trata solo de un archivo de estilo (stylesheet), sino también del “dossier de identidad” de un tema; el bloque de comentarios en la parte superior de este archivo contiene la metainformación del mismo. Creemos primero este archivo.

Lecturas recomendadas Aprender a desarrollar temas de WordPress desde cero: una guía completa para crear un sitio web personalizado。

Crear un archivo de cabecera para información de temas

style.cssEl bloque de comentarios que se encuentra en la parte superior del archivo es clave para que WordPress reconozca un tema. Por favor, créalo en la carpeta de tu tema.style.cssY escriba lo siguiente:

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

página de acceso

/*
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
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Esta información se mostrará en la página “Apariencia” -> “Temas” del panel de administración de WordPress.Text DomainSe utiliza para la internacionalización y representa un identificador clave para la carga posterior de los archivos de traducción.

Crear una plantilla de índice básico

A continuación, se creará el archivo central del tema.index.phpIncluso si este archivo solo contiene una línea de código en este momento, permitirá a WordPress reconocer y activar tu tema.

¿¿php get_header();??
<h1>¡Hola, WordPress Theme World!</h1>
¿¿¿php get_footer();???

get_header()Yget_footer()Son funciones de plantilla de WordPress que intentan cargar archivos con nombres específicos.header.phpYfooter.phpArchivos relacionados con el tema. Aunque aún no los hemos creado, es la práctica estándar escribirlos de esta manera de antemano. Ahora, puedes acceder al panel de administración de WordPress y, en “Apariencia” -> “Temas”, encontrar y activar “My First Theme”. Actualiza la página principal del sitio web y verás el mensaje “¡Hola, WordPress Theme World!”.

Comprender los niveles de las plantillas y crear los archivos centrales

WordPress utiliza un conjunto de reglas denominado “estructura de plantillas” (template hierarchy) para determinar qué archivo de plantilla se debe utilizar para mostrar el contenido según la solicitud de la página (por ejemplo, la página principal, la página de un artículo o la página de una categoría). Comprender este mecanismo es esencial para desarrollar temas de manera eficiente.

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

El modelo más universal es…index.phpEs la opción de respaldo final para todas las páginas. Sin embargo, para controlar con mayor precisión el aspecto de cada página, deberíamos crear archivos de plantillas más específicos. Primero, crearemos tres archivos básicos e importantes:header.php、footer.phpYfunctions.php。

Construir una plantilla para la cabecera de un sitio web

header.phpLos archivos suelen contener la parte de encabezado (header) de un documento HTML.<head>) y las áreas comunes en la parte superior del sitio web, como el logotipo y el menú de navegación. Crear uno.header.phpArchivo:

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

Aquí hay algunas funciones clave:wp_head()Los “ganchos” (hooks) permiten que el núcleo de WordPress, los plugins y los temas realicen acciones específicas de forma automática.<head>Inserte el código necesario en la zona correspondiente (por ejemplo, enlaces a hojas de estilo).body_class()Se generará una serie de nombres de clases CSS para facilitar el control de estilo en diferentes páginas.wp_nav_menu()Se utiliza para mostrar un menú de navegación.

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

página de acceso

Construir una plantilla para la parte inferior de un sitio web

footer.phpLos archivos suelen contener la sección inferior común de un sitio web, como la información de derechos de autor, y terminan en…header.phpEtiquetas abiertas en el medio. Crear.footer.php：

    </main><!-- #main-content -->
    <footer id="site-footer">
        <div class="container">
            <p>©  . Todos los derechos reservados.</p>
        </div>
    </footer>
    ¿php_footer();?&gt;
</body>
</html>

wp_footer()Conwp_head()De forma similar, se trata de un hook importante que se utiliza para…</body>Insertar scripts o código antes de las etiquetas.

Ahora, volvamos a lo tuyo…index.phpActualízelo para que utilice los nuevos archivos de cabecera y pie de página que hemos creado.

Lecturas recomendadas ¿Cómo elegir y personalizar un tema de WordPress amigable para el SEO?。

<article>
        <h2>¿¿¿php the_title();???</h2>
        <div>¿¿php the_content(); ??</div>
    </article>
¿¿¿php endwhile; else : ??
    <p>¿php esc_html_e( 'Lo siento, no hay publicaciones que coincidan con tus criterios.', 'my-first-theme' ); ?&gt;</p>

Este código constituye el bucle central (The Loop) de un tema de WordPress. Este bucle verifica si la página actual contiene artículos y, a continuación, muestra de forma iterativa el título y el contenido de cada artículo.

Mejorar las funciones de un tema a través de archivos de funciones.

functions.phpSe trata del “Centro de Control” de tu tema. No es un archivo de plantilla, sino un archivo PHP que se carga automáticamente al iniciar el tema. Aquí puedes agregar funciones de soporte para el tema, registrar ubicaciones de menús, estilos de listas de espera y scripts, entre otras cosas.functions.php：

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.

página de acceso

<?php
/**
 * My First Theme 的功能函数文件
 */

// 主题基础设置
if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让WordPress管理文档标题
        add_theme_support( 'title-tag' );
        // 启用文章和页面的特色图片功能
        add_theme_support( 'post-thumbnails' );
        // 注册一个主导航菜单
        register_nav_menus( array(
            'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
        ) );
        // 为文章摘录添加HTML支持
        add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
    }
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 修改摘录末尾的“更多”链接样式
function my_first_theme_excerpt_more( $more ) {
    return '...';
}

// 注册并加载样式表
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载一个自定义样式表
    wp_enqueue_style( 'my-first-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Este archivo de funciones realiza varias cosas importantes: 1) A través de…add_theme_support()Se han activado las funciones comúnmente utilizadas en temas modernos de WordPress; 2) A través de…register_nav_menus()Has registrado una ubicación para tu restaurante, lo que nos permite utilizarla en los trabajos que hemos realizado anteriormente.header.phpEl que se llama en medio.primaryEl menú puede ser asignado en la parte posterior del sistema, en la sección “Apariencia” -> “Menú”. 3) Utilízalo.wp_enqueue_style()La función agrega los archivos de estilo a la cola de manera correcta y segura, de acuerdo con los requisitos de seguridad establecidos.

Crear una plantilla de artículo independiente

Para que un artículo individual tenga una mejor presentación, podemos crear un archivo de plantilla dedicado.single.phpDe acuerdo con la estructura jerárquica de los templates, cuando se accede a un artículo en particular, WordPress utiliza prioritariamente los recursos correspondientes a ese artículo.single.php…en lugar de…index.php。

¿¿php get_header();??

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
        <div class="entry-meta">
            <?php 
            printf( 
                esc_html__( '发布于 %s', 'my-first-theme' ), 
                get_the_date() 
            );
            ?>
        </div>
        <?php if ( has_post_thumbnail() ) : ?>
            <div class="post-thumbnail">
                <?php the_post_thumbnail( 'large' ); ?>
            </div>
        ¿¿php endif; ?&gt;
    </header>
    <div class="entry-content">
        ¿¿php the_content(); ??
    </div>
</article>

¿¿¿php get_footer();???

Este modelo muestra información sobre el artículo de manera más detallada, como la fecha de publicación y la imagen destacada (si se ha configurado).post_class()La función genera las clases CSS correspondientes al tipo de artículo.

Añadir estilos básicos y diseño responsive.

Ahora que tu tema ya tiene su estructura básica y las funciones esenciales, es momento de darle un aspecto atractivo. Vamos a…style.cssAñada algunos códigos CSS básicos y asegúrese de que el diseño sea responsive (adaptativo a diferentes dispositivos y resoluciones).

En tu…style.cssAñada el siguiente estilo al archivo (debajo del encabezado de información del tema):

/* 基础重置与排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
#site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}
#site-header h1 a {
    color: #333;
    text-decoration: none;
}

/* 导航菜单 */
#primary-menu {
    display: flex;
    list-style: none;
}
#primary-menu li {
    margin-right: 1rem;
}
#primary-menu a {
    text-decoration: none;
    color: #555;
}

/* 主内容区 */
#main-content {
    padding: 2rem 0;
}
article {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 底部样式 */
#site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    #primary-menu {
        flex-direction: column;
    }
    #primary-menu li {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    article {
        padding: 1rem;
    }
}

Estos estilos ofrecen efectos visuales claros y modernos, y proporcionan un diseño responsive (adaptativo) básico en dispositivos de pantalla pequeña. Puedes crearlos según tus necesidades./assets/css/custom.cssEl archivo se utiliza para almacenar más estilos personalizados, y ya está disponible.functions.phpFue cargado en la cola de espera.

resúmenes

Siguiendo los pasos descritos en este artículo, has comenzado desde una carpeta vacía y has construido con éxito un tema para WordPress que es funcional y tiene una estructura clara. Has comprendido los archivos más básicos necesarios para el desarrollo de temas.style.cssYindex.phpAprendí el concepto de jerarquía de plantillas y creé algunas.header.php、footer.php、single.phpEntre otros, los archivos de plantillas principales. También lo has hecho a través de…functions.phpEl archivo ha añadido soporte para funciones y capacidad de gestión de recursos a tu tema, y finalmente le ha dado vida visual a través del CSS.

Esto es solo un punto de partida. A continuación, puedes explorar la creación de más archivos de plantillas (como…).page.php、archive.php、404.phpProfundizarás en el sistema de ganchos (Hooks), acciones (Actions) y filtros (Filters) de WordPress, y estudiarás cómo hacer que tu tema sea compatible con widgets y personalizadores (Customizers). A través de la práctica constante y la exploración, te convertirás en un desarrollador de temas para WordPress con experiencia.

FAQ Preguntas más frecuentes

¿Cómo modificar el logotipo de un tema?

Enheader.phpEn el archivo, busque la línea de código que muestra el título del sitio web. Puede utilizar…

Reemplazo de etiquetasbloginfo( ‘name’ )Y añade un enlace a tu imagen del logo. Una forma más profesional de hacerlo es…functions.phpEn el uso chinoadd_theme_support( ‘custom-logo’ )Este complemento sirve para apoyar la función de carga de logos en los personalizadores (customizers) de WordPress.

¿Por qué mi menú de navegación no se muestra?

Primero, asegúrate de que ya hayas completado los pasos necesarios.functions.phpA través de Chinaregister_nav_menus()He registrado la ubicación de mi restaurante (por ejemplo...).primaryLuego, necesitas iniciar sesión en el backend de WordPress y acceder a la página “Apariencia” -> “Menús”. Crea un menú nuevo, elige los elementos que deseas incluir en él, y marca la opción correspondiente en la sección “Ubicación de visualización” (por ejemplo, “Menú Principal”). Finalmente, guarda el menú.

¿Cómo agregar una barra lateral a un tema?

En primer lugar, enfunctions.phpEn el uso chinoregister_sidebar()La función registra una zona para un widget de barra lateral. Luego, en el archivo de plantilla donde deseas mostrar la barra lateral (por ejemplo…index.phposingle.phpEn ese texto, se utiliza…dynamic_sidebar()Esta área se utiliza para la llamada de funciones. Además, es necesario crear…sidebar.phpEl archivo define la estructura HTML específica del sidebar.

¿Es necesario que las operaciones contenidas en el archivo functions.php se monten (es decir, se ejecuten) mediante ganchos (hooks)?

Sí, en la mayoría de los casos, para asegurarte de que el código se ejecute en el momento adecuado, debes encapsular el código funcional dentro de funciones y utilizar hooks específicos (como…).after_setup_theme、wp_enqueue_scriptsMontar. Simplemente escríbelo directamente.functions.phpEl código de alcance global puede ejecutarse en momentos inapropiados o causar errores.