Shortcodes en WP: Tu Poderoso Aliado

Los shortcodes, o códigos abreviados, se han convertido en una herramienta esencial en el ecosistema de WordPress. Permiten agregar funcionalidades o contenido en diversas áreas de nuestro sitio de forma sencilla. En este artículo, abordaremos todo lo que necesitas saber para utilizar y crear un shortcode en tu propio sitio.

Desentrañando el Shortcode en WordPress

Un shortcode en WordPress es un código abreviado que permite a los usuarios ejecutar funciones específicas de manera sencilla. Esta característica es especialmente útil cuando necesitamos agregar funcionalidades que normalmente requerirían código complejo o HTML.

Los Shortcodes Predeterminados de WordPress

1. [ caption ]: Añade un pie de foto a las imágenes.
2. [ gallery ]: Muestra imágenes en forma de galería.
3. [ audio ]: Incorpora archivos de audio en publicaciones o páginas.
4. [ video ]: Incrusta archivos de video en tu contenido.
5. [ embed ]: Controla la incrustación de contenido de otros sitios.
6. [ playlist ]: Muestra múltiples archivos de audio o video en forma de lista de reproducción.
7. [ wp_caption ]: Similar a [ caption ], es una versión anterior.

Es importante mencionar que algunos de estos shortcodes tienen atributos y opciones adicionales que puedes utilizar para personalizar su comportamiento y apariencia. Si bien estos resúmenes te dan una idea general, siempre es recomendable consultar la documentación oficial de WordPress para obtener detalles más profundos y actualizaciones. ¡Espero que esta información te sea útil!

Los 2 Tipos de Shortcodes

En el ecosistema de WordPress, encontramos principalmente dos tipos de shortcodes: los shortcodes independientes y los shortcodes que envuelven contenido. Vamos a detallar cada uno de ellos:

• Shortcodes Independientes: Estos son los más simples y se representan por un solo conjunto de corchetes. No «envuelven» ningún contenido y, por lo general, insertan un elemento específico en el lugar donde se colocan. Por ejemplo, el shortcode para mostrar la fecha actual sería algo como [fecha_actual].
• Shortcodes que Envuelven Contenido: Estos shortcodes funcionan en pares y «envuelven» un bloque de contenido, afectando cómo se muestra ese contenido. Un buen ejemplo podría ser un shortcode para cambiar el color del texto. Se vería así: [color texto="rojo"]Este es un texto rojo[/color].

La elección de uno u otro dependerá de la funcionalidad que busques implementar en tu sitio web. Lo importante es saber que ambos existen y ofrecen flexibilidad para personalizar y mejorar la funcionalidad de tu sitio en WordPress.

Maneras de Implementar un Shortcode

Utilizando Plugins para WordPress

Una de las formas más fáciles de agregar shortcodes es mediante plugins especializados. Uno de los más populares es Shortcodes Ultimate, que ofrece una amplia gama de shortcodes predefinidos. Simplemente instala el plugin desde tu hosting WordPress y estará listo para usar.

Creación Manual de Shortcodes

Si prefieres una solución personalizada, puedes añadir tu propio shortcode de forma manual. Para hacerlo, debes editar el archivo functions en tu tema, específicamente el functions.php. Es importante asegurarte de tener un respaldo y estar alojado en servidores VPS confiables antes de realizar cambios directos

Ejemplo de Shortcodes hechos de forma manual:

Shortcode para Mostrar el Año Actual

Agregando unas simples líneas de código en el functions.php, puedes crear un shortcode que muestre el año en curso, ideal para los derechos de autor en el pie de página.

    function current_year_shortcode() {
        return date("Y");
    }
    add_shortcode('current_year', 'current_year_shortcode');
    

Shortcode para insertar un botón de llamada a la acción (CTA):

function boton_cta_shortcode($atts) {
    $a = shortcode_atts( array(
        'texto' => 'Haz clic aquí',
        'url'   => '#',
        'clase' => 'btn-cta'
    ), $atts );

    return '<a href="' . esc_url($a['url']) . '" class="' . esc_attr($a['clase']) . '">' . esc_html($a['texto']) . '</a>';
}
add_shortcode('boton_cta', 'boton_cta_shortcode');

Usa este shortcode: `[boton_cta texto=»Comprar ahora» url=»https://miwebsite.com/comprar» clase=»btn-comprar»]`

Shortcode para mostrar un formulario de suscripción de email marketing

function formulario_email_shortcode() {
    return '<form action="/suscribirse" method="post">
        <label for="correo">Suscríbete a nuestro boletín:</label>
        <input type="email" id="correo" name="correo" placeholder="Tu correo electrónico">
        <input type="submit" value="Suscribirse">
    </form>';
}
add_shortcode('formulario_email', 'formulario_email_shortcode');

