4. El editor de contenido

• Descripción general
• Formatos
• Bloques predefinidos
• Shortcodes

Descripción general

El editor de WordPress está dividido en varias secciones. En ellas, se puede establecer el título del contenido que estamos creando o editando, añadir el contenido propiamente dicho, o configurar algunas opciones específicas de cada tipo de contenido. A continuación se describen las secciones comunes a todos los tipos de contenido.

Cabecera

En la cabecera del editor encontramos el título y la url. WordPress genera automáticamente una url para el título que le proporcionemos. En el caso de que sea necesario, es posible modificar esta url, pero lo recomendable es aceptar la sugerencia que nos hace.

También podemos crear un nuevo contenido desde esta sección utilizando el botón Añadir nueva.

Editor

El editor de contenido que ofrece WordPress cuenta con las opciones típicas de cualquier editor de texto. Con el Tema UEx, se ha incorporado algunas funciones personalizadas que facilitan su estructuración. A continuación se realiza una descripción general del editor, y en las próximas páginas se detallan más en profundidad las opciones personalizadas del tema.

En la primera línea podemos darle formato a las letras para ponerlas en negrita, cursiva, subíndice o superíndice entre otras. También es posible añadir caracteres especiales, la alineación del texto o copiar y pegar.

En la segunda línea encontramos las opciones para convertir el texto en listas ya sean numeradas o no, añadir o quitar tabulaciones y establecer el tamaño del texto o el estilo, por ejemplo, para los títulos.

También se pueden encontrar otras opciones más interesantes como las siguientes:

• Añadir/Editar/Eliminar enlace: Se pueden añadir enlaces a textos o imágenes. En las opciones del enlace, si la url destino forma parte del sitio web, se puede hacer una búsqueda sin necesidad de tener que copiar y pegar el enlace.

  Atención: Aunque es posible establecer que el enlace se abra en una nueva ventana, esta gestión ya se realiza automáticamente en función del tipo de enlace que añadamos, por lo que no es recomendable usar esta opción.

• Pantalla completa: Abrir el editor para que ocupe toda la pantalla y podamos crear contenido más comodamente. El mismo botón permite volver a la configuración original.

• Visual/HTML: Para personas con conocimientos de HTML, es posible cambiar el tipo de editor y agregar bloques de código o editar el código que genera WordPress a partir de lo que se ha añadido en el editor visual.

• Añadir medios: Permite añadir una imagen que ya se encuentra en la biblioteca de medios o subir una nueva. Entre otras opciones, es posible seleccionar el tamaño con el que se mostrará la imagen. En el desplegable Enlazado a es importante seleccionar la opción Archivo de medios para que cuando alguien pinche sobre ella se abra la imagen a tamaño completo.

  Recuerda: Añade siempre un texto alternativo a cada imagen que describa claramente su contenido. Así, facilitas la comprensión de la página aunque no se visualice la imagen y cumplimos con los criterios de accesibilidad.

Publicar

Esta sección se encuentran todas las opciones relacionadas con la publicación del contenido. Si se quiere publicar inmediatamente o guardar como borrador, ver una vista previa, establecer fecha de publicación, etc. Según el estado en el que se encuentre una publicación, se mostrarán unas opciones u otras.

Importante: Una buena gestión del contenido es imprescindible para el buen funcionamiento del mismo. Si algún contenido no es publicado inmediatamente, hazle un seguimiento continuo hasta su publicación o eliminación en el menor tiempo posible. No dejes nada obsoleto o con información interna, si necesitas almacenar información puedes hacerlo en tu Sharepoint personal o compartido.

Al crear un contenido nuevo

Opciones disponibles:

• Guardar borrador: Cuando estamos creando un contenido y no podemos terminar su edición en este momento, lo guardamos como borrador para seguir editándolo más adelante. No será visible para el público.
• Vista previa: Permite que veamos como va quedando nuestro contenido sin necesidad de publicarlo abiertamente, de esta manera podemos hacer modificaciones si no estamos conformes con el resultado.

  Aviso: Lo que veremos en esta vista previa es el detalle del contenido, no su componente ni su widget, por lo que en tipos como Enlaces de interés o Banner no aporta información relevante. Sin embargo, si es muy interesante para páginas y noticias.

