Salvo para tiendas o sitios de presencia puramente institucional, la generación de publicaciones va a ser la espina dorsal de nuestro sitio web. Y con los conocimientos adecuados, será tan sencillo como la creación de cualquier posteo en redes sociales, con la ventaja de la extensión y variedad de contenido que podremos incorporar.
Tabla de contenidos
- Todas las entradas
- Nueva entrada
- Visión general del editor
- Menú lateral izquierdo
- Widgets del editor
- Párrafo
- Encabezado
- Lista
- Notas al pié de página
- Columnas
- Imagen
- Html personalizado
- Youtube / Vimeo
- Drive
- Descargas de documentos de Drive
- Bloques reutilizables
- Anclas o enlaces a secciones del post
Primeros pasos
Lo primero será identificarnos en nuestro sitio web. El proceso es el mismo en todos los casos, y será mediante la dirección de nuestro sitio agregando /wp-admin al final. Allí ingresaremos nuestro usuario y contraseña. Hecho esto, mientras estemos logueados, el /wp-admin será la dirección de nuestro escritorio en wordpress.
La primera pantalla que veremos, con más o menos elementos dependiendo del sitio particular, será la siguiente:
El ícono de home junto con el nombre de nuestro sitio, nos llevará al frontend. Allí, un menú similar nos devolverá al escritorio.
Todas las entradas
Ahora vamos a repasar algunas funciones de la pantalla “todas las entradas”.
Esta sección nos mostrará todas las entradas publicadas o en borrados que tengamos en nuestro sitio.
- Este apartado nos permite navegar entre “todas las entradas”, “agregar nueva” entrada, “categorías” y “etiquetas”, para crearlas, modificarlas o borrarlas.
- Es otro botón para agregar “nueva entrada”.
- Filtro de entradas. Acciones en lote nos permitirá hacer una acción que afectará a todas las entradas seleccionadas con tilde.
- Búsqueda por nombre
- Es la entrada propiamente dicha. Posando el puntero sobre el título, se desplegarán algunas acciones que se aplicarán solamente a ella. Editar abrirá el editor Gutenberg, papelera la borrará (no es definitivo, pues se puede rescatar de la papelera del filtro del punto 3), y edición rápida abrirá el siguiente submenú:
Todos los elementos pueden modificarse al darle a actualizar. Hay que tener en cuenta que no es conveniente modificar el enlace (o slug) si el post ha estado un buen tiempo en circulación, pues puede que la entrada se haya indexado en los buscadores, y al modificarse el enlace, se cree un error 404, lo que es bastante malo a los efectos de la puntuación SEO. De todas formas, de necesitar cambiarla, nos avisan para generar una redirección a la nueva url desde la vieja y chau.
De necesitar editarse varios posts a la vez con las mismas características, se seleccionan los necesarios, y en acción en lote le damos a “editar”.
Nueva entrada
Clickear en cualquiera de los botones de “nueva entrada” nos abrirá el editor en bloques o Gutenberg.
Este editor funciona de forma tal que cada elemento que agreguemos de contenido será un bloque. Así, un párrafo de texto es un bloque, una imagen otro, un video, cita, documento o galería. Esto puede parecer complejo a primera vista, pero resulta muy cómodo cuando se maneja distintas clases de contenido, sin necesidad de manejar código para cada cosa, como en los editores viejos. Si estamos trabajando con texto, y queremos agregar imágenes debajo o al costado del mismo, basta arrastrar los bloques para acomodarlos en la pantalla a nuestro gusto.
Hay que tener en cuenta que, por defecto, un bloque nuevo es un párrafo de texto. De modo que con presionar enter (punto y aparte), vamos a cerrar el bloque en el que estemos trabajando y crear uno nuevo. Vale aclarar también que la combinación shift+enter nos dará un punto y aparte sin cambiar de bloque. Y si lo que queremos hacer es agregar un bloque de otra clase, tendremos que abrir el menú de widgets (o bloque) con alguno de los varios botones de “+” en pantalla, seleccionar el que nos interesa o buscarlo por nombre, y arrastrarlo a la pantalla del editor propiamente dicha.
Visión general del editor
Esta en la pantalla que verán al agregar nueva entrada. Y las funciones de cada uno de sus elementos son las siguientes:
- Logo del sitio. volveremos a la pantalla de “todas las entradas”. Si realizamos cambios a nuestra entrada sin guardar, nos dará aviso de abandonar o permanecer en la página.
- Menú de widgets. Abrirá un menú a la izquierda donde buscaremos el bloque que necesitemos y arrastraremos hasta el contenido para ingresarlo.
2 bis. Es el mismo menú, pero flotante. la diferencia será el tamaño y allí figurarán los bloques más utilizados además de una barra de búsqueda para encontrar el bloque que necesitamos. - Algunas herramientas de selección, sobre todos para cuando tenemos el contenido ya ingresado y queremos mover o modificar los bloques ya dispuestos.
- Deshacer y rehacer. Viene a ser la función ctrl+z – ctrl+y.
- Es una vista completa o resumen del documento y sus bloques.
- En ocasiones verán botones de ese estilo, sea de elementor o wpbakery. Lo importante es que, en caso de presionarlo por accidente, deben presionar luego “volver al editor Gutenberg”
- Guardar borrador. Muy recomendable hacerlo cada tanto, para no perder nuestro trabajo por alguna clase de error o factor externo.
- Publicar/Actualizar¹.
- Menú de ajustes. Es el menú lateral izquierdo. Lo podremos hacer aparecer o desaparecer a gusto.
- Otro menú emergente. En este caso agrega funcionalidades que tal vez no nos sean muy útiles en nuestros primeros usos del editor, pero que agregan comodidades sobre todo en lo visual
Menú lateral izquierdo
Este menú muestra todos los ajustes posibles de nuestra entrada. Es vital revisar cada uno de sus campos antes de publicar, aunque solamente el enlace traería problemas a la hora de actualizar un post publicado de forma incompleta. De todas maneras, es buena práctica revisar todo.
1. El menú se divide en la configuración de la entrada, y en la del bloque que tengamos seleccionado. Ahora trataremos la de la entrada.
2. Se refiere a quiénes podrán ver la entrada una vez publicada. las opciones son: pública, privada (usuarios con permisos del sitio) o con acceso por contraseña.
3. Es la fecha de publicación. Se puede programar a futuro o establecer a fechas anteriores.
4. La plantilla debería dejarse siempre por defecto, salvo que estemos usando elementor o algún constructor similar.
5. La url será definida por el nombre de la entrada al momento de publicarse. Cambiarla manualmente una vez publicado no es conveniente por cuestiones de SEO.
6. Esto hace que el post quede sticky. No es recomendable.
7. No tiene uso en nuestros sitios.
8. Es el autor. Dependiendo la clase de usuario que estemos usando se podrá cambiar o no.
9. Borra o mueve a la papelera, de donde podremos rescatarlo de necesitarlo otra vez.
10. Nuevas categorías se pueden crear desde allí mismo, haciendo click en “agregar nueva”, nombrándola y enter.
11. Son las etiquetas o tags. Sirve también para casos en que querramos mantener contenido en la home. Nos avisan y lo implementamos.
12. Es la imagen que figurará en las tiras de posts y en la cabecera de la entrada. Conviene que sea de buena calidad y bajo peso, sobre todo para sitios con sliders de varios posts en la home. La relación dependerá del diseño, si de forma apaisada, retrato o cuadrada. Es cuestión de preguntarnos o indicarnos de qué forma quieren que se muestren.
13. Extracto, texto destacado o para los sitios periodísticos, la bajada. Varía de sitio en sitio, pero por lo general se muestra en las tiras de posts y en algún lugar destacado de la cabecera o inicio de la entrada.
14. También varía de la clase de sitio que tengamos. De estar implementados, de aquí decidiremos si en nuestra entrada se permitirán o no.
15. Configuración del caché. Es para desactivar caché en el post particular. la configuración general es suficiente, así que no deberían molestarse por esto.
Widgets del editor
Como vimos más arriba, el contenido de nuestro post se compone por bloques (o widgets, en la práctica lo usaremos como sinónimos, aunque no lo sean realmente) y que cada nuevo bloque que creemos al presionar “enter” nos dará uno nuevo de párrafo. También que se puede agregar presionando cualquiera de los botones de “+” que veamos en el editor, sean los fijos o dinámicos que aparecen entre bloques ya creados al posar el cursos.
Otra opción, para cuando estemos cómodos y sebemos los nombres de los que queremos usar, es, dentro de un nuevo bloque, tipear la barra inclinada “/” (shift+7) seguido del nombre del widget. Por ejemplo: /imagen, /youtube, /párrafo, etc.. Lamentablemente no funciona (o no le encontré la vuelta) para los bloques reutilizables o patrones, de los que hablaremos más adelante.
Pasaremos a analizar los más utilizados.
Párrafo
El más usado definitivamente, y el más simple. Como dijimos, “enter” nos mandará a otro párrafo y “shift+enter” al punto y aparte sin cambiar el mismo.
El menú flotante es bastante simple y tiene las siguientes funciones:
- Transforma el widget en otro relacionado, como encabezado, cita, lista. De ser uno de imagen en galería… se entiende la idea.
- Posición vertical del bloque. Ambas opciones permiten mover el párrafo, en el primer caso, arrastrando, en el otro, con flechas.
- Alineación del texto. Afecta al párrafo completo, mas no al resto, así que cuidado.
- Formato del texto. Negrita, cursiva, enlace y en el desplegable, formatos especiales como resaltado, sub y superíndice, nota al pié de página, etc..
- Tiene opciones útiles como copiar el bloque, duplicarlo, agruparlo con otros, borrar, crear bloques reutilizables, estilos y poco más.
Encabezado
Nada extraño realmente. La única diferencia con el de párrafo es el nivel. H1 debería reservarse para el título del post. el resto es perfectamente válido, respetando el orden.
Lista
Viene en dos modalidades: desordenada (puntos o balas) y ordenada (números). Con “enter” se ingresa el siguiente ítem, con doble “enter” se sale de la lista a nuevo párrafo.
Notas al pié de página
Es un widget muy útil que se creará de forma automática al final del post o del contenido que hayamos creado hasta el momento. Y se genera cuando agreguemos la primer nota. Es conveniente, si aún no terminamos de escribir, borrarlo y agregarlo al final de nuestro trabajo, por supuesto luego de haber ingresado el texto que queremos anotar. No se pierde si no borramos el enlace del número que se generó.
De forma visual:
Con el cursor en el lugar que queremos agregar nuestra nota, nos vamos al desplegable de formato, notas al pié de página, y se creará automáticamente un número de superíndice con enlace, que nos llevará al pié de página, donde ingresaremos el texto a anotar.
Columnas
Si lo que necesitamos es agregar texto al lado de una imagen, o dos widgets cualquiera, necesitamos usar columnas.
El proceso es sencillo. Elegimos la variación que nos sirve, y se crearán las dos o tres columnas. Dentro de las cuales ingresaremos cualquier widget que necesitemos. En el menú desplegable seleccionamos la configuración de la columna individual o de la sección completa para configurar tamaño, alinieación, etc..
En fin, para más detalles, hay que jugar un poco con las configuraciones.
Imagen
Las imágenes conviene siempre subirlas al sitio y no usar servicios externos. Por velocidad de carga y disponibilidad principalmente. Puede parecer conveniente recurrir a un servicio externo de hosting de imágenes por espacio pero los inconvenientes son mayores que las ventajas por lejos. Primero que si usamos un hosting gratuito, corremos el riesgo de que se borren y los posts queden con imágenes que no van a cargar nunca. Por cuestión de precio, los pagos no son más baratos que ampliar la capacidad de almacenaje en el servidor. Y siempre va a cargar más rápido algo que sale de nuestro mismo sitio, que tener que esperar a que cargue (además de nuestra entrada) una imagen de otra dirección. Sin contar con que contamos con servicios que periódicamente optimizan las imágenes en peso y formato a generaciones más nuevas.
Se agrega el widget o simplemente se arrastra la imagen a la pestaña del editor.
- Filtro de de tonos. Modifica los tonos claros y oscuros de la imagen a los colores que nos gusten.
- Alineación. para casos en los que el ancho sea menor al de la pantalla, la imagen se puede alinear en su posición.
- Para agregar leyenda.
- Sirve para agregar un enlace a la imagen. O sea, al clickear en la misma, se abrirá el enlace. En ajustes avanzados, se puede configurar apertura en nueva pestaña o no.
- Recorte. Es algo básico y no muy cómodo; conviene cargar la imagen ya editada de la forma que la necesitemos. Pero en ocasiones nos saca de un apuro.
- Agregar texto sobre la imagen. Es útil si que quiere hacer una especie de banner. Esto crea un bloque de texto dentro de la misma. A ese texto le podremos dar un fondo o degradado entrando a la configuración del widget de párrafo. Dicho de otra forma, es un widget dentro de otro, y se configuran por separado.
- Reemplazo de la imagen por otra, subiéndola o desde la biblioteca.
- Esos puntos sirve para ajustar el tamaño. No es del todo preciso, es a ojo. Ancho y alto.
Html personalizado
El post, y todo el sitio, en realidad, está hecho en html (que es un lenguaje de maquetación).La idea de los editores como el de Gutenberg es no tener que lidiar con código, pero hay ocasiones en las que es inevitable. Sin embargo con un poquito de paciencia y cuidado se puede lograr mucho.
Para el caso de querer agregar contenido de otros sitios, como redes sociales, sean posteos, videos, o documentos y formularios de plataformas como Drive, vamos a necesitar ingresarlos con código. En algunos casos es se trata solamente de copiar un enlace que la misma red o servicio nos otorga, y en otros hay que buscar una pequeña vuelta de rosca.
En casos como youtube, vimeo, twitter e instagram, tenemos que buscar el enlace para incrustar, copiar ese código y pegarlo en el widget de html personalizado, probando el éxito en vista previa.
Para documentos de drive, el proceso es distinto. Necesitaremos el enlace, pero tendremos que modificarlo un poquito, dependiendo lo que pretendamos hacer con ese documento, si mostrar una vista previa, o agregar su descarga directa.
Vamos a ver casos puntuales.
Youtube (aplicable a vimeo también)
Si bien Gutenberg tiene un widget de youtube en el que se puede agregar un video con solo pegar el enlace, es mucho más flexible la opción de html personalizada porque podremos configurar el tamaño del video, ocultar algunos controles, darle un tiempo de inicio, etc..
Lo primero es obtener el código desde youtube. Dentro de la página del video, pulsaremos compartir, y entre las varias opciones vamos a elegir <insertar>.
En la ventana emergente que se abrirá, copiaremos el código y lo pegaremos en nuestro html personalizado.
Damos a vista previa. Si carga hicimos todo como corresponde. Si no es el caso, algo copiamos mal seguramente.
El proceso es similar que para youtube. La diferencia está en que, en lugar de compartir, iremos a los “tres puntitos” y le daremos a “insertar”. Allí copiaremos el código y lo pegaremos en nuestro html personalizado.
Igual que en el caso anterior, en vista previa controlaremos que el código ingresado sea el correcto. Presten atención a la gran cantidad de texto. Si ven solamente una línea, es porque se equivocaron y copiaron el enlace de la publicación.
Al momento de realizar este tutorial (y durante los últimos meses) twitter está experimentando cambios por todos lados. Así que lo más probable es que para el momento que leas esto sea un poquito diferente, si es que no recordé actualizar el tutorial. De todas formas, la esencia va a ser más o menos la misma. Es cuestión de conseguir el enlace para incrustar, y pegarlo en nuestro html personalizado.
No voy a repetir la captura del html personalizado porque es exactamente igual para todos los casos. Dándole a “vista previa” con un ratito para que cargue, veremos si hicimos un buen trabajo. Si no, seguramente copiamos algo mal.
Drive
Hablaremos ahora de incrustar archivos .pdf, pero ciertamente sirve para cualquier clase de documento; .pdf resulta que es el más habitual.
Google Drive no otorga de forma sencilla un <iframe> o <blockquote> para que simplemente lo incrustemos en nuestro sitio. Entonces tendremos que es crearlo nosotros mismos, y no será mala idea tener un bloc de notas a mano en nuestra pc con el código para hacerlo de la forma más rápida posible cada vez que lo necesitemos. De todas maneras, más abajo voy a explicar algo que se llama bloque recurrente (o reutilizable) que nos facilitará la vida aún más.
El código
<iframe src=”enlace” width=”99%” height=”480px”></iframe>
Este código lo que hace es crear una sección del 99% de ancho de la pantalla de contenido y 480 pixeles de alto, en la que se mostrará contenido de otro sitio. Lo que nosotros estamos buscando es que ese sitio sea Drive, y que el contenido sea la preview del documento en cuestión.
Para ello debemos reemplazar la palabra enlace por el enlace del documento, modificándolo de tal forma que quede: “https://drive.google.com/file/d/lo-que-fuera-esto-es-un-ejemplo/preview”. seguramente deban reemplazar “/view?usp=sharing” o “/edit?usp=sharing”. Como fuera, la última parte del enlace desde la barra inclinada, se reemplaza por la palabra preview.
<iframe src=”https://drive.google.com/file/d/xxxx-un-montón-de-caracteres-xxxx/preview” width=”99%” height=”480px”></iframe>
De más está decir que el “height” se puede modificar a la altura en px que deseen.
Insisto, esto funciona para pdf y cualquier otra clase de documentos de drive. Lo que cargará nuestro iframe, es la vista previa de ese documento, por eso la modificación del enlace.
Algunas notas
Algo extra respecto de Drive. Al compartir un documento para obtener el enlace, recordar que se debe dar permiso “a cualquiera que tenga el enlace”, y solamente de “lector”. Por defecto, una carpeta privada tendrá como privados todos los archivos en ella creados; serán públicos en el caso inverso.
De nuevo, vista previa en nuestro html personalizado nos dará indicios acerca de lo bien que lo hicimos, o mal, si así fuera. Recordar “/preview” es el camino correcto.
Descargas de documentos de Drive
Dejo esta parte aquí por la conexión con Drive, pero el método es diferente. En caso de querer poner un enlace con descarga directa del documento en cuestión, de un archivo allí alojado y no queremos subirlo a la biblioteca de wordpress (por el motivo que fuera), pegaremos el siguiente código en forma de enlace en la palabra resaltada de nuestro párrafo. El enlace a pegar y modificar es el siguiente:
Luego del signo = agregaremos la id de nuestro documento, que es el montón de caracteres entre las barras, y solamente eso, nada del resto. En nuestro ejemplo de más arriba, en el enlace:
La id sería: “xxxx-un-montón-de-caracteres-xxxx”.
Sumamos eso al anterior para que quede de esta forma:
Y listo, tenemos nuestro enlace de descarga directa del documento. Para probar podemos pegarlo en la barra de nuestro navegador y disparará la descarga del archivo. Ahora solamente queda agregar ese enlace a nuestro párrafo.
Quedaría algo así.
Bloques reutilizables
Hay ocasiones en las que tenemos que ingresar datos de forma repetida, sea en el mismo post o a lo largo de varias de nuestras entradas. Para estos casos, Gutenberg cuenta con la opción muy cómoda de los bloques reutilizables. El caso más común tal vez sea el de firmas y datos de contacto. Pero se puede extender a otros como el de los códigos en html personalizados. Por ejemplo, guardar un bloque con el código para incrustar un documento de drive, y así no tener que recordar o dejar anotado en todas partes de qué forma lo hacíamos, o el cansancio de tener que hacerlo de forma casi constante.
La forma de crear uno de estos patrones o bloques reutilizables es de lo más sencilla.
A modo de ejemplo, usaremos el caso de la vista previa de un pdf, seguramente el caso más usado.
Creamos nuestro html personalizado con el código listo para reemplazar el enlace de drive, nos vamos a los tres puntitos del menú del widget, y clickeamos en “crear patrón/bloque reutilizable”.
Le damos nombre (pdf-drive se me ocurre), des-tildando “sincronizado”, pues no nos interesa que se sincronice, y listo, al buscar entre los widget (o por nombre en la barrita), aparecerá nuestro html personalizado con el código que ya habíamos ingresado, y será cuestión de que peguemos el enlace que queremos mostrar .
Este es solamente uno de los ejemplos. Tal vez necesitemos guardar nuestra firma con algunos datos de contacto, matrícula, etc.. En tal caso, generamos el párrafo como queremos que se vea, le damos los estilos que nos gusten, y guardamos ese bloque, esta vez tildando “sincronizado” para que podamos modificarlo en algún momento y esto se aplique en todos aquellos lugares en los que lo agregamos.
Anclas o enlaces a secciones del post
Las anclas, como dice el título, son valores que agregamos a ciertas secciones de nuestro post para poder volver a ellas mediante la implementación de un enlace. A modo de ejemplo, “volver”, debajo de cada sección de este tutorial, es un enlace que nos lleva al “ancla” de la tabla de contenidos y, a su vez, cada uno de los títulos del post es ancla de cada uno de los elementor de la lista.
Puede parecer que solamente se justifica en posts largos en los que es necesaria cierta navegabilidad, pero existen ocasiones en las que queremos enlazar un párrafo de otro post. En cuyo caso debemos adicionar el ancla al enlace del post.
Cualquiera sea el motivo, debemos crear el ancla primero. Para ello tenemos que explicar que un ancala es un “id” que agregaremos a nuestro bloque (cualquiera sea su naturaleza) y que esta id debe ser única, al menos dentro de nuestro post. Mostraremos en captura el caso de un párrafo, pero es aplicable a cualquier widget.
Con nuestro widget seleccionado, nos vamos al menú de la izquierda, en el apartado “bloque”, abajo del todo en “avanzadas” agregamos nuestro texto de ancla sin dejar espacios (podemos usar guiones):
Ahora lo que debemos hacer es agregar esa id (anteponiendo numeral “#”) al enlace que querramos, sea una palabra en un párrafo, una imagen, etc., de forma que quedaría algo así:
Y listo. Cuando demos click a ese enlace, nos mandará a la sección ancla. Si lo que queremos es que nos mande al ancla de otro post, usaremos el enlace completo del post adicionando /#parrafo-01 (o sea barra, numeral y la id de ancla). Con eso le diremos al navegador que queremos ir al post del enlace y, dentro de suyo, a la sección del ancla.
Notas:
