De cero a uno: aprenda paso a paso a dominar las habilidades básicas de desarrollo de temas de WordPress modernos.

Conceptos básicos del desarrollo de temas para WordPress moderno

La arquitectura de los temas para WordPress modernos difiere significativamente de los métodos tradicionales. El cambio más importante es la adopción generalizada de los temas basados en bloques (Block Themes) y del modo de edición en todo el sitio (Full Site Editing, FSE). Esto significa que la apariencia y el diseño de un tema, desde el encabezado, el pie de página hasta el contenido de los artículos, pueden ser construidos y modificados utilizando los “bloques” disponibles en el editor Gutenberg, sin la necesidad de escribir directamente plantillas PHP complejas.

La estructura básica de los archivos de un tema moderno ha sido simplificada de manera fundamental. El archivo de plantilla más importante entre ellos es…theme.jsonDefine los estilos del tema, la paleta de colores, la tipografía y otros ajustes globales. Otro archivo de vital importancia es…index.htmlSustituyó al método tradicional.index.phpComo plantilla predeterminada, se utilizan bloques de HTML estáticos y que pueden ser interpretados por el editor para construir el esqueleto de la página.style.cssEl archivo sigue existiendo y se utiliza principalmente para declarar la información del tema, pero la mayoría de las definiciones de estilos CSS han sido trasladadas a otro lugar.theme.jsonO puede ser gestionado por un editor.

Para mantener la compatibilidad con versiones anteriores, WordPress verifica si existe un archivo específico en el directorio raíz del tema.block-templatesotemplatesCarpetas. Estas carpetas se utilizan para almacenar archivos de plantillas HTML basadas en bloques.single.htmlopage.htmlSe utilizarán con prioridad en lugar de los archivos de plantillas PHP. Además, el método para manejar los estilos y los recursos frontales provenientes de los temas depende de…wp_enqueue_styleYwp_enqueue_scriptLas funciones, por lo general, se encuentran en el archivo principal.functions.phpRealiza el registro y espera en la cola allí.

Lecturas recomendadas Desarrollo de temas para WordPress: Desde los principios hasta la maestría: Te enseñamos paso a paso a crear sitios web personalizados。

Comprender este cambio de enfoque —pasar de escribir plantillas PHP fijas a definir estilos y estructuras utilizando JSON y marcadores de bloques— es el primer paso para dominar el desarrollo de temas modernos.

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

Creación y configuración de archivos centrales del tema

Para crear un tema moderno para WordPress, primero es necesario…wp-content/themesCree una nueva carpeta de temas en el directorio. Esto es válido incluso para los temas de tipo “bloque” (block themes).style.cssEl archivo sigue siendo necesario como un “Documento de Identificación”, y el bloque de comentarios en la parte superior debe contener información específica.

/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/

Inmediatamente después, necesitas crear el “cerebro” de un tema moderno.theme.jsonEl archivo JSON se encuentra en la carpeta raíz del tema y sirve para controlar de manera centralizada los estilos globales y las configuraciones del mismo. A través de este archivo, es posible definir el sistema de tipografía (como el tamaño y la familia de fuentes), los paletas de colores, los estilos predeterminados de los bloques, etc. Los plugins y los subtemas también pueden sobreponerse a estas definiciones para personalizar aún más los estilos. Es un archivo básico y esencial para la configuración del tema.theme.jsonLa estructura es la siguiente:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "黑色", "slug": "black", "color": "#000000" },
        { "name": "白色", "slug": "white", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "14px" },
        { "name": "中", "slug": "medium", "size": "20px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)"
    }
  },
  "customTemplates": [
    {
      "name": "宽幅页面",
      "title": "宽幅页面",
      "postTypes": [ "page" ]
    }
  ]
}

Plantilla principal del temaindex.htmlSe ha definido la estructura predeterminada de la página. Está compuesta íntegramente por etiquetas de bloque envueltas en comentarios HTML que son reconocibles por el editor, por ejemplo:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Dicha estructura divide de manera clara la cabecera, la zona de contenido principal y el pie de página, y lo hace a través de…wp:post-contentEl contenido de los artículos se carga dinámicamente en bloques. Finalmente, es necesario crear un directorio llamado “Template Parts” en la carpeta raíz del tema.partsY colocar algo en su interior.header.htmlYfooter.htmlArchivos de componentes, etc.

Lecturas recomendadas Guía popular para principiantes en 2026: Cómo crear su primer tema para WordPress desde cero。

Construir páginas utilizando plantillas y componentes de plantilla.

En los temas de tipo bloque, la estructura de diseño de la página se construye principalmente a través de plantillas (Templates) y componentes de plantilla (Template Parts). Las plantillas se utilizan para definir el marco general de tipos específicos de páginas (como un artículo individual o una página de archivo), mientras que los componentes de plantilla son módulos reutilizables, como los encabezados y los pies de página.