• Estado: También es posible guardar el contenido como Pendiente de revisión mediante este desplegable, indicando que hemos terminado su edición pero necesita ser revisado antes de su publicación. La única diferencia entre Pendiente de revisión y Borrador es la etiqueta. A nivel técnico se comportan de la misma manera, pero etiquetar los contenidos de la manera correcta nos permite gestionar mejor nuestro sitio web.
• Visibilidad: Elige siempre la opción Pública. La opción Protegido con contraseña sirve para que solo puedan acceder a este contenido las personas que conozcan dicha contraseña, y la opción Privada solo permite el acceso a las personas que se han autenticado en el panel de administración. Se desaconseja el uso de estas dos últimas opciones ya que el objetivo de esta web es ofrecer información pública a toda la comunidad universitaria y público en general. Si necesitas compartir información privada puedes utilizar otras herramientas como Sharepoint.
• Fecha: Permite publicar el contenido inmediatamente o programar su publicación para el día y la hora que decidamos.
• Mover a la papelera: Si cambiamos de opinión y queremos borrar el contenido que estamos creando. Si salimos sin enviar a la papelera, se quedará almacenado el último guardado automático que haya hecho WordPress.
• Publicar: La opción que utilizarás más frecuentemente para publicar un contenido.

Editando un contenido ya existente

Cuando el contenido ya existía y queremos modificarlo, el botón Publicar cambia a Actualizar. A continuación se enumera todas las opciones que se pueden actualizar:

• Estado: Podemos elegir si queremos cambiar el estado de la publicación a Borrador, Pendiente de revisión o Publicada, en función del estado en el que se encuentre actualmente.
• Visibilidad: Mantenemos la opción Pública.
• Fecha: Si no se ha publicado todavía, se puede programar su publicación.
• Contenido: Si modificamos el título, el contenido o la imagen destacada, también actualizamos el contenido.

También podemos ver la Vista previa de los cambios y revisar el histórico de los cambios que se han realizado anteriormente.

Formatos

En la pestaña Formatos es posible seleccionar la opción Botón. Ésta permite convertir un texto con enlace para que visualmente siga el estilo de los botones de la web. De esta manera podemos incluir botones en nuestras páginas y que además mantengan un diseño estandarizado.

Para utilizarlo:

1. Escribe el texto y añade un enlace.
2. Selecciona el texto y elige el formato botón. Pincha en cualquier sitio fuera del botón. Si utilizas la tecla Enter cuando el cursor no está al final del texto, creará una nueva línea dentro del propio botón.
3. Para eliminar el formato botón repite el paso 2.

Bloques predefinidos

Los bloques predefinidos sirven para darle estructura y añadir diseño a la página.

Las siguientes instrucciones indican los pasos a seguir de manera genérica para todas los bloques. Para características específicas de cada uno, ve a la tabla que se muestra más abajo:

1. Pincha en la posición dentro de la página donde quieras incluir el bloque.
2. Dentro del desplegable Bloques predefinidos selecciona el bloque que quieras utilizar.
3. Se abrirá una ventana en la que puedes seleccionar el número de bloques iguales que quieres incluir en la página.
4. Reemplaza los textos, imágenes y enlaces del bloque por el contenido deseado.

Atención: Para continuar añadiendo contenido debajo de un bloque, pon el cursor al final del mismo y presiona la tecla Enter tantas veces como sea necesario para salir de las lineas de puntos que identifican los límites de los distintos elementos que componen el bloque.

A continuación se describen uno a uno.

Menú tarjetas

Tarjetas rectangulares para incluir enlaces y un pequeño texto descriptivo a modo de menú visual. El texto es opcinal, si no quieres añadir ninguno, simplemente borra el texto de ejemplo. Se muestran 3 tarjetas por fila.

Menú tarjetas con imagen

Igual que el Menú tarjetas pero incluye una imagen sobre el texto. Para cambiar la imagen de ejemplo, primero elimínala y luego añade otra, no intentes editarla. Esta imagen debe ajustarse al tamaño 340 x 227 píxeles o al menos guardar la misma proporción para que se visualice correctamente. Se muestran 3 tarjetas por fila.

Acordeones simples

Estos elementos están formados por un título y un texto. Aunque en el editor no se refleje el comportamiento, cuando se publique la página, se podrá mostrar y ocultar este texto pulsando sobre el título o el botón ‘+’ ‘-‘, respectivamente.

FAQ

El comportamiento de este bloque es similar a Acordeones. La diferencia radica en el diseño, pensado en un principio para utilizarse en las secciones de preguntas frecuentes, pero puede emplearse en otros contextos.

Cajas con iconos

Permite crear un menú visual con enlaces a diferentes url. En vez de utilizar imágenes utiliza iconos de Fontawesome. Se muestran 4 elementos por fila. Para utilizar este bloque se necesitan conocimientos de HTML ya que cambiar el icono de ejemplo por otro de nuestra elección requiere cambiar a la vista HTML del editor y sustituir las clases del elemento:

<i> <\i>

