Empezar desde cero: Dominar los procesos básicos y las mejores prácticas del desarrollo moderno de temas de WordPress

Entorno de desarrollo e inicialización del proyecto

El primer paso para comenzar a desarrollar temas para WordPress moderno es establecer un entorno de desarrollo local eficiente y que cumpla con los estándares. Hoy en día, ya no desarrollamos directamente en el servidor, sino que utilizamos herramientas locales para mejorar la eficiencia.

Para el entorno local, puedes elegir herramientas integradas como… Local、Laragon o MAMPEstos herramientas permiten instalar Apache/Nginx, PHP y MySQL con un solo clic, lo que simplifica enormemente el proceso de configuración del entorno. La elección de una de ellas depende principalmente de tus preferencias en cuanto a sistemas operativos y de tus necesidades funcionales específicas.

¿Cómo configurar correctamente la estructura del directorio de temas?

Una estructura de directorio clara y organizada es la piedra angular del desarrollo de temas profesionales. No solo te permite mantener el código de manera sencilla, sino que también facilita que otros desarrolladores lo comprendan y colaboren con él. Los temas para WordPress modernos suelen seguir una estructura similar a los llamados “patrones” (templates o patterns).

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

En el directorio de instalación de tu WordPress… wp-content/themes Dentro de la carpeta, crea otra carpeta cuyo nombre sea el mismo que el de tu tema, por ejemplo: my-awesome-themeLuego, dentro de esta carpeta, se recomienda crear los siguientes directorios principales:
* /assetsSe utiliza para almacenar todos los recursos estáticos.
* /assets/cssSe utilizan para almacenar hojas de estilo (style sheets). style.css Y editor-style.css。
* /assets/jsAlmacena archivos de JavaScript.
* /assets/imagesAlmacena archivos de medios como imágenes e iconos.
* /assets/fontsAlmacena fuentes personalizadas.
* /template-partsAlmacena fragmentos de plantillas reutilizables, como encabezados, pies de página, metadatos de artículos, etc.
* /inc o /includesEsta función sirve para almacenar archivos que contienen mejoras relacionadas con los temas, como funciones personalizadas, registro de herramientas auxiliares, definiciones de tipos de artículos personalizados, etc.
* /patterns(Opcional, pero recomendado): Archivo que contiene las definiciones del modo de bloqueo para el editor de edición de todo el sitio web.

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 los archivos de información de los temas necesarios.

Cada tema de WordPress debe tener un archivo llamado… style.css El archivo en cuestión no es solo una hoja de estilo, sino también el “dossier de identidad” del tema. La información contenida en las notas de encabezado en la parte superior del archivo es clave para que WordPress reconozca el tema.

/*
Theme Name: 我的炫酷主题
Theme URI: https://example.com/my-awesome-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 一个专为博客和杂志网站设计的现代化、响应式WordPress主题。
Version: 1.0.0
Tested up to: 6.5
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
Domain Path: /languages
*/

Entre ellos,Text Domain Se utiliza para la internacionalización y es el único identificador de tu tema en los archivos de traducción.Requires at least Y Requires PHP Esto especifica las versiones mínimas de WordPress y PHP necesarias para el funcionamiento del tema, lo cual es de vital importancia para la experiencia del usuario y la seguridad.

Además, para soportar la función del editor de toda la página (FSE – Full Site Editor), también es necesario crear un… theme.json Este archivo actúa como un puente de comunicación entre el editor Gutenberg y los temas (temas de diseño) para definir de manera global estilos, paletas de colores, configuraciones de formato, entre otros.

Construir una plantilla de tema central.

Los archivos de plantilla son el esqueleto de un tema de WordPress y determinan cómo se presentan los diferentes tipos de contenido. WordPress selecciona automáticamente el archivo de plantilla adecuado para mostrar la página según la “estructura jerárquica de las plantillas”.

Lecturas recomendadas Guía de introducción al desarrollo de temas de WordPress: crea un sitio web personalizado desde cero.。

