Aprenda rápidamente el desarrollo de temas de WordPress: una guía completa desde lo básico hasta la práctica.

Los temas de WordPress son la base de la apariencia y la funcionalidad de un sitio web. Al desarrollar sus propios temas, los desarrolladores pueden liberarse de las limitaciones de los temas predeterminados, lograr un diseño de sitio web completamente personalizado y, en el proceso, comprender en profundidad la arquitectura central de WordPress. Este artículo tiene como objetivo proporcionarle una ruta de aprendizaje clara, desde los conceptos básicos hasta el desarrollo práctico, para que pueda dominar sistemáticamente los fundamentos del desarrollo de temas de WordPress.

Fundamentos del desarrollo de temas de WordPress.

Para desarrollar un tema de WordPress con éxito, primero es necesario comprender su estructura básica y sus conceptos fundamentales. Un tema es, en esencia, un conjunto de archivos ubicados en /wp-content/themes/ Una carpeta en el directorio que contiene una serie de archivos específicos.

Los documentos centrales que conforman el tema

Cada tema de WordPress debe incluir algunos archivos básicos. Entre ellos, los dos más importantes son: style.css Y index.php。

Lecturas recomendadas Guía de desarrollo de temas de WordPress: un tutorial práctico completo de principiante a experto.。

style.css No es solo una hoja de estilo, sino también la “tarjeta de identidad” del tema. El bloque de comentarios en la parte superior del archivo se usa para declarar la información del tema, lo cual es clave para que WordPress reconozca el tema.

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
License: GPL v2 or later
Text Domain: my-first-theme
*/

index.php Es el archivo de respaldo predeterminado en el nivel de plantilla. Si hay otros archivos de plantilla más específicos (por ejemplo, single.phpSi no existe, WordPress volverá a usarlo. Es el punto de partida de toda la lógica de visualización del tema.

Comprender el nivel de las plantillas y los archivos de plantillas.

WordPress utiliza un sistema de jerarquía de plantillas para determinar qué archivo de plantilla usar para presentar el contenido en función de las diferentes solicitudes de página. Por ejemplo, cuando un usuario accede a una publicación de blog, WordPress busca en el siguiente orden:single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.phpPara comprender esta relación jerárquica, es necesario saber en qué ubicación crear qué archivos, con el fin de controlar con precisión la visualización de la página.

¿Cuál es la función de los archivos de funciones temáticas?

functions.php Es el “cerebro” del tema. No se trata de una plantilla que se muestre directamente al usuario, sino de un archivo PHP que se carga automáticamente cuando se inicializa el tema. Aquí puede agregar funciones de soporte para el tema, registrar menús y barras laterales, incorporar scripts y archivos de estilo, y definir diversas funciones personalizadas.

Desarrollo práctico de plantillas de temas

Después de comprender la infraestructura, podemos comenzar a construir un tema básico que cumpla con los estándares modernos de desarrollo de WordPress. Comenzaremos creando el diseño e integrando las funciones principales de WordPress.

Lecturas recomendadas Desde cero: crear un tema profesional de WordPress amigable para motores de búsqueda.。

Construir el marco temático básico.

Primero, en tu… /wp-content/themes/ Crea una nueva carpeta en el directorio, por ejemplo, mythemeLuego, crea lo mencionado anteriormente. style.css Y index.php Documento. En index.php En este paso, introducimos las funciones principales de WordPress para obtener la cabecera, el área de contenido y el pie de página.

Un simple index.php La estructura inicial puede escribirse de la siguiente manera:

¿¿php get_header();??

<main id="main-content">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // El contenido del post se mostrará aquí
            el_contenido();
        endwhile;
    else :
        echo &#039;<p>No se ha encontrado contenido. </p>';
    endif;
    ? &gt;
</main>

¿¿¿php get_footer();???

Este código llama a get_header() Y get_footer() Función, lo que significa que necesitamos crear la correspondiente. header.php Y footer.php El archivo separa las partes de cabecera y pie de página del sitio web, lo que permite la reutilización del código.

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 archivos de encabezado y pie de página.

En header.php En este caso, necesitas incluir la parte inicial del documento HTML, las etiquetas meta necesarias, importar estilos y llamar a las funciones clave de WordPress, como wp_head()。

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

footer.php Luego, normalmente incluye el contenido del pie de página y hace una llamada a wp_footer() Una función, que es un gancho necesario que se carga en muchos plugins y en el script principal de WordPress.

Implemetar el menú de navegación y la barra lateral.

Un sitio web completo necesita un menú de navegación. Primero, en functions.php En el uso chino register_nav_menus() Ubicación para el registro de funciones en el menú.

Lecturas recomendadas ¿Cómo construir un tema profesional de WordPress desde cero? Guía completa de desarrollo。

function mytheme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'mytheme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Luego, en header.php Encuentre la ubicación adecuada y utilice wp_nav_menu() Se utiliza una función para mostrar este menú.

El registro en la barra lateral (área de gadgets) también es similar, a través de register_sidebar() Implementar la función y usarla en el archivo de plantilla. dynamic_sidebar() Llámalo para usarlo.

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

Mejoras en las funciones y estilos de los temas.

Cuando la página base se muestre correctamente, el siguiente paso será mejorar la funcionalidad y la capacidad de personalización del tema para que sea más profesional y fácil de usar.

Agregar soporte para la función de temas.

Los temas modernos de WordPress necesitan declarar el soporte para ciertas funciones. Por ejemplo, para usar imágenes destacadas (miniaturas de artículos), necesitas hacerlo en functions.php Añade una declaración de soporte para el tema en el centro.

add_theme_support( 'post-thumbnails' );
// 还可以添加其他支持，如自定义Logo、标题标签等
add_theme_support( 'title-tag' );
add_theme_support( 'custom-logo' );

Cargar correctamente los scripts y los estilos.

Con el fin de optimizar el rendimiento y evitar conflictos, nunca use directamente en los archivos de plantilla. <link> o <script> Las etiquetas introducen recursos. Se debería usar wp_enqueue_style() Y wp_enqueue_script() Función, y a través de… wp_enqueue_scripts El gancho viene para cargarlo.

function mytheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义的JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Usar un bucle para mostrar la lista de artículos.

“El ”bucle» es un concepto fundamental de WordPress que se utiliza para obtener y mostrar artículos de la base de datos. En la página principal o en la página de archivos, normalmente necesitamos mostrar una lista de artículos. Esto se puede hacer mediante archivos de plantilla, como < home.php o archive.phpSe puede construir un ciclo para lograr esto, utilizando funciones como… the_title()、the_excerpt()、the_permalink() Generar el título, el resumen y el enlace de cada artículo.

Técnicas de desarrollo de temas avanzados.

Después de dominar lo básico, algunas técnicas avanzadas pueden hacer que tu tema sea más competitivo y fácil de mantener.

Crear una plantilla de página personalizada.

Los plantillas de página te permiten dar un diseño único a páginas específicas. Por ejemplo, puedes crear una plantilla de “página de ancho completo”. Para registrarla como plantilla de página, solo tienes que agregar comentarios de un formato específico al principio de un archivo PHP.

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板
 */
get_header(); ?>
// ... 自定义的页面结构，不使用 get_sidebar() ...
<?php get_footer(); ?>

Luego, cuando edite la página en el panel de administración de WordPress, podrá seleccionar esta plantilla en “Propiedades de la página”.

Implementar el mecanismo de subtemas.

Si desea modificar un tema existente (especialmente un tema padre), la mejor práctica es crear un subtema. Los subtemas solo incluyen elementos personalizados. style.css Con los archivos de plantilla necesarios, heredará todas las funciones del tema padre. En tu subtema style.css En chino, se usa Template: La declaración sirve para especificar el nombre del directorio del tema padre. Esto garantiza que, cuando se actualice el tema padre, tus modificaciones personalizadas no se sobrescriban.

Seguir los estándares de codificación de WordPress.

Con el fin de garantizar la claridad y la facilidad de mantenimiento del código, se recomienda seguir los estándares de codificación de PHP, CSS y JavaScript establecidos por WordPress. Esto incluye el uso de la indentación correcta, la ubicación de los paréntesis, las convenciones de nomenclatura (utilizar letras minúsculas con guiones para las funciones y variables), etc. Es una buena práctica utilizar como referencia la estructura de temas oficiales de WordPress, como Twenty Twenty-Four.

resúmenes

El desarrollo de temas de WordPress es un proceso que comienza con la comprensión de la estructura básica de los archivos y avanza gradualmente hacia los niveles de plantillas, la integración de funciones y las características personalizadas. A través de la creación sistemática de header.php、footer.php、functions.php Con documentos básicos como estos, y utilizando funciones de bucle, funciones de ganchos y funciones de soporte de temas, los desarrolladores pueden crear temas profesionales completos y con un código estructurado. La clave está en la práctica: comenzar con un marco de tema muy simple, agregar funciones gradualmente y, al final, podrás crear un tema de WordPress personalizado que se ajuste perfectamente a las necesidades del proyecto.

FAQ Preguntas más frecuentes

¿Qué conocimientos previos se necesitan para desarrollar un tema para WordPress?

Necesitas tener conocimientos básicos de HTML y CSS para crear la estructura y el estilo de la página. Al mismo tiempo, es imprescindible tener conocimientos básicos de PHP, ya que el núcleo de WordPress y los archivos de plantillas están escritos en este lenguaje. Un conocimiento básico de JavaScript puede ayudarte a agregar funciones interactivas al front-end.

¿Cuáles son los archivos temáticos de WordPress necesarios?

Un tema básico que pueda ser reconocido por WordPress solo necesita dos archivos:style.css(Incluyendo el encabezado de anotación con la información correcta del tema) y index.phpSin embargo, un tema funcional y práctico generalmente también incluye functions.php、header.php、footer.php demasiado page.php、single.php Archivos de plantillas, entre otros.

¿Cómo agrego una función de menú a mi tema?

Primero, necesitas trabajar en el tema… functions.php Se utiliza en el archivo. register_nav_menus() Un método para registrar una o más ubicaciones de menú. Luego, en el archivo de plantilla correspondiente (por ejemplo, header.phpEn ese texto, se utiliza… wp_nav_menu() El usuario debe especificar la ubicación de registro para mostrar el menú. Por último, el usuario puede crear un menú y asignarlo a esa ubicación en la interfaz “Apariencia -> Menú” del panel de administración de WordPress.

¿Cuál es la diferencia entre un subtema y un tema principal?

Un tema padre es un tema funcional completo e independiente. Un tema hijo depende de un tema padre específico y solo incluye los archivos que deseas modificar o agregar (por ejemplo, style.css(Archivos de plantilla cubiertos). Cuando se activa un subtema, este carga primero sus propios archivos, y los archivos que no se proporcionan se obtienen del tema padre. El uso de subtemas es una forma recomendada de personalizar y modificar de forma segura los temas existentes, lo que garantiza que las partes personalizadas se conserven cuando se actualice el tema padre.

¿Cómo agregar un enlace de “Leer más” a la lista de artículos?

En el bucle del artículo, cuando utilizas the_excerpt() Cuando WordPress muestra el resumen de la función, genera automáticamente un enlace de “Leer más” que apunta al texto completo. Si desea utilizarlo, puede hacerlo de la siguiente manera: the_content() Para controlar manualmente la posición de corte, puede insertar la etiqueta “Más” en el editor de artículos o usarla en la plantilla. the_content( ‘继续阅读’ ) La función, cuyo parámetro es el texto del enlace personalizado.