Guía definitiva para el desarrollo de temas para WordPress: Crea tu primer tema personalizado desde cero

Preparación y configuración del entorno.

Antes de comenzar a escribir código, es esencial disponer de un entorno de desarrollo local estable y eficiente. Esto no solo te permitirá trabajar sin conexión a internet, sino que también te evitará los riesgos asociados a las operaciones directas en servidores en línea. En primer lugar, necesitas instalar un entorno de servidor local, como XAMPP, MAMP o el más profesional Local by Flywheel. Estas herramientas configurarán automáticamente Apache, MySQL y PHP, que son los componentes básicos para ejecutar WordPress.

A continuación, necesitarás descargar los archivos más recientes del núcleo de WordPress y instalarlos en tu servidor local. Una vez completada la instalación básica, podrás empezar a crear el directorio de tu tema. Todos los temas de WordPress se encuentran en… /wp-content/themes/ En el directorio. Por favor, cree una nueva carpeta aquí, por ejemplo… my-first-themeEl nombre de esta carpeta es tu identificador temático.

Un tema WordPress válido debe contener al menos dos archivos esenciales:style.css Y index.php。style.css El archivo no es solo una hoja de estilo, sino también el “dNI” de un tema; las notas en el encabezado del archivo contienen toda la metainformación del tema.

Lecturas recomendadas Creación de sitios web profesionales: Una guía completa para desarrollar un tema personalizado para WordPress desde cero。

Información del encabezado del archivo de estilo de tema

style.css El inicio del archivo debe contener un comentario CSS específico que describa tu tema para WordPress. Esta información se mostrará en la página de administración de “Apariencia” -> “Temas” en el backend.

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: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习 WordPress 主题开发的简单定制主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Entre ellos,Text Domain Se utiliza para la internacionalización y debe mantenerse en línea con el nombre de la carpeta de temas. index.php Es el archivo de plantilla predeterminado del tema y sirve como plantilla de respaldo para todas las páginas. Inicialmente, podía ser simplemente una estructura HTML básica utilizada para comprobar si el tema es reconocido correctamente por WordPress.

Comprender los niveles de las plantillas y crear plantillas principales

WordPress utiliza un sistema inteligente llamado “estructura de plantillas” para decidir qué archivo de plantilla cargar en respuesta a una solicitud de página específica. Comprender estas reglas es esencial para el desarrollo de temas. En resumen, cuando un usuario accede a una página, WordPress busca el archivo de plantilla correspondiente siguiendo un orden que va de lo más específico a lo más general.

Por ejemplo, cuando se accede a un artículo de blog con el ID 5, WordPress busca en el siguiente orden:single-post-5.php -> single-post.php -> single.php -> singular.php -> Y finalmente, viene lo último. index.phpSi se encuentra un archivo que coincida, se utilizará; de lo contrario, se continuará buscando hacia abajo.

Crear una plantilla para la página de un artículo

single.php Es un modelo estándar utilizado para mostrar un artículo de blog individual. En este archivo, utilizarás una serie de etiquetas y funciones del núcleo de WordPress para mostrar el contenido del artículo.

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

¿¿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 1008>
            <header class="entry-header">
                <h1 class="entry-title">¿¿¿php the_title();???</h1>
                <div class="entry-meta">
                    Publicado el:  | Por:
                </div>
            </header>
            <div class="entry-content">
                ¿¿php the_content(); ??
            </div>
            <footer class="entry-footer">
                &lt;?php the_tags(&#039;标签：&#039;, &#039;, &#039;, &#039;<br>'); ?&gt;
            </footer>
        </article>
        <?php
        // 输出上一篇、下一篇文章导航
        the_post_navigation();
    endwhile;
    ?>
</main>

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

Este template utiliza… the_post() Vamos a configurar lo global. $post Variable, y luego a través de… the_title()、the_content() Las funciones mencionadas generan datos de artículos como salida. Además, se han introducido componentes de plantilla (templates).get_header(), get_sidebar(), get_footer()。

Crear una plantilla de página

page.php Los templates se utilizan para mostrar páginas estáticas. Su estructura es similar a… single.php De forma similar, pero generalmente no incluyen metadatos de artículo típicos como categorías o etiquetas. Puedes crear más plantillas de páginas específicas según sea necesario; por ejemplo, una plantilla para la página “Sobre nosotros” podría llamarse… page-about.php WordPress aplicará automáticamente este archivo a las páginas cuyo título o alias (slug) sea “about”.

Integración de componentes de plantillas con menús de navegación

Para mantener la modularidad y reutilizabilidad del código, los temas de WordPress suelen dividir las partes como el encabezado, el pie de página y los barras laterales en archivos de “componentes de plantilla” independientes. Esto se logra mediante el uso de… get_template_part() Puedes introducir estos componentes fácilmente en diferentes plantillas mediante funciones.

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

Crear el archivo de cabecera para un tema

header.php El archivo contiene la parte de encabezado (header) del documento HTML. La parte visual de la parte superior del sitio web, como el logotipo y la navegación principal.

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

Funciones clave wp_head() Permite que el núcleo de WordPress, los plugins y otros scripts añadan el código necesario (como enlaces a CSS y JS) en la parte superior de la página.wp_nav_menu() La función se utiliza para generar y mostrar un menú de navegación ya registrado.

Posición del menú de navegación para el registro

El menú de navegación debe ser “registrado” primero en la sección correspondiente del tema, para que los usuarios puedan asignarlo en la parte posterior del sistema, en la opción “Apariencia” -> “Menús”. Esto suele ocurrir dentro de las configuraciones del tema. functions.php Se ha completado el proceso en el archivo.

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

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus(
        array(
            'menu-primary' => esc_html__( '主导航', 'my-first-theme' ),
            'menu-footer'  => esc_html__( '页脚导航', 'my-first-theme' ),
        )
    );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持文章和评论的 RSS feed 链接
    add_theme_support( 'automatic-feed-links' );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() La función ha registrado dos ubicaciones para los menús. add_theme_support() Hemos habilitado funciones como el uso de logos personalizados y etiquetas de título, lo cual es una práctica estándar en el desarrollo de temas para WordPress moderno.

Avanzado en funciones temáticas y estilos

functions.php El archivo corresponde a tu tema “Centro de Control”, y sirve para agregar funciones, modificar el comportamiento predeterminado, cargar scripts y hojas de estilo. Su función es similar a la de los plugins, pero se utiliza específicamente para tu tema.

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

Introducir estilos y scripts de forma segura.

La forma correcta de cargar los estilos y los scripts es utilizando… wp_enqueue_style() Y wp_enqueue_script() Funciones, y montarlas en wp_enqueue_scripts Este accionador está conectado a un gancho.

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' );

Este método garantiza que las relaciones de dependencia estén correctas y evita la carga repetida de recursos. Función. get_stylesheet_uri() Volver a la página principal style.css El URL, y… get_template_directory_uri() URL que devuelve al directorio de temas.

Crear una zona para herramientas en el sidebar

El área de herramientas adicionales (Sidebar) permite a los usuarios personalizar los bloques de contenido arrastrándolos desde la parte posterior del sistema. El proceso de registro para crear una nueva área de herramientas adicionales también es similar. functions.php Se completará en…

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' =&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_first_theme_widgets_init' );