Los dos archivos de plantilla más básicos son: index.php(Plantilla principal, como opción de último recurso) y style.css(Plantillas de estilo). Sin embargo, para crear un tema completo y funcional, es necesario comenzar por construir a partir de las siguientes plantillas básicas.

¿Cómo construir la parte superior (cabeza) y la parte inferior (pie de página) de un sitio web?

La parte superior y la parte inferior del sitio web son secciones que se utilizan en todas las páginas. Las hemos colocado en lugares separados. header.php Y footer.php Medio.

En header.php En el archivo, debes colocar la sección `head` del documento HTML y llamar a las funciones principales de WordPress. Las funciones clave incluyen: wp_head()Permite que el núcleo de WordPress, los plugins y los temas inserten el código necesario (como hojas de estilo y metadatos) en este lugar.

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

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ¿
</head>
<body no numeric noise key 1002>
¿php_body_open();?&gt;
<header id="masthead" class="site-header">
    <!-- 你的网站导航和Logo代码 -->
</header>

footer.php Entonces, es responsable de cerrar lo que está abierto. header.php Abre los etiquetas correspondientes y realiza la llamada. wp_footer() Las funciones son de vital importancia para la carga de scripts y funciones de complementos (plugins).

¿Cómo crear un ciclo de artículos?

El ciclo de artículos es la lógica central de los temas de WordPress; se utiliza para recuperar y mostrar los artículos de la base de datos. Esta lógica generalmente se encuentra en… index.php、single.php(Un artículo) o page.php(Dentro de una sola página.)

Una estructura básica de ciclo para artículos es la siguiente. Utiliza… have_posts() Y the_post() Se utiliza una función para recorrer los artículos que se han recuperado de la consulta.

Lecturas recomendadas Guía definitiva: cómo desarrollar un tema de WordPress potente y flexible。

¿  
    ¿
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <header class="entry-header">
                <h2 class="entry-title"><a href="/es/</?php the_permalink(); ?>">¿¿¿php the_title();???</a></h2>
            </header>
            <div class="entry-content">
                ¿¿php the_content(); ??
            </div>
        </article>
    
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-awesome-theme' ); ?></p>
¿¿php endif; ?&gt;

En este ciclo, has utilizado varias etiquetas de plantilla, como… the_title() Título del artículo:the_content() Contenido del artículo:the_permalink() Obtener el enlace del artículo.

Funciones temáticas y personalizadas

Todo el código que mejora las funcionalidades de los temas debe gestionarse de manera centralizada, en lugar de estar disperso en distintos archivos de plantillas. La práctica recomendada es crear un archivo llamado… (el nombre del archivo debe especificarse) en la carpeta raíz del tema. functions.php El archivo se carga automáticamente al iniciar el tema, y funciona como un “plugin” 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

¿Cómo registrar un menú de navegación y una barra lateral?

El menú de navegación personalizado y la barra lateral (zona de herramientas) son funciones básicas de un tema. Necesitas… functions.php Se deben utilizar funciones específicas para registrarlos, y solo después de ello podrán ser gestionados en el menú “Apariencia” del backend.

utilizar register_nav_menus() Funciones para registrar la ubicación de los elementos de menú. Por ejemplo, para registrar un “menú principal” y un “menú de pie de página”.

