Sobre el Curso de WordPress 2020

Además de contribuir a la formación de los profesores y profesoras que elaboran sitios web para sus centros, el Curso de WordPress 2020 pretende demostrar por sí mismo las posibilidades de esta aplicación y sus componentes a la hora de confeccionar sitios online elegantes y al mismo tiempo útiles para los colegios e institutos. Por ello nos ha parecido conveniente elaborar esta página, en la que describimos detalladamente los elementos constitutivos de este sitio. Esperamos que sirva de ejemplo y referencia para los alumnos y alumnas del curso, así como,para los responsables de los sitios web de los centros educativos.

Materiales formativos sobre WordPress y edición de sitios web

El Curso de WordPress 2020 forma parte de una serie de materiales online publicados a lo largo de los últimos años, y que recogen el contenido de sendos cursos presenciales celebrados en el CAP de Pamplona, todos ellos impartidos por el profesor Eduardo Larequi García:

Sitio web instruccional y sitios de prácticas

A pesar de la dimensión práctica del curso, este es un sitio de carácter esencialmente instruccional. De aquí que los materiales publicados en él solo sean plenamente aprovechables en combinación con los sitios de práctica creados para sus alumnos y alumnas (los detalles de funcionamiento de estos sitios están explicados en la página de Instrucciones) y con las demostraciones realizadas por el profesor durante las sesiones presenciales.

Estructura del sitio

La estructura de este sitio web se organiza y dispone de la siguiente manera:

  • La página de inicio del sitio es una página fija o estática, que detalla el plan del curso y ofrece una presentación de sus contenidos, metodología y organización.
  • El contenido del curso comprende más de treinta artículos, organizados en seis categorías. Cinco de ellas corresponden a las cinco sesiones presenciales del curso; la sexta sesión contiene los artículos dedicados a exponer y.evaluar las actividades que deben realizar los alumnos y alumnas.
  • El sitio web consta también de un par de páginas fijas, que contienen las instrucciones que hay que seguir para acceder a los sitios de práctica, y la meta información sobre el sitio web (esta misma página).

Elementos estructurales

La disposición del sitio web pretende garantizar una estructura coherente, con una navegación consistente y eficaz. Estos son sus principales elementos constitutivos:

  • Menú de navegación, situado en la parte superior de la cabecera, visible en todas las páginas del sitio. Este elemento proporciona coherencia y garantiza una navegación fluida por sus contenidos. Se ha intentado que el menú sea lo más corto posible, para que su presentación sea adecuada en todo tipo de dispositivos.
  • Pie de página visible en todo el sitio web. Aunque no estrictamente necesario, es un elemento estructural que permite mostrar ciertas informaciones de importancia, como por ejemplo los datos de contacto, la procedencia de las imágenes, la licencia de distribución de los contenidos del curso o los enlaces a otros cursos previos sobre WordPress.
  • Páginas de categorías sin barra lateral. La asignación a las páginas de categorías de una disposición sin barra lateral permite obtener un diseño de cuadrícula o rejilla de entradas muy dinámico y elegante.
  • Entradas y páginas individuales con una barra lateral a la derecha, lo cual permite, a su vez, incluir varios widgets que mejoran la navegación y refuerzan la coherencia del sitio.
  • Para los enlaces permanentes de las entradas hemos seleccionado la opción basada en el nombre del artículo, lo cual genera URLs más cortas y significativas. Esta estructura, además, es coherente con el contenido y propósito instruccional de este sitio, que carece del contenido noticioso típico de los blogs.

Elaboración del contenido

