{"id":1723,"date":"2022-08-10T10:30:00","date_gmt":"2022-08-10T08:30:00","guid":{"rendered":"https:\/\/pontevedra.wordcamp.org\/2022\/?p=1723"},"modified":"2022-08-09T18:02:45","modified_gmt":"2022-08-09T16:02:45","slug":"diseno-de-la-web-con-la-edicion-completa-de-sitio","status":"publish","type":"post","link":"https:\/\/pontevedra.wordcamp.org\/2022\/diseno-de-la-web-con-la-edicion-completa-de-sitio\/","title":{"rendered":"Dise\u00f1o de la web con la edici\u00f3n completa de sitio"},"content":{"rendered":"\n

\u00a1La web de WordCamp Pontevedra est\u00e1 hecha con la edici\u00f3n completa del sitio<\/strong>! Esta nueva caracter\u00edstica, el Full Site Editing<\/em> en ingl\u00e9s o edici\u00f3n completa del sitio en castellano. Para no liarnos m\u00e1s, y porque as\u00ed es como se conoce \u00aben el sector\u00bb, en adelante, usaremos FSE.<\/p>\n\n\n\n

Pues el FSE nos permite crear p\u00e1ginas de forma visual en todos sus elementos. Ahora podemos crear un encabezado o un pie de p\u00e1gina totalmente personalizado con los bloques que estemos usando habitualmente. Pero esto solo funciona si tienes una plantilla compatible con el FSE, sino, como hasta ahora.<\/p>\n\n\n\n

<\/div>\n\n\n\n

\u00bfQu\u00e9 es la edici\u00f3n completa del sitio?<\/h2>\n\n\n\n

El FSE es un nuevo editor que nos trae WordPress por defecto. Es similar al actual editor, pero con algunas caracter\u00edsticas nuevas que nos permite configurar toda la parte visual de nuestro sitio web. Para ello, tenemos que tener presente 2 conceptos importantes que veremos a continuaci\u00f3n.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Las plantillas o templates<\/em><\/h3>\n\n\n\n

Son aquellas visualizaciones que se hace de cada tipo de contenido que tenemos en nuestra web. <\/p>\n\n\n\n

Por ejemplo, tenemos la plantilla del Single<\/em> que ser\u00eda la que se usa para cada una de las entradas individuales de las entradas del blog. O la plantilla Page<\/em>, que se usa para mostrar todas las p\u00e1ginas en s\u00ed de nuestro sitio web. <\/p>\n\n\n\n

Hay muchas m\u00e1s plantillas, y dependiendo del tema que usemos, tendremos m\u00e1s o menos.<\/p>\n\n\n\n

En el caso del Twenty Twenty Two<\/em>, que es el tema que elegimos en WordCamp Pontevedra, podemos crear incluso distintas plantillas para el Single<\/em> y para las Page<\/em>. Qu\u00e9date con esto que es importante y luego volveremos sobre ello \ud83d\ude09.<\/strong><\/p>\n\n\n\n

En cada una de estas plantillas podemos dise\u00f1ar esas partes comunes del sitio y que afectan a todas las p\u00e1ginas del mismo tipo. <\/p>\n\n\n\n

Por ejemplo, en el Single <\/em>de las entradas, podemos configurar el encabezado que queramos, la imagen destacada, el t\u00edtulo, etc. Y todo ello, a nuestro gusto. Este dise\u00f1o se repetir\u00e1 en cada una de las entradas del blog. Y si lo cambiamos aqu\u00ed, luego se cambia en todos lados.<\/p>\n\n\n\n

Aqu\u00ed tienes una captura de las plantillas que se pueden configurar desde el Twenty Twenty Two<\/em> por defecto.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Las partes de plantilla o Template Parts<\/em><\/h3>\n\n\n\n

Antes os comentaba que para cada una de las plantillas podemos crear un encabezado personalizado, por ejemplo. Y podemos hacerlo. Pero tambi\u00e9n podemos usar un encabezado para todas las plantillas (o para alguna de ellas \ud83d\ude01) gracias a las partes del sitio. <\/p>\n\n\n\n

Con esta caracter\u00edstica podemos crear diferentes partes del sitio para el encabezado, para el pie de p\u00e1gina o partes generales para configurar en diferentes sitios, como por ejemplo una parte para el bolet\u00edn de suscripciones y que solo uses en el Single<\/em>. O para una parte de la plantilla para los patrocinadores (como creamos nosotros). <\/p>\n\n\n\n

Estas partes de plantilla las podemos seleccionar desde cada una de las plantillas, y modificada una, modificadas todas \ud83d\udcaa.<\/p>\n\n\n\n

Aqu\u00ed te ense\u00f1o las partes de la plantilla de la web de WordCamp Pontevedra.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u00a1Qu\u00e9 cosillas m\u00e1s interesantes puedes ver aqu\u00ed\u2026 \u263a\ufe0f!<\/p>\n\n\n\n

<\/div>\n\n\n\n

La raz\u00f3n fundamental para usar el FSE en WordCamp Pontevedra<\/h2>\n\n\n\n

Primero un poco de contexto para que se entienda todo mejor. Las webs de todas las WordCamps son realmente un multisite<\/em> con un sitio para cada una. De tal manera que no podemos instalar plugins<\/em> adicionales ni usar el tema que nosotros queramos. Sino, que dependemos exclusivamente de los que tengamos instalados. <\/p>\n\n\n\n

Eso est\u00e1 bien y es m\u00e1s que suficiente para la mayor\u00eda de sitios. Pero en Galicia, al igual que ocurre en muchos otros sitios como Pa\u00eds Vasco, Catalu\u00f1a o Valencia, por ejemplo, que tenemos un idioma cooficial, lo ideal es hacer la web en ambos idiomas. Como no tenemos plugin <\/em>multidioma, hasta ahora, nos la ingeni\u00e1bamos para poner los textos en los dos idiomas, y los men\u00fas con CSS… \u00a1Busc\u00e1bamos soluciones, en definitiva!<\/p>\n\n\n\n

Con la llegada del FSE nos planteamos, oye, \u00bfpodemos buscar una soluci\u00f3n mejor para poner la web en los dos idiomas? Y ante esta pregunta, la soluci\u00f3n vino sola. \u00a1Pues claro que pod\u00edamos! Y esta es la raz\u00f3n fundamental para usar el FSE.<\/p>\n\n\n\n

Como puedes ver en la captura anterior, hemos creado dos partes para el encabezado, Header<\/em> ES y Header<\/em> GL, totalmente personalizadas. En esencia y en dise\u00f1o son las mismas, pero el men\u00fa es distinto.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

En la versi\u00f3n Header<\/em> ES, todos los enlaces apuntan a las p\u00e1ginas en espa\u00f1ol creadas para la web o al blog con las entradas en espa\u00f1ol de la web. Esta parte de plantilla la pusimos en dos plantillas, en la Page<\/em> y en la Single Post<\/em> de la primera captura. Y todas las p\u00e1ginas o entradas de blog en su versi\u00f3n en espa\u00f1ol que creamos van con estas plantillas.<\/p>\n\n\n\n

Esta parte de plantilla la duplicamos, y modificamos el men\u00fa para hacer la versi\u00f3n Header<\/em> GL con todos los enlaces a las mismas p\u00e1ginas que en espa\u00f1ol, pero a su versi\u00f3n gallega. La parte de plantilla Header GL la pusimos en las plantillas Single Post<\/em> (no separators<\/em>) y Page<\/em> (no separators<\/em>) de la primera captura.<\/a> Lo mismo que antes, a las p\u00e1ginas creadas en la versi\u00f3n gallega, les asignamos la Page<\/em> (no separators<\/em>), y a las entradas, la Single Post<\/em> (no separators<\/em>).<\/p>\n\n\n\n

Lo mismo hicimos con los Footer<\/em> ES y Footer<\/em> GL.<\/p>\n\n\n\n

\u00bfTe liaste un poquillo? No hay problema. Vuelve aqu\u00ed, <\/a>relee con calma que te espero \ud83d\ude09<\/p>\n\n\n\n

…….<\/p>\n\n\n\n

Seguimos. \u00bfQu\u00e9 conseguimos con todo esto? Simular un sitio multilenguaje. Recalco lo de simular. Obviamente, la experiencia no es la misma. Porque si t\u00fa, que est\u00e1s leyendo esta p\u00e1gina en espa\u00f1ol, pulsas en el men\u00fa en GL, te lleva a la p\u00e1gina de inicio de gallego. Cuando estar\u00eda bien que te llevase a esta misma entrada, pero en gallego. Pero oye, da el pego, \u00bfno crees?<\/p>\n\n\n\n

<\/div>\n\n\n\n

M\u00e1s ventajas para usar el FSE<\/h2>\n\n\n\n

Hay muchas m\u00e1s ventajas encima de la mesa que hicieron que nos decant\u00e1semos a la hora de usar el FSE en la web de WordCamp Pontevedra. Muchas las pod\u00e9is considerar incluso para vuestros proyectos. Os las detallamos:<\/p>\n\n\n\n