function my_awesome_theme_setup() {
    register_nav_menus(
        array(
            'primary' => esc_html__( 'Primary Menu', 'my-awesome-theme' ),
            'footer'  => esc_html__( 'Footer Menu', 'my-awesome-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );

Para registrar los complementos (en la barra lateral), es necesario utilizar… register_sidebar() Función: Puedes definir el nombre, el ID, la descripción de la barra lateral, así como las etiquetas HTML que la rodean (anteriores y posteriores).

¿Cómo agregar soporte para imágenes destacadas a un artículo?

Las imágenes destacadas (miniaturas de los artículos) son una característica estándar en los sitios web de contenido moderno. WordPress no activa esta función por defecto; es necesario que el tema que se utilice declare de forma explícita su soporte para ello.

Puedes hacerlo en lo que se mencionó anteriormente. my_awesome_theme_setup() En la función, se utiliza… add_theme_support() Existe una función para activar dicha funcionalidad. Esta función se utiliza para habilitar diversas características del núcleo de WordPress y de los temas.

function my_awesome_theme_setup() {
    // ... 之前的菜单注册代码 ...
    add_theme_support( 'post-thumbnails' ); // 为“文章”和“页面”启用特色图像
    // 你还可以设置缩略图尺寸
    set_post_thumbnail_size( 800, 450, true ); // 默认特色图像尺寸， true表示裁剪
    add_image_size( 'my-theme-blog-list', 400, 250, true ); // 自定义一个图像尺寸
}

Una vez activado, en la interfaz de edición de artículos aparecerá un cuadro de metadatos llamado “Imagen Destacada”, que permitirá a los usuarios cargar o seleccionar imágenes. En los templates, puedes utilizar este elemento para incluir imágenes relevantes en tus contenidos. the_post_thumbnail() La función se utiliza para generar y mostrar su resultado.

Optimización de estilos, scripts y rendimiento

Incluir los archivos de CSS y JavaScript de manera correcta en la cola de procesamiento es una práctica clave en el desarrollo de WordPress. Nunca debe utilizarse directamente en los archivos de plantillas. <link> o <script> Los recursos deben ser codificados dinámicamente (no de forma fija, mediante etiquetas), en lugar de ser almacenados y utilizados de manera estática. wp_enqueue_style() Y wp_enqueue_script() Función.

¿Cómo agregar CSS y JS de manera correcta a una cola (queue)?

En functions.php Crea una nueva función en [el lugar correspondiente] para registrar y poner en cola tus recursos temáticos. Luego, monta esta función en el sistema correspondiente. wp_enqueue_scripts Este accionador está conectado a un gancho.

function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 注册并排队一个自定义的CSS文件
    wp_enqueue_style( 'my-awesome-theme-main-css', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0' );

// 注册并排队一个自定义的JavaScript文件
    wp_enqueue_script( 'my-awesome-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果需要在脚本中使用PHP变量（如ajax_url），可以使用wp_localize_script
    wp_localize_script( 'my-awesome-theme-navigation', 'myThemeData', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );

Tenga en cuenta que el último parámetro es… true Esto indica que el script se encuentra en la parte inferior del documento.</body>La carga previa (pre-loading) generalmente mejora el rendimiento de renderizado de las páginas.

¿Cómo implementar la internacionalización y la localización?

Para que tu tema pueda ser utilizado en todo el mundo, es necesario realizar el proceso de internacionalización (i18n). Esto implica que todas las cadenas de texto que se muestran en las plantillas y en el código PHP deben ser envueltas en funciones de traducción.

La función más utilizada es esc_html__()(Se utiliza para generar HTML escapado) y esc_html_e()(Son utilizadas para mostrar directamente el HTML después de que ha sido escapado; todas ellas deben ser proporcionadas dentro de la información de encabezado del tema.) Text Domain。

// Dentro del mensaje de aviso de “no hay artículos” en el ciclo de los artículos
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-awesome-theme' ); ?></p>

// 在导航菜单注册时
'primary' =&gt; esc_html__( 'Primary Menu', 'my-awesome-theme' ),

Una vez que tengas el código listo, puedes utilizar herramientas como Poedit para analizar todas las cadenas de texto que necesitan ser traducidas y generar el contenido traducido. .pot(Archivo de plantilla), y luego crear el correspondiente… .po Y .mo Traduce el archivo y colócalo en el tema correspondiente. /languages Catálogo.

resúmenes

Este extenso artículo presenta de manera sistemática el proceso central del desarrollo de temas para WordPress modernos, desde la configuración del entorno hasta la perfección de sus funciones. Comenzamos estableciendo una estructura de proyecto estandarizada y destacamos… style.css Y theme.json La importancia de… Luego, analizamos en detalle la lógica para construir niveles de plantillas, especialmente para mostrar contenido de manera dinámica a través de ciclos de artículos. En la sección de mejora de funciones, aprendimos cómo utilizar… functions.php Para expandir el tema, se incluirán opciones de registro, herramientas adicionales (widgets) y soporte para imágenes destacadas.

Finalmente, nos centramos en la gestión de recursos frontales y la calidad del código, destacando la importancia de incorporar scripts de estilo y realizar preparativos para la internacionalización mediante métodos estándar de WordPress. Seguir estas buenas prácticas no solo permite desarrollar temas con una estructura clara y fáciles de mantener, sino que también garantiza su compatibilidad, seguridad y escalabilidad, sentando así una base sólida para la creación de proyectos más complejos.

FAQ Preguntas más frecuentes

¿Cuál es la diferencia entre los temas y los plugins? ¿Dónde debería colocarse el código de funcionalidad?

Los temas son responsables de controlar la presentación visual y el diseño del contenido del sitio web (es decir, su “apariencia”), mientras que los plugins se utilizan para agregar funciones independientes al sitio (como formularios de contacto, optimización para motores de búsqueda SEO, comercio electrónico, etc.). Existe un principio sencillo para distinguir entre ambos: si el código modifica la apariencia del sitio, pertenece al tema; si el código añade nuevas funciones, debería considerarse la opción de crear un plugin. A largo plazo, convertir el código que proporciona funcionalidades en un plugin te permite mantener esas funciones incluso cuando cambies de tema.

¿Es obligatorio utilizar el archivo theme.json? ¿Qué beneficios tiene?

Para el desarrollo de temas modernos orientados al futuro, se recomienda encarecidamente el uso de… theme.jsonYa no se trata de una función avanzada opcional, sino del núcleo de la arquitectura del editor de sitio completo de WordPress. Sus ventajas incluyen la capacidad de gestionar de manera centralizada los estilos y configuraciones globales (colores, fuentes, espacios), lo que proporciona una experiencia más consistente en el editor de bloques, reduce la utilización de estilos incrustados y simplifica la implementación de diseños responsivos y del modo oscuro. A partir de WordPress 5.8, se ha convertido en una parte esencial del desarrollo de temas.

¿Cómo personalizar la salida de los widgets predeterminados en WordPress?

El HTML generado por los plugins básicos de WordPress (como los catálogos de categorías y las listas de artículos más recientes) suele contener muchas estructuras anidadas que no son necesarias. div Los nombres de las clases y los atributos pueden ser personalizados mediante filtros. Por ejemplo, se puede utilizar… widget_categories_args El complemento para modificar los parámetros de búsqueda en los directorios de clasificación de los filtros, o, de manera más exhaustiva, a través de… widget_categories_output Existen filtros que modifican directamente el HTML que generan. Otro método más moderno y flexible es crear bloques personalizados para reemplazar los widgets tradicionales.

¿Qué es la jerarquía de plantillas y cómo se puede utilizar?

El nivel de las plantillas es el sistema que utiliza WordPress para decidir qué archivo de plantilla utilizar para mostrar la página actual. Este sistema sigue un principio que va de lo “más específico” a lo “más general”. Por ejemplo, para un artículo con el ID 123, WordPress buscará en el siguiente orden:single-post-123.php -> single-post.php -> single.php -> singular.php -> Y finalmente, viene lo último. index.phpPuedes crear archivos de plantillas más específicos (por ejemplo,...). category-news.php Diseñar de forma separada la página de la categoría “Noticias” nos permite controlar con mayor precisión el aspecto de cada página, lo cual es mucho más claro que escribir un gran número de instrucciones de condición en un único archivo.

¿Cómo se realiza el depurado y la resolución de errores al desarrollar temas?

El primer paso es… wp-config.php Activa el modo de depuración de WordPress en el archivo. WP_DEBUG Los constantes se establecen en trueEsto hará que todos los errores, advertencias y notificaciones de PHP se muestren en la página. Además, se recomienda configurar… WP_DEBUG_LOG Para trueRegistra los errores en… /wp-content/debug.log En los archivos, se debe evitar que los mensajes de error queden expuestos directamente a los visitantes. Además, utilizar las herramientas de desarrollo del navegador (la consola y la etiqueta “Network”) para verificar errores de JavaScript y problemas en la carga de recursos es una habilidad esencial para el depurado del código front-end.