Presentado como “Una verdadera navaja suiza para WordPress”, el plugin gratuito Shortcodes Ultimate, por Vladimir Anokhin, proporciona la manera más rápida y sencilla de crear contenidos con formatos especiales, sin necesidad de tener conocimientos de programación.
¿Qué son los shortcodes (o códigos cortos o códigos abreviados)?
Tal como lo presenta la información de Shortcodes Ultimate,
«un código abreviado es un código específico de WordPress que permite hacer cosas ingeniosas con muy poco esfuerzo.»
Estos códigos abreviados nos dan la posibilidad, en tan sólo una línea añadida en nuestro editor de entradas o páginas, de crear objetos tales como tablas, carruseles de imágenes, botones con estilos personalizados, recuadros de texto con diferentes formatos, herramientas interactivas tales como descripciones emergentes, spoilers, acordeones, pestañas, etc., así como también incrustar archivos o contenido multimedia desde otros sitios.
Más de 50 opciones para insertar elementos con formatos especiales
Como todo en esta vida, tiene sus pros y sus contras. La principal desventaja, es la misma que presentan muchos de los famosos temas premium: el efecto cautivo, –del cual hablaremos en una futura entrada–, que es básicamente el uso de códigos abreviados propios del desarrollador que no funcionarán en ningún otro tema, si es que un buen día uno se decide a cambiarlo.
En este caso, si se opta por desactivar el plugin, todo el contenido que se veía con un muy bonito formato, se transformará en líneas ininteligibles de texto plano, que nos darán más de un dolor de cabeza para limpiar y volver a acomodar.
Sin embargo, aunque mucho se debata sobre el uso de los shortcodes, son un instrumento muy útil a la hora de dar formato a los elementos que componen un sitio web, si no se tiene ningún dominio de HTML o CSS.
El hecho de usar un plugin minimiza los riesgos que presenta el efecto cautivo de los temas premium, ya que puede estar activado sin importar qué tema se esté usando.
El widget de Shortcodes Ultimate amplía las funcionalidades del tema
Recomendamos Shortcodes Ultimate no sólo porque es fácil de usar, sino también porque tiene muchísimas opciones y muy bien detalladas; cuenta con vistas previas en vivo, un widget para insertar en cualquier barra lateral del sitio, y es de diseño adaptable (responsive).
Descargue los archivos de traducción aquí.
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola, estoy incorporando un acordeón en una entrada al blog y me gustaría que cada título apareciera en un recuadro de un tono gris claro, y el contenido del acordeón también estuviera sobre un fondo gris claro, para diferenciando un título de otro
¿Es posible?
Gracias de antemano..
Hola, Ismael.
Para eso tendrías que incluir CSS. Usá una clase personalizada para el código (por ejemplo,
mi-clase), que iría en el campo Clase CSS extra.Luego, en la hoja de estilos del tema hijo, o el recuadro CSS adicional del personalizador, pegar el siguiente código:
.mi-clase .su-spoiler-title { background: #cccccc; } .mi-clase .su-spoiler-content { background: #eeeeee; }Usá los valores de color que necesites.
Saludos.
hola, puedes ayudarme para editar y anclar un short code con link
veras tengo una página en la que tengo varios spoiler, mi idea es que el titulo del espoiler sea un link que al hacer click desplegué el contenido y que en la barra de navegación asigne un link diferente para cada spoiler
esto es lo mas parecido a lo que quiero, pero no es la solución
[su_accordion]
<a href=”#Accordion-1″>titulo 1</a>
[su_spoiler title=”” anchor=”Accordion-1″] Spoiler content [/su_spoiler]
<a href=”#Accordion-2″>titulo 2</a>
[su_spoiler title=”” anchor=”Accordion-2″] Spoiler content [/su_spoiler]
[/su_accordion]
si notas las comillas después del signo = las deje en blanco para no duplicar el titulo del spoiler y que seria el mismo del link pero deja un vacio cuando despliega el contenido.
resumen: necesito que cada spoiler title tenga un link, evitar dobles títulos y que cada link sea independiente.
Hola, Lino.
No sé si termino de entender lo que estás queriendo hacer.
Podés simplemente agregar un
data-anchora cada spoiler del acordeón. Un ejemplo sería algo así:El enlace en el menú al primer elemento sería
http://urldelsitio/pagina-del-spoiler/#spoiler1.Espero que te sirva.
Saludos.
Hola Ana muy buen post voy a comenzar a seguirte me parece interesante y hay cositas que ver 🙂 ,, quería hacerte un pregunta.. ¿Con este plugin se puede hacer un shortcode para cuando pases el cursor por una imagen salgan los iconos de las redes sociales para compartir? y si no se puede conoces alguno,,, muchas gracias,,,saludos.
Hola, Conk.
Gracias por tu comentario. 🙂
Shortcodes Ultimate no incluye esa característica, pero algún plugin de social share, y más específicamente alguno de estos, quizá pueda servirte.
Saludos.
Hola Ana, he agregado el contenedor de pestañas y la letra me queda muy pequeña, para los que no entendemos mucho de código ¿habría alguna forma de aumentarla?. He descubierto tu blog hace poco y me está ayudando mucho en el trabajo con mi web. Gracias.
Antonino.
Hola, Antonino.
Gracias por tu comentario.
En este caso, para aumentar el tamaño de fuente hay que usar CSS. En la hoja de estilos del tema hijo (o en el recuadro CSS adicional del Personalizador) tendrías que pegar el siguiente código:
/* Título */ .su-tabs-nav span { font-size: 28px !important; } /* Contenido */ .su-tabs-pane { font-size: 18px !important; }Modificá los valores en píxeles por los que necesites.
Saludos.
Hola
He creado un botón para poner delante de una tabla de años, para el 2016 con el plugin shortcodes ultimate y automáticamente me enlaza el botón con la página de inicio, se lo he borrado varias veces donde dice enlace url…. pero lo automatiza.
¿Como podría quitar el enlace?, ¿donde se guardan los Div que genera el programa, en qué archivo, para entrar y retocarlo?
Gracias, María.
Te pongo la web, pero esto todavía no lo he publicado, estoy jugando en casa…
Hola, María.
No es posible quitarlo, ya que la esencia del botón es justamente que contenga un enlace. Lo más conveniente sería aplicarle estilos CSS a un título, por ejemplo, o usar un generador de botones (como este), pegar el código proporcionado en la hoja de estilos y usar la clase correspondiente en el editor HTML.
Saludos.
Hola de nuevo
Gracias por responder tan rápido.
El día que dieron lo de las clases, yo no fui a clase, jejejeje
No, en serio, tengo un serio problema con esto. En esta página que estoy creando estoy usando tan sólo el generador de código corto. Hay una manera de saber donde guarda las relaciones de los Hay un archivo para eso.
Es decir, si yo creara una página entera con código php y sus correspondientes css, donde pondría esa página.php para que se viera en la web???
Con eso me lío un poco.
Cuando abro el firebug, veo a la derech los css, y a la izquierda el código puro y duro… pero no tengo ni idea de a donde tengo que ir para que los cambios se vean en la página,
¿Sería posible aclararme un poco esto o decirme que me tengo que leer para entenderlo. Gracias, María.
Hola, María.
Con WordPress no es lo mismo que si crearas páginas en PHP, ya que el contenido que vos ves en el navegador se genera de manera dinámica de acuerdo con las funciones del tema (o en este caso, del plugin). Si quisieras suprimir la URL del botón, tendrías que modificar un archivo PHP del plugin, con lo cual ya ningún botón que agregues podrá contener un enlace; esto no solo sería absurdo sino también una práctica muy mala, ya que los archivos de los temas o plugins no deben editarse.
No sé si se entiende. La cuestión es que si quisieras crear un título con un estilo similar a un botón pero sin un enlace, tendrías que usar únicamente CSS para controlar la apariencia. Sería algo así:
Y el CSS:
.custom-btn { display: block; font-size: 20px; width: 25%; ... }Espero que te sirva.
Saludos.
Gracias de nuevo
Me sirve y lo entiendo bien, el problema es que sé donde tengo que poner los css, pero la frase que define la clase:
Esta es la que no sé donde ponerla, como tampoco sé donde están los archivos que guardan el código donde van los div y las class de una página que yo estoy creando en wordpress.
Al final te hice caso y busqué el plugin de botones, pero me interesaría mucho entender donde se ponen las class para luego maquetarlas con el css
Gracias de nuevo y un saludo, María
That is the question! 😉 El código no se guarda en un archivo, sino en una tabla de la base de datos. Pero el editor de contenidos de WordPress, tanto en páginas como en entradas, tiene una opción para introducir código HTML. La pestaña HTML justamente, también conocida como “editor de texto”.
Te recomiendo la Guía WP Fácil, donde está detallada esta característica (en el capítulo Cambiar al editor de texto). Además es un buen material de referencia para los que recién están empezando a usar WordPress.
Saludos.
Quiero modificar un shortcut mediante una clase y me funciona si uso el custom CSS que integrado Shortcuts Ultimate. El tema es que uso Simple CSS y me gustaría poder usar las mismas para no tener código duplicado.
Pensaba que las reglas de Simple CSS prevalecían respecto el resto de estilos.
¿Sabes como hacer que Shortcuts Ultimate use las clases de plugins externos?
Muchas gracias de antemano.
Probá con
!importanten el recuadro CSS adicional del Personalizador. O aplicale una clase personalizada al elemento de Shortcodes Ultimate que quieras modificar, así la usás en CSS adicional. Otra cosa no se me ocurre. 😕Estupendo gracias por todo!
Hola Ana. Lo he instalado pero no me aparece disponible en el Divi Builder ¿no es compatible? Una verdadera lástima si así fuera.
Muchas gracias de antemano.
Hola, David.
Gracias por tu comentario.
Al activarlo, deberías poder ver un botón Insertar código abreviado (justo al lado de Añadir objeto) en el editor visual de las entradas y páginas de manera predeterminada. En los módulos de Divi que no usen la opción Contenido para agregar con el editor visual, obviamente no vas a verlo.
Espero que te sirva.
Saludos.
Es lo que imaginaba. Por eso lo decía porque a mi en los complementos de Divi con editor visual solo aparecen el de WordPress para insertar multimedia y uno de un plugin que tengo para introducir iconos de Font Awesome.
¿Alguna idea de el por qué no me aparece el de Shortcuts Ultimate?
Muchas gracias
No sabría decirte exactamente, pero más que seguro es otro plugin que está ocasionando un conflicto. Probá desactivar todos menos Shortcodes Ultimate para ver si aparece en el editor. Luego ir activando uno por uno hasta identificar cuál provoca el conflicto.
Saludos.
Tenías razón. Aunque no achacaría la culpa al plugin Better Font Awesome que al desactivarlo y activar Shortcodes Ultimate apareció donde debía. Diría que es más del Divi Builder que en el editor visual sólo muestra un botón de plugin además del própio de WordPress. En cualquier caso estoy contento porque Shortcodes Ultimate es un gran complemento a Divi.
Muchas gracias guapa!