{"id":15269,"date":"2024-09-09T18:13:58","date_gmt":"2024-09-09T16:13:58","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=15269"},"modified":"2024-10-08T16:49:55","modified_gmt":"2024-10-08T14:49:55","slug":"como-modificar-un-tema-de-bloques-de-wordpress-2","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/","title":{"rendered":"Como modificar un tema de bloques de WordPress &#8211; 2"},"content":{"rendered":"<p>En el anterior art\u00edculo, vimos los conceptos b\u00e1sicos para <a href=\"https:\/\/www.espai.es\/blog\/2024\/08\/como-modificar-un-tema-de-bloques-de-wordpress\/\" target=\"_blank\" rel=\"noopener\">modificar un tema de bloques de WordPress<\/a>. Concretamente, vimos como a\u00f1adir un tel\u00e9fono a la cabecera de nuestro sitio Web, y como darle aspecto (al viejo estilo) mediante CSS. Si no has visto dicho art\u00edculo es importante que lo leas antes de continuar, ya que en el presente articulo no vamos a ver algunos conceptos importantes que ya se trataron en dicho art\u00edculo. En este art\u00edculo vamos a profundizar lo ya visto, y vamos a aprender <strong>como crear un \u00abfragmento\u00bb, \u00abtrozo\u00bb o \u00abparte\u00bb de plantilla<\/strong>. Y despu\u00e9s lo utilizaremos para <strong>crear una nueva plantilla para nuestro tema de bloques<\/strong>.<\/p>\n<p>Concretamente, vamos a crear una barra lateral (sidebar) y despu\u00e9s vamos a crear una plantilla para las entradas de nuestro blog que haga uso de dicha barra lateral.<\/p>\n<h2>A\u00f1adir una nueva parte de plantilla<\/h2>\n<p>Empezaremos creando una nueva parte de plantilla, concretamente una <strong>barra lateral<\/strong>. Para ello debemos de ir a <strong>Apariencia &gt; Editor<\/strong>, y despu\u00e9s hacemos click sobre <strong>Patrones<\/strong>.<\/p>\n<p>Pulsamos sobre le bot\u00f3n de <strong>\u00abA\u00f1adir nuevo patr\u00f3n\u00bb<\/strong> y despu\u00e9s seleccionamos la opci\u00f3n de <strong>\u00abA\u00f1adir nueva parte de plantilla\u00bb<\/strong>.<\/p>\n<div id=\"attachment_15270\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa01.png\" rel=\"attachment wp-att-15270\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15270\" class=\"size-large wp-image-15270\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa01-1024x290.png\" alt=\"A\u00f1adir nueva parte de plantilla\" width=\"1024\" height=\"290\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa01-1024x290.png 1024w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa01-300x85.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa01-768x217.png 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa01-1536x435.png 1536w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa01-700x198.png 700w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa01.png 1820w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-15270\" class=\"wp-caption-text\">A\u00f1adir nueva parte de plantilla<\/p><\/div>\n<p>Despu\u00e9s, le damos un nombre a nuestra nueva parte de plantilla (en nuestro caso, \u00abBarra lateral\u00bb o similar) y pulsamos el bot\u00f3n azul de \u00abA\u00f1adir\u00bb que hay debajo del todo.<\/p>\n<div id=\"attachment_15271\" style=\"width: 782px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa02.png\" rel=\"attachment wp-att-15271\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15271\" class=\"size-full wp-image-15271\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa02.png\" alt=\"Darle nombre a nuestra nueva parte de plantilla\" width=\"772\" height=\"384\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa02.png 772w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa02-300x149.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa02-768x382.png 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa02-700x348.png 700w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/a><p id=\"caption-attachment-15271\" class=\"wp-caption-text\">Darle nombre a nuestra nueva parte de plantilla<\/p><\/div>\n<p>En el editor, pulsamos el bot\u00f3n de <strong>\u00abResumen del documento\u00bb<\/strong> (el de la flecha roja de la siguiente imagen) para visualizar la <strong>\u00abLista de vista\u00bb<\/strong> y poder trabajar c\u00f3modamente. Y vamos a\u00f1adiendo (y si hace falta arrastrando) bloques hasta tener algo as\u00ed:<\/p>\n<div id=\"attachment_15272\" style=\"width: 1023px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa03.png\" rel=\"attachment wp-att-15272\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15272\" class=\"size-full wp-image-15272\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa03.png\" alt=\"Los bloques de nuestra barra lateral\" width=\"1013\" height=\"655\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa03.png 1013w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa03-300x194.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa03-768x497.png 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa03-400x260.png 400w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/aa03-700x453.png 700w\" sizes=\"auto, (max-width: 1013px) 100vw, 1013px\" \/><\/a><p id=\"caption-attachment-15272\" class=\"wp-caption-text\">Los bloques de nuestra barra lateral<\/p><\/div>\n<p>Obviamente, puedes crear la barra lateral a tu gusto. En mi caso he creado un bloque de tipo Grupo por cada \u00abzona\u00bb de la barra lateral. En la primera zona tengo el buscador, en la segunda la lista de categor\u00edas con un encabezado para ponerle \u00abCategorias\u00bb de t\u00edtulo, y en la tercera tengo los iconos de las redes sociales junto a un encabezado para ponerle \u00ab\u00a1Siguenos!\u00bb o algo similar a modo de t\u00edtulo, y un p\u00e1rrafo para colocar un texto animando a los usuarios a seguirnos en las redes sociales.<\/p>\n<p>F\u00edjate que he colocado estos 3 grupos dentro de otro bloque de tipo Grupo. Aunque no ser\u00eda necesario hacer esto \u00faltimo, si lo considero algo recomendable de hacer. Sobre todo, por si despu\u00e9s queremos a\u00f1adirle un atributo ID o una clase para despu\u00e9s darle aspecto mediante CSS (este tipo de cosas las vimos en el art\u00edculo anterior).<\/p>\n<p>Una vez estemos contentos con nuestra barra lateral, guardamos y volvemos a <strong>Apariencia &gt; Editor<\/strong>.<\/p>\n<h2>A\u00f1adir una nueva plantilla a nuestro tema de bloques<\/h2>\n<p>Ahora que ya tenemos listo nuestro \u00abtrozo\u00bb de plantilla, vamos a crear una nueva plantilla en nuestro tema de bloques donde usaremos nuestra barra lateral.<\/p>\n<p>Lo primero es darle click al bot\u00f3n de \u00abA\u00f1adir una nueva plantilla\u00bb.<\/p>\n<div id=\"attachment_15273\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss01.png\" rel=\"attachment wp-att-15273\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15273\" class=\"size-large wp-image-15273\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss01-1024x239.png\" alt=\"A\u00f1adir una nueva plantilla\" width=\"1024\" height=\"239\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss01-1024x239.png 1024w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss01-300x70.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss01-768x179.png 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss01-1536x359.png 1536w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss01-700x164.png 700w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss01.png 1819w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-15273\" class=\"wp-caption-text\">A\u00f1adir una nueva plantilla<\/p><\/div>\n<p>Despu\u00e9s, WordPress nos permitir\u00e1 elegir que tipo de plantilla vamos a crear. Y para comprenderlo bien, es importante primero aclarar <strong>el concepto de plantilla<\/strong>.<\/p>\n<p><strong>Una plantilla es b\u00e1sicamente un \u00abtipo de p\u00e1gina\u00bb.<\/strong> En mi ejemplo estoy usando <a href=\"https:\/\/www.espai.es\/blog\/2024\/05\/wordpress-como-crear-un-nuevo-tema-de-bloques\/\" target=\"_blank\" rel=\"noopener\">un nuevo tema de bloques en blanco<\/a>, que solo tiene un \u00abtipo de p\u00e1gina\u00bb. Pero existen otros tipos de p\u00e1gina.<\/p>\n<p><strong>WordPress define una serie de plantillas por defecto para los diferentes tipos de p\u00e1gina;<\/strong> p\u00e1gina de inicio, inicio del blog, entradas individuales, etc. <strong>Cada uno de estos tipos de p\u00e1gina predefinidos se utilizan \u00abdonde toca\u00bb, y tienen un nombre de archivo concreto.<\/strong> Pero siempre podemos crear <strong>plantillas adicionales<\/strong> (sin un uso concreto dentro de WordPress), y cuando creamos una entrada o una p\u00e1gina, asignarles una de estas plantillas a nuestro gusto.<\/p>\n<p>As\u00ed que, tenemos 2 tipos de plantillas, las predefinidas (con un uso concreto dentro de WordPress) y las personalizadas.<\/p>\n<p>En este ejemplo, vamos a crear una plantilla de las predefinidas. Concretamente, la plantilla que se utiliza como <strong>pagina principal del blog<\/strong> (ojo, no confundir con la pagina principal del sitio Web, que puede ser otra diferente). Para ello, en la pantalla que nos aparece, debemos de elegir la opci\u00f3n <strong>\u00abInicio del blog\u00bb<\/strong>.<\/p>\n<div id=\"attachment_15274\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss02.png\" rel=\"attachment wp-att-15274\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15274\" class=\"size-large wp-image-15274\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss02-1024x429.png\" alt=\"Crear una plantilla de inicio del blog\" width=\"1024\" height=\"429\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss02-1024x429.png 1024w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss02-300x126.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss02-768x322.png 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss02-700x293.png 700w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss02.png 1187w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-15274\" class=\"wp-caption-text\">Crear una plantilla de inicio del blog<\/p><\/div>\n<p>El siguiente paso es indicarle si queremos crear el dise\u00f1o de nuestra plantilla desde cero, o si queremos utilizar otra plantilla como base para la nueva plantilla. Por comodidad, partiremos de la \u00fanica plantilla que tenemos (en el <a href=\"https:\/\/www.espai.es\/blog\/2024\/05\/wordpress-como-crear-un-nuevo-tema-de-bloques\/\" target=\"_blank\" rel=\"noopener\">tema en blanco de WordPress<\/a> que creamos en un anterior articulo).<\/p>\n<div id=\"attachment_15275\" style=\"width: 597px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss03.png\" rel=\"attachment wp-att-15275\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15275\" class=\"size-full wp-image-15275\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss03.png\" alt=\"Creamos nuestra plantilla a partir de otra\" width=\"587\" height=\"381\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss03.png 587w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss03-300x195.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss03-400x260.png 400w\" sizes=\"auto, (max-width: 587px) 100vw, 587px\" \/><\/a><p id=\"caption-attachment-15275\" class=\"wp-caption-text\">Creamos nuestra plantilla a partir de otra<\/p><\/div>\n<p>De nuevo, para poder editar con comodidad nuestra plantilla, pulsamos el bot\u00f3n de <strong>\u00abResumen del documento\u00bb<\/strong> (el de la flecha roja de la siguiente imagen) para visualizar la <strong>\u00abLista de vista\u00bb<\/strong>. Como puedes ver, entre el header y el footer tenemos un bloque llamado <strong>\u00abBucle de consulta\u00bb<\/strong> que es el contenido de la p\u00e1gina en cuesti\u00f3n.<\/p>\n<div id=\"attachment_15276\" style=\"width: 805px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss04.png\" rel=\"attachment wp-att-15276\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15276\" class=\"size-full wp-image-15276\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss04.png\" alt=\"Editar nuestra nueva plantilla\" width=\"795\" height=\"481\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss04.png 795w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss04-300x182.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss04-768x465.png 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/ss04-700x424.png 700w\" sizes=\"auto, (max-width: 795px) 100vw, 795px\" \/><\/a><p id=\"caption-attachment-15276\" class=\"wp-caption-text\">Editar nuestra plantilla<\/p><\/div>\n<p>Como queremos colocar la barra lateral al lado de las entradas del blog, debemos a\u00f1adir bloques hasta tener un dise\u00f1o similar al de la imagen inferior. En mi caso, voy a utilizar un par de columnas, y voy a colocar el bloque de \u00abBucle de consulta\u00bb <strong>arrastr\u00e1ndolo<\/strong> dentro de la primera columna (debes de arrastrarlo, no intentes crearlo de cero). F\u00edjate que tengo las columnas dentro de un bloque de tipo Grupo, y que he marcado la opci\u00f3n de dicho bloque indicada con la flecha roja (para que luego el dise\u00f1o salga bien centrado).<\/p>\n<div id=\"attachment_15279\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb01.png\" rel=\"attachment wp-att-15279\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15279\" class=\"wp-image-15279 size-large\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb01-1024x358.png\" alt=\"Reorganizamos los bloques\" width=\"1024\" height=\"358\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb01-1024x358.png 1024w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb01-300x105.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb01-768x269.png 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb01-1536x538.png 1536w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb01-700x245.png 700w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb01.png 1883w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-15279\" class=\"wp-caption-text\">Reorganizamos los bloques<\/p><\/div>\n<p>En la otra columna, ahora debemos de a\u00f1adir un tipo de bloque llamado <strong>\u00abParte de plantilla\u00bb<\/strong>.<\/p>\n<div id=\"attachment_15280\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb02.png\" rel=\"attachment wp-att-15280\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15280\" class=\"wp-image-15280 size-large\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb02-1024x641.png\" alt=\"A\u00f1adimos nuestra barra lateral\" width=\"1024\" height=\"641\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb02-1024x641.png 1024w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb02-300x188.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb02-768x481.png 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb02-700x438.png 700w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb02.png 1164w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-15280\" class=\"wp-caption-text\">A\u00f1adimos nuestra barra lateral<\/p><\/div>\n<p>Despu\u00e9s, pulsamos <strong>el bot\u00f3n azul de \u00abElegir\u00bb<\/strong> para seleccionar la barra lateral que hemos creado en el anterior paso.<\/p>\n<div id=\"attachment_15282\" style=\"width: 790px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb03.png\" rel=\"attachment wp-att-15282\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15282\" class=\"size-full wp-image-15282\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb03.png\" alt=\"Seleccionamos nuestra barra lateral\" width=\"780\" height=\"426\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb03.png 780w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb03-300x164.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb03-768x419.png 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/bb03-700x382.png 700w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/a><p id=\"caption-attachment-15282\" class=\"wp-caption-text\">Seleccionamos nuestra barra lateral<\/p><\/div>\n<p>\u00a1Y ya tendr\u00edamos nuestra plantilla finalizada!<\/p>\n<h2>Pasos finales<\/h2>\n<p>Todos estos cambios que hemos hecho,<strong> no est\u00e1n guardados (todav\u00eda) en los archivos del tema<\/strong>. Tal y como vimos en el art\u00edculo anterior, <strong>podemos guardar los cambios en los archivos utilizando el plugin <a href=\"https:\/\/wordpress.org\/plugins\/create-block-theme\/\" target=\"_blank\" rel=\"noopener\">Create Block Theme<\/a><\/strong>.<\/p>\n<p>Si lo haces, ver\u00e1s que tienes un nuevo archivo (home.html) en la carpeta <strong>templates<\/strong> de tu tema. Tambi\u00e9n podr\u00e1s ver que hay una nueva carpeta llamada <strong>parts<\/strong>, que contiene las \u00abpartes de plantilla\u00bb de nuestro tema (en este caso, contiene un archivo con nuestra barra lateral).<\/p>\n<p>Finalmente, para poder utilizar nuestra plantilla es necesario crear en WordPress una nueva p\u00e1gina en blanco (ha de ser una p\u00e1gina, no vale una entrada) e indicar en <strong>Ajustes &gt; Lectura<\/strong> que dicha p\u00e1gina es la p\u00e1gina para las entradas.<\/p>\n<div id=\"attachment_15284\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx01-1.png\" rel=\"attachment wp-att-15284\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15284\" class=\"size-large wp-image-15284\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx01-1-1024x709.png\" alt=\"Asignamos la p\u00e1gina de entradas\" width=\"1024\" height=\"709\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx01-1-1024x709.png 1024w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx01-1-300x208.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx01-1-768x532.png 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx01-1-700x485.png 700w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx01-1.png 1067w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-15284\" class=\"wp-caption-text\">Asignamos la p\u00e1gina de entradas<\/p><\/div>\n<p>Al hacer este paso, WordPress ya sabe que para dicha p\u00e1gina debe de utilizar la plantilla que hemos creado.<\/p>\n<p>Al visualizar la p\u00e1gina, se nos mostrar\u00e1n las \u00faltimas entradas de nuestro blog y, a su lado, nuestra nueva y flamante barra lateral.<\/p>\n<div id=\"attachment_15285\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx02.png\" rel=\"attachment wp-att-15285\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-15285\" class=\"size-large wp-image-15285\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx02-1024x690.png\" alt=\"Nuestra nueva plantilla en funcionamiento\" width=\"1024\" height=\"690\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx02-1024x690.png 1024w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx02-300x202.png 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx02-768x518.png 768w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx02-700x472.png 700w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/xx02.png 1056w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-15285\" class=\"wp-caption-text\">Nuestra plantilla en funcionamiento<\/p><\/div>\n<p>Seguramente, quieras mejorar el aspecto. En el siguiente art\u00edculo, podr\u00e1s aprender <a href=\"https:\/\/www.espai.es\/blog\/2024\/10\/como-modificar-el-aspecto-de-un-tema-de-bloques-de-wordpress\/\" target=\"_blank\" rel=\"noopener\">como modificar el aspecto de un tema de bloques de WordPress<\/a>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En el anterior art\u00edculo, vimos los conceptos b\u00e1sicos para modificar un tema de bloques de WordPress. Concretamente, vimos como a\u00f1adir un tel\u00e9fono a la cabecera de nuestro sitio Web, y como darle aspecto (al viejo estilo) mediante CSS. Si no has visto dicho art\u00edculo es&#8230;<\/p>\n","protected":false},"author":23,"featured_media":15289,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[895,323],"class_list":["post-15269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-temas-de-bloques","tag-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Como modificar un tema de bloques de Wordpress - 2<\/title>\n<meta name=\"description\" content=\"Vamos a aprender como crear una parte de plantilla, y como utilizarla despu\u00e9s para crear una nueva plantilla para nuestro tema de bloques.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como modificar un tema de bloques de Wordpress - 2\" \/>\n<meta property=\"og:description\" content=\"Vamos a aprender como crear una parte de plantilla, y como utilizarla despu\u00e9s para crear una nueva plantilla para nuestro tema de bloques.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-09T16:13:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-08T14:49:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"Como modificar un tema de bloques de WordPress &#8211; 2\",\"datePublished\":\"2024-09-09T16:13:58+00:00\",\"dateModified\":\"2024-10-08T14:49:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/\"},\"wordCount\":1327,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/logo.jpg\",\"keywords\":[\"temas de bloques\",\"wordpress\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/\",\"name\":\"Como modificar un tema de bloques de Wordpress - 2\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/logo.jpg\",\"datePublished\":\"2024-09-09T16:13:58+00:00\",\"dateModified\":\"2024-10-08T14:49:55+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"Vamos a aprender como crear una parte de plantilla, y como utilizarla despu\u00e9s para crear una nueva plantilla para nuestro tema de bloques.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/logo.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/logo.jpg\",\"width\":1000,\"height\":500,\"caption\":\"Modificar un tema de bloques\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como modificar un tema de bloques de WordPress &#8211; 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como modificar un tema de bloques de Wordpress - 2","description":"Vamos a aprender como crear una parte de plantilla, y como utilizarla despu\u00e9s para crear una nueva plantilla para nuestro tema de bloques.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/","og_locale":"es_ES","og_type":"article","og_title":"Como modificar un tema de bloques de Wordpress - 2","og_description":"Vamos a aprender como crear una parte de plantilla, y como utilizarla despu\u00e9s para crear una nueva plantilla para nuestro tema de bloques.","og_url":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/","og_site_name":"Blog Escola Espai","article_published_time":"2024-09-09T16:13:58+00:00","article_modified_time":"2024-10-08T14:49:55+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/logo.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"Como modificar un tema de bloques de WordPress &#8211; 2","datePublished":"2024-09-09T16:13:58+00:00","dateModified":"2024-10-08T14:49:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/"},"wordCount":1327,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/logo.jpg","keywords":["temas de bloques","wordpress"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/","url":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/","name":"Como modificar un tema de bloques de Wordpress - 2","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/logo.jpg","datePublished":"2024-09-09T16:13:58+00:00","dateModified":"2024-10-08T14:49:55+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"Vamos a aprender como crear una parte de plantilla, y como utilizarla despu\u00e9s para crear una nueva plantilla para nuestro tema de bloques.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/logo.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/logo.jpg","width":1000,"height":500,"caption":"Modificar un tema de bloques"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2024\/09\/como-modificar-un-tema-de-bloques-de-wordpress-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Como modificar un tema de bloques de WordPress &#8211; 2"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2024\/09\/logo.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/15269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=15269"}],"version-history":[{"count":8,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/15269\/revisions"}],"predecessor-version":[{"id":15351,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/15269\/revisions\/15351"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/15289"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=15269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=15269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=15269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}