¿Estás usando un tema de bloque y ves el archivo theme.json en WordPress? Quizás te preguntes cuál es el propósito de este archivo y si deberías editarlo.
El archivo theme.json es una parte crucial de toda la experiencia de edición de sitios en WordPress. A medida que los temas de bloques se vuelven más populares, es importante comprender qué hace theme.json y cómo editarlo correctamente.
Es por eso que en TrucosWP hemos elaborado esta guía completa. En este artículo explicaremos qué es un archivo theme.json y cómo utilizarlo para personalizar su sitio de WordPress.
¿Qué es el archivo theme.json de WordPress?
El archivo theme.json es un archivo de tema especial introducido en WordPress 5.8. Desempeña un papel clave en la experiencia de edición completa del sitio (FSE), que le permite personalizar visualmente cada aspecto de su tema de bloque de WordPress.
Básicamente, el archivo theme.json actúa como un modelo que controla el estilo y la funcionalidad del tema del bloque. Contiene código que le indica a WordPress cómo deben verse y comportarse varios elementos, como colores, tipografía, diseños y plantillas.
¿Por qué los temas de bloque de WordPress necesitan un archivo theme.json?
Editar un tema de bloque en WordPress es diferente a editar un tema clásico.
Los temas clásicos utilizan el archivo Functions.php para habilitar funciones como menús personalizados o imágenes destacadas con el archivo add_theme_support() función. Luego, puede diseñar estas funciones con reglas CSS en su archivo de hoja de estilos CSS (style.css).
En los temas de bloques, theme.json sirve como eje central para todo lo que define la apariencia del tema de bloques. Le permite definir cosas como fuentes, colores y opciones de diseño en un solo lugar, reemplazando la necesidad de add_theme_support() en funciones.php.
Esta es la razón por la que el archivo Functions.php en los temas de bloque suele ser más pequeño que el equivalente en los temas clásicos.
Tener un archivo theme.json dedicado ofrece grandes ventajas sobre el sistema de temas clásico anterior.
Primero, theme.json funciona de la mano con el editor de sitios completo de WordPress. Esto le permite personalizar fácilmente los estilos y configuraciones de su tema directamente dentro del editor sin tener que tocar ningún código.
Además, theme.json tiene como objetivo crear una experiencia coherente tanto para desarrolladores como para usuarios. A algunos usuarios les resulta realmente frustrante tener que cambiar temas porque tienen que aprender diseños y opciones de estilo completamente nuevos.
Con theme.json, cambiar de tema se convierte en un proceso más sencillo porque todo está organizado de manera similar.
Finalmente, al utilizar theme.json, los desarrolladores y usuarios de temas pueden preparar su trabajo para el futuro a medida que WordPress continúa expandiendo sus capacidades de edición completa del sitio.
Ahora que hemos explicado qué es un archivo theme.json, profundicemos en el tema. Puede utilizar los enlaces rápidos a continuación para navegar por la guía:
¿Dónde se encuentra el archivo theme.json de WordPress?
El archivo theme.json se encuentra en el directorio de temas de su servidor web. La ruta de archivo típica sería public_html » contenido wp » temas » nombre de tu tema » theme.json.
Para acceder a él, primero debe conectarse a su sitio a través de FTP o el administrador de archivos de su cuenta de hosting.
Si está utilizando Bluehost, puede iniciar sesión y cambiar a la pestaña «Sitios web». Luego, haga clic en el botón «Configuración» debajo de su sitio web.
Ahora asegúrese de permanecer en la pestaña «Descripción general».
Luego, desplácese hacia abajo para hacer clic en el botón «Administrador de archivos».
Cuando abra el administrador de archivos de esta manera, se encontrará automáticamente en la carpeta raíz de su sitio web.
Aquí, busque el directorio “wp-content” y ábralo. Allí encontrará la carpeta «temas» que contiene todos los temas de WordPress instalados.
Abra la carpeta del tema de bloqueo específico que está utilizando. El archivo theme.json se ubicará directamente dentro de este directorio de temas junto con otros archivos de temas.
Una vez encontrado, puede ver el archivo theme.json usando un editor de código.
¿Cómo se ve el archivo theme.json?
El archivo theme.json tiene una estructura específica que organiza todas las configuraciones globales para su tema de bloque de WordPress.
Dependiendo de qué tan complejo o simple sea tu tema, el archivo puede ser muy corto o largo. Sin embargo, puedes dividir fácilmente este archivo en 7 secciones de nivel superior:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {},
"patterns": []
}
Aquí hay un desglose simplificado:
Esquema
En realidad, es opcional tener esta parte en los temas de bloque, por lo que es posible que la veas o no en el tuyo.
La propiedad del esquema vincula la URL al archivo. Esquema JSON de WordPressque define configuraciones globales, estilos y otras configuraciones para su tema.
Versión
Esta sección especifica qué versión API del formato theme.json utiliza el archivo y garantiza que siga la estructura correcta.
Al momento de escribir este artículo, la API se encuentra en la versión 2.
Ajustes
Esta propiedad define las opciones y controles disponibles para que los usuarios personalicen su tema. Estos incluyen ajustes preestablecidos para la paleta de colores, tipografía, espaciado, degradados, sombras, bordes, etc. del tema.
Aquí hay un ejemplo muy simple de cómo se ve la propiedad de configuración:
{
"settings": {
"color": {
"palette": [
{
"slug": "base",
"color": "#ffffff",
"name": "White"
},
{
"slug": "contrast",
"color": "#222222",
"name": "Dark"
},
{
"slug": "accent",
"color": "#f08080",
"name": "Pink"
},
{
"slug": "accent-2",
"color": "#90ee90",
"name": "Light Green"
},
{
"slug": "accent-3",
"color": "#e0ffff",
"name": "Light Blue"
}
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "Open Sans, sans-serif",
"slug": "open-sans",
"name": "Open Sans"
},
{
"fontFamily": "Arial, sans-serif",
"slug": "arial",
"name": "Arial"
},
{
"fontFamily": "Times New Roman, serif",
"slug": "times-new-roman",
"name": "Times New Roman"
}
],
"fontSizes": [
{
"name": "Extra Small",
"slug": "xx-small",
"size": "0.75rem"
},
{
"name": "Small",
"slug": "small",
"size": "0.875rem"
},
{
"name": "Medium",
"slug": "medium",
"size": "1rem"
},
{
"name": "Large",
"slug": "large",
"size": "1.125rem"
},
{
"name": "Extra Large",
"slug": "x-large",
"size": "1.25rem"
},
{
"name": "XX-Large",
"slug": "xx-large",
"size": "1.5rem"
}
],
"spacing": {
"units": ["rem"],
"values": {
"small": "1rem",
"medium": "1.5rem",
"large": "2rem"
}
}
}
}
}
Si nos fijamos en el código, el lenguaje utilizado es bastante fácil de entender. Puede decir que la configuración define los colores, las familias de fuentes, los tamaños de fuente y el espaciado utilizados en el tema.
Si hay referencias aquí o en tu tema que no entiendes, puedes consultar el archivo. Referencia oficial de configuración de WordPress.
Algunos elementos, como colores y familias de fuentes, tienen slugs, como este:
{ "configuración": { "color": { "paleta": [
{
"slug": "base",
"color": "#ffffff",
"name": "White"
},
These will come in handy for the styles section later on to make presets, which we will explain in the next part.
Styles
While the settings section defines the theme’s default customization options, the styles section applies them to the theme.
Here, you can apply the customization settings to the entire website or at a block level using presets.
Let’s check out the example below:
{
"settings": {
// Existing settings from the previous example
},
"styles": {
"color": {
"background": "var(--wp--preset--color--base)",
"text": "var(--wp--preset--color--contrast)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
},
"h1": {
"fontSize": "var(--wp--preset--font-size--xx-large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
},
"h2": {
"fontSize": "var(--wp--preset--font-size--x-large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
},
"h3": {
"fontSize": "var(--wp--preset--font-size--large)",
"lineHeight": "1.2",
"marginBottom": "1rem"
}
}
}
}
As you can tell, there is this line of code appearing throughout this snippet: var(--wp--preset--xxx) . These are presets, which are shortcuts in the styles section that refer back to the values defined in the settings section.
For example, consider {"slug": "base", "color": "#ffffff", "name": "White"} in the settings section. Here, "base" is the slug, and the corresponding preset for this color is var(--wp--preset--color--base) .
Therefore, the code "color": {"background": "var(--wp--preset--color--base)" in styles says that the background color of this theme is white.
Custom Templates
Block theme developers can create predefined layouts for custom pages, posts, or post types for users to use.
For example, the Twenty Twenty-Four theme has several custom templates defined in the theme.json file: Page No Title, Page With Sidebar, Page with wide Image, and Single with Sidebar.
You can use any of these to create your content.
]"Plantillas personalizadas": [
{
"name": "page-no-title",
"postTypes": ["page"]"title": "Página sin título" }, { "name": "página-con-barra lateral", "postTypes": ["page"]"title": "Página con barra lateral" }, { "name": "toda la página", "postTypes": ["page"]"title": "Página con imagen ancha" }, { "name": "único con barra lateral", "postTypes": ["post"]"title": "Single con barra lateral" } ]
Una cosa a tener en cuenta es que el archivo theme.json hace referencia a las plantillas solo por su nombre y proporciona metadatos sobre ellas, como el título y los tipos de publicaciones a las que están destinadas.
Sin embargo, el aspecto y la funcionalidad reales de las plantillas personalizadas se definen en archivos de plantilla separados dentro de la carpeta del tema.
Para verlos puedes subir public_html » contenido wp » temas » nombre-tema » plantillas.
Partes del modelo
Las piezas del modelo son áreas reutilizables que puedes aplicar a tus modelos personalizados. Estos son elementos como encabezados, pies de página, barras laterales, etc.
Así es como se ven las partes de la plantilla grabadas en theme.json:
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "sidebar", // Removed "uncategorized"
"name": "sidebar",
"title": "Sidebar"
},
{
"area": "post-meta", // Removed "uncategorized"
"name": "post-meta",
"title": "Post Meta"
}
]
Al igual que las plantillas personalizadas, el archivo theme.json solo hace referencia a plantillas.
Su apariencia real se define en los archivos de piezas del modelo en el formato activar carpeta.
Modelos
Los patrones son colecciones de bloques prediseñadas que te permiten crear diseños de contenido personalizados en tus páginas, publicaciones o en cualquier otro lugar de tu tema.
Al abrir el editor completo del sitio, es posible que observe el menú Plantillas. Aquí es donde puedes encontrar todas las plantillas disponibles para tu tema de bloque Gutenberg.
Con theme.json, los desarrolladores de temas pueden hacer referencia a plantillas de audiencia Directorio de plantillas. Es una excelente manera de ofrecer más opciones de personalización sin tener que diseñar usted mismo estos bloques reutilizables.
Por ejemplo, el tema Twenty Twenty-Four hace referencia a dos plantillas del directorio oficial: tres columnas de servicios y sección de clientes:
"patterns": [ "three-columns-of-services", "clients-section" ]
Lo sabemos porque estas plantillas se encuentran en el menú Plantillas del editor completo del sitio.
Sin embargo, no están en el expediente. modelos carpeta dentro del directorio del tema.
Nota: Puede observar que las carpetas de plantillas, piezas y patrones en el directorio de temas contienen archivos que no están especificados en theme.json, pero que aún son visibles en el editor completo del sitio.
Si tiene curiosidad, es porque WordPress está diseñado para reconocer y usar automáticamente estas carpetas según las convenciones de nomenclatura y la ubicación dentro del directorio del tema.
Qué debes hacer antes de editar el archivo theme.json
Dado que theme.json es un archivo de tema central, editarlo directamente en su sitio web de WordPress en vivo conlleva algunos riesgos. Los errores accidentales podrían dañar potencialmente su tema o sitio web.
Un enfoque más seguro es utilizar un tema secundario.
Un tema secundario hereda todos los estilos y características del tema principal (el tema de bloque que estás usando), pero te permite personalizar cosas sin cambiar el tema principal. De esta manera, si el tema principal recibe actualizaciones, sus personalizaciones no se sobrescribirán.
Puede leer nuestra guía sobre cómo crear un tema secundario en WordPress para obtener más información. Este artículo muestra un método simple con el Crear tema de bloqueo plugin, que generará automáticamente un nuevo archivo theme.json solo para su tema hijo.
Para garantizar una experiencia de edición fluida y evitar el tiempo de inactividad del sitio web, también recomendamos crear una nueva copia de seguridad de su sitio web de WordPress. De esta manera, si algo sale mal, podrás restaurar fácilmente tu sitio a su estado anterior.
Recomendamos utilizar un plugin como Duplicador para una solución de respaldo rápida y confiable.
También se recomienda trabajar en un entorno de desarrollo local de WordPress o en un sitio de prueba. Esto crea una réplica de su sitio web activo donde puede probar los cambios de forma segura sin afectar a sus visitantes.
Aquí hay algunos consejos adicionales a tener en cuenta:
- Comience con cambios menores en el archivo theme.json y pruébelos minuciosamente antes de realizar cambios más complejos.
- Si no está seguro acerca de alguna propiedad o configuración específica dentro del archivo theme.json, revise el archivo documentación oficial de WordPress.
- No dude en pedir ayuda al equipo de soporte del desarrollador del tema o a los foros de soporte de WordPress.org si tiene algún problema. Consulte nuestra guía sobre cómo solicitar soporte de WordPress para obtener más información.
Cómo editar el archivo theme.json de WordPress
Según nuestra investigación y pruebas, hemos descubierto dos formas de editar un archivo theme.json de WordPress: usando el editor completo del sitio o usando código. La primera opción es mucho más simple y segura y le permite ver los cambios desde la interfaz de su sitio web.
Mientras tanto, se recomienda la segunda opción si se siente cómodo con el desarrollo avanzado de WordPress.
Editar theme.json sin código (principiantes)
Para editar su archivo theme.json sin tocar el código directamente, puede usar el Crear tema de bloqueo conectar. Este plugin fue publicado por el equipo oficial de WordPress.org para permitir a los usuarios crear, editar y guardar variaciones de estilo de su tema de bloque.
Primero, continúa e instala el plugin de WordPress en tu área de administración. Luego, abra el editor completo del sitio yendo a Apariencia » Editor.
Ahora verá varios menús para editar su tema.
Aquí seleccione «Estilos».
A continuación, haga clic en el icono de lápiz «Editar estilos».
Esto lo llevará al editor de bloques para editar los estilos globales de su sitio web.
Ahora puedes cambiar el estilo de tu tema como de costumbre. Puede leer la sección sobre cómo cambiar los estilos globales de su tema en nuestra guía para cambiar todo su sitio de WordPress para obtener más información.
Intentemos crear una paleta de colores personalizada como ejemplo.
La combinación o paleta de colores es un conjunto de colores predefinidos para elementos como texto, fondos y botones. Garantiza una apariencia consistente en todo su sitio web.
Los elementos que utilizan el mismo color predeterminado siempre coincidirán para que el diseño de su sitio web luzca pulido y profesional.
Para cambiar la paleta, seleccione «Colores» en la barra lateral de configuración de Estilos.
En la siguiente pantalla verás algunas configuraciones para personalizar los colores de tu tema.
Aquí, haga clic en los colores en la sección «Paleta».
En este ejemplo, el tema Twenty Twenty-Four ya tiene 5 colores definidos en la paleta, pero puedes editar cualquiera de ellos para crear el tuyo propio desde cero.
Para hacer esto, haga clic en uno de los colores debajo de «Tema». Luego, seleccione cualquier color en la herramienta de selección de color.
Ahora, si obtiene una vista previa de su sitio web, verá que bloques o elementos específicos que usaban el color anterior han sido reemplazados por el color que acaba de seleccionar en la paleta.
Puedes repetir los mismos pasos para cada color. Luego, haga clic en «Guardar».
Después de guardar los cambios, haga clic en el botón Crear tema de bloque (el icono de llave inglesa).
Luego seleccione «Guardar cambios de tema».
En la siguiente pantalla, debes desplazarte hacia abajo.
A continuación, haga clic en «Guardar cambios». Esto requerirá que WordPress almacene cualquier cambio que realice en el tema en el archivo theme.json.
Una vez hecho esto, el editor de bloques se actualizará automáticamente.
Ahora haga clic nuevamente en el botón Crear tema de bloque y seleccione «Ver tema.json».
Para ver el código de su paleta de colores personalizada, busque palette que se encuentra en el interior color Y settingsComo esto:
"settings": {
// Some code...
"color": {
// Some code...
"palette":
}
}
Debajo, deberías ver los nuevos códigos hexadecimales de tu paleta de colores personalizada.
Editar theme.json con código (usuarios avanzados)
Se recomienda este método si eres un aspirante a desarrollador de temas de WordPress o tienes alguna experiencia con la codificación.
Primero, abra el archivo theme.json de su tema de bloque en su directorio de WordPress. Puede utilizar el editor de código en el administrador de archivos de su servidor web o descargar el archivo, editarlo en su computadora y volver a cargarlo en su servidor.
Usaremos el tema Twenty Twenty-Four y el administrador de archivos Bluehost con fines de demostración. Si es usuario de Bluehost y utiliza el administrador de archivos, simplemente puede hacer clic derecho en el archivo theme.json y hacer clic en «Editar».
Si usa FTP, puede leer nuestra guía sobre cómo usar FTP para cargar archivos a WordPress.
Probemos un ejemplo sencillo de edición del archivo theme.json: creación de tamaños de fuente personalizados.
Una vez más, recuerde que la propiedad de configuración especifica los estilos predeterminados de su tema, mientras que la propiedad Estilos los implementa. Por este motivo modificaremos la propiedad de configuración en el archivo theme.json.
Si está utilizando un tema secundario, simplemente puede copiar y pegar el siguiente código en su archivo theme.json y cambiar los tamaños de fuente en píxeles como mejor le parezca:
{
"settings": {
"typography": {
"fluid": false,
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "16px"
},
{
"name": "Medium",
"slug": "medium",
"size": "24px"
},
{
"name": "Large",
"slug": "large",
"size": "40px"
},
{
"name": "Extra Large",
"slug": "x-lagrge", // Typo fixed (large -> large)
"size": "48px"
}
]
}
}
}
Nota: Si está editando directamente el archivo del tema principal, necesita encontrar el código que dice fontSizes .
Debe estar anidado dentro typography Y settings Como esto:
{
"settings": {
// Some code...
"typography": {
// Some code...
"fontSizes": [
// Font size definitions here
]
}
}
}
A continuación, reemplace esas líneas de código con el fragmento de código anterior. Solo asegúrese de que no contengan ningún error de sintaxis.
Una vez que haya terminado, guarde el archivo y obtenga una vista previa de su sitio web para ver los cambios. Para los usuarios de Bluehost, simplemente pueden hacer clic en «Guardar cambios» en el editor de código del administrador de archivos.
Si desea editar más su theme.json, le recomendamos encarecidamente que se familiarice con la estructura del archivo como se explica en la sección anterior.
También recomendamos leer el Referencia oficial de configuración de WordPressque incluye una lista completa de las propiedades de configuración disponibles e instrucciones para usarlas.
Consejo adicional: use WPCode para agregar código personalizado a su tema
En esta guía, aprendió sobre theme.json y su potencial para la personalización de temas. Pero tal vez todavía resulte un poco abrumador editarlo directamente.
Afortunadamente, existe otra opción intuitiva para agregar código personalizado y realizar personalizaciones avanzadas: Código WP.
Con WPCode, puedes insertar fragmentos de código personalizados sin tener que tocar los archivos del tema. Esto reduce significativamente el riesgo de dañar su sitio web durante la personalización.
Si desea saber más sobre este plugin de fragmento de código, consulte nuestra revisión completa de WPCode.
Además, aquí hay algunos tutoriales útiles para comenzar a usar WPCode:
Esperamos que este artículo le haya ayudado a conocer el archivo theme.json en WordPress. Quizás también quieras consultar nuestra guía para principiantes sobre cómo editar un sitio web de WordPress y nuestra selección experta de los mejores creadores de páginas de arrastrar y soltar para WordPress.
¿Te ha resultado útil??
0 / 0