Usa este shortcode: `[formulario_email]`

Shortcode para mostrar un mapa:

function mapa_shortcode($atts) {
    $a = shortcode_atts( array(
        'url'   => 'https://www.google.com/maps/embed?pb=URL_DEL_MAPA',
        'ancho' => '600',
        'alto'  => '450'
    ), $atts );

    return '<iframe width="' . esc_attr($a['ancho']) . '" height="' . esc_attr($a['alto']) . '" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' . esc_url($a['url']) . '"></iframe>';
}
add_shortcode('mostrar_mapa', 'mapa_shortcode');

Usa este shortcode: `[mostrar_mapa url=»URL_DEL_MAPA» ancho=»800″ alto=»600″]`

Shortcode para mostras negritas cursivas a la vez en una palabra

function mi_shortcode_personalizado( $atts, $content = null ) { return '' . $content . ''; } add_shortcode('negritacursiva', 'mi_shortcode_personalizado');

Una vez que hayas añadido este código, puedes usar el shortcode en tus publicaciones o páginas de la siguiente manera: [negritacursiva]Tu texto aquí[/negritacursiva]

Shortcode Contador de Visitas

function registrar_visita( $post_id ) {
    if ( !is_single() ) return;

    $visitas_actuales = get_post_meta( $post_id, 'contador_visitas', true );

    if ( $visitas_actuales == '' ) {
        delete_post_meta( $post_id, 'contador_visitas' );
        add_post_meta( $post_id, 'contador_visitas', '1' );
    } else {
        $visitas_actuales++;
        update_post_meta( $post_id, 'contador_visitas', $visitas_actuales );
    }
}
add_action( 'wp_head', 'registrar_visita' );

Este código verifica si estás en una página o publicación individual (is_single()) y, si es así, actualiza el contador de visitas almacenado en el meta dato contador_visitas.

Crear el shortcode:

function mostrar_contador_visitas( $atts ) {
    global $post;
    $visitas = get_post_meta( $post->ID, 'contador_visitas', true );
    return '<div class="contador-visitas">Número de visitas: ' . $visitas . '</div>';
}
add_shortcode('contador', 'mostrar_contador_visitas');

Con este shortcode, puedes añadir [contador] en cualquier lugar de tu publicación o página para mostrar el número de visitas.

Nota: Este método es básico y no es el más óptimo para sitios con mucho tráfico o para entornos de cacheo, ya que podría no registrar todas las visitas correctamente en tales escenarios. Para sitios grandes o profesionales, se recomienda usar plugins dedicados o soluciones más avanzadas.

Shortcode para Contenido Restringido

Aquí te presento un ejemplo de cómo crear un shortcode para restringir contenido solo para usuarios registrados. Si un usuario no está registrado, se mostrará un mensaje indicando que debe iniciar sesión para ver el contenido.

function contenido_restringido_shortcode( $atts, $content = null ) { if ( is_user_logged_in() ) { return $content; } else { return '<p>Debes <a href="' . wp_login_url() . '">iniciar sesión</a> para ver este contenido.</p>'; } } add_shortcode('contenido_restringido', 'contenido_restringido_shortcode');

Con este shortcode, simplemente envuelve el contenido que quieras restringir dentro de las etiquetas [contenido_restringido] y [/contenido_restringido]. Por ejemplo:

[contenido_restringido] Este es un contenido solo para usuarios registrados. [/contenido_restringido]

Los usuarios que no estén registrados o que no hayan iniciado sesión verán un mensaje indicándoles que deben iniciar sesión para ver el contenido. Por otro lado, los usuarios que hayan iniciado sesión podrán ver el contenido normalmente.

Añade el código proporcionado al archivo functions.php de tu tema (o, idealmente, en un child theme o en un plugin personalizado). Siempre recuerda hacer copias de seguridad antes de realizar cambios en los archivos y, si es posible, probar en un entorno de staging antes de aplicarlo al sitio en producción.

Poner Fecha de publicación y actualización de un artículo

function fechas_shortcode() {
    global $post;
    
    $fecha_publicacion = get_the_date( 'd/m/Y', $post->ID );
    $fecha_actualizacion = get_the_modified_date( 'd/m/Y', $post->ID );

    return "Publicado el: " . $fecha_publicacion . ". Última actualización: " . $fecha_actualizacion . ".";
}
add_shortcode('fechas', 'fechas_shortcode');

Con el shortcode anterior, cuando escribas [fechas] en una entrada o página, se mostrará la fecha de publicación y la última fecha de actualización de esa entrada en particular.

