Componente Menú Iconos

Actualizada 16 December, 2022

Publicada 16 December, 2022

Descripción

Mediante el componente UCA Menú Iconos podemos crear fácilmente un menú visual de iconos o imágenes para una página, con una o varias secciones, de modo que se presenten al usuario diversas opciones de navegación de una forma interactiva y visualmente atractiva.

Modo de Uso

Una vez situado en el editor de contenido de wordpress (bien editando una página existente o creando una nueva), para utilizar el componente menú iconos necesitará crear dos tipos de componentes:

MenuIconos

Cree un shortcode MenuIconos para “envolver” cada sección:

[MenuIconos title='Información relacionada' align='center'] [/MenuIconos]

El shortcode MenuIconos admite tres parámetros:

title: Título para el menú (es opcional: si no se indica nada, no se muestra)
align: Permite alinear los elementos del menú, puede ser: ‘left’, ‘center’ o ‘right’, alineando respectivamente a la izquierda, centrado o a la derecha (si se omite el comportamiento por defecto es ‘center’)
v_align: Permite variar como se muestran los elementos del menú verticalmente, puede ser: ‘start’, ‘end’, ‘center’ o ‘stretch’, alineando respectivamente arriba, abajo, al centro o ‘estirar’, que es el comportamiento por defecto y que implica que todos los elementos tengan el mismo tamaño (el del mayor elemento)

mi_item

Dentro del anterior MenuIconos puede ir introduciendo elementos mi_item que serán las opciones de navegación que se le presentarán al usuario:

[mi_item title="Manuales UCA-WP" image="https://docwp.uca.es/wp-content/uploads/2019/09/docwp_destacamos.png" link="https://docwp.uca.es/edicion-web/"]

Los campos del shortcode mi_item serían:

title: Título a mostrar
image: URL de la imagen que se mostrará en la opción de menú (se mostrará en un tamaño pequeño)
icon: Nombre del icono a mostrar (si hay image indicada, se mostrará la imagen), por ejemplo “fa-handshake-o”, “fa-thumbs-o-up”, etc. (lista de iconos)
description: Descripción opcional a mostrar (el texto debe ser muy breve)
link: URL de la página a la que se navegará al pulsar la opción de menú
groups: Permite indicar visualmente el grupo UCA al que va dirigida la información, de entre los posibles “pas”, “pdi” o “alu” (se pueden mostrar varios, por ejemplo “pas, pdi” o “pdi, alu”)

Ejemplo completo

El conjunto del menú quedaría de la siguiente manera:

[MenuIconos title='Información relacionada' align='' v_align='']
[mi_item title="Manuales UCA-WP" image="https://docwp.uca.es/wp-content/uploads/2019/09/docwp_destacamos.png" link="https://docwp.uca.es/edicion-web/"]
[mi_item title="Vídeos UCA-WP" image="https://docwp.uca.es/wp-content/uploads/2019/09/docwp_destacamos_videos.png" link="#"]
[mi_item title="Condiciones de uso" icon="fa-handshake-o" link="https://docwp.uca.es/videoswp/"]
[mi_item title="Uso responsable" icon="fa-thumbs-o-up" link="#"]
[mi_item title="Cuentas institucionales" icon="fa-address-card-o" link="#"]
[/MenuIconos]

Mostrándose al usuario de la siguiente manera:

Información relacionada

Cuentas institucionales

Características

El componente MenuIconos se adapta al dispositivo en el que se muestra, de modo que según el tamaño que tenga la pantalla (PC, tablet o móvil) mostrará en cada fila mas o menos opciones optimizando la visualización de los mismos
Se pueden crear tantas secciones MenuIconos como se desee.
La imagen se adapta a pequeño tamaño (es mejor no escoger una imagen grande)
Se puede escoger el nombre de un icono (lista de iconos)
Si se indica imagen e icono, se mostrará la imagen indicada.
El campo description es opcional, y puede evitar mostrarlo si lo desea.
Para casos específicos se puede indicar el estamento de la UCA vinculado a la acción, de entre los posibles “pas”, “pdi” o “alu” (permite mostrar varios, por ejemplo “pas, pdi” o “pdi, alu”)