Los archivos de plantilla suelen almacenarse en la carpeta correspondiente al tema (theme folder).templatesDentro de la carpeta, WordPress asignará automáticamente archivos de plantilla específicos según el tipo de consulta. Por ejemplo,single.htmlSe utiliza para presentar un único artículo.page.htmlSe utiliza para páginas estáticas.home.htmloindex.htmlSe utiliza para la página principal del blog. Puedes…theme.json¿Dónde está el baño?customTemplatesAlgunas declaraciones definen plantillas personalizadas que los usuarios pueden elegir en el editor de páginas.

Los componentes de plantilla se almacenan en…partsEn la carpeta, se ha logrado un gran aumento en la tasa de reutilización del código y en la facilidad de su mantenimiento. Se ha creado un archivo de encabezado (header file).header.htmlSe puede construir la zona superior utilizando el bloque de título del sitio, el bloque de navegación, etc. Para crear el archivo del pie de página, siga los pasos correspondientes.footer.htmlSe puede utilizar este espacio para incluir información sobre los derechos de autor y una zona para herramientas adicionales.

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

Un ejemplo típico…header.htmlPuede ser algo similar a lo siguiente:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->

En este ejemplo,wp:navigationLos bloques se identifican o se manejan a través de sus… (es decir, mediante algún atributo, característica o elemento distintivo que les es propio).refEl atributo hace referencia a un menú de navegación creado y guardado en “Apariencia” -> “Editor” (cuyo ID es 4), lo que demuestra la gran ventaja de separar el contenido de la estructura en la edición de toda la página. Al incluir estos componentes en la plantilla principal, se logra una mayor flexibilidad y reutilización de los elementos de diseño.Se pueden insertar en la página simplemente siguiendo los pasos correspondientes.

Para diseños más complejos, se pueden utilizar…wp:group、wp:columns、wp:querySe utilizan bloques para construir filas, columnas y contenido repetitivo (ciclos). Por ejemplo,wp:queryLos bloques pueden listar dinámicamente los artículos más recientes, lo que equivale al ciclo principal de los temas tradicionales; sin embargo, ahora todo se configura completamente a través de un editor visual.

Lecturas recomendadas De cero a la maestría: Guía completa y tutorial práctico para el desarrollo de temas para WordPress。

Agregar funciones y estilos a través de archivos de funciones

A pesar de que los temas basados en bloques dependen en gran medida de…theme.jsonY los templates HTML, pero…functions.phpLos archivos siguen siendo el núcleo de la función de extensión de temas. Se trata de un archivo PHP que no devuelve ningún valor y se utiliza para agregar funcionalidades, registrar scripts de estilo, definir el soporte para temas, etc.

Una operación básica es registrar y poner en cola los archivos de estilo (CSS) y los scripts relacionados con los temas. Incluso si el estilo principal es proporcionado por…theme.jsonEs posible que todavía necesites CSS personalizado adicional para la gestión.

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