Este sitio web ha sido elaborado desde un principio con la intención de demostrar las posibilidades de composición y diseño de los plugins Elementor y Elementor Pro, No obstante, dado que este es el primer sitio web “real” que realizamos en su totalidad con ambos plugins, hemos adoptado un enfoque prudente, presidido por los siguientes principios:

  1. Diseñar con Elementor solo los elementos estructurales del sitio (cabecera, pie de página, plantillas de entradas, de páginas y de páginas de archivo), así como aquellas páginas que deben tener una entidad destacada, tanto a nivel de funcionalidad como de apariencia. En nuestro caso, las únicas páginas con diseños singulares son las de Inicio y Contacto, que resultan claramente distinguibles del resto del sitio.
  2. Utilizar el editor estándar de WordPress, y los bloques propios de dicho editor, para crear la mayor parte del contenido del sitio. De hecho, casi todos los artículos se han editado exclusivamente con dicho editor.
  3. Aprovechar y maximizar el esfuerzo invertido en labores de diseño y maquetación, para lo cual hemos hecho un uso intensivo de las plantillas de Elementor y Elementor Pro. Más adelante detallaremos este punto.
  4. Asegurar la coherencia estética y funcional de todas las páginas del sitio. Para lograr este objetivo, el diseño de este sitio se ha basado en Law Firm, uno de los template kits o conjuntos de plantillas de la biblioteca de plantillas de Elementor.

Plantillas de Elementor

Hemos intentado utilizar la mayor parte de las posibilidades que brinda el sistema de plantillas de Elementor y Elementor Pro. tal como detallamos a continuación.

Plantillas de la biblioteca de plantillas

A fin de agilizar el diseño global y contar desde el principio con unos fundamentos sólidos y de calidad, hemos construido todo el sitio a partir del conjunto de plantillas Law Firm que, como ya hemos indicado, es uno de los template kits de Elementor Pro.

Plantillas del constructor de temas

Gracias a las funcionalidades del theme builder, o constructor de temas de Elementor Pro, hemos elaborado un amplio conjunto de plantillas, organizado de la siguiente manera:

Las plantillas de páginas de archivo de etiquetas, de fechas y de resultados de búsqueda incluyen paginación de resultados, mecanismo que no está incluido en las plantillas de páginas de archivo de categorías; ya que estas últimas solo contienen un número reducido de entradas (seis en todas y cada una de ellas).

Otras plantillas

Además de las ya citadas, hemos creado y utilizado dos plantillas de secciones, dos plantillas de ventanas emergentes y una plantilla de página.

Plantillas de sección

Las dos plantillas de sección que hemos elaborado responden a los siguientes propósitos y funciones:

  • Botón para abrir una ventana emergente. Hemos incluido esta plantilla en la entrada Página en blanco, cuadrícula y cajas. El botón azul con el texto “Ejemplo de cuadrícula” es una plantilla de sección que abre una ventana emergente..
  • Sesiones del curso. Esta plantilla ha sido incrustada en la página de inicio, y muestra el contenido de las cinco sesiones del curso. Para crear las cinco cajas hemos utilizado dos secciones; la superior tiene tres columnas y la inferior dos. Cada columna muestra una imagen de fondo diferente, y contiene dos widgets de titulares, un widget de texto y un widget de botón.

Plantillas de ventanas emergentes

Las dos plantillas de ventanas emergentes o popups cumplen las siguientes funciones:

  • Cuadrícula emergente: corresponde al popup que se abre al pulsar el botón azul con el texto ”Ejemplo de cuadrícula”, a su vez incluido en la entrada Página en blanco, cuadrícula y cajas.
  • Ventana emergente tras contacto: corresponde al popup que se abre tras el envío del formulario de la página Contacto.

Plantilla de página

La única plantilla de página que hemos creado no es visible en el estado actual de este sitio web, ya que su función es presentar una pantalla con información sobre la futura publicación del sitio. La página utiliza la función denominada modo de mantenimiento, propia del plugin Elementor. En la siguiente captura de pantalla puede comprobarse su aspecto.

Pantalla del modo de mantenimiento
Pantalla del modo de mantenimiento

Otros componentes de Elementor