Después de registrarte, podrás… sidebar.php Se utiliza en los componentes de plantilla. dynamic_sidebar( 'sidebar-1' ) La función ya está generando la salida para esta área.

resúmenes

Esta guía presenta de manera sistemática los procesos clave para el desarrollo de temas para WordPress. Comienza con la configuración de un entorno de desarrollo local y la creación de los archivos básicos del tema, continúa con la comprensión y la implementación del potente sistema de niveles de plantillas de WordPress, luego se trata la integración de componentes de plantillas, el registro de menús de navegación y áreas de herramientas, y finalmente… functions.php Expande las funcionalidades de tu tema de manera segura y eficiente. Siguiendo estos pasos, has creado con éxito un tema personalizado que presenta una estructura clara, cuenta con funciones completas y cumple con los estándares de codificación de WordPress. Esto te proporciona una base sólida para desarrollar en el futuro temas más complejos y con más funcionalidades. Recuerda que el desarrollo de temas es un proceso de aprendizaje continuo; la práctica constante y la consulta de los documentos oficiales son clave para mejorar tus habilidades.

FAQ Preguntas más frecuentes

¿Qué es la jerarquía de plantillas en WordPress (###)?
Los niveles de plantillas en WordPress son un conjunto de reglas que determinan qué archivo de plantilla se utilizará para diferentes tipos de páginas. Se trata de un orden de búsqueda que va de lo específico a lo general. Por ejemplo, para un artículo en particular, WordPress buscará primero la plantilla específica que coincida con el ID o el tipo de ese artículo. Si no encuentra dicha plantilla, retrocederá gradualmente a plantillas más generales, hasta llegar a la más general de todas. index.phpComprender las relaciones de jerarquía es de vital importancia para crear temas con una estructura correcta.

¿Por qué se debe utilizar `wp_enqueue_style` para cargar los estilos?

utilizar wp_enqueue_style() Y wp_enqueue_script() Es el método de carga de recursos recomendado y estandarizado por WordPress. Permite gestionar correctamente las dependencias (por ejemplo, asegurarse de que jQuery se carga antes que los scripts personalizados), evita que los mismos recursos se carguen repetidamente y es compatible con plugins de caché, subtemas y otros componentes del ecosistema de WordPress. Se puede utilizar directamente en los archivos de plantilla. o El uso de etiquetas no es una práctica recomendable.

¿Cuál es la diferencia entre el archivo functions.php y los plugins?

functions.php Los archivos forman parte de un tema y sus funciones se activan cuando dicho tema se utiliza y se desactivan cuando se cambia de tema. Se utilizan principalmente para agregar características que estén estrechamente relacionadas con la apariencia visual y las funcionalidades de ese tema. Por otro lado, las funciones ofrecidas por los plugins suelen ser independientes del tema; es decir, siguen estando disponibles incluso después de cambiar de tema. En general, si una función está muy relacionada con el estilo o la estructura de un tema, es conveniente incluirla dentro de ese mismo tema. functions.phpSi se trata de una función universal, sería más adecuado convertirla en un complemento (plugin).

¿Cómo puedo hacer que mi tema admita múltiples idiomas (internacionalización)?

Para hacer que un tema sea compatible con múltiples idiomas, es decir, para internacionalizarlo (i18n), se deben seguir los siguientes pasos: En primer lugar, style.css La parte superior y todo lo demás… load_theme_textdomain() El parámetro se ha configurado correctamente durante la llamada. Text DomainEn segundo lugar, en functions.php Llamada desde China load_theme_textdomain() Se utiliza una función para especificar la carpeta de archivos de idioma. Finalmente, y lo que es más importante, en todos los archivos de plantillas PHP del tema… functions.php En este caso, todas las cadenas de texto dirigidas al usuario se envuelven (es decir, se procesan) utilizando las funciones de traducción de WordPress. esc_html__( ‘文本’, ‘my-first-theme’ ) o _e( ‘文本’, ‘my-first-theme’ )Una vez completado, se pueden utilizar herramientas como Poedit para generar el resultado final. .pot Archivo de plantilla, utilizado por los traductores para crear versiones del texto en diferentes idiomas. .po Y .mo Documentos.