Sobre este sitio - Curso de WordPress 2019

Además de contribuir a la formación de los profesores y profesoras que elaboran sitios web educativos mediante WordPress, el Curso de WordPress 2019 pretende demostrar por sí mismo las posibilidades de esta aplicación a la hora de confeccionar sitios online no solo elegantes y atractivos, sino también útiles para los colegios e institutos. Por ello nos ha parecido conveniente elaborar esa página, en la que describimos detalladamente los principales elementos constitutivos de este sitio. Esperamos que sirva de ejemplo y referencia para los centros educativos.

1. Formación sobre WordPress

El Curso de WordPress 2019 forma parte de una serie de materiales online publicados en años anteriores, como complemento de sendos cursos presenciales celebrados en el CAP de Pamplona, todos ellos impartidos por el profesor Eduardo Larequi García:

Los cinco cursos tienen apariencia y formas diferentes, pero todos comparten un planteamiento y una estructura semejantes:

2. Sitio web instruccional y sitios de prácticas

Tal como acabamos de indicar, este es un sitio de carácter esencialmente instruccional, que además tiene una dimensión práctica evidente. De aquí que los materiales publicados en este curso solo sean plenamente aprovechables en combinación con los blogs oportunamente creados para sus alumnos y alumnas (véase. a este respecto, la página Instrucciones). Sin disponer de acceso a esos blogs (o a otros sitios web equivalentes), puede ser difícil entender algunas de las explicaciones que aparecen en este sitio, porque no se podrán poner en práctica.

3. Estructura del sitio

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

La página de inicio del sitio web es una página fija o estática, en la que se detalla el plan del curso y se ofrece un resumen de todos sus contenidos.
El contenido instruccional está organizado en 19 entradas diferentes, a su vez agrupadas en cuatro categorías, cada una de las cuales corresponde a una de las cuatro sesiones.
El sitio web consta también de una serie de páginas fijas, que contienen información esencial sobre el curso, las instrucciones que hay que seguir para realizarlo, las actividades propuestas, los recursos que se pueden utilizar, etc.

La disposición visual 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 los contenidos del sitio. 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 (de hecho, el pie de página no existe en este tema, como luego veremos), es un elemento estructural que permite mostrar ciertas informaciones de importancia, como por ejemplo la procedencia de las imágenes.
Páginas de categorías sin barra lateral. La asignación a las páginas de categorías de la disposición sin barra lateral permite obtener un diseño de cuadrícula 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, activar varios widgets de enlaces que mejoran la navegación y refuerzan la coherencia del sitio. No obstante, hay varios artículos (las entradas dedicadas a los bloques de imágenes y otros bloques, así como las páginas de demostración de los plugins Atomic Blocks y Guten Post Layout) que no disponen de barra lateral; esto se ha hecho así para poder disfrutar de una caja de texto más amplía, lo cual sirve, a su vez, para conseguir que ciertos elementos (imágenes, galerías de imágenes, vídeos) vean reforzada su capacidad de impacto visual.
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. Como este sitio no es un blog, hemos querido evitar cualquier riesgo de que su disposición, y las URLs de los artículos que lo forman, sean percibidas como propias de un blog.

4. Elaboración del contenido

Todo el contenido de este sitio ha sido elaborado desde el principio con el nuevo editor de WordPress, cuyas posibilidades hemos querido aprovechar al máximo, evitando, al mismo tiempo, cualquier alarde o exceso de diseño.

En la elaboración de los artículos de este sitio, hemos utilizado la mayor parte de los bloques de texto e imágenes, amén de muchos otros bloques de formato, diseño, widgets, elementos incrustados, etc. Además, hemos hecho un uso sistemático de algunos elementos de diseño que solo son posibles con el nuevo editor. Entre ellos, los siguientes:

Letras capitulares al comienzo de los artículos.
Bloques de texto con el fondo coloreado, para marcar advertencias o avisos de importancia.
Bloques con alineaciones de anchura ampliada y anchura completa en diversos bloques, especialmente de imágenes, con el fin de conseguir un mayor impacto visual.

