Este documento le mostrar\u00e1 c\u00f3mo anular el archivo theme.json de Astra para modificar su configuraci\u00f3n y estilos. <\/p>\n\n\n\n
\u00bfC\u00f3mo puedo hacerlo?<\/h2>\n\n\n\n
Para empezar, aseg\u00farese de que ha descargado e instalado la aplicaci\u00f3n Astra Tema infantil<\/strong> en su sitio web. Si usted no tiene su tema infantil instalado, por favor revise este art\u00edculo<\/a> sobre c\u00f3mo hacerlo.<\/p>\n\n\n\n En primer lugar, tendr\u00e1s 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\u00e1s un cliente FTP (como FileZilla, por ejemplo) instalado en tu ordenador y los datos de acceso FTP de tu sitio web.<\/p>\n\n\n\n Utilizaremos el Cliente FTP FileZilla<\/a> para este art\u00edculo, as\u00ed que inst\u00e1lelo en su ordenador (a menos que conozca otro cliente FTP que prefiera utilizar).<\/p>\n\n\n\n Empecemos:<\/p>\n\n\n\n Primer paso<\/strong> – A\u00f1ade tus datos de acceso FTP<\/a> al Administrador de sitios de FileZillas y conecte<\/a> a su servidor;<\/p>\n\n\n\n Paso 2<\/strong> - Necesitas localizar el archivo theme.json. Navegue a la carpeta del tema Astra (public_html > wp-content > temas > astra<\/em>) Aqu\u00ed encontrar\u00e1s el archivo. Copie el archivo;<\/p>\n\n\n\n Paso 3<\/strong> - A continuaci\u00f3n, vaya a la carpeta principal del tema Astra (public_html > wp-content > temas > astra-child<\/em>tenga 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\u00ed.<\/p>\n\n\n\n Ahora, puedes acceder y modificar la copia del archivo theme.json de Astra en el tema hijo, que anular\u00e1 el archivo original del tema.<\/p>\n\n\n\n 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);<\/p>\n\n\n\n Paso 2 - Haga clic en el archivo theme.json de la lista \"Archivos de tema\";<\/p>\n\n\n\n Paso 3 - Actualice los valores y realice cualquier otro cambio que necesite en el archivo theme.json. Haz clic en el bot\u00f3n \"Actualizar archivo\" para aplicar los cambios. <\/p>\n\n\n\n A continuaci\u00f3n, puede encontrar varios ejemplos de cambios realizados en el c\u00f3digo del archivo theme.json original. Como se ha mencionado, debes realizar estos cambios en el c\u00f3digo de la copia de nuestro archivo theme.json, que previamente has a\u00f1adido al Astra Child Theme.<\/p>\n\n\n\n Tu archivo theme.json contiene el siguiente c\u00f3digo para definir los nueve colores de paleta disponibles dentro de la configuraci\u00f3n de color de tus Bloques Gutenberg:<\/p>\n\n\n\n Para cambiar cualquiera de los colores en su editor Guttenberg, s\u00f3lo tiene que sustituir los valores de Nombre, Slug y Color como se muestra en este ejemplo:<\/p>\n\n\n\n Si deseas tener menos colores en la paleta de Gutenberg, puedes eliminar el c\u00f3digo de los colores que no necesites. Del mismo modo, si necesitas m\u00e1s colores que estos nueve predeterminados, solo tienes que a\u00f1adirlos usando esta plantilla de c\u00f3digo:<\/p>\n\n\n\n Todos los c\u00f3digos de color deben a\u00f1adirse entre par\u00e9ntesis.<\/p>\n\n\n\n Tus usuarios del editor Gutenberg podr\u00e1n seguir obteniendo sus colores personalizados junto a los colores que hayas a\u00f1adido a tu paleta mediante la opci\u00f3n \"Color personalizado\". Si quieres ocultar esta opci\u00f3n y limitar a los usuarios a los colores de la paleta, puedes modificar el archivo theme.json a\u00f1adiendo el siguiente c\u00f3digo:<\/p>\n\n\n\n Este c\u00f3digo debe a\u00f1adirse al final del c\u00f3digo de theme.json, entre par\u00e9ntesis y corchetes curvos. No olvides a\u00f1adir \",\" (coma) despu\u00e9s del par\u00e9ntesis, as\u00ed:<\/p>\n\n\n\n Tambi\u00e9n puedes a\u00f1adir limitaciones de color s\u00f3lo para Bloques espec\u00edficos en el archivo theme.json de Astra. Este es un ejemplo de c\u00f3mo puedes limitar el Bloque de P\u00e1rrafo s\u00f3lo para mostrar los tres primeros colores en el editor:<\/p>\n\n\n\n Este c\u00f3digo debe a\u00f1adirse igual que el anterior - al final del c\u00f3digo de theme.json, entre corchetes y corchetes curvos, con \",\" (coma) despu\u00e9s del corchete.<\/p>\n\n\n\n\u00bfC\u00f3mo puedo editar el archivo theme.json de Astra?<\/h3>\n\n\n\n
Modificar los colores de la paleta<\/h4>\n\n\n\n
{\n \"version\": 1,\n \"configuraci\u00f3n\": {\n \"color\": {\n \"paleta\": [\n {\n \"nombre\": \"Theme Color 1\",\n \"slug\": \"ast-global-color-0\",\n \"color\": \"var(--ast-global-color-0)\"\n },\n {\n \"name\": \"Theme Color 2\",\n \"slug\": \"ast-global-color-1\",\n \"color\": \"var(--ast-global-color-1)\"\n },\n {\n \"name\": \"Theme Color 3\",\n \"slug\": \"ast-global-color-2\",\n \"color\": \"var(--ast-global-color-2)\"\n },\n {\n \"name\": \"Theme Color 4\",\n \"slug\": \"ast-global-color-3\",\n \"color\": \"var(--ast-global-color-3)\"\n },\n {\n \"name\": \"Theme Color 5\",\n \"slug\": \"ast-global-color-4\",\n \"color\": \"var(--ast-global-color-4)\"\n },\n {\n \"name\": \"Theme Color 6\",\n \"slug\": \"ast-global-color-5\",\n \"color\": \"var(--ast-global-color-5)\"\n },\n {\n \"name\": \"Theme Color 7\",\n \"slug\": \"ast-global-color-6\",\n \"color\": \"var(--ast-global-color-6)\"\n },\n {\n \"name\": \"Theme Color 8\",\n \"slug\": \"ast-global-color-7\",\n \"color\": \"var(--ast-global-color-7)\"\n },\n {\n \"name\": \"Theme Color 9\",\n \"slug\": \"ast-global-color-8\",\n \"color\": \"var(--ast-global-color-8)\"\n }\n ]\n }\n }\n}\n<\/pre>\n\n\n\n{\n\"nombre\": \"Pintalabios\",\n\"slug\": \"pintalabios\",\n\"color\": \"#9f1f19\"\n},\n<\/pre>\n\n\n\n![\"Modify](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/09\/ast-3-7-theme-json-edit-color.png\")
<\/a><\/figure>\n\n\n\n{\n\"nombre\": \"COLOR NAME\",\n\"slug\": \"SLUG\",\n\"color\": \"C\u00f3digo de color HEX\"\n},\n<\/pre>\n\n\n\nEliminar la opci\u00f3n \"Color personalizado<\/h4>\n\n\n\n
\"personalizado\": false<\/pre>\n\n\n\n
![\"Remove](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/09\/ast-3-7-theme-json-custom-color.png\")
<\/a><\/figure>\n\n\n\n... \"nombre\": \"Tema Color 9\",\n \"slug\": \"ast-global-color-8\",\n \"color\": \"var(--ast-global-color-8)\"\n }\n ],\n\t\t\"personalizado\": false<\/strong>\n }\n }\n}\n<\/pre>\n\n\n\n
Actualizar la paleta de colores del bloque de p\u00e1rrafo<\/h4>\n\n\n\n
\"bloques\": {\n\"core\/paragraph\": {\n \"color\": {\n<\/span>\t\"personalizado\": true\n\t\"paleta\": [\n\t{\n\t\"nombre\": \"Pintalabios\",\n\t\"slug\": \"pintalabios\",\n\t\"color\": \"#9f1f19\"\n\t},\n\t{\n\t\"nombre\": \"Theme Color 2\",\n\t\"slug\": \"ast-global-color-1\",\n\t\"color\": \"var(--ast-global-color-1)\"\n\t},\n\t{\n\t\"name\": \"Theme Color 3\",\n\t\"slug\": \"ast-global-color-2\",\n\t\"color\": \"var(--ast-global-color-2)\"\n\t}\n ]\n }\n }\n}<\/pre>\n\n\n\n![\"Modify](\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2021\/09\/ast-3-7-theme-json-block.png\")
<\/a><\/figure>\n\n\n\n