Desarrollo de temas para WordPress: ¡Construya su primer tema personalizado desde cero!

Comprender la estructura central de un tema de WordPress

Antes de comenzar a escribir código, es esencial comprender los fundamentos de un tema de WordPress: los archivos de plantilla y las hojas de estilo. WordPress renderiza las diferentes partes del sitio web llamando a una serie de archivos específicos, los cuales siguen convenciones de nombre estandarizadas. Un tema mínimo solo necesita dos archivos:index.php(Principal archivo de plantilla) ystyle.css(El archivo de estilo principal y el archivo de información del tema), pero para construir un sitio web con funciones avanzadas, necesitamos más.

style.cssEl archivo no solo contiene reglas CSS, sino que el bloque de comentarios en su cabecera también define los metadatos del tema, como el nombre del tema, el autor, la descripción y la versión. Así es como WordPress reconoce un tema. Por ejemplo, un ejemplo básico de comentario en la cabecera sería el siguiente:

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Además de los archivos centrales, una estructura típica de un tema también incluye:header.php(Assent with the head)footer.php(En la parte inferior del sitio web)sidebar.php(Sidebar) Yfunctions.php(Archivo de funciones de funcionalidades temáticas). Comprender cómo integrar estos archivos mediante etiquetas de plantilla (como…)get_header(), get_footer()Combinar los componentes de manera modular es clave para un desarrollo eficiente.

Lecturas recomendadas Guía para principiantes sobre el desarrollo de temas para WordPress: Cómo crear su propia interfaz web desde cero。

Crear archivos temáticos y directorios

Primero, necesitamos ir al directorio de instalación de WordPress.wp-content/themes/Crea una nueva carpeta en la ubicación indicada. El nombre de esta carpeta deberá ser el identificador de tu tema; se recomienda utilizar letras minúsculas, números y guiones, por ejemplo:my-first-themeTodos los archivos de los temas se colocarán aquí.

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

Crear el archivo de la hoja de estilo principal

Como se enfatizó anteriormente,style.cssEs necesario crear este archivo en la carpeta de temas y completar la información de cabecera del mismo. Luego, puedes comenzar a escribir el código CSS básico para definir la apariencia del sitio web. Para evitar que los estilos predeterminados del navegador interfieran, suele ser conveniente comenzar por restablecer los estilos del sitio.

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

Crear el archivo de plantilla principal

A continuación, cree…index.phpEste es el archivo de plantilla predeterminado y más importante. Su estructura inicial debe incluir llamadas a la parte superior del sitio (header), al ciclo de contenido y a la parte inferior (footer). Los etiquetas de plantilla son funciones integradas de WordPress que se utilizan para insertar contenido dinámico.
Un diseño muy minimalista.index.phpLa versión inicial podría ser la siguiente:

¿¿php get_header();??

<main id="primary" class="site-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>

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

Descomposición del template: cabecera, pie de página y barra lateral

Para reutilizar el código y mantener la claridad, los temas de WordPress suelen separar las partes comunes de las páginas en archivos independientes.

Implementar el modelo de cabeza para la página web

Crearheader.phpEste archivo contiene la parte de encabezado (header) de un documento HTML.Hasta allí.La parte que se utiliza para activar las etiquetas, así como la zona de navegación en la parte superior del sitio web. Las etiquetas de plantilla clave incluyen…bloginfo()Se utiliza para obtener información sobre el sitio web, así como…wp_head()El “gancho” (hook) permite que los plugins y temas inserten código de manera dinámica en ciertas partes del código fuente del sitio web.
Un básicoheader.phpEjemplo:

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

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ¿
</head>
<body no numeric noise key 1005>
¿php_body_open();?&gt;
<header 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>
        <p class="site-description"><?php bloginfo('description'); ?></p>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

Implementar la plantilla del pie de página del sitio

Crearfooter.phpContiene todo el contenido que sigue al final de la zona principal del contenido, como la información de derechos de autor en el pie de página, así como elementos de vital importancia.wp_footer()Las llamadas de tipo “hook” son esenciales para el correcto funcionamiento de muchos plugins (como los que analizan el código).