Además de utilizar de forma sistemática el mecanismo de las plantillas, que ya hemos detallado en el epígrafe anterior, este sitio web hace uso de una amplia variedad de las funcionalidades y los widgets de Elementor y Elementor Pro.

Funcionalidades de Elementor y Elementor Pro

De entre las muchísimas funcionalidades que incorporan ambos plugins, hemos hecho uso de las que describimos a continuación.

  • Desactivación de los colores y las fuentes por defecto del tema. Hemos aprovechado esta funcionalidad para poder gestionar sin problemas lo que Elementor denomina estilos del tema, una función muy útil que permite definir estilos globales para el sitio, lo cual garantiza su coherencia estética.
  • Página “En breve”, creada con la función de modo de mantenimiento, que acabamos de explicar en el epígrafe sobre plantillas.
  • Exportación e importación de plantillas. Hemos utilizado esta funcionalidad para crear sucesivos duplicados de la primera plantilla de página de archivo de categorías que creamos, la cual fue aplicada en primera instancia a todas las páginas de categorías. Posteriormente, modificamos las plantillas duplicadas, con el fin de crear seis plantillas diferentes de página de archivo de categorías, correspondientes a las seis categorías de entradas de este sitio web.
  • Restricción de uso del editor de Elementor para los usuarios editores del sitio común de prácticas con Elementor Pro. Con el fin de garantizar que Elementor y Elementor Pro sean utilizados en este sitio común de acuerdo con los fines previstos, hemos aplicado algunas de las restricciones proporcionadas por la función de gestión de roles de Elementor y Elementor Pro.

Componentes y widgets de Elementor y Elementor Pro

Es casi imposible agotar todo el enorme catálogo de componentes y widgets que proporcionan Elementor y Elementor Pro, pero nos hemos esforzado en Utilizar un buen número de ellos, que detallamos a continuación.

  1. Secciones, columnas y widgets de secciones interiores. Estos elementos forman la estructura básica de las diversas plantillas y páginas del sitio.
  2. Titulares y bloques de texto editable. Estos widgets han sido utilizados en casi todas las páginas y plantillas elaboradas con Elementor.
  3. Menús de navegación. Hemos utilizado un widget de menú horizontal en la cabecera del sitio. A izquierda y derecha del menú hemos añadido, respectivamente, un widget de logotipo del sitio y un widget de formulario de búsqueda.
  4. Anclas de menú. Gracias a estos widgets hemos creado las anclas a las que están enlazados los iconos de la lista de iconos que se muestra en el margen izquierdo de la página de inicio. Este bloque de iconos funciona a modo de menú vertical que permite desplazarse por entre las secciones de dicha página.
  5. Widgets de contenido dinámico. Con los distintos widgets que sirven para incluir contenido dinámico hemos creado la mayoría de plantillas de este sitio. Véanse más detalles sobre su uso en los artículos Las plantillas de Elementor y Elementor Pro, El constructor de temas de Elementor Pro, y en el epígrafe “Plantillas del constructor de temas” de esta misma página.
  6. Tabla de contenido. Todas las entradas y varias páginas de este sitio incluyen este widget en la parte superior de la barra lateral derecha, bajo el rótulo “Contenido de este artículo”.
  7. Botón. Los widgets de botones han sido utilizados en diferentes páginas: la de inicio, la de Conracto, etc.
  8. Cajas volteadas o flip boxes. Se han utilizado un total de siete instancias de este widget, con dos estilos diferentes, en la página de inicio.
  9. Mapas de Google. Este widget también aparece en la página de inicio.
  10. Botones para compartir en redes sociales. La batería de iconos para compartir los artículos, que aparece al final del contenido de estos, ha sido elaborada con este widget.
  11. Listas de iconos. Los listados realizados con este widget aparecen en el pie de página, en la caja de la barra lateral derecha de los artículos (bajo el rótulo “Todas las sesiones del curso”), etc.
  12. Formulario. El formulario que forma párate esencial de la página Conracto está realizado con este potentísimo widget.
  13. Migas de pan. Este widget ha sido utilizado en las plantillas de entradas, páginas y páginas de archivo, entre otras.
  14. Comentarios de entradas. Al final de todas las entradas aparece el widget que permite publicar comentarios.
  15. Formulario de búsqueda. Además de utilizar este widget en la plantilla de cabecera, lo hemos añadido a la plantilla de página de error 404.
  16. Cuenta atrás. Hemos utilizado este widget en la página «En breve», que estuvo activa antes de la apertura pública del curso.

