Con WordPress 5.8 actualización llegó al archivo theme.json. ¿Qué significa esto? Usted puede utilizar este archivo para personalizar la configuración del editor y el estilo de sus bloques Gutenberg, todo desde un solo lugar. El tema Astra es uno de los primeros temas por defecto en implementar theme.json para Gutenberg Color Palette.
Además, theme.json habilita el editor de plantillas, pero como esta característica está aún en desarrollo, la hemos deshabilitado hasta que WordPress 5.9 está fuera.
Este documento le mostrará cómo anular el archivo theme.json de Astra para modificar su configuración y estilos.
¿Cómo puedo hacerlo?
Para empezar, asegúrese de que ha descargado e instalado la aplicación Astra Tema infantil en su sitio web. Si usted no tiene su tema infantil instalado, por favor revise este artículo sobre cómo hacerlo.
En primer lugar, tendrás que copiar el archivo theme.json de la carpeta del tema Astra y pegarlo en la carpeta principal del tema Astra Infantil antes de empezar a editar el propio archivo. Para ello, necesitarás un cliente FTP (como FileZilla, por ejemplo) instalado en tu ordenador y los datos de acceso FTP de tu sitio web.
Utilizaremos el Cliente FTP FileZilla para este artículo, así que instálelo en su ordenador (a menos que conozca otro cliente FTP que prefiera utilizar).
Empecemos:
Primer paso – Añade tus datos de acceso FTP al Administrador de sitios de FileZillas y conecte a su servidor;
Paso 2 - Necesitas localizar el archivo theme.json. Navegue a la carpeta del tema Astra (public_html > wp-content > temas > astra) Aquí encontrarás el archivo. Copie el archivo;
Paso 3 - A continuación, vaya a la carpeta principal del tema Astra (public_html > wp-content > temas > astra-childtenga en cuenta que el nombre de la carpeta puede ser diferente si ha cambiado el nombre del tema hijo al generarlo en nuestro sitio web). Pega el archivo theme.json aquí.
Ahora, puedes acceder y modificar la copia del archivo theme.json de Astra en el tema hijo, que anulará el archivo original del tema.
¿Cómo puedo editar el archivo theme.json de Astra?
Paso 1 - Acceda al panel de control de su sitio web y vaya a Apariencia > Editor de temas. Elige Astra Child en el selector de temas (esquina superior derecha);
Paso 2 - Haga clic en el archivo theme.json de la lista "Archivos de tema";
Paso 3 - Actualice los valores y realice cualquier otro cambio que necesite en el archivo theme.json. Haz clic en el botón "Actualizar archivo" para aplicar los cambios.
A continuación, puede encontrar varios ejemplos de cambios realizados en el código del archivo theme.json original. Como se ha mencionado, debes realizar estos cambios en el código de la copia de nuestro archivo theme.json, que previamente has añadido al Astra Child Theme.
Modificar los colores de la paleta
Tu archivo theme.json contiene el siguiente código para definir los nueve colores de paleta disponibles dentro de la configuración de color de tus Bloques Gutenberg:
{
"version": 1,
"configuración": {
"color": {
"paleta": [
{
"nombre": "Theme Color 1",
"slug": "ast-global-color-0",
"color": "var(--ast-global-color-0)"
},
{
"name": "Theme Color 2",
"slug": "ast-global-color-1",
"color": "var(--ast-global-color-1)"
},
{
"name": "Theme Color 3",
"slug": "ast-global-color-2",
"color": "var(--ast-global-color-2)"
},
{
"name": "Theme Color 4",
"slug": "ast-global-color-3",
"color": "var(--ast-global-color-3)"
},
{
"name": "Theme Color 5",
"slug": "ast-global-color-4",
"color": "var(--ast-global-color-4)"
},
{
"name": "Theme Color 6",
"slug": "ast-global-color-5",
"color": "var(--ast-global-color-5)"
},
{
"name": "Theme Color 7",
"slug": "ast-global-color-6",
"color": "var(--ast-global-color-6)"
},
{
"name": "Theme Color 8",
"slug": "ast-global-color-7",
"color": "var(--ast-global-color-7)"
},
{
"name": "Theme Color 9",
"slug": "ast-global-color-8",
"color": "var(--ast-global-color-8)"
}
]
}
}
}
Para cambiar cualquiera de los colores en su editor Guttenberg, sólo tiene que sustituir los valores de Nombre, Slug y Color como se muestra en este ejemplo:
{
"nombre": "Pintalabios",
"slug": "pintalabios",
"color": "#9f1f19"
},
Si deseas tener menos colores en la paleta de Gutenberg, puedes eliminar el código de los colores que no necesites. Del mismo modo, si necesitas más colores que estos nueve predeterminados, solo tienes que añadirlos usando esta plantilla de código:
{
"nombre": "COLOR NAME",
"slug": "SLUG",
"color": "Código de color HEX"
},
Todos los códigos de color deben añadirse entre paréntesis.
Eliminar la opción "Color personalizado
Tus usuarios del editor Gutenberg podrán seguir obteniendo sus colores personalizados junto a los colores que hayas añadido a tu paleta mediante la opción "Color personalizado". Si quieres ocultar esta opción y limitar a los usuarios a los colores de la paleta, puedes modificar el archivo theme.json añadiendo el siguiente código:
"personalizado": false
Este código debe añadirse al final del código de theme.json, entre paréntesis y corchetes curvos. No olvides añadir "," (coma) después del paréntesis, así:
... "nombre": "Tema Color 9",
"slug": "ast-global-color-8",
"color": "var(--ast-global-color-8)"
}
],
"personalizado": false
}
}
}
Actualizar la paleta de colores del bloque de párrafo
También puedes añadir limitaciones de color sólo para Bloques específicos en el archivo theme.json de Astra. Este es un ejemplo de cómo puedes limitar el Bloque de Párrafo sólo para mostrar los tres primeros colores en el editor:
"bloques": {
"core/paragraph": {
"color": {
"personalizado": true
"paleta": [
{
"nombre": "Pintalabios",
"slug": "pintalabios",
"color": "#9f1f19"
},
{
"nombre": "Theme Color 2",
"slug": "ast-global-color-1",
"color": "var(--ast-global-color-1)"
},
{
"name": "Theme Color 3",
"slug": "ast-global-color-2",
"color": "var(--ast-global-color-2)"
}
]
}
}
}
Este código debe añadirse igual que el anterior - al final del código de theme.json, entre corchetes y corchetes curvos, con "," (coma) después del corchete.
Nota:
El archivo theme.json permite realizar bastantes modificaciones adicionales: Consulte este enlace para más detalles.
