Política de Cookies

El sitio web de la Universidad de Cádiz utiliza cookies propias y de terceros para realizar análisis de uso y medición del tráfico, así como permitir el correcto funcionamiento en redes sociales, y de este modo poder mejorar su experiencia de navegación.

Si desea configurar las cookies, pulse el botón Personalizar Cookies. También puede acceder a la configuración de cookies en cualquier momento desde el enlace correspondiente en el pie de página.

Para obtener más información sobre las cookies puede consultar la Política de cookies del sitio web de la Universidad de Cádiz.

Personalización de Cookies

El sitio web de la Universidad de Cádiz utiliza cookies propias y de terceros para realizar análisis de uso y medición del tráfico, así como permitir el correcto funcionamiento en redes sociales, y de este modo poder mejorar su experiencia de navegación.

Para obtener más información sobre las cookies puede consultar la Política de cookies del sitio web de la Universidad de Cádiz. También puede acceder a la configuración de cookies en cualquier momento desde el enlace correspondiente en el pie de página.

A continuación podrá configurar las cookies del sitio web según su finalidad:

  • Análisis estadístico

    En este sitio se utilizan cookies de terceros (Google Analytics) que permiten cuantificar el número de usuarios de forma anónima (nunca se obtendrán datos personales que permitan identificar al usuario) y así poder analizar la utilización que hacen los usuarios del nuestro servicio, a fin de mejorar la experiencia de navegación y ofrecer nuestros contenidos de manera óptima.

  • Redes sociales

    En este sitio web se utilizan cookies de terceros que permiten el correcto funcionamiento de algunas redes sociales (principalmente Youtube y Twitter) sin utilizar ningún dato personal del usuario.

UniversidaddeCádiz
Documentación y ayuda de Wordpress Formación para gestores de contenido

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:


Componente Menú Visual

Permite mostrar un menú visual con imágenes en diferentes formatos.

■ Shortcode:
[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]
■ Se mostrará del siguiente modo:

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.

■ Shortcode:
[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]
■ Se mostrará del siguiente modo:

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).

■ Shortcode:
[pageSecuencer item="#test_paginas"]
■ Se mostrará del siguiente modo:

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

Pulse aquí para ir a la página de ayuda

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).

■ Shortcode:
[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]
■ Se mostrará del siguiente modo:

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.

■ Shortcode:
[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]
■ Se mostrará del siguiente modo:

Ejemplo Personal


Antonio Saldaña Parrido

Técnico

9289


Juan Luis Oregón Pastrana

Técnico


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.

■ Shortcode:
[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)

■ Shortcode:
[separator margin-top="120px"]


Componente Accordion

Permite introducir un componente desplegable (el contenido se oculta hasta que el usuario pulsa).

■ Shortcode:
[accordion title="Título (pulsa para mostrar)"]
    Contenido: Éste contenido se mostrará cuando el usuario pulse en el título.
[/accordion]
■ Se mostrará del siguiente modo:


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’.

■ Shortcode:
[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"]
■ Se mostrará del siguiente modo:


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.

■ Shortcode:
[sectiontitle title="Nombre sección" icon="▶" color="#777777"]
■ Se mostrará del siguiente modo:

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)

■ Shortcode:
    [url_update url="https://docwp.uca.es/wp-content/uploads/2022/03/guiaWordpress_marzo_2022.pdf" title="Guía WordPress" new="1"]
■ Se mostrará del siguiente modo:

Guía WordPressN28/03/2022