Aspectos significativos del diseño de este sitio web

Como ya hemos indicado en varias ocasiones anteriorres, el diseño de este sitio web está basado en Law Firm. uno de los template kits o conjuntos de plantillas de la biblioteca de plantillas de Elementor. Seleccionamos este conjunto porque su esquema de colores, tipografía y aspecto general nos parecía muy adecuado para un sitio instruccional como este. No obstante, hemos aplicado unas cuantas modificaciones importantes:

  • La cabecera y el pie de página, así como el diseño de la mayor parte de las plantillas originales, han sido simplificadas. Tanto en la cabecera como en el pie de página hemos añadido un borde superior y otro inferior, en un color verde distintivo.
  • Hemos modificado los colores de los enlaces y algunos elementos tipográficos.
  • Todas las páginas han sido modificadas con el añadido de una sección de cabecera que contiene una imagen destacada de fondo y un color homogéneo de superposición, en un tono azul oscuro.
  • Hemos separado las diferentes secciones de la página de inicio mediante un divisor de forma, que también hemos añadido a la parte inferior de las imágenes de cabecera.

El tema

Comenzamos la construcción de este sitio con el tema Navigation Pro, un tema hijo del framework Genesis. Sin embargo, una vez que comprobamos la capacidad de Elementor y Elementor Pro para modificar todos los,aspectos de diseño del tema, decidimos utilizar Hello Elementor, un tema muy sencillo que Elementor recomienda por su excelente rendimiento y compatibilidad.

Los plugins

Para cumplir el doble objetivo de elaborar este sitio web y crear y gestionar adecuadamente los sitios de práctica de los alumnos del curso, hemos hecho uso de los siguientes plugins:

  1. Atomic Blocks, plugin de colección de bloques, del que hemos tratado por extenso en la tercera sesión del curso.
  2. Batch Create, utilizado para dar de alta a todos los alumnos y alumnas del curso en sus respectivos sitios de prácticas.
  3. Crop-Thumbnails, necesario para ajustar el recorte de las imágenes creadas por el tema y adaptar estas a las necesidades del sitio.
  4. EditorsKit, para mejorar las capacidades nativas del editor de WordPress. La segunda sesión de este curso aborda en detalle el uso de este plugin.
  5. Elementor Page Builder y Elementor Pro, a los que hemos dedicado las sesiones cuatro y cinco de este curso.
  6. Elementor Blocks for Gutenberg, utilizado para insertar plantillas de Elementor en algunos artículos, sin necesidad de abandonar el editor por defecto de WordPress. El botón que abre una ventana emergente, en la entrada Página en blanco, cuadrícula y cajas, es un ejemplo de uso de este plugin.
  7. Google Site Kit, plugin mediante el cual he conectado este sitio con servicios externos como Google Search Console y Google Analytics.
  8. Instant Images, que permite acceder directamente desde el backend de WordPress al catálogo de imágenes de Unsplash y cargarlas en la biblioteca multimedia.
  9. OoohBoi Steroids for Elementor. Este plugin permite mejorar algunas de las capacidades de diseño de Elementor. Lo hemos utilizado para modificar la apariencia del mecanismo de paginación en algunas plantillas de página de archivo de este sitio.
  10. Posts Generator y WP Lorem Ipsum. He utilizado ambos plugins para generar entradas de contenido de prueba en los sitios de prácticas. Lamentablemente, el primer plugin ha sido retirado del repositorio de plugins de WordPress.
  11. Post Types Order, mediante el cual se puede personalizar el orden de publicación de los artículos, con independencia de la fecha real de publicación de estos.
  12. WP Add Mime Types. Este plugin ha sido utilizado en uno de los sitios de prácticas para permitir que se pudieran subir ficheros JSON a la biblioteca multimedia de WordPress, ya que esta aplicación no permite subir ficheros que tengan dicha extensión.
  13. Yoast SEO, para gestionar y mejorar el SEO del sitio.

Las imágenes

La mayor parte de las imágenes que ilustran este sitio han sido tomadas de Unsplash. Como,ya hemos indicado, su inserción se ha realizado directamente desde el backend de WordPress, gracias al plugin Instant Images. Aunque la cita y el reconocimiento de autoría de las imágenes de Unsplash no son necesarios de acuerdo con la política de este servicio, he querido expresar mi agradecimiento mediante un widget incluido en el pie de página.

Software adicional

Además de WordPress, la elaboración y preparación de este sitio web ha requerido el uso del software que indicó a continuación:

  1. Adobe Photoshop, aplicación con la cual he retocado (muy ligeramente) unas cuantas imágenes. No obstante, la mayoría de ellas solo han sido modificadas para redimensionarlas.
  2. Canva para iPad, programa que he utilizado para crear el logotipo del curso.
  3. Extensión Nimbus para Google Chrome, utilizada para grabar los screencasts que ilustran algunos artículos de este sitio.
  4. Handbrake. Con este programa se han convertido los screencasts originales grabados con Nimbus, que estaban en formato WEBM, a MP4. No era mi intención realizar esta conversión, hasta que descubrí que los screencasts originales no se veían en mi iPad Pro.
  5. Presentaciones de Google, con las que he creado las imágenes de portada de los screencasts.

Hardware

Ordenadores

He llevado a cabo las tareas de maquetación y diseño de las plantillas de este sitio web en mi ordenador de escritorio, una estación de trabajo Fujitsu Celsisus W510, con Windows 10 Pro. Por su parte, casi todo el texto de este curso ha sido escrito con un navegador Safari, en mi iPad Pro. Si no he utilizado en exclusiva este segundo dispositivo, que de un tiempo a esta parte se ha convertido en mi herramienta de trabajo fundamental, es porque ciertas operaciones de diseño, así como el uso del botón derecho del ratón, no son posibles en Elementor cuando este plugin se utiliza en un iPad.

Además de la estación de trabajo y el iPad Pro, he utilizado otros tres dispositivos para verificar el funcionamiento de este sitio web en ordenadores, tabletas y teléfonos móviles:

Otros dispositivos

Las grabaciones de los screencasts han sido posibles gracias a un micrófono USB Yeti, propiedad del Departamento de Educación del Gobierno de Navarra, que me recomendó y prestó amablemente mi compañero Josi Ayensa.

Agradecimientos

No quiero terminar la descripción de este sitio web sin expresar mi más sincero agradecimiento a las siguientes personas:

  • A Patxiku Gamboa, asesor de Nuevas Tecologias del CAP de Pamplona, eficaz y atentísimo organizador del curso.
  • A Josi Ayensa, por la recomendación del micrófono Yeti, de la extensión Nimbus, y por algunas ideas.
  • A mis compañeros y compañeras del Departamento de Educación (Guillermo Abadía, Alberto Hernández, Luis Miguel Jaso, Elena Osés) a quienes he utilizado como beta-testers de algunas de las páginas del curso.
  • A los alumnos y alumnas de este curso, docentes y administrativos en centros públicos de enseñanza, por su dedicación y esfuerzo.
  • A mi compañera de toda la vida, Pilar Gavín Trinidad, por su paciencia, cariño, apoyo y buenas ideas.

Comparte este artículo