Utilidades (shortcodes UCA)
Los shortcodes en WordPress son pequeños trozos de código que permiten a los usuarios de WordPress mostrar contenido complejo o realizar una determinada tarea sin necesidad de conocimientos técnicos en HTML o CSS.
Típicamente, los shortcodes se describen entre corchetes [], definiendo atributos en su interior para definir cómo se usan. Cada uno de los códigos abreviados realiza una función particular. Puede ser tan simple como dar formato al contenido o tan complejo como definir toda la estructura del sitio web.
A continuación se enumeran algunas utilidades suministradas a modo de shortcodes de WordPress UCA, que facilitarán la introducción de elementos visuales en su página web:
- Menu Visual
- Menu Iconos
- PageSecuencer
- TOC
- Personal
- Remark
- Separator
- Accordion
- LinkTitle
- SectionTitle
- URL Update
Componente Menú Visual
Permite mostrar un menú visual con imágenes en diferentes formatos.
[MenuVisual title="Ejemplo Menú Visual" align="center"] [mvitem title="Opción 1" image="https://docwp.uca.es/wp-content/uploads/2021/07/menu_visual_1.jpg" description="Descripción de la opción número 1" link="#"] [mvitem title="Opción 2: tiene un título mas largo" image="https://docwp.uca.es/wp-content/uploads/2021/07/menu_visual_2.jpg" description="Al pulsar el menú 2 obtendrá enormes ventajas" link="https://docwp.uca.es/"] [/MenuVisual]
Ejemplo Menú Visual
Para mas información sobre el componente, dispone de la página de Ayuda del mismo
Componente Menú Iconos
Permite mostrar un menú visual con diferentes secciones e imágenes o iconos.
[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]
Para mas información sobre el componente, dispone de la página de Ayuda del mismo
Componente PageSecuencer
Muestra contenido organizado en forma de páginas, por las que navegar mediante los botones Anterior-Siguiente (son necesarios pequeños conocimientos de HTML).
[pageSecuencer item="#test_paginas"]
Página 1
Descripción
Ejemplo del Componente Secuenciador de Páginas UCA
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem salutandi eu mea, eam in soleat iriure assentior. Tamquam lobortis id qui. Ea sanctus democritum mei, per eu alterum electram adversarium. Ea vix probo dicta iuvaret, posse epicurei suavitate eam an, nam et vidit menandri. Ut his accusata petentium.
Por favor, pulse en el botón “Siguiente” para ver otras características y opciones del componente.
Página 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem salutandi eu mea, eam in soleat iriure assentior. Tamquam lobortis id qui. Ea sanctus democritum mei, per eu alterum electram adversarium. Ea vix probo dicta iuvaret, posse epicurei suavitate eam an, nam et vidit menandri. Ut his accusata petentium.
Modo de Uso
Para mas información sobre el componente, dispone de la página de Ayuda del mismo
Componente TOC
Muestra una lista de enlaces a modo de tabla de contenidos. Es adecuado para páginas de contenido muy largo, para facilitar la navegación al usuario (son necesarios pequeños conocimientos de HTML).
[toc id="Ejemplo Tabla de Contenidos"] [tocitem level="1" title="Componentes" ref="descripcion"] [tocitem level="2" title="Elemento TOC" ref="toc"] [tocitem level="2" title="Elemento TOCITEM" ref="tocitem"] [/toc]
Para mas información sobre el componente, dispone de la página de Ayuda del mismo
Componente Personal
Permite mostar fichas de personal, mostrando de forma opcional la fotografía de cada individuo junto con sus características principales.
[group id="Ejemplo Personal"] [personal name="Antonio Saldaña Parrido" position="Técnico" phone="9289" picture="https://docwp.uca.es/wp-content/uploads/2021/07/ia_people_2.jpg"] [personal name="Juan Luis Oregón Pastrana" position="Técnico" email="jl.oregon@uca.es" picture="https://docwp.uca.es/wp-content/uploads/2021/07/ia_people_3.jpg"] [/group]
Ejemplo Personal
Para mas información sobre el componente, dispone de la página de Ayuda del mismo
Componente remark
Muestra una palabra o frase de modo destacado con un recuadro. Además puede indicar una dirección a la que enlaza si el usuario pulsa.
Sólo tiene dos parámetros: “title” que contiene el texto que se mostrará y “url” que indica la dirección a la que enlaza (opcional).
Por ejemplo, el siguiente enlace le llevará al principio de la página.
[remark title="enlace" url="#"]
Componente separator
Permite introducir separadores con un pequeño título opcional (las barras horizontales que se muestran en ésta página).
Admite tres posibles parámetros todos opcionales: “title” que indica el texto que se muestra en el separador, y “margin-top” y “margin-bottom” que permiten indicar el margen superior e inferior respectivamente (por defecto toman el valor de 25px y 10px)
[separator margin-top="120px"]
Componente Accordion
Permite introducir un componente desplegable (el contenido se oculta hasta que el usuario pulsa).
[accordion title="Título (pulsa para mostrar)"] Contenido: Éste contenido se mostrará cuando el usuario pulse en el título. [/accordion]
Contenido: Éste contenido se mostrará cuando el usuario pulse en el título.
Este es un contenido de ejemplo
Si introduces el parámetro init=”open” se mostrará abierto por defecto.
- Opción X
- Opción Y
- Opción Z
Componente LinkTitle
Permite introducir un enlace resaltado, típicamente para listas.
Por defecto abre el enlace en una pestaña nueva, si se desea que funcione en la misma página se puede usar el parámetro mode=’same’.
[linktitle title="Lista de enlaces: elemento 2" url="https://docwp.uca.es"] [linktitle title="Enlace en la misma pestaña del navegador" url="https://docwp.uca.es" mode="same"]
Componente SectionTitle
Permite introducir un título para una sección de la página, resaltado en un color determinado y con una viñeta que lo destaca. (se puede complementar con el shortcode ‘separator’ para diferenciar secciones de una página).
Admite tres posibles parámetros: “title” que indica el texto que se muestra, “icon” que es opcional y muestra la viñeta (en código de entidad html y por defecto con valor “▶”) y “color” que permiten indicar el color del título (por defecto “#384850”)
Admite el parámetro ref=”xxx” que creará una referencia (anchor) en el título, para poder navegar a la posición posteriormente desde otro enlace.
[sectiontitle title="Nombre sección" icon="▶" color="#777777"]
▶Ejemplo de título
Componente URL Update
Permite introducir un enlace a un fichero que incluya la última fecha de actualización del mismo. Además puede mostrar si se desea una etiqueta diferenciadora “N” para destacar que es un nuevo fichero (o incluido recientemente).
Admite tres posibles parámetros: “url” que indica la dirección completa del fichero en la biblioteca de medios, “title” que es opcional e indica el texto que se muestra en el enlace (si no se indica se toma el título del recurso en la biblioteca de medios) y “new” que es opcional y si vale “1” mostrará la etiqueta “N” para indicar al usuario que es novedad.
Nota: Solo funcionará con ficheros alojados en nuestro propio sitio web (si está en un sitio externo no será capaz de conocer su actualización)
[url_update url="https://docwp.uca.es/wp-content/uploads/2022/03/guiaWordpress_marzo_2022.pdf" title="Guía WordPress" new="1"]
Guía WordPressN28/03/2022