Creación de menús en Drupal 8

1. Ordenar desde el menú

Un menú, en su forma más simple, es una lista horizontal o vertical de enlaces que dirigen al usuario a una nueva página o páginas.

Si examinas la página principal de tu nuevo sitio web, verás que hay al menos seis menús en esa página (ver figura 7-1).

Figura 7-1.

De arriba a abajo, los menús son:

  • el menú administrativo, empezando por Administrar;

  • la barra del submenú administrativo en la parte superior de la página, empezando por Contenido;

  • el menú Cuenta de usuario (parte superior del encabezado), con Mi cuenta y Cerrar sesión;

  • el menú de navegación principal, empezando por la pestaña Inicio;

  • el menú de herramientas, en la columna de la izquierda, empezando por Añadir contenido; y

  • el menú de pie de página, empezando por Contacto.

Los menús ayudan al visitante a conocer (y acceder) el contenido, características y funciones que el sitio proporciona.

En nuestro sitio de ejemplo que estamos creando, los menús que aparecen en la página son los enlaces de texto.

Drupal también proporciona mecanismos para crear menús que están basados en botones o imágenes.

La creación de menús se facilita a través de un conjunto de pantallas que forman parte de Drupal 8. Hay tres actividades básicas para crear menús y elementos que aparecen en los menús:

  • Agregar un elemento a un menú existente. Drupal 8 viene con varios menús ya creados. Todo lo que has de hacer es agregar elementos a esos menús.

  • Crear un nuevo menú. Si necesitas más de los cinco menús que vienen con Drupal 8 puedes crear uno nuevo.

  • Asignar el menú a una región de una página. Si creaste un nuevo menú, necesitarás asignarlo a una región de la página.

2. Agregar un elemento a un menú

Hay dos elementos generales que podemos agregar a nuestra página como elementos de menú: un vínculo a un elemento existente en nuestro sitio (una página, un elemento de contenido, una lista de contenido asociado a un término taxonómico, etc) o un enlace a una página externa a nuestro sitio (ej. www.drupal.org).

2.1. Adición de un elemento de contenido a un menú

Existen dos métodos para agregar elementos a los menús:

  • La mejor práctica es usar el formulario de creación de contenido (ver figura 7-2) o como veremos más adelante, otros formularios de creación de elementos como una página de panel o una vista. La razón para usar este enfoque es que cuando eliminas ese elemento de contenido, Drupal elimina automáticamente el elemento del menú al que estaba asignado. Si utilizas el enfoque manual para crear un elemento de menú mediante el formulario de administración del menú, el propietario del sitio debe recordar retirar ese elemento manualmente del menú.

  • También puedes utilizar el formulario de administración de menús (ver figura 7-3) para crear un nuevo elemento de menú o puedes crear un enlace de menú desde el elemento de contenido al que deseas hacer referencia desde el formulario utilizado para crear o editar dicho elemento de contenido.

Figura 7-2.

Para crear un nuevo elemento de contenido, haz clic en cualquier de los vínculos “Añadir contenido” que están disponibles en la página principal de tu sitio web (suponiendo que sigas conectado como administrador) y selecciona el tipo de contenido “Página básica”. Por ejemplo, ingresa un título y un cuerpo para el nuevo tipo de contenido y, a continuación, haz clic en el enlace Configuración de menús en la columna de la derecha.

Marca la casilla “Proporcionar un enlace de menú”, el cual muestra los campos para definir tu menú (ver figura 7-2). Introduce el título del elemento tal y como deseas que aparezca en el menú y, en la lista desplegable “Elemento padre”, selecciona el menú “Navegación principal” como menú en que deseas que aparezca el elemento. Después de introducir los valores de tu elemento de menú, haz clic en el botón “Guardar y publicar” en la parte inferior de la página. Drupal muestra la página que acabas de crear, con el elemento de menú asociado a esta página que aparece ahora en el menú principal de navegación en la parte superior izquierda del área de encabezado de la página.

Al hacer clic en ese enlace, irás directamente a la página que acabamos de crear, independientemente de dónde se encuentre en el sitio web.

