Tabla de contenidos:<\/p>
- \u00bfQu\u00e9 es un shortcode de WordPress?<\/a><\/li>
- Tipos de shortcodes en WordPress<\/a><\/li>
- C\u00f3mo insertar un shortcode en WordPress<\/a>
- C\u00f3mo insertar un shortcode en WordPress con el editor cl\u00e1sico<\/a><\/li>
- C\u00f3mo insertar un shortcode en WordPress con Gutenberg<\/a><\/li><\/ul><\/li>
- C\u00f3mo crear shortcodes en WordPress<\/a>
- C\u00f3mo crear un shortcode mediante un plugin<\/a><\/li>
- C\u00f3mo crear un shortcode manualmente<\/a><\/li><\/ul><\/li>
- Conclusi\u00f3n<\/a><\/li><\/ul><\/div>\n\n
\u00bfQu\u00e9 es un shortcode de WordPress?<\/span><\/h2>\n
Un shortcode es un fragmento de c\u00f3digo abreviado que se inserta en las p\u00e1ginas o entradas de WordPress para a\u00f1adir funcionalidades sin necesidad de tener que insertar c\u00f3digo HTML o CSS<\/a>.<\/p>\n
A diferencia de las etiquetas HTML, los shortcodes en WordPress se escriben entre corchetes y son del tipo:<\/p>\n
[nombre_del_shortcode]<\/pre>\n
Lo ideal es incluir una peque\u00f1a frase o nombre de la funcionalidad que representa, as\u00ed te ser\u00e1 mucho m\u00e1s f\u00e1cil identificarlo:<\/p>\n
[formulario_suscriptores_newsletter]<\/pre>\n
En realidad, estos shortcodes, incluyen un script de PHP de forma que, cuando a\u00f1ades el shortcode en tu p\u00e1gina, realmente se ejecuta la funci\u00f3n en PHP.<\/p>\n
Una de las razones por las que estos shortcodes son tan \u00fatiles es que son totalmente reusables. Por ejemplo, un shortcode para a\u00f1adir un formulario en tu p\u00e1gina de contacto, tambi\u00e9n puedes usarlo en la p\u00e1gina de inicio o en cualquier otra secci\u00f3n de tu sitio web.<\/p>\n
Precisamente esto hace que a\u00f1adir cualquier funcionalidad a tu web sea mucho m\u00e1s sencillo y te ayuda a mantener el contenido limpio y organizado. Esto es beneficioso tanto a la hora de crear o modificar contenido, como tambi\u00e9n a encontrar posibles errores en \u00e9l.<\/p>\n
Como resultado, esto te permite ahorrar tiempo, algo tan necesario \ud83d\ude42 .<\/p>\n
Tipos de shortcodes en WordPress<\/span><\/h2>\n
Por defecto, en WordPress encontrar\u00e1s seis tipos de shortcodes que te permiten integrar diversas funcionalidades o elementos en tu p\u00e1gina.<\/p>\n
- \n
- Shortcode de v\u00eddeo: estos fragmentos de c\u00f3digo te permiten a\u00f1adir a tu web v\u00eddeos en formato mp4, webm, m4v, ogv, wmv o flv.\n
[ video ]<\/pre>\n<\/li>\n
- Shortcode de audio: en este caso te permiten a\u00f1adir archivos de audio en tu sitio.\n
[ audio ]<\/pre>\n<\/li>\n
- Shortcode de galer\u00eda: muestra una galer\u00eda de im\u00e1genes.\n
[ gallery ]<\/pre>\n<\/li>\n
- Shortcode de lista de reproducci\u00f3n: crea listas de reproducci\u00f3n de audio y\/o v\u00eddeos.\n
[ playlist ]<\/pre>\n<\/li>\n
- Shortcode embed: para incrustar, por ejemplo, art\u00edculos del blog.\n
[ embed ]<\/pre>\n<\/li>\n
- Shortcode caption: para a\u00f1adir subt\u00edtulos de im\u00e1genes, fundamentalmente.\n
[ caption ]<\/pre>\n<\/li>\n<\/ul>\n
Sin embargo, tambi\u00e9n hay muchos otros shortcodes que te permiten, por ejemplo:<\/p>\n
- \n
- Insertar contenido din\u00e1mico, como los \u00faltimos art\u00edculos de tu blog o noticias recientes.<\/li>\n
- A\u00f1adir contenido multimedia como un v\u00eddeo de YouTube, una galer\u00eda de im\u00e1genes o un post de Instagram.<\/li>\n
- A\u00f1adir formularios, ya sean de suscripci\u00f3n a tu blog o, por ejemplo, formularios de contactos.<\/li>\n
- Insertar funcionalidades que te proporcionan algunos plugins, como planes de precios, citas destacadas, calendarios de reservas…<\/li>\n<\/ul>\n
C\u00f3mo insertar un shortcode en WordPress<\/span><\/h2>\n
Ya te adelanto que insertar un shortcode en WordPress es muy sencillo, tanto si todav\u00eda usas el editor cl\u00e1sico de WordPress como si utilizas el editor de bloques.<\/p>\n
\u00bfNo me crees? Aqu\u00ed la prueba \ud83d\ude42.<\/p>\n
C\u00f3mo insertar un shortcode en WordPress con el editor cl\u00e1sico<\/span><\/h3>\n
Son muchos los plugins que generan un shortcode para mostrar el contenido. Por ejemplo, pr\u00e1cticamente todos los plugins de reservas y citas online<\/a><\/strong> o plugins de formulario<\/a><\/strong> lo hacen, as\u00ed que voy a explicarte c\u00f3mo hacerlo con Ninja Forms.<\/p>\n
T\u00fa hazlo con el shortcode que tengas, el proceso es pr\u00e1cticamente igual.<\/p>\n
Lo primero, accede al panel del plugin, en esta gu\u00eda voy a Ninja Forms, y copia el shortcode que deseas a\u00f1adir en una entrada o p\u00e1gina de tu web.<\/p>\n
![\"Copiar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2023\/11\/shortcode-ninjaforms.png\" "\\"\\"")
<\/p>\nAccede a la p\u00e1gina en la que quieras insertarlo y p\u00e9galo. En el editor cl\u00e1sico, puedes hacerlo tanto en el modo visual como en HTML.<\/p>\n
Ojo, recuerda siempre pegar el shortcode con los corchetes [ ].<\/p>\n
![\"Insertar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2023\/11\/insertar-shortcode-wordpress-editor-clasico.png\" "\\"\\"")
<\/p>\nEl resultado de a\u00f1adir el shortcode en la p\u00e1gina de contacto ser\u00eda el siguiente:<\/p>\n
![\"Resultado](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2023\/11\/shortcode-wordpress-incrustado.png\" "\\"\\"")
<\/p>\nC\u00f3mo insertar un shortcode en WordPress con Gutenberg<\/span><\/h3>\n
En Gutenberg<\/a> insertar un shortcode es todav\u00eda m\u00e1s sencillo.<\/p>\n
Aunque tambi\u00e9n puedes copiar y pegar el c\u00f3digo en el editor, en Gutenberg hay un bloque espec\u00edfico para a\u00f1adir el shortcode.<\/p>\n
![\"Insertar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2023\/11\/insertar-shortcode-wordpress-gutenberg.png\" "\\"\\"")
<\/p>\nEl resultado de hacerlo con Gutenberg es exactamente el mismo que hacerlo con el editor cl\u00e1sico.<\/p>\n
Ahora que sabes qu\u00e9 es un shortcode y conoces el poder de estos peque\u00f1os fragmentos de c\u00f3digo, es posible que te est\u00e9s preguntando\u2026 \u00bfPuedo crear mis propios shortcodes en WordPress?<\/p>\n
\u00a1Pues claro que s\u00ed! Ya sabes que en WordPress, puedes hacer de todo (o casi), as\u00ed que s\u00ed, tambi\u00e9n puedes crear los tuyos propios. A continuaci\u00f3n te explico c\u00f3mo hacerlo.<\/p>\n
C\u00f3mo crear shortcodes en WordPress<\/span><\/h2>\n
En WordPress casi siempre hay dos formas de realizar las cosas: mediante un plugin o de forma manual.<\/p>\n
C\u00f3mo crear un shortcode mediante un plugin<\/span><\/h3>\n
Aunque el repositorio oficial de WordPress tienes m\u00e1s complementos de este tipo, yo te recomiendo utilizar Shortcodes Ultimate<\/a><\/strong>, que ofrece m\u00e1s de 50 tipos de shortcodes: c\u00f3digos QR, quotes o citas, mapas de Google, carrusel de im\u00e1genes<\/a>, tabla de precios, etc.<\/p>\n
\u00bfQuieres ver c\u00f3mo funciona?<\/p>\n
Pues bien, lo primero es instalar el plugin en tu aplicaci\u00f3n. Recuerda que puedes hacerlo desde la secci\u00f3n \u00abPlugins\u00bb- \u00abA\u00f1adir nuevo\u00bb.<\/p>\n
Escribe el nombre del plugin en el recuadro de b\u00fasqueda y pulsa el bot\u00f3n instalar. Una vez instalado, act\u00edvalo para poder utilizarlo.<\/p>\n
![\"Plugin](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2023\/11\/plugin-shortcodes-ultimate.png\" "\\"\\"")
<\/p>\nHecho esto, ya sea en el editor cl\u00e1sico de WordPress o con Gutenberg, ver\u00e1s un icono con el logo del plugin que te permite a\u00f1adir el shortcode que necesitas.<\/p>\n
![\"Insertar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2023\/11\/insertar-shortcode-ultimate.png\" "\\"\\"")
<\/p>\nSelecciona la funcionalidad del shortcode que necesitas. En este ejemplo, elijo uno para a\u00f1adir v\u00eddeos de YouTube:<\/p>\n
![\"Insertar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2023\/11\/insertar-funcionalidad-shortcode-ultimate.png\" "\\"\\"")
<\/p>\nA continuaci\u00f3n, a\u00f1ade la URL del v\u00eddeo, lista de reproducci\u00f3n y los ajustes:<\/p>\n
![\"Insertar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2023\/11\/insertar-video-shortcodes-ultimate.png\" "\\"\\"")
<\/p>\nPor \u00faltimo, haz clic en el bot\u00f3n azul \u00abInsertar shortcode\u00bb y listo.<\/p>\n
C\u00f3mo crear un shortcode manualmente<\/span><\/h3>\n
Como te coment\u00e9 antes, tambi\u00e9n puedes crear tus propios shortcodes en WordPress de forma manual. Eso s\u00ed, para ello debes tener algunos conocimientos b\u00e1sicos para desarrollar tu propio c\u00f3digo.<\/p>\n
\u00bfVemos c\u00f3mo se hace?<\/p>\n
A trav\u00e9s del Administrador de archivos de cPanel<\/a><\/strong> o creando una conexi\u00f3n FTP<\/a><\/strong>, accede al archivo functions.php<\/em> de tu tema.<\/p>\n
Ahora agrega una nueva funci\u00f3n de shortcode al archivo utilizando la siguiente sintaxis:<\/p>\n
function nombre_funcion( $atts ){\r\n \/\/ C\u00f3digo que define la funcionalidad del shortcode\r\n}\r\nadd_shortcode( 'nombre_shortcode', 'nombre_funcion' );\r\n<\/pre>\nEn este ejemplo, \u00abnombre_shortcode\u00bb es el nombre que le dar\u00e1s a tu shortcode y \u00abnombre_funcion\u00bb es el nombre de la funci\u00f3n que se encarga de definir las tareas que realiza.<\/p>\n
A\u00f1ade el c\u00f3digo que define la funcionalidad del shortcode. La funci\u00f3n podr\u00e1 ser todo lo compleja que quieras. Por ejemplo, la funci\u00f3n para crear un shortcode que genere un formulario de contacto ser\u00eda la siguiente:<\/p>\n
function formulario_contacto() {\r\n ob_start();\r\n ?>\r\n <form method=\"post\" action=\"<?php echo sc_url(admin_url('admin-post.php')); ?>\">\r\n \t<label for=\"nombre\">Nombre:<\/label>\r\n \t<input type=\"text\" name=\"nombre\" required>\r\n \t<label for=\"email\">Correo electr\u00f3nico:<\/label>\r\n \t<input type=\"email\" name=\"email\" required>\r\n \t<label for=\"mensaje\">Mensaje:<\/label>\r\n \t<textarea name=\"mensaje\" required><\/textarea>\r\n \t<input type=\"hidden\" name=\"action\" value=\"formulario_contacto_enviar\">\r\n \t<?php wp_nonce_field('formulario_contacto_nonce', 'formulario_contacto_nonce'); ?>\r\n \t<button type=\"submit\">Enviar<\/button>\r\n <\/form>\r\n <?php\r\n return ob_get_clean();\r\n}\r\nadd_shortcode('formulario_contacto', 'formulario_contacto');\r\n<\/pre>\nHecho esto, guarda los cambios en el archivo functions.php<\/em> y cierra el editor. Ahora podr\u00e1s insertar el shortcode en WordPress, tal y como vimos en el apartado anterior: copi\u00e1ndolo y peg\u00e1ndolo si usas el editor cl\u00e1sico o a\u00f1adiendo un bloque y pegando el c\u00f3digo en Gutenberg.<\/p>\n
Conclusi\u00f3n<\/span><\/h2>\n
- C\u00f3mo crear un shortcode manualmente<\/a><\/li><\/ul><\/li>
- C\u00f3mo insertar un shortcode en WordPress con Gutenberg<\/a><\/li><\/ul><\/li>
- Tipos de shortcodes en WordPress<\/a><\/li>