Este era nuestro primer sitio íntegramente elaborado con el nuevo editor de WordPress, y nos alegra mucho poder afirmar que la experiencia de edición ha sido completamente satisfactoria. Acciones como la duplicación de bloques, su recolocacion mediante los manejadores de cambio de posición, o la conversión de unos bloques en otros (sobre todo de párrafo a titular y viceversa) nos han permitido lograr un incremento muy significativo en la productividad de la escritura

5. El tema

Para dar al Curso de WordPress 2019 una apariencia adecuada a sus objetivos, hemos seleccionado el tema Essence Pro, uno de los temas hijo del framework Genesis. Es un tema moderno,elegante, dinámico y vistoso, que utiliza de forma muy inteligente las imágenes destacadas. Además -y esta es la virtud que más nos interesaba en este caso- el tema Essence Pro es totalmente compatible con el nuevo editor de WordPress.

6. Los plugins

La mayor parte de las funcionalidades avanzadas de este sitio web se han desarrollado mediante los correspondientes plugins. A continuación detallamos las más relevantes y los plugins que nos han servido para ponerlas en práctica:

La página principal no utiliza los widgets de página de inicio típicos de los temas de la familia Genesis, sino que ha sido elaborada gracias a los bloques proporcionados por los plugins Kadence Blocks – Gutenberg Page Builder Toolkit y Stackable – Gutenberg Blocks. Estos dos plugins (o cualquiera de ellos por separado) brindan unas posibilidades de diseño de página que, de momento, no están al alcance del editor de WordPress.
El formulario de contacto ha sido creado con el casi inevitable plugin Contact Form 7
El envío de emails por parte de WordPress, necesario para que se puedan enviar los formularios de contacto y para otros propósitos administrativos, se gestiona mediante un plugin MU, basado en la técnica descrita en el artículo Easy SMTP email settings for WordPress. El envío de emails funciona gracias al servidor de correo SMTP del Departamento de Educación del Gobierno de Navarra.
Para obtener las tablas de contenido de los artículos, que aparecen en forma de widget en la parte superior de la barra lateral de cada uno de los artículos individuales, nos hemos servido del plugin Easy Table of Contents. Los índices de contenido se generan a partir de los titulares de cada artículo, en concreto de las etiquetas H1, H2, H3, H4 y H5 del código HTML.
El listado de artículos correspondientes a cada una de las sesiones del curso, que se muestra en forma de widget en la barra lateral, se ha generado con el plugin Display Posts – Easy lists, grids, navigation, and more. Para ello se ha utilizado el shortcode que hemos incluido en el epigrafe 7.1.1 de esta página.
El listado de las categorías, que aparece en forma de widget en la barra lateral, se ha conseguido gracias al plugin List Categories. y el shortcode que mostramos en el epígrafe 7.1.2. Para tal propósito, hubiéramos podido utilizar el widget nativo de WordPress, pero este plugin proporciona algunas opciones adicionales que queríamos probar, aunque finalmente no hayamos hecho uso de ellas.
Para agilizar la creación de algunos widgets, que son duplicados de otros con muy leves cambios (es el caso de los listados de entradas de las diferentes categorías), hemos utilizado el plugin Duplicate Widgets.
Hemos definido y activado varias funciones personalizadas en PHP con ese maravilloso plugin que es Code Snippets . El código correspondiente a esas funciones lo mostramos en el epígrafe 7.2.2. de esta misma página.
Para conseguir que el recorte de los tamaños de las imágenes se ajuste a la zona de interés de las imágenes hemos hecho uso del plugin Crop-Thumbnails.
Con el fin de eliminar el título de la página de inicio, que resultaba molesto y redundante, hemos utilizado el plugin Title Remover.
Las condiciones para que ciertos widgets se muestren solo en determinadas circunstancias se han definido mediante el plugin Widget Logic. En el epígrafe 7.2.1 de esta página detallamos las condiciones definidas.
El efecto de superposición u overlay que se produce al pulsar sobre las imágenes de las galerías de fotos se ha logrado con el plugin WP Featherlight – A Simple jQuery Lightbox.
Los iconos vectoriales que preceden a los elementos del primer nivel del menú superior se han añadido y configurado gracias al plugin Menu Icons by ThemeIsle.
Algunos bloques especiales de galerías de imágenes, que hemos utilizado en la página Bloques de imagen, se deben al plugin Block Gallery – Photo Gallery Gutenberg Blocks.
Se han elaborado sendas páginas de demostración de un par de plugins de colecciones de bloques: Atomic Blocks – Gutenberg Blocks Collection y Guten Post Layout. Estas páginas son, respectivamente, Diseños con Atomic Blocks y Diseños con Guten Post Layout.
La presentación de los bloques especializados de código HTML , PHP y CSS se ha realizado mediante el plugin SyntaxHighlighter Evolved.
Hemos utilizado el plugin Yoast SEO para mejorar en lo posible el posicionamiento en buscadores de l sitio web y de sus artículos.
Durante el periodo de elaboración del sitio, y antes de que fuera publicado, justo al comienzo de la primera sesión del curso, hemos utilizado el plugin WP Maintenance Mode, a fin de mantenerlo accesible solo para el administrador, e invisible para los motores de búsqueda.

7. Shortcodes, código PHP y código CSS

7.1. Shortcodes

7.1.1. Shortcode para mostrar los listados de entradas de las categorías

Los listados de entradas que aparecen en las barras laterales de los artículos, en los widgets rotulados como «Contenido de la primera sesión», «Contenido de la segunda sesión», etc., se han elaborado con el plugin Display Posts, y el siguiente shortcode:

[[display-posts category="sesion-1" orderby="date" order="ASC" wrapper="ul" posts_per_page="-1"]]

El resultado del shortcode es una lista de las entradas que forman parte de la Sesión 1, ordenadas por fecha, en forma de lista no ordenada.

7.1.2. Shortcode para mostrar la lista de categorías del sitio

El listado de las categorías del sitio se ha elaborado con el plugin List Categories y un shortcode que permite obtener un listado de categorías ordenado alfabéticamente, que además incluye el número de entradas de cada una de ellas:

[[categories orderby=name title_li='' show_count='1']]

7.2. Código PHP

7.2.1. Widgets condicionales en las entradas

Cuatro de los widgets de la barra lateral derecha solo aparecen en determinadas condiciones. Son los widgets de listados de entradas de las sesiones del curso, cada uno de los cuales se muestra únicamente en las entradas adscritas a su correspondiente sesión. Para ello se ha utilizado el plugin Widgets Logic, y las siguientes etiquetas condiciones de WordPress:

in_category( 'sesion-1' ) && !is_archive()

in_category( 'sesion-2' ) && !is_archive()

in_category( 'sesion-3' ) && !is_archive()

in_category( 'sesion-4' ) && !is_archive()