2.2. Agregar un elemento de menú para una página externa

Puedes agregar enlaces a sitios externos agregando un elemento de menú. Para ello, haz clic en el enlace Administrar en la parte superior de la página y en el enlace Estructura del submenú. En la página Estructura, haz clic en el enlace Menús. En la página Menús, haz clic en el icono de triángulo situado junto al botón “Editar menú” del menú principal de navegación y selecciona la opción “Añadir enlace”. Ahora deberías ver el formulario “Agregar enlace de menú” (ver figura 7-3). Introduce un título (en este ejemplo utiliza Apress como título del menú), el enlace, que es la URL completa de la página externa a la que queremos vincular (en el ejemplo http://apress.com). Asegúrate de que la casilla de verificación Activado está activada y, a modo de demostración, selecciona “Navegación principal” en la lista desplegable “Elemento padre”.

Figura 7-3.

Una vez que has ingresado todos los valores, haz clic en Guardar en la parte inferior de la página (puedes necesitar desplazarte hacia abajo para verlo). Drupal muestra la lista completa de elementos asignados al menú principal de navegación, incluyendo el nuevo elemento que acabamos de crear. Clica en “Volver al sitio” en el menú de administración. Ahora debes ver el nuevo elemento de menú que acabas de agregar. Al hacer clic en ese elemento de menú irás a la dirección externa del enlace.

3. Creando un nuevo menú

Puede haber situaciones en las que necesites crear menús adicionales más allá de los menús estándar creados y habilitados con Drupal 8. Por ejemplo, al crear sitios web basados en Drupal para bibliotecas públicas, a menudo me piden que construya menús únicos para cada departamente de la biblioteca (un menú para servicios para adultos, servicios para jóvenes, servicios para adolescentes, circulación, etc).

En tal caso, los menús básicos proporcionados por Drupal 8 no son suficientes para cumplir con los requisitos de la biblioteca. Para crear un nuevo menú, haz clic en el enlace Administrar en la parte superior de cualquier página de tu sitio y selecciona el enlace Estructura en el submenú. En la página Estructura, haz clic en Menús y, en la página Menús, haz clic en el enlace “Añadir menú”. Se muestra el formulario para crear un nuevo menú (ver figura 7-4).

Introduce el título del menú y una descripción (que es opcional). Haz clic en el botón Guardar y ahora tendrás un nuevo menú preparado para asignar elementos a los mismos métodos que se describieron anteriormente en este capítulo.

Figura 7-4.

Después de guardar el menú, ahora puedes agregar elementos a él. Como práctica, crea elementos de menú para los siguientes enlaces externos, utilizando el proceso descrito en la sección “Agregar un elemento de menú para una página externa”: Apress.com, yahoo.com, google.com y bing.com.

Una vez completado, debería verse como en la figura 7-5.

Figura 7-5.

En este punto el menú existe en Drupal, pero no está asignado a una región en una página y, por tanto, no es visible para los visitantes del sitio. Para que tu nuevo menú sea visible, haz clic en el enlace Administrar en la parte superior de cualquier página y luego en el enlace Estructura del submenú. En la página Estructura, haz clic en el enlace “Bloquear diseño”. En la página “Bloquear diseño”, desplázate hacia abajo hasta encontrar el menú de funciones especiales (ver figura 7-6) en la columna “Colocar bloques” en el lado derecho de la página.

Figura 7-6.

Haz clic en el enlace Menú de funciones especiales, que abre el formulario “Configurar bloque” (ver figura 7-7). En este formulario, selecciona la región donde desees que aparezca el menú. Asumiendo que estás utilizando el tema Bartik, selecciona la segunda barra lateral y haz clic en el botón “Guardar bloque”.

Ver capítulo 6 para obtener una visión general de las regiones disponibles en el tema Bartik.

Figura 7-7.

Haz clic en el botón “Volver al sitio” en la parte superior izquierda de la pantalla para volver a la página principal y voila! Ahí está tu nuevo menú (ver figura 7-8).

Figura 7-8.