Curso de Drupal 8 (VII): Estructura: Menús

Una vez introducido el contenido principal del sitio web, tanto artículos como páginas estáticas, es necesario configurar los menús, los bloques de contenido, la taxonomía y los distintos tipos de contenido. Para tener una idea clara de los conceptos fundamentales comentados anteriormente, puede pasarse por la primera parte del curso de drupal.


Para poder acceder a la configuración de la estructura del sitio web, vaya a la configuración y pulse en el enlace «Estructura» (Structure), por ejemplo a través de la barra de tareas, verá una pantalla similar a la siguiente…

Como puede observar existen 4 partes fundamentales en el apartado estructura, veremos cada uno de ellos.

Menus (Menus)

Si pulsamos en el enlace de menús nos saldrá la pantalla de configuración de los distintos menús disponibles en el sitio web…

En la instalación Standard Drupal pone a nuestra disposición 4 menús:

  • Administración (Management): menú que contiene los enlaces a las tareas administrativas. Éste es el menú que presenta la barra de tareas.
  • Menú Principal (Main Menu): menú que normalmente se coloca en la parte superior del sitio web, suelen ser un listado sencillo de elementos principales del sitio web.
  • Navegación(Navigation):  menú normalmente lateral de navegación con en el que puede accederse a todos los contenidos del sitio web.
  • Menú de usuario (user menu): menú que visualiza el usuario al autenticarse en el sitio web.

Como puede verse en la captura disponemos de 4 enlaces principales par la gestión de los menús:

  • Añadir Menu (Add menu): en el que podemos dar de alta un nuevo menú.
  • Listar Enlaces (List links): en el que podemos pulsar para llevarnos al listado de elementos o enlaces que dispone dicho menú. como puede observarse existe un enlace a «Listar enlaces» para cada menú dado de alta en el sistema.

Añadir Menú

Pulsando este enlace, llegamos al formulario de alta de un nuevo menú…

Es un formulario bastante sencillo sim’plemente introducimos un nombre y una breve descripción del mismo, para que luego recordemos para qué lo hemos dato de alta.
Pulsamos en el botón guardar y accedemos al listado de enlaces de dicho menú, de manera automática…

Listar Enlaces

A la pantalla de listar enlaces podemos acceder, o bien después del formulario de «Añadir Menu», o bien, a través de la pantalla de «Menús» pulsando en el enlace «Listar enlaces» al lado de un Menú.
A continuación puede verse una captura de un «Listar Enlaces» del menu «Navegación» a modo de ejemplo…

en el listado de enlaces tenemos disponibles varias operaciones destacables:

  • Añadir enlace: lo que nos permitirá acceder al fomulario de alta de nuevos enlaces.
  • Cambiar el orden de los enlaces: mediante una operación de Arrastrar y Soltar (Drag and Drop) utilizando el icono con las 4 flechas que existe a la derecha de cada enlace, podemos cambiar el orden de presentación de los enlaces del menú.
  • Activar/Desactivar enlace: Mediante la CheckBox que hay debajo de la columna llamada «Activado», podemos elegir si el enlace se presenta o no en el menú.
  • Editar: pulsando en el enlace Editar al lado derecho de un enlace, podemos cambiar las propiedades del enlace incluido en el menú.

Una vez finalizados los cambios, simplemente pulsamos en el botón «Guardar Configuración»  y se guardarán los cambios en el menú.

Editar Menu

Pulsando este enlace, se accede al formulario de modificación de los datos, principalmente la descripción del menú…

una vez finalizado ña edición de la descripción pulsamos en el botón «Guardar» y los cambios serám guardados.

Añadir enlace

Una vez pulsamos en el botón Añadir Enlace, aparece ante nosotros el formulario de alta de un nuevo enlace…

Los campos a rellenar son los siguientes:

  • Título del enlace: texto que aparecerá como nombre visible del enlace.
  • Ruta (URL): ruta url al contenido cuando se pulse en el enlace.
  • Descripción. breve descripción del contenido referenciado.
  • Activado: si se queda seleleccionada esta opción, el enlace aparecerá automáticamente en el menú.
  • Mostrar Expandido (Show as expanded): si dejamos selccionada esta opción, si en enlace tiene otros enlaces «debajo de él», dichos enlaces serán mostrados. Nota: «Debajo de él», significa que podemos ir organizando los enlaces como si fuera un árbol de enlaces, de esta manera es cómo se suelen organizar los mapas de la web o los menús desplegables. De esta manera un enlace, puede tener enlaces hijos asociados y un enlace puede tener un padre asociado.
  • Enlace Padre (parent link): desde este selector podemos mostrar quien es el «padre» de nuestro enlace. Cada Menú representa un elemento en el selector y debajo de el aparecerán todos los enlaces de manera jerarquizada (como si fuera un árbol de enlaces). De esta manera si decimos que el padre de un enlace es un menú, seleccionaremos que pertenece a él, y se ocnvertirá en un enlace de primer nivel de dicho menú. Si elegimos como padre un enlace de un menú, significará que el nuevo enlace se convertirá en «hijo» del enlace seleccionado y por lo tanto aparecerá «debajo de él» en su respectivo menú.
  • Peso: parámetro opcional de la configuración del enlace. permite establecer un peso al enlace, cuanto mayor sea el peso, más abajo aprecerá en el menú, es una manera de poder organizar los elementos dentro del menu, pero para ello es mejor hacerlo desde el listado de enlaces, con la operación Arrastras y Soltar.