<footer class="site-footer">
    <p>©  . Todos los derechos reservados.</p>
</footer>
¿php_footer();?&gt;
</body>
</html>

Mejorar las funciones temáticas y la personalización.

functions.phpSe trata del “cerebro” de tu tema, que se utiliza para agregar funciones, registrar características (como menús de navegación, áreas de herramientas) y configurar estilos de script, sin necesidad de modificar los archivos centrales.

Funciones soportadas por el registro de temas:

Enfunctions.phpEn esto, puedes utilizar…add_theme_support()Las funciones se utilizan para declarar las funcionalidades que un tema soporta. Por ejemplo, habilitar las miniaturas de los artículos (imágenes destacadas) y los logotipos personalizados son características estándar en los temas modernos.

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

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

Incluir en el archivo de estilo y en los scripts.

La forma correcta de cargar los estilos y los scripts es utilizando…wp_enqueue_style()Ywp_enqueue_script()Funciones, y montarlas enwp_enqueue_scriptsEn el gancho. Esto asegura que las dependencias se gestionen adecuadamente y evita la carga repetida de recursos.

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

resúmenes

Desde la creación de la carpeta de temas y…style.cssDesde el comienzo, hasta la construcción.index.phpDescomponer en…header.phpYfooter.phpDesde los archivos de plantilla, hasta el proceso de implementación…functions.phpEl archivo añade funciones y recursos esenciales a tu tema, lo que constituye el marco básico para el desarrollo de temas WordPress. Cada paso pone de relieve el concepto de la estructura jerárquica de las plantillas de WordPress y las mejores prácticas, como el uso correcto de las etiquetas de plantilla y los ganchos (hooks). Al dominar estos fundamentos, contarás con un punto de partida sólido para personalizar y expandir cualquier función y satisfacer las necesidades de diferentes proyectos.

FAQ Preguntas más frecuentes

¿Cuántos archivos necesita como mínimo un tema de WordPress para funcionar?
Un tema para WordPress que funcione correctamente necesita, como mínimo, dos archivos:index.phpYstyle.cssEntre ellos,style.cssEl bloque de comentarios en la parte superior del archivo debe existir y contener la información temática correcta; esto es una condición necesaria para que WordPress reconozca el tema.

Lecturas recomendadas De cero a uno: La guía definitiva y el tutorial práctico para el desarrollo de temas para WordPress。

¿Cómo puedo agregar una zona de herramientas a mi tema?

Necesitas pasar por…functions.phpArchivo para registrar la zona de herramientas adicionales (barra lateral). Usar.register_sidebar()Se define una función y se especifican sus parámetros, como el nombre, el ID y la descripción. Luego, se puede utilizar dicha función en los archivos de plantilla correspondientes (por ejemplo…).sidebar.php) se utiliza endynamic_sidebar()Se utiliza una función para llamarlo.

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

Esto suele ocurrir porque no se ha realizado algo específico (por ejemplo, no se ha completado un proceso o no se ha seguido una instrucción).functions.phpRegístre correctamente la ubicación de su unidad de cocina. Por favor, asegúrese de haber utilizado los datos correctos.register_nav_menus()La función se utiliza para registrar la posición de un plato (por ejemplo, ‘primary’) y, además, ...header.phpLlamada desde Chinawp_nav_menu()En ese momento…‘theme_location’Los valores de los parámetros establecidos son idénticos a los utilizados durante el registro. Finalmente, es necesario asignar un menú a esta posición en la configuración de “Apariencia > Menús” del panel de administración de WordPress.

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

我应该在什么时候使用get_template_part()函数？

get_template_part()Las funciones se utilizan para modularizar fragmentos de código reutilizables, lo que es especialmente útil para la salida de contenido de diferentes formatos en ciclos de artículos. Por ejemplo, puedes crear una función que…content.phpEl archivo define la estructura HTML común para cada artículo y, a continuación…index.phpSe utiliza en un ciclo para...get_template_part(‘content’)Llámalo para utilizarlo. Esto mejora la reutilizabilidad y la mantenibilidad del código, y también facilita la creación de plantillas más profesionales (como…).content-page.phpEsto se vuelve posible.