Es importante tener en cuenta que este código utiliza un formato específico para las fechas (d/m/Y), que representa el día/mes/año. Si prefieres otro formato, simplemente cambia esa parte del código.

¿Cómo verificar si Google está indexando el contenido generado por shortcodes de Elementor, RevSlider y otros plugins?

La correcta indexación del contenido en tu sitio web es esencial para garantizar una óptima visibilidad en los motores de búsqueda. Cuando utilizas herramientas como Elementor o RevSlider para crear y personalizar tu sitio, a menudo se generan shortcodes que, por detrás, muestran contenido dinámico. A continuación, te ofrecemos una guía para asegurarte de que Google y otros buscadores estén leyendo e indexando este contenido adecuadamente:

1. Mobile-Friendly Test: Una de las herramientas más efectivas proporcionadas por Google. Simplemente ingresa la URL de tu página en Mobile-Friendly Test y analiza los resultados. Esta herramienta no solo te indicará si tu página es amigable para dispositivos móviles, sino que también mostrará cómo Googlebot ve y renderiza tu página.
2. Inspección de URL en Google Search Console: Si ya has verificado tu sitio en Google Search Console, puedes usar la herramienta de «Inspección de URL» para ver cómo Google ve una página específica. Proporciona detalles sobre el rastreo, la indexación y la entrega de páginas en tu sitio.
3. Observar el Código Fuente: En tu navegador, dirígete a la página que deseas verificar. Haz clic derecho y selecciona «Ver código fuente de la página». Busca el shortcode en sí (por ejemplo, [elementor-id] o algo similar). Si no puedes ver el contenido renderizado en el código fuente, significa que el contenido se carga mediante JavaScript. Sin embargo, esto no necesariamente significa que Google no pueda verlo, gracias a sus capacidades avanzadas de renderizado.
4. Evitar el Bloqueo de JavaScript: Asegúrate de que no estés bloqueando accidentalmente archivos JavaScript en tu archivo robots.txt. Google necesita acceso a estos archivos para renderizar y comprender páginas que dependen del JavaScript.

Limpieza de Shortcodes al desactivar un plugin

Cuando se desactiva un plugin que proporciona ciertos shortcodes, estos pueden quedar como texto plano en tus publicaciones o páginas. Es fundamental estar al tanto de esto y tomar las medidas necesarias para limpiar o reemplazar esos shortcodes. Una herramienta o plugin que detecte shortcodes no utilizados puede ser de gran ayuda en este proceso.

Potenciales problemas de Seguridad con shortcodes

Si bien los shortcodes son poderosos y flexibles, también pueden presentar vulnerabilidades si no se implementan correctamente. Es crucial asegurarse de que cualquier shortcode personalizado que agregues, o cualquier plugin que utilices, esté bien codificado y no presente riesgos de seguridad. Recomendamos revisar y testear regularmente tus shortcodes y, si es posible, consultar con expertos en seguridad de WordPress.

Beneficios y desafíos de los shortcodes de WordPress

Los shortcodes ofrecen una solución rápida y eficiente para añadir funcionalidades. No obstante, es crucial no abusar de ellos, pues demasiados shortcodes pueden afectar el rendimiento de tu sitio.

• Pros: Facilidad de uso, adaptabilidad, personalización.
• Contras: Posible impacto en la velocidad del sitio, dependencia de plugins para ciertos shortcodes.

Conclusiones finales

En conclusión, los shortcodes se erigen como pilares fundamentales para potenciar y simplificar la funcionalidad de tu sitio web en WordPress. Desde la creación de elementos interactivos hasta la inserción de contenido multimedia, los shortcodes ofrecen una forma eficaz de enriquecer la experiencia de tus visitantes. Si deseas explorar más sobre los cimientos de la creación web y cómo se combinan con las capacidades de WordPress, te invito a visitar nuestro artículo sobre wordpress multisite y adentrarte en el emocionante universo del uso de multisitios en WordPress.

Preguntas Frecuentes

¿Es seguro editar el archivo functions.php?

Editar directamente el functions.php es seguro siempre y cuando tengas un respaldo y estés familiarizado con el código. Es recomendable hacerlo en servidores VPS de calidad o en un entorno de pruebas.

¿Puedo crear mis propios shortcodes sin tener conocimientos de programación?

Sí, hay plugins para WordPress como Shortcodes Ultimate que permiten crear tus propios shortcodes sin escribir una línea de código.

¿Los shortcodes afectan el SEO de mi sitio?

No directamente. Sin embargo, si usas demasiados o dependes de plugins obsoletos, esto podría impactar la velocidad y usabilidad de tu sitio, factores que sí afectan el SEO.