Ejemplo:

Sustituir
<i class="icon-featured fa-solid fa-pen-to-square"></i>
por
<i class="icon-featured fa-solid fa-house"></i> 

Atención: Los iconos que se incluyan en estos bloques, deben de estar etiquetados en Fontawesome con la etiqueta FREE. Si elegimos un icono PRO no se visualizará correctamente.

Fichas de personal

Para hacer páginas en las que mostrar listas de personal de una manera visual con fotografías de cada persona. Esta imagen debe ajustarse al tamaño 340 x 227 píxeles o al menos guardar la misma proporción para que se visualice correctamente. Se muestran 3 elementos por fila.

Columnas

Permite estructurar la página en columnas de diferentes tamaños para insertar el contenido manteniendo espacios y cierta organización. Por convención, las páginas se dividen en 12 columnas figuradas, y a partir de ahí agrupamos para indicar cuánto espacio va a ocupar cada contenido.

Por ejemplo, si seleccionamos la opciones 6-6 estamos indicando que queremos ocupar las primeras 6 columnas con un solo contenido y las otras 6 con otro, por lo que estamos diviendo la página en dos espacios iguales.

Si por el contrario utilizamos la opción 9-3, el primer contenido ocupará 3 veces más espacio que el segundo.

Tabla desde fichero

Permite crear una tabla de manera automática a partir de los datos que se encuentren en un fichero con formato .csv o .json.

Para obtener un fichero CSV puedes hacerlo de manera sencilla desde un Excel u otras hojas de cálculo:

1. Guardar como
2. Formato de archivo: CSV

JSON es un formato de texto sencillo para el intercambio de datos. El contenido de este fichero debe de seguir una estructura concreta similar a la de este ejemplo:

[
  { "Universidad Destino": "Universidad Politécnica de Cataluña", "Origen": "Badajoz", "Destino": "Barcelona", "Estudiantes": "1", "Meses": "9" },
  { "Universidad Destino": "Universidad Miguel Hernández de Elche", "Origen": "Badajoz", "Destino": "Elche", "Estudiantes": "1", "Meses": "9" },
  { "Universidad Destino": "Universidad de Huelva", "Origen": "Badajoz", "Destino": "Huelva", "Estudiantes": "1", "Meses": "9" },
  { "Universidad Destino": "Universidad de Cádiz", "Origen": "Badajoz", "Destino": "Algeciras", "Estudiantes": "2", "Meses": "9" }

]

Resultado:

Párrafo inicial

Permite posicionar el cursor en la primera línea del editor de texto. Esto soluciona un problema que puede darse si:

1. Añadimos un bloque predefinido al inicio del editor
2. Queremos añadir contenido por encima de este bloque
3. Entre el bloque y el inicio del editor no podremos posicionar el curso para indicar que queremos añadir algo en este punto.

Entonces:

4. Añadimos el bloque «Párrafo inicial»
5. Se escribirá la frase «Párrafo inicial» justo en la primera línea del editor, independientemente del contenido actual y de donde esté posicionado el cursor en ese momento.
6. Podemos borrar estas palabras y añadir el contenido deseado en su lugar

Shortcodes

Además de los Formatos y las Bloques predefinidos, están disponibles otros elementos denominados Shortcodes que permiten modificar el contenido de una página.

Los Shortocodes son pequeños trozos de código que resumen un código mayor. Sirven para incluir contenido dentro de una página o establecer formato de una manera sencilla.

Para utilizarlos:

• Opción 1:
  1. Pincha en la posición dentro de la página donde quieras incluir el shortcode.
  2. Dentro del desplegable Shortcodes selecciona el bloque que quieras utilizar.
  3. Completa los argumentos con la información necesaria.
• Opción 2:
  1. Copia el código que se propociona en esta misma página para cada uno de ellos.
  2. Pega ese código en la posición de la página en la que quieras utilizarlo. Utilizando el editor Visual, no el HTML.
  3. Completa los argumentos con la información necesaria.

Noticias

Para incluir una sección con las últimas noticias dentro de una página determinada, podemos utilizar varios shortcodes dependiendo del diseño que deesemos.

Iconos

Permiten incluir iconos de Fontawesome en distintas partes de una página.

Ejemplos:

[uex_icon_links titles="Título1, Título2" urls="http://www.unex.es, http://www.unex.es" icons="fa-solid fa-house, fa-solid fa-user"]

[[uex-icon icon="fa-solid fa-house" border="si"]]

Atención: Los iconos que se incluyan en estos bloques, deben de estar etiquetados en Fontawesome con la etiqueta FREE. Si elegimos un icono PRO no se visualizará correctamente.