La etiqueta condicional in_category sirve para verificar si una entrada X pertenece a una categoría Y. Si esta condición se cumpla (en el caso del primer ejemplo, si la entrada corresponde a una categoría cuyo slug es sesion-1, se muestra el listado de entradas correspondiente a dicha categoría.

En principio, la condición in_category( 'sesion-1' ) debería ser sufciente para conseguir los propósitos deseados. Sin embargo, hemos podido comprobar que los widgets de listados de entradas se muestran también en las páginas de archivo (listados de entradas correspondientes a fechas, autores, resultados de búsqueda, etc.), por lo cual hemos añadido una condición adicional, !is_archive(), mediante la cual se le indica al sitio web que no muestre el widget en las páginas de archivo.

7.2.2. Snippets

Hemos utilizado el plugin Code Snippets para definir unas cuantas funciones que modifican el comportamiento predeterminado de WordPress y el framework Genesis. Incluimos estas funciones a continuación, junto con las explicaciones oportunas.

7.2.2.1. Pie de página con cuatro widgets

Esta es una función nativa del framework Genesis, que sirve para conseguir que el tema muestre un pie de página con cuatro áreas de widgets (el tema Essence Pro carece de widgets en el pie de página). La técnica para conseguirlo la hemos tomado del artículo CSS for Multi-Column Footer Widgets in Genesis. Para que el pie de página adquiera el aspecto adecuado, le hemos aplicado las clases CSS que se muestran en el epígrafe 7.3.2.

add_theme_support( 'genesis-footer-widgets', 4 );

7.2.2.2. Listados de categorías en orden inverso

Por defecto, WordPress muestra las entradas de las páginas de archivo o índice en orden inverso de publicación, al estilo blog. Para mostrarlas en el mismo orden cronológico en que han sido publicadas, hemos utilizado este snippet, cuyo código ha sido adaptado del que presenta el artículo Reverse Post Order For Category Archive.

function elarequi_change_category_order( $query ) {
    if ( $query->is_category() && $query->is_main_query() ) {
        $query->set( 'order', 'ASC' );
    }
}
add_action( 'pre_get_posts', 'elarequi_change_category_order' );

7.2.2.3. Página de acceso a los bloques reutilizables

Con el fin de acceder directamente a la página de gestión de los bloques reutilizables, hemos activado esta función, adaptada de la que se describe en el artículo Add Menu Items to the WordPress Admin Menu.

function elarequi_add_reusable_blocks_admin_menu_item() {
  // $page_title, $menu_title, $capability, $menu_slug, $callback_function
  add_posts_page(__('Bloques reutilizables'), __('Bloques reutilizables'), 'manage_options', 'edit.php?post_type=wp_block');
}
add_action('admin_menu', 'elarequi_add_reusable_blocks_admin_menu_item');

7.3. Estilos CSS

Este sitio web utiliza algunos estilos CSS personalizados, todos los cuales han sido activados desde el personalizador de temas de WordPress (Apariencia > Personalizar > CSS adicional). A continuación incluimos los estilos utilizados, así como unas breves explicaciones de su función y propósito.

7.3.1. Ocultación del título del sitio

Este estilo sirve para ocultar el título del sitio en todas sus páginas. Como esa información ya figura en los metadatos de todos los artículos y páginas de archivo, el título del sitio se puede ocultar sin que ello suponga mayor problema.

.site-title {
	display:none;
}

7.3.2. Áreas de widgets del pie de página

Estos estilos permiten que las áreas de widgets definidas en el pie de página del tema Essence Pro (véase el epígrafe 7.2.2.1.) tengan el aspecto adecuado. El código ha sido adaptado del que se describe en el artículo CSS for Multi-Column Footer Widgets in Genesis.

.footer-widgets {
	background-color: #011330;
	padding: 30px;
	border: dashed;
	border-color: #F0FFFF;
	color: white;
}

.widget-wrap {
	padding: 10px;
}

.footer-widgets .widget-title {
	text-align: center;
	color: white;
}

.footer-widget-area a {
	color: #F0FFFF;
	text-decoration: none;
}

.footer-widget-area a:hover {
	text-decoration: underline;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
	width: 22%; /* 264px / 1200px */
	float: left;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	margin-right: 4%; /* 48px / 1200px */
}

@media only screen and (max-width: 1024px) {

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.footer-widgets-4 {
		width: 47.5%; /* 456px / 960px */
	}

	.footer-widgets-1,
	.footer-widgets-3 {
		margin-right: 5%; /* 48px / 960px */
	}
	
	.footer-widgets-2,
	.footer-widgets-4 {
		margin-right: 0;
	}

}

@media only screen and (max-width: 568px) {

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.footer-widgets-4 {
		width: 100%;
	}
	
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		margin-right: 0;
	}

}

7.3.3. Alineación centrada en la cuadrícula de entradas de la página de inicio

Para poder alinear en el centro el título y el resumen de los artículos que forman parte de la cuadrícula de entradas de la página de inicio (la cual se ha elaborado mediante el plugin Stackable), se ha utilizado el siguiente estilo:

.ugb-blog-posts__title, .ugb-blog-posts__excerpt {
	text-align: center;
}

8. Imágenes

Todas las imágenes que ilustran este sitio web han sido tomadas de los repositorios Unplash y Pixabay. La gran ventaja de ambos repositorios es que sus imágenes son gratuitas (en Pixabay solo son gratis algunos tamaños de imágenes), no exigen reconocimiento de licencia ni de autoría, y se pueden utilizar libremente, incluso para propósitos comerciales.

A fin de lograr un efecto óptimo en las imágenes destacadas (que se muestran en la cabecera de los artículos individuales), todas las imágenes subidas a la biblioteca multimedia de WordPress tienen el tamaño de imagen determinado por el tema Essence Pro, de 1600 píxels de ancho.

9. El autor

Eduardo-Martín Larequi García, autor de este sitio y profesor del Curso de WordPress 2019, es asesor docente de la Sección de Integración y Explotación de las Tecnologías Educativas del Departamento de Educación del Gobierno de Navarra. Su sitio web personal es La Bitácora del Tigre.