Plugin Shortcodes Ultimate traducido al español

22 comentarios

Por: Caribdis.Net

Publicada: 9 de febrero de 2015

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

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 de cualquier tema

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

Últimas entradas de Caribdis.Net (ver todo)

Se responden dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

22 Comentarios

  1. Ismael

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

    Responder
    • Caribdis.Net

      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.

      Responder
  2. lino

    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.

    Responder
    • Caribdis Diseño Web

      Hola, Lino.

      No sé si termino de entender lo que estás queriendo hacer.

      Podés simplemente agregar un data-anchor a cada spoiler del acordeón. Un ejemplo sería algo así:

      [su_accordion]
      [su_spoiler title="Título del spoiler" anchor="spoiler1"]Contenido[/su_spoiler]
      [su_spoiler title="Título del spoiler 2" anchor="spoiler2"]Contenido[/su_spoiler]
      [su_spoiler title="Título del spoiler3" anchor="spoiler3"]Contenido[/su_spoiler]
      [/su_accordion]
      

      El enlace en el menú al primer elemento sería http://urldelsitio/pagina-del-spoiler/#spoiler1.

      Espero que te sirva.

      Saludos.

      Responder
  3. Conk

    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.

    Responder
    • Caribdis Diseño Web

      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.

      Responder
  4. Antonino

    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.

    Responder
    • Caribdis Diseño Web

      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.

      Responder
  5. María

    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…

    Responder
    • Caribdis Diseño Web

      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.

      Responder
      • María

        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.

        Responder
        • Caribdis Diseño Web

          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í:

          <p class="custom-btn">Este es el botón</p>

          Y el CSS:

          .custom-btn {
              display: block;
              font-size: 20px;
              width: 25%;
              ...
          }

          Espero que te sirva.

          Saludos.

          Responder
          • María

            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:

            <p class="custom-btn">Este es el botón</p>

            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

          • Caribdis Diseño Web

            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.

  6. David

    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.

    Responder
    • Caribdis Diseño Web

      Probá con !important en 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. 😕

      Responder
      • David

        Estupendo gracias por todo!

        Responder
  7. David

    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.

    Responder
    • Caribdis Diseño Web

      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.

      Responder
      • David

        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

        Responder
        • Caribdis Diseño Web

          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.

          Responder
          • David

            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!

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!