una vez configurados los parámetros del enlace, pulsamos en el botón «Guardar»  y veremos el enlace en el listado de enlaces del menú donde hayamos introducido el enlace.

Editar enlace

En el listado de enlaces al pulsar sobre el enlace «Editar» al lado de cualquier enlace nos aparecerá el formulario de edición del enlace, similar al siguiente…

El formulario practicamente es el mismo que en el caso de Añadir Enlace, por lo que simplemente cambiamos los valores necesarios y pulsamos en el botón «Guardar».

Añadir un Menú como Bloque

Dentro de listado de menús, podemos ver en enlace a la colocación del menú en los bloques, una vez lo pulsamos, sale una pantilla similar a la siguiente…

En el listado de bloque podremos seleccionar la región donde queremos visualizar el menú que queramos, una vez selccionado, pulsamos en el botón Guardar y podremos ver el menú colocado en el sitio web.

Licencia Creative Commons

Comments

Leave a Reply

*

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Categorías de Cursos

RSS Cursos de Desarrollo

  • Introducción a las PWA (Progressive Web Apps) 21/02/2020
    Las PWA se han convertido es una alternativa a las aplicaciones web para colonizar de una manera más eficiente los móviles debido a que pueden funcionar de manera offline y optimizar el rendimiento de la aplicación desde el móvil. Si quieres enterarte de cómo crearlas, de los pros y contras no te pierdas el último […]
  • Introducción al Testing Web 10/02/2020
    Hemos publicado en nuestro canal de Youtube un vídeo grabado durante las clases de un curso de Python Avanzado. El tema es el de Testing Opensource hablado sobre la teoría de Testing, indicando los distintos tipos de pruebas e identificando las herramientas que se usan a la hora de probar una web.
  • Entrevista a Alejandro López CEO de Slimbook 10/02/2020
    Esta semana hemos entrevistado en República Web, a Alejandro López, CEO de Slimbook. Hablamos de sus productos y sobre equipos para desarrolladores, diseñadores web, fotógrafos, editores de vídeo y data scientist. Te lo vas a perder?
  • Gadgets para el formador itinerante: Router Wifi de Viaje 08/02/2020
    Muchas veces los formadores y profesionales itinerantes tenemos el problema de tener que conectarnos a Internet desde hoteles o cafeterías para seguir haciendo nuestro trabajo, en esta entrada veremos un router wifi de viaje muy interesante que he estado utilizando desde hace un tiempo y que me ha dado muy buenos resultados. Como todo en […]
  • Balanceadores de Carga 27/01/2020
    Dentro de la arquitectura web necesitamos cumplir con dos condiciones si queremos que nuestra arquitectura sea suficientemente sólida: Alta Disponibilidad y Alto Rendimiento, en esta entrada veremos cómo cumplir con estos dos principios. La alta disponibilidad trata de conseguir que un servicio tenga el máximo posible de tiempo de disponibilidad, es decir, que el servicio […]
  • Serie de Artículos de Docker 13/01/2020
    En esta entrada veremos cómo manejar Docker, en una serie de artículos explicativos. No te los pierdas He instalado Docker, ¿Y ahora qué? Docker Compose, para cuando quieres arrancar varios contenedores de manera coordinada
  • ¿Que Frameworks de Frontend son los más utilizados en el millón de páginas del Top de Alexa? 09/01/2020
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]
  • Artículos de administración de Servidores 08/01/2020
    Esta serie de artículos nos permiten saber cómo se instala y se configura un servidor desde cero: Nuevo Servidor NAS reciclado Acceso a servidor de la oficina desde fuera gracias a dinaip Configuración de un firewall de manera sencilla en Debian/Ubuntu
  • ¿Cuál es el uso de WordPress en los principales sitios de Internet según Alexa? 14/12/2019
    Empezamos con nuestra serie de publicaciones sobre tecnologías concretas que más se usan en Internet, en este caso con WordPress. ¿Quieres saber cómo es de importante y cuánto se utiliza? No te pierdas esta entrada.
  • Estudio de Uso de Tecnologías en el millón de páginas más vistas según Alexa 13/12/2019
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]

Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos: http://cursosdedesarrollo.com/cursos/

También disponemos de algunos cursos de pago por si son de tu interés: https://cursosdedesarrollo.com/tienda/

Curso de Angular: https://cursosdedesarrollo.com/tienda/angular/

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies