¿Cómo agregar un shortcode en WordPress? (Guía definitiva)

Los códigos cortos son una manera fácil de agregar contenido dinámico a sus publicaciones, páginas y barras laterales de WordPress.

Muchos plugins y temas de WordPress usan códigos cortos para agregar contenido especializado como formularios de contacto, galerías de imágenes, controles deslizantes y más.

En este artículo, le mostraremos cómo agregar fácilmente un código corto en WordPress. También le mostraremos cómo crear sus propios códigos cortos personalizados en WordPress.

¿Qué son los códigos cortos?

Los atajos en WordPress son atajos de código que le ayudan a agregar contenido dinámico en publicaciones, páginas y widgets de barra lateral de WordPress. Se muestran entre corchetes como este:

[myshortcode]

Para comprender mejor los códigos cortos, echemos un vistazo a por qué se agregaron en primer lugar.

WordPress filtra todo el contenido para asegurarse de que nadie use las publicaciones y el contenido de la página para inyectar código malicioso en la base de datos. Esto significa que puede escribir HTML básico en sus publicaciones, pero no puede escribir código PHP.

Pero, ¿qué sucede si desea ejecutar un código personalizado dentro de las publicaciones para mostrar publicaciones relacionadas, anuncios publicitarios, formularios de contacto, galerías, etc.?

Aquí es donde entra la API de código corto.

Básicamente, permite a los desarrolladores agregar su propio código dentro de una función y luego registrar esa función con WordPress como un código corto, para que los usuarios puedan usarlo fácilmente sin tener ningún conocimiento de codificación.

Cuando WordPress encuentra el shortcode, ejecutará automáticamente el código asociado a él.

Veamos cómo agregar fácilmente códigos cortos en sus publicaciones y páginas de WordPress.

Agregar un código corto en publicaciones y páginas de WordPress

Primero, debe editar la publicación y la página donde desea agregar el código corto. A continuación, debe hacer clic en el botón Agregar bloque para insertar un bloque de código corto.

Bloque de shortcode agregado en WordPress

Después de agregar el bloque de código corto, simplemente puede ingresar su código corto en la configuración del bloque. El shortcode será proporcionado por varios plugins de WordPress que puede usar como WPForms para formularios de contacto, OptinMonster para formularios de marketing por correo electrónico, Botón de llamada de WP para insertar un botón de clic para llamar, etc.

Inserta el shortcode en el editor de bloques

Para obtener más información sobre el uso de bloques, consulte nuestro tutorial de Gutenberg para obtener más detalles.

Ahora puede guardar su publicación o página y obtener una vista previa de los cambios para ver el código abreviado en acción.

Agregar un código corto en los widgets de la barra lateral de WordPress

También puede usar códigos cortos en los widgets de la barra lateral de WordPress. Solo visita el Apariencia »Widget página y agregue el widget "Texto" a una barra lateral.

Ahora puede pegar su código corto dentro del área de texto del widget.

Agregar códigos cortos en el widget de la barra lateral

No olvide hacer clic en el botón "Guardar" para almacenar la configuración del widget.

Después de eso, puede visitar su sitio web de WordPress para ver la vista previa en vivo del código corto en el widget de la barra lateral.

Agregar un código corto en el antiguo editor clásico de WordPress

Si todavía está usando el antiguo editor clásico en WordPress, aquí le mostramos cómo puede agregar códigos cortos a sus publicaciones y páginas de WordPress.

Simplemente edite la publicación y la página donde desea agregar el código corto. Puede pegar el código abreviado en cualquier lugar del editor de contenido donde desee que aparezca. Solo asegúrese de que el código abreviado esté en su propia línea.

Editor de shortcode clásico

No olvide guardar sus cambios. Después de eso, puede obtener una vista previa de su publicación y página para ver el código corto en acción.

Cómo agregar un código corto en archivos de tema de WordPress

Los códigos cortos están diseñados para usarse en publicaciones, páginas y widgets de WordPress. Sin embargo, a veces es posible que desee utilizar un código corto dentro de un archivo de tema de WordPress.

WordPress lo hace fácil, pero deberá editar sus archivos de tema de WordPress. Si nunca ha hecho esto antes, consulte nuestra guía sobre cómo copiar y pegar código en WordPress.

Básicamente, puede agregar un código corto a cualquier plantilla de tema de WordPress simplemente agregando el siguiente código.

<?php echo do_shortcode("[your_shortcode]"); ?>

WordPress ahora buscará el código corto y mostrará su salida en la plantilla del tema.

Cómo crear su propio shortcode personalizado en WordPress

Los códigos cortos pueden ser realmente útiles cuando desea agregar contenido dinámico o código personalizado dentro de su publicación y páginas de WordPress. Sin embargo, si desea crear un código abreviado personalizado, se requiere cierta experiencia en codificación.

Si se siente cómodo escribiendo código PHP, aquí hay un código de muestra que puede usar como plantilla.

// function that runs when shortcode is called
function wpb_demo_shortcode() { 

// Things that you want to do. 
$message="Hello world!"; 

// Output needs to be return
return $message;
} 
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode'); 

En este código, primero creamos una función que ejecuta algún código y devuelve el resultado. A continuación, creamos un nuevo código corto llamado "saludo" y le dijimos a WordPress que ejecutara la función que creamos.

Ahora puede usar agregar este código corto a sus publicaciones, páginas y widgets usando el siguiente código:

[greeting]

Ejecutará la función que creó y mostrará el resultado deseado.

Ahora echemos un vistazo a un uso más práctico de un shortcode. En este ejemplo, mostraremos un banner de Google AdSense dentro de un código corto.


// The shortcode function
function wpb_demo_shortcode_2() { 

// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     
</script>';

// Ad code returned
return $string; 

}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2'); 

No olvide reemplazar el código de anuncio con su código de anuncio.

Ahora puedes usar el archivo [my_ad_code] shortcode dentro de sus publicaciones, páginas y widgets de barra lateral de WordPress. WordPress ejecutará automáticamente la función asociada con el código corto y mostrará el código publicitario.

Códigos cortos vs bloques de Gutenberg

Los usuarios a menudo nos preguntan cuáles son las diferencias entre los códigos cortos y los nuevos bloques de Gutenberg.

Básicamente, si encuentra útiles los códigos cortos, le encantarán los bloques de editor de WordPress. Los bloques te permiten hacer lo mismo pero de una manera más intuitiva.

En lugar de requerir que los usuarios agreguen un código corto para mostrar contenido dinámico, los bloques permiten a los usuarios agregar contenido dinámico dentro de publicaciones / páginas con una interfaz de usuario más intuitiva. Muchos plugins populares de WordPress están cambiando para usar bloques de Gutenberg en lugar de códigos cortos porque son más adecuados para principiantes.

Hemos reunido una lista de los plugins de bloqueo de Gutenberg más útiles para WordPress que quizás desee probar.

Si desea crear sus propios bloques Gutenberg personalizados, puede seguir nuestro tutorial paso a paso sobre cómo crear bloques Gutenberg personalizados en WordPress.

Esperamos que este artículo le haya ayudado a aprender cómo agregar un código corto en WordPress. También puede consultar nuestra guía sobre los mejores plugins para crear páginas de arrastrar y soltar de WordPress y cómo crear un tema de WordPress personalizado sin escribir ningún código.

Deja una respuesta

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

Subir