function my_modern_theme_setup() {
    // 添加对特定功能的支持，例如自定义标志
    add_theme_support('custom-logo');
    // 通过区块编辑器添加主题样式
    add_theme_support('wp-block-styles');
    // 添加对全站编辑器的支持
    add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');

function my_modern_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style(
        'my-modern-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
    // 排队编辑器样式
    add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');

functions.phpTambién es un excelente lugar para agregar funciones personalizadas. Por ejemplo, puedes utilizar…register_block_styleLa función registra una variante visual personalizada para los bloques centrales existentes (como los párrafos), para que aparezca en el panel de “Estilos” del editor y esté disponible para que el usuario la elija.

// 为段落块注册一个“特别提示”样式
register_block_style(
    'core/paragraph',
    array(
        'name'         => 'notice',
        'label'        => __( '特别提示', 'my-modern-theme' ),
        'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
    )
);

Además, también puedes utilizar ganchos (hooks) para…wp_head、wp_footer) Inserte código personalizado, o bien a través de…add_filterModifique el comportamiento predeterminado de las consultas y el contenido de la salida, entre otros aspectos. Para necesidades de personalización más complejas, considerar la creación de un pequeño plugin puede ser una opción más modular.

Temas de pruebas y depuración

Después de completar el desarrollo, es de vital importancia realizar pruebas exhaustivas del tema. En primer lugar, se debe activar el tema en un entorno local o temporal para verificar el diseño básico de las páginas frontales, el diseño responsive, y que los estilos de todos los elementos clave (títulos, párrafos, imágenes, galerías, botones, etc.) se muestren correctamente. Además, se debe asegurar que el menú de navegación y los enlaces funcionen sin problemas.

En segundo lugar, es necesario realizar pruebas exhaustivas con el editor Gutenberg. Crea nuevas páginas y artículos, intenta utilizar diferentes bloques para construir layouts complejos, y verifica si las barras de herramientas y los paneles de configuración de los bloques funcionan correctamente. También prueba a personalizar los estilos (por ejemplo, a través de las opciones disponibles en el editor).theme.jsonSe debe verificar si los colores de la paleta o el tamaño de la fuente definidos se aplican correctamente a los bloques de contenido. Es especialmente importante probar el editor de toda la página (“Apariencia” -> “Editor”), intentando modificar el encabezado, el pie de página, el diseño de la página principal, etc., para asegurarse de que los cambios se reflejen correctamente en la versión visual del sitio web después de guardarlos.

El depurado es un componente esencial del desarrollo moderno. Abra las herramientas de desarrollo del navegador (F12) y verifique si hay errores en JavaScript o conflictos de CSS.wp-config.phpConfiguración en…define('WP_DEBUG', true);Es posible mostrar advertencias y errores de PHP en la página, lo que te ayuda a localizar rápidamente los problemas en el código. Además, asegúrate de que el tema cumpla con los estándares de codificación de WordPress y verifica si hay errores en la estructura HTML en el verificador W3C de la consola.

Finalmente, realice pruebas de compatibilidad entre plataformas en diferentes navegadores (Chrome, Firefox, Safari, Edge) y dispositivos (ordenador de escritorio, tableta, teléfono móvil) para asegurarse de que todos los usuarios tengan la misma experiencia.

resúmenes

El desarrollo de temas para WordPress moderno representa una revolución en los conceptos de desarrollo. Se ha pasado de la creación de plantillas PHP basadas en un enfoque procedural a un enfoque más orientado a la estructura y la organización del contenido.theme.jsonDesarrollo declarativo centrado en las etiquetas de bloques y la edición en todo el sitio web. Los desarrolladores deben dominar estos conceptos a la perfección.theme.jsonUtiliza la configuración para definir el estilo global, emplea plantillas de bloques HTML para construir la estructura de la página y, a través de…functions.phpSe realizan mejoras en las funcionalidades del sistema. Este enfoque reduce significativamente los requisitos para personalizar la configuración de la página, brindando a los creadores de contenido una gran libertad en el diseño. Al mismo tiempo, exige que los desarrolladores comprendan en profundidad el funcionamiento del editor de bloques de WordPress. Siguiendo el camino de desarrollo mencionado, podrás crear temas para WordPress que sean flexibles, potentes y adaptados a las necesidades futuras.

FAQ Preguntas más frecuentes

¿Es necesario conocer PHP para trabajar con el tema de desarrollo ####?
Sí, todavía es necesario. Aunque la estructura principal de la página está definida por plantillas HTML,functions.phpLos archivos siguen siendo esenciales para agregar funciones temáticas, registrar scripts de estilo, y realizar personalizaciones avanzadas utilizando ganchos (hooks) y filtros. Además, el conocimiento de PHP es de vital importancia al crear componentes de plantillas dinámicos basados en consultas personalizadas o al manejar lógicas de negocio complejas.

¿Pueden coexistir los temas basados en bloques con los temas tradicionales?

Sí. WordPress puede determinar automáticamente el tipo de tema utilizado. Si el directorio raíz de tu tema contiene los archivos necesarios, el sistema lo reconocerá y configurará adecuadamente.theme.jsonArchivos y…templates/partsLos archivos de plantillas de bloques que se encuentran dentro de una carpeta son reconocidos por WordPress como temas de bloques, lo que activa la función de edición en todo el sitio web. No obstante, incluso si estos archivos existen, el sistema mantiene el sistema de plantillas PHP del tema tradicional como respaldo. Si la plantilla de bloques correspondiente a una solicitud no está disponible, el sistema retrocede automáticamente al uso de la plantilla PHP correspondiente.single.php）。

¿Cómo puedo agregar CSS personalizado a mi tema de bloques?

Hay principalmente tres métodos. El método más recomendable es a través de…theme.jsonLos documentos destylesSe agregan ciertos elementos de CSS que afectan todo el sitio web o bloques específicos. Además, es posible hacerlo dentro de la configuración del tema.style.cssSe pueden escribir reglas de estilo adicionales en el archivo. Para estilos más dinámicos o específicos para ciertas páginas, también es posible hacerlo allí.functions.phpEn el uso chinowp_add_inline_styleAñada estilos personalizados de forma in-line dentro de una función, o regístrelos directamente para un bloque específico.

¿El modo de edición en todo el sitio web representa algún riesgo para los sitios web existentes?

Para un sitio web que ya cuenta con contenido, es necesario ser cauteloso al cambiar a un tema completamente nuevo. Se recomienda realizar una prueba exhaustiva del nuevo tema en un entorno de prueba (como un entorno de desarrollo local o un sitio temporal) para asegurarse de que todo el contenido existente se muestre correctamente y que el diseño no se vea afectado. Antes de realizar la conversión, es esencial realizar una copia de seguridad de todo el sitio web (incluidos los archivos y la base de datos). Aunque el editor de sitio web ofrece muchas funcionalidades, las modificaciones se realizan directamente en los templates, lo que puede afectar a todas las páginas que utilizan ese template si no se procede con cuidado.