{"id":8990,"date":"2017-05-10T04:46:25","date_gmt":"2017-05-10T11:46:25","guid":{"rendered":"https:\/\/staging.kinsta.site\/es\/?p=8990"},"modified":"2020-11-08T23:07:20","modified_gmt":"2020-11-08T22:07:20","slug":"wordpress-shortcodes","status":"publish","type":"post","link":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/","title":{"rendered":"Introducci\u00f3n de WordPress Shortcodes para Desarrolladores"},"content":{"rendered":"<p>Seg\u00fan la\u00a0<a href=\"https:\/\/en.support.wordpress.com\/shortcodes\/\" target=\"_blank\" rel=\"noopener noreferrer\">definici\u00f3n de WordPress.com<\/a>, un c\u00f3digo corto o shortcode es un c\u00f3digo espec\u00edfico de WordPress que le permite hacer cosas ingeniosas con muy poco esfuerzo. Los WordPress shortcodes pueden embeber archivos o crear objetos que normalmente requieren mucho c\u00f3digo complicado y feo en una sola l\u00ednea. En otras palabras, gracias a los WordPress shortcodes no hay necesidad de que los usuarios a\u00f1adan manualmente c\u00f3digo HTML al contenido de la publicaci\u00f3n y adem\u00e1s, es posible cambiar din\u00e1micamente el output bajo condiciones espec\u00edficas (es decir, el usuario conectado, la fecha actual, ubicaci\u00f3n del usuario, etc.).<\/p>\n<p>Si usted alguna vez ha usado la\u00a0<a href=\"https:\/\/codex.wordpress.org\/Gallery_Shortcode\" target=\"_blank\" rel=\"noopener noreferrer\">[galer\u00eda]<\/a>\u00a0de Shortcodes, entonces ya tiene una idea de c\u00f3mo los WordPress Shortcodes funcionan:<\/p>\n<pre><code>[gallery ids=\"129,130,131,132\" order=\"DESC\" orderby=\"title\" columns=\"4\"]<\/code><\/pre>\n<p>En este ejemplo,\u00a0<b>galer\u00eda<\/b>\u00a0es la\u00a0<b>etiqueta de shortcode<\/b>, mientras que\u00a0<b>ids<\/b>,\u00a0<b>order<\/b>,\u00a0<b>orderby<\/b>\u00a0y\u00a0<b>colums<\/b>\u00a0son <b>los atributos de\u00a0shortcode<\/b>. Estos atributos determinan el c\u00f3digo HTML devuelto.<\/p>\n<p><span style=\"color: #444444;font-size: 32px\">Tipolog\u00edas y Estructura de los Shortcodes<\/span><\/p>\n<p>WordPress proporciona dos tipolog\u00edas de shortcodes:<\/p>\n<ul>\n<li><b>Los self-closing shortcodes <\/b>se ven como la <b>[galer\u00eda]<\/b>\u00a0de shortcodes, y no requieren una etiqueta para cerrar.<\/li>\n<li><b>Los enclosing shortcodes<\/b>\u00a0requieren una etiqueta de cierre, y permiten la manipulaci\u00f3n del contenido cerrado.<\/li>\n<\/ul>\n<p>He aqu\u00ed un ejemplo de inclusi\u00f3n de Shortcode:<\/p>\n<pre><code>[gist]2314628[\/gist]<\/code><\/pre>\n<p>Este shortcode es proporcionado por el plugin de Jetpack para embeber en publicaciones el c\u00f3digo de un Gist p\u00fablico especificado por su ID. La cadena de texto entre la etiqueta de apertura y cierre es el <b>contenido de shortcode.<\/b><\/p>\n<p><span style=\"color: #444444;font-size: 32px\">Lo que Aprender\u00e1 en Esta Publicaci\u00f3n\u00a0<\/span><\/p>\n<p>De inmediato WordPress proporciona\u00a0<a href=\"https:\/\/codex.wordpress.org\/Shortcode\" target=\"_blank\" rel=\"noopener noreferrer\">seis shortcodes<\/a>, y plugins que puede agregar mucho m\u00e1s gracias a la <a href=\"https:\/\/codex.wordpress.org\/Shortcode_API\" target=\"_blank\" rel=\"noopener noreferrer\">API de Shortcode <\/a>.<\/p>\n<p>La Api de Shortcode es un conjunto simple de funciones para crear WordPress shortcodes para su uso en publicaciones y p\u00e1ginas.<\/p>\n<p>En esta publicaci\u00f3n les presentar\u00e9 esta funci\u00f3n \u00fatil de WordPress desde la perspectiva de un desarrollador. A partir de ahora, nos adentraremos en la API de Shortcode siguiendo estos pasos:<\/p>\n<ul style=\"margin-left: 30px\">\n<li><a href=\"#shortcode_dev\">Una introducci\u00f3n a la construcci\u00f3n de un shortcode<\/a><\/li>\n<li><a href=\"#simple_shortcode\">Un self-closing shortcode<\/a><\/li>\n<li><a href=\"#enclosing_shortcodes\">Un enclosing shortcode<\/a><\/li>\n<li><a href=\"#mce_shortcodes\">C\u00f3mo incluir shortcodes sacando provecho de TinyMCE UI<\/a><\/li>\n<li><a href=\"#nonconventional_uses\">Usos no convencionales de shortcodes<\/a><\/li>\n<\/ul>\n<p>El c\u00f3digo mostrado en los siguientes ejemplos se ha agrupado en un\u00a0<a href=\"https:\/\/github.com\/carlodaniele\/kinsta-shortcodes\" target=\"_blank\" rel=\"noopener noreferrer\">plugin disponible para descargar<\/a>\u00a0en Github.<\/p>\n<figure id=\"attachment_8993\" aria-describedby=\"caption-attachment-8993\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8993 size-full\" src=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/estructura-del-plugin.png\" alt=\"La imagen muestra la estructura del plugin de Shortcodes de Kinsta \" width=\"300\" height=\"118\"><figcaption id=\"caption-attachment-8993\" class=\"wp-caption-text\">La imagen muestra la estructura del plugin de Shortcodes de Kinsta<\/figcaption><\/figure>\n<h2 id=\"shortcode_dev\">WordPress Shortcodes para\u00a0Desarrolladores<\/h2>\n<p>Cuando WordPress procesa el contenido de la publicaci\u00f3n, busca shortcodes registrados. Una vez que se encuentre un shortcode, el Shortcode API analiza la etiqueta, los atributos y el contenido cerrado, si est\u00e1 disponible, y los pasa a una funci\u00f3n de manipulador correspondiente. Esta funci\u00f3n realiza una tarea y devuelve una cadena para incluirla en el contenido de la publicaci\u00f3n. Por lo tanto, nuestro primer paso es registrar la etiqueta y el manipulador de shortcode gracias a la funci\u00f3n de <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">add_shortcode<\/a>\u00a0:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">add_shortcode( &#8216;shortcode_name&#8217;, &#8216;shortcode_handler&#8217; );<\/span><\/p>\n<ul>\n<li>La etiqueta de nombre de shortcode es una etiqueta que WordPress buscar\u00e1 en el contenido de la publicaci\u00f3n. Debe ser en min\u00fasculas, y s\u00f3lo requiere letras, n\u00fameros y subrayados<\/li>\n<li>El manipulador de shortcode es una funci\u00f3n de devoluci\u00f3n de llamada que se ejecutar\u00e1 cuando WordPress encuentre el shortcode<\/li>\n<\/ul>\n<p>La funci\u00f3n del manipulador (handler) se define de la siguiente manera:<\/p>\n<pre><code>function shortcode_handler( $atts, $content, $tag ){}<\/code><\/pre>\n<p>La funci\u00f3n mantiene tres argumentos:<\/p>\n<ul>\n<li><b>$atts<\/b>\u00a0(<i>array<\/i>): una matriz de atributos o una cadena vac\u00eda;<\/li>\n<li><b>$content<\/b>\u00a0(<i>string<\/i>): el contenido adjunto (disponible para incluir shortcodes solamente<\/li>\n<li><b>$tag<\/b>\u00a0(<i>string<\/i>): el nombre del shortcode, \u00fatil para funciones de devoluci\u00f3n compartida.<\/li>\n<\/ul>\n<p>WordPress shortcodes pueden ser agregados al archivo o a un plugin <i>functions.php<\/i>\u00a0 de un tema. En temas podemos ejecutar la funci\u00f3n de\u00a0<b>add_shortcode<\/b> tal cual, pero en plugins debemos esperar hasta que WordPress haya sido inicializado:<\/p>\n<pre><code>function shortcodes_init(){\n\tadd_shortcode( 'shortcode_name', 'shortcode_handler' );\n}\nadd_action('init', 'shortcodes_init');<\/code><\/pre>\n<h2 id=\"simple_shortcode\">Mi Primer Self-closing Shortcode<\/h2>\n<p>Nuestro primer shortcode incluye el siguiente elemento en el contenido de la publicaci\u00f3n:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">&lt;a href=\u00bb\u00bb id=\u00bb\u00bb class=\u00bb\u00bb target=\u00bb\u00bb&gt;Button&lt;\/a&gt;<\/span><\/p>\n<p>Los atributos y el texto ser\u00e1n definidos por los usuarios como sigue:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">[kinsta_btn href=\u00bb\u00bb id=\u00bb\u00bb class=\u00bb\u00bb target=\u00bb\u00bb label=\u00bb\u00bb]<\/span><\/p>\n<p>Ahora que hemos establecido nuestro objetivo, vamos a abrir el archivo principal de un plugin y agregar el siguiente c\u00f3digo:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function kinsta_shortcodes_init(){<\/span><\/p>\n<pre><code>\tadd_shortcode( 'kinsta_btn', 'kinsta_button' );\n}\nadd_action('init', 'kinsta_shortcodes_init');<\/code><\/pre>\n<p>Despu\u00e9s defina la funci\u00f3n de manipulador (handler) de shortcode:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function kinsta_button( $atts ){<\/span><\/p>\n<pre><code>\n\t\/\/ normalize attribute keys, lowercase\n\t$atts = array_change_key_case( (array)$atts, CASE_LOWER );\n\t\n\textract( shortcode_atts(\n\t\t\tarray(\n\t\t\t\t'href'\t\t=&gt; '',\n\t\t\t\t'id'\t\t=&gt; '',\n\t\t\t\t'class'\t\t=&gt; 'green',\n\t\t\t\t'target'\t=&gt; '',\n\t\t\t\t'label'\t\t=&gt; 'Button'\n\t\t\t),\n\t\t\t$atts,\n\t\t\t'kinsta_btn'\n\t\t) );\n\n\tif( in_array( $target, array( '_blank', '_self', '_parent', '_top' ) ) ){\n\t\t$link_target = ' target=\"' . esc_attr( $target ) . '\"';\n\t}else{\n\t\t$link_target = '';\n\t}\n\n\t$output = '&lt;p&gt;&lt;a href=\"' . esc_url( $href ) . '\" id=\"' . esc_attr( $id ) . '\" class=\"button ' . esc_attr( $class ) . '\"' . $link_target . '&gt;' . esc_attr( $label ) . '&lt;\/a&gt;&lt;\/p&gt;';\n\treturn $output;\n}<\/code><\/pre>\n<p>Esto es lo que sucede en esta funci\u00f3n :<\/p>\n<ul>\n<li><a href=\"http:\/\/php.net\/manual\/en\/function.array-change-key-case.php\" target=\"_blank\" rel=\"noopener noreferrer\">array_change_key_case<\/a>\u00a0es una funci\u00f3n PHP que devuelve las claves de una matriz en may\u00fasculas o min\u00fasculas.<\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/shortcode_atts\" target=\"_blank\" rel=\"noopener noreferrer\">shortcode_atts<\/a>\u00a0es una funci\u00f3n de WordPress que combina los atributos shortcode de usuario con atributos existentes y establece valores predeterminados cuando sea necesario.<\/li>\n<li>La matriz resultante de atributos se pasa a la funci\u00f3n de <a href=\"http:\/\/php.net\/manual\/en\/function.extract.php\" target=\"_blank\" rel=\"noopener noreferrer\">extracto<\/a>\u00a0PHP, que importa variables de una matriz a la tabla de s\u00edmbolos actual.<\/li>\n<li>La condici\u00f3n siguiente comprueba el valor del <b>atributo de destino<\/b> y establece una cadena vac\u00eda si no se encuentra ning\u00fan valor v\u00e1lido.<\/li>\n<li>La variable <b>$output<\/b> almacena el c\u00f3digo HTML del elemento de anclaje, que finalmente es devuelto por la funci\u00f3n.<\/li>\n<\/ul>\n<p>Con el fin de convertir el elemento en un <a href=\"https:\/\/www.w3schools.com\/css\/css3_buttons.asp\" target=\"_blank\" rel=\"noopener noreferrer\">bot\u00f3n CSS3<\/a>, tenemos que registrar y colocar en fila una hoja de estilo a la lista de recursos disponibles:<\/p>\n<pre><code>function kinsta_enqueue_scripts() {\n\tglobal $post;\n\tif( is_a( $post, 'WP_Post' ) && has_shortcode( $post-&gt;post_content, 'kinsta_btn') ) {\n\t\twp_register_style( 'kinsta-stylesheet',  plugin_dir_url( __FILE__ ) . 'css\/style.css' );\n    \t\twp_enqueue_style( 'kinsta-stylesheet' );\n\t}\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_enqueue_scripts');<\/code><\/pre>\n<p>La funci\u00f3n define la variable global\u00a0<b>$post<\/b>\u00a0, despu\u00e9s verifica dos condiciones:<\/p>\n<ul>\n<li>si\u00a0<b>$post<\/b>\u00a0es una instancia del objeto\u00a0<b>WP_Post<\/b><\/li>\n<li>si el contenido de la publicaci\u00f3n contiene el Shortcode\u00a0<b>kinsta_btn<\/b><\/li>\n<\/ul>\n<p>Si ambas condiciones son verdaderas, la funci\u00f3n registra y pone coloca fila la hoja de estilo. No le mostrar\u00e9 el c\u00f3digo CSS aqu\u00ed, pero puede <a href=\"https:\/\/github.com\/carlodaniele\/kinsta-shortcodes\/blob\/master\/css\/style.css\" target=\"_blank\" rel=\"noopener noreferrer\">encontrarlo en Github<\/a>. Finalmente podemos agregar el shortcode <b>[kinsta_btn]<\/b>\u00a0 en el contenido de la publicaci\u00f3n como sigue:<\/p>\n<pre><code>[kinsta_btn href=\"http:\/\/www.google.com\" class=\"blue rounded\" target=\"_blank\"]<\/code><\/pre>\n<figure id=\"attachment_8991\" aria-describedby=\"caption-attachment-8991\" style=\"width: 553px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8991 size-full\" src=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/bot\u00f3n-01.png\" alt=\"Con el estilo CSS adecuado el ancla se presentar\u00e1 como un incre\u00edble bot\u00f3n CSS3\" width=\"553\" height=\"388\" srcset=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/bot\u00f3n-01.png 553w, https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/bot\u00f3n-01-300x210.png 300w, https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/bot\u00f3n-01-436x306.png 436w\" sizes=\"auto, (max-width: 553px) 100vw, 553px\" \/><figcaption id=\"caption-attachment-8991\" class=\"wp-caption-text\">Con el estilo CSS adecuado el ancla se presentar\u00e1 como un incre\u00edble bot\u00f3n CSS3<\/figcaption><\/figure>\n<h2 id=\"enclosing_shortcodes\">Construyendo\u00a0un Enclosing Shortcode<\/h2>\n<p>Si quisi\u00e9ramos la misma marca HTML de un enclosing shortcode, har\u00edamos s\u00f3lo peque\u00f1os cambios en la funci\u00f3n del manipulador anterior. Primero, registraremos el Shortcode\u00a0<b>[kinsta_btn_adv]<\/b>:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function kinsta_shortcodes_init(){<\/span><\/p>\n<pre><code>\tadd_shortcode( 'kinsta_btn_adv', 'kinsta_button_adv' );\n}\nadd_action('init', 'kinsta_shortcodes_init');<\/code><\/pre>\n<p>Despu\u00e9s, definiremos el nuevo handler:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function kinsta_button_adv( $atts, $content = null, $tag = \u00bb ){<\/span><\/p>\n<pre><code>\n\t\/\/ normalize attribute keys, lowercase\n\t$atts = array_change_key_case( (array)$atts, CASE_LOWER );\n\n\textract( shortcode_atts(\n\t\t\tarray(\n\t\t\t\t'href'\t\t=&gt; '',\n\t\t\t\t'id'\t\t=&gt; '',\n\t\t\t\t'class'\t\t=&gt; 'green',\n\t\t\t\t'target'\t=&gt; ''\n\t\t\t),\n\t\t\t$atts,\n\t\t\t'kinsta_btn'\n\t\t) );\n\n\tif( in_array( $target, array( '_blank', '_self', '_parent', '_top' ) ) ){\n\t\t$link_target = ' target=\"' . esc_attr( $target ) . '\"';\n\t}else{\n\t\t$link_target = '';\n\t}\n\n\t$output = '&lt;p&gt;&lt;a href=\"' . esc_url( $href ) . '\" id=\"' . esc_attr( $id ) . '\" class=\"button ' . esc_attr( $class ) . '\"' . $link_target . '&gt;' . esc_attr( $content ) . '&lt;\/a&gt;&lt;\/p&gt;';\n\treturn $output;\n}<\/code><\/pre>\n<p>No necesitamos el atributo <b>label<\/b> para el bot\u00f3n, ya que los usuarios pasar\u00e1n la cadena a trav\u00e9s del contenido shortcode. Teniendo dos shortcodes tenemos que cargar la hoja de estilos bajo dos condiciones. Por lo tanto, vamos a cambiar la funci\u00f3n <b>kinsta_enqueue_scripts<\/b> como sigue:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function kinsta_enqueue_scripts() {<\/span><\/p>\n<pre><code>\tglobal $post;\n\n\t\/\/ see https:\/\/codex.wordpress.org\/Function_Reference\/has_shortcode\n\t$has_shortcode = has_shortcode( $post-&gt;post_content, 'kinsta_btn') || has_shortcode( $post-&gt;post_content, 'kinsta_btn_adv');\n\t\n\tif( is_a( $post, 'WP_Post' ) && $has_shortcode ) {\n\t\t\/\/ see https:\/\/codex.wordpress.org\/Function_Reference\/plugin_dir_url\n\t\twp_register_style( 'kinsta-stylesheet',  plugin_dir_url( __FILE__ ) . 'css\/style.css' );\n\t\t\/\/ see https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\n\t\twp_enqueue_style( 'kinsta-stylesheet' );\n\t}\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_enqueue_scripts');<\/code><\/pre>\n<p>Ahora podemos usar el siguiente enclosing shortcode:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">[kinsta_btn_adv href=\u00bbhttp:\/\/kinsta.com\/blog\/\u00bb class=\u00bbred rounded\u00bb target=\u00bb_blank\u00bb]It&#8217;s Amazing! View more[\/kinsta_btn_adv]<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8992 size-full\" src=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/bot\u00f3n-02.png\" alt=\"bot\u00f3n 02\" width=\"551\" height=\"439\" srcset=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/bot\u00f3n-02.png 551w, https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/bot\u00f3n-02-300x239.png 300w, https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/bot\u00f3n-02-384x306.png 384w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><\/p>\n<h2 id=\"mce_shortcodes\">A\u00f1adiendo el\u00a0Shortcode desde\u00a0Editor Visual<\/h2>\n<p>Teclear WordPress shortcodes puede ser bastante molesto y desagradable. Por suerte, podemos hacer esta tarea r\u00e1pida y divertida gracias al <a href=\"https:\/\/codex.wordpress.org\/TinyMCE\" target=\"_blank\" rel=\"noopener noreferrer\">TinyMCE API<\/a>.<\/p>\n<p>En este \u00faltimo ejemplo, crearemos una interfaz que permitir\u00e1 a los usuarios insertar shortcodes complejos en el contenido de la publicaci\u00f3n con facilidad. Para lograr esta tarea final, necesitamos un plugin de TinyMCE y un bot\u00f3n de MCE. Volvamos a nuestro plugin de WordPress y agreguemos el siguiente c\u00f3digo:<\/p>\n<pre><code>\/\/ register TinyMCE buttons\nfunction kinsta_register_mce_buttons( $buttons ) {\n\t$buttons[] = 'kinsta';\n\treturn $buttons;\n}\n\/\/ add new buttons\nadd_filter( 'mce_buttons', 'kinsta_register_mce_buttons' );<\/code><\/pre>\n<p>Acabamos de agregar un nuevo bot\u00f3n llamado\u00a0<b>kinsta<\/b>. Ahora, registremos un plugin de TinyMCE:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function kinsta_register_mce_plugin( $plugin_array ) {<\/span><\/p>\n<pre><code>   $plugin_array['kinsta'] = plugins_url( '\/mce\/kinsta\/plugin.js', __FILE__ );\n   return $plugin_array;\n}\n\/\/ Load the TinyMCE plugin\nadd_filter( 'mce_external_plugins', 'kinsta_register_mce_plugin' );<\/code><\/pre>\n<p>Este c\u00f3digo registra el plugin de\u00a0<b>kinsta<\/b>\u00a0TinyMCE, el cual est\u00e1 localizado en la carpeta\u00a0<b>\/mce\/kinsta\/<\/b>. Abra el archivo\u00a0<b>plugin.js<\/b>\u00a0 y a\u00f1ada el siguiente JavaScript (usted puede ver\u00a0<a href=\"https:\/\/github.com\/carlodaniele\/kinsta-shortcodes\/blob\/master\/mce\/kinsta\/plugin.js\" target=\"_blank\" rel=\"noopener noreferrer\">el archivo en Github<\/a>):<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">(function() {<\/span><\/p>\n<pre class=\"lang:javascript\">\ttinymce.PluginManager.add( 'kinsta', function( editor ){});\n})();<\/pre>\n<p>El m\u00e9todo\u00a0<b>PluginManager.add<\/b>\u00a0registra el plugin kinsta. Este m\u00e9todo nos permite agregar un bot\u00f3n personalizado a la interfaz de usuario del editor:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">editor.addButton( &#8216;kinsta&#8217;, {<\/span><\/p>\n<pre><code>\ttitle: 'Kinsta buttons',\n\ttext: 'Kinsta',\n\ticon: 'code',\n\tonclick: function(){}\n});<\/code><\/pre>\n<p>La propiedad\u00a0<b>onclick<\/b>\u00a0 define una nueva funci\u00f3n an\u00f3nima, que establece las propiedades de un cuadro de di\u00e1logo:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">onclick: function(){<\/span><\/p>\n<pre><code>\teditor.windowManager.open({\n\t\ttitle: 'Kinsta buttons',\n\t\tbody: \n\t\t[\n\t\t\t{type: 'textbox', name: 'btn_url', label: 'URL'},\n\t\t\t{type: 'textbox',name: 'btn_label', label: 'Button label'},\n\t\t\t{type: 'textbox', name: 'btn_id', label: 'Button ID'},\n\t\t\t{type: 'listbox', name: 'btn_color', label: 'Button color', values: [\n\t\t\t\t{text: 'Green', value: 'green'}, \n\t\t\t\t{text: 'Blue', value: 'blue'},\n\t\t\t\t{text: 'Red', value: 'red'},\n\t\t\t\t{text: 'Grey', value: 'grey'},\n\t\t\t\t{text: 'Black', value: 'black'}\n\t\t\t]},\n\t\t\t{type: 'checkbox', name: 'btn_corners', label: 'Button corners'}\n\t\t],\n\t\tonsubmit: function(e){\n\t\t\tvar tag = 'kinsta_btn';\n\t\t\tvar href = ' href= \"' + e.data.btn_url + '\"';\n\t\t\tvar label = ' label=\"' + e.data.btn_label + '\"';\n\t\t\tvar id = ' id=\"' + e.data.btn_id + '\"';\n\t\t\tvar corners = e.data.btn_corners == true ? ' rounded' : '';\n\t\t\tvar color = e.data.btn_color;\n\t\t\tvar css_class = ' class=\"' + color + corners + '\"';\n\t\t\teditor.insertContent('[' + tag + href + id + css_class + label + ']')\n\t\t}\n\t})\n}<\/code><\/pre>\n<p>El cuadro de di\u00e1logo contiene tres cuadros de texto, un cuadro de lista y una casilla de verificaci\u00f3n. Cuando se env\u00eda el formulario, el m\u00e9todo <b>insertContent<\/b>\u00a0incluye el shortcode en el contenido de la publicaci\u00f3n.<\/p>\n<figure id=\"attachment_8994\" aria-describedby=\"caption-attachment-8994\" style=\"width: 388px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8994 size-full\" src=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/mce-caja-de-di\u00e1logo.png\" alt=\"Un cuadro de di\u00e1logo permite a los usuarios insertar shortcodes complejos en el contenido del mensaje con facilidad\" width=\"388\" height=\"337\" srcset=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/mce-caja-de-di\u00e1logo.png 388w, https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/mce-caja-de-di\u00e1logo-300x261.png 300w, https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/mce-caja-de-di\u00e1logo-352x306.png 352w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><figcaption id=\"caption-attachment-8994\" class=\"wp-caption-text\">Un cuadro de di\u00e1logo permite a los usuarios insertar shortcodes complejos en el contenido del mensaje con facilidad<\/figcaption><\/figure>\n<p>En realidad, esto es s\u00f3lo un ejemplo simple. Podr\u00edamos dar a los usuarios m\u00e1s control sobre los WordPress shortcodes, gracias a un buen n\u00famero de campos de entrada y controles que se enumeran en la <a href=\"http:\/\/archive.tinymce.com\/wiki.php\/api4:namespace.tinymce.ui\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n de TinyMCE <\/a>.<\/p>\n<p><span style=\"color: #444444;font-size: 32px\">Usos No Convencionales de Shortcodes<\/span><\/p>\n<p>De inmediato WordPress admite shortcodes s\u00f3lo en contenido de publicaci\u00f3n. De todos modos, como desarrolladores de plugins, podemos superar esta limitaci\u00f3n filtrando cualquier contenido de texto en cualquier lugar del sitio. Podemos filtrar widgets de texto:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">add_filter( &#8216;widget_text&#8217;, &#8216;shortcode_unautop&#8217;);<\/span><\/p>\n<pre><code>add_filter( 'widget_text', 'do_shortcode');<\/code><\/pre>\n<p>La primera l\u00ednea aplica la funci\u00f3n\u00a0<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/shortcode_unautop\/\" target=\"_blank\" rel=\"noopener noreferrer\">shortcode_unautop<\/a>\u00a0al contexto de widgets de texto para evitar que WordPress autom\u00e1ticamente envuelva los shortcodes dentro de los p\u00e1rrafos. La segunda l\u00ednea aplica la funci\u00f3n <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/do_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">do_shortcode<\/a>\u00a0a widgets de texto.<\/p>\n<p>Podemos filtrar extractos de publicaci\u00f3n:<\/p>\n<pre><code>add_filter( 'the_excerpt', 'do_shortcode');<\/code><\/pre>\n<p>Y podemos filtrar descripciones de t\u00e9rmino:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">add_filter( &#8216;term_description&#8217;, &#8216;do_shortcode&#8217; );<\/span><\/p>\n<p>De la misma manera, podemos generar din\u00e1micamente los t\u00edtulos de los elementos del men\u00fa de navegaci\u00f3n. Supongamos que usted desea que un elemento de men\u00fa muestre el nombre de usuario de la persona que ha iniciado sesi\u00f3n. En primer lugar, necesita un shortcode que muestre el nombre de usuario:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function kinsta_shortcodes_init(){<\/span><\/p>\n<pre><code>\tadd_shortcode( 'kinsta_usr', 'kinsta_username' );\n}\nadd_action('init', 'kinsta_shortcodes_init');\n\nfunction kinsta_username( $atts = array() ){\n\n\t$id = get_current_user_id();\n\t\n\tif ( 0 == $id ) {\n\t\t\/\/ Not logged in\n\t\treturn __( 'Guest' );\n\t} else {\n\t\t\/\/ Logged in\n\t\t$user = get_userdata( $id );\n\t\treturn $user-&gt;user_login;\n\t}\n}<\/code><\/pre>\n<p>Ahora puede escribir el contenido de la publicaci\u00f3n <b>\u2018[kinsta_usr]\u2019<\/b>\u00a0para obtener el login del usuario actual. Para utilizar este shortcode en los elementos del men\u00fa, tenemos que filtrar la lista mediante el filtro <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_objects\/\" target=\"_blank\" rel=\"noopener noreferrer\">wp_nav_menu_objects<\/a>\u00a0:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function kinsta_dynamic_menu_items( $menu_items ) {<\/span><\/p>\n<pre><code>\n\tglobal $shortcode_tags;\n\n\tforeach ( $menu_items as $menu_item ) {\n\n\t\tif ( has_shortcode( $menu_item-&gt;title, 'kinsta_usr' ) && isset( $shortcode_tags['kinsta_usr'] ) ){\n\n\t\t\t$menu_item-&gt;title = do_shortcode( $menu_item-&gt;title, '[kinsta_usr]' );\n\n\t\t\tif ( 0 == get_current_user_id() ){\n\n\t\t\t\t$menu_item-&gt;url = wp_login_url();\n\t\t\t\n\t\t\t}\n\t\t}\n\t}\n\treturn $menu_items;\n}\nadd_filter( 'wp_nav_menu_objects', 'kinsta_dynamic_menu_items' );<\/code><\/pre>\n<p>Primero, definimos la variable global de\u00a0<b>$shortcode_tags<\/b>. Despu\u00e9s, marcamos dos condiciones:<\/p>\n<ul>\n<li>si alg\u00fan elemento del men\u00fa contiene el shortcode<b> [kinsta_usr]<\/b><\/li>\n<li>si el shortcode\u00a0<b>[kinsta_usr]<\/b>\u00a0existe<\/li>\n<\/ul>\n<p>Si ambas condiciones son verdaderas,\u00a0<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/do_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">do_Shortcode<\/a>\u00a0busca cualquier t\u00edtulo de art\u00edculo del menu para\u00a0<b>\u2018[kinsta_usr]\u2019<\/b>\u00a0y ejecuta el handler de shortcode. Para usuarios que no han iniciado sesi\u00f3n cambiamos el art\u00edculo del men\u00fa URL a\u00a0<a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_login_url\" target=\"_blank\" rel=\"noopener noreferrer\">wp_login_url()<\/a>. Ahora vaya a <b>Appearance Menus Screen <\/b>y agregue un nuevo elemento de men\u00fa al men\u00fa de navegaci\u00f3n como se muestra en la imagen de abajo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8995 size-full\" src=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/menu-shortcode.png\" alt=\"menu shortcode\" width=\"420\" height=\"250\" srcset=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/menu-shortcode.png 420w, https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/menu-shortcode-300x179.png 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/p>\n<p>Guarde el men\u00fa y vea el sitio.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8996 size-full\" src=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/menu.png\" alt=\"menu\" width=\"436\" height=\"218\" srcset=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/menu.png 436w, https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/menu-300x150.png 300w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><\/p>\n<h2>Conclusi\u00f3n<\/h2>\n<p>Ahora sabemos c\u00f3mo construir WordPress shortcodes, c\u00f3mo permitir que los usuarios los agreguen en cualquier lugar del sitio y c\u00f3mo construir di\u00e1logos de TinyMCE para configurar WordPress shortcodes complejos en pocos momentos. \u00bfAlguna vez ha creado WordPress shortcodes personalizados? Comparta sus ideas con nosotros en los comentarios a continuaci\u00f3n.<\/p>\n<p><!-- Featured image background provided by https:\/\/www.heropatterns.com\/ --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Seg\u00fan la\u00a0definici\u00f3n de WordPress.com, un c\u00f3digo corto o shortcode es un c\u00f3digo espec\u00edfico de WordPress que le permite hacer cosas ingeniosas con muy poco esfuerzo. Los &#8230;<\/p>\n","protected":false},"author":36,"featured_media":8997,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[414,172],"topic":[],"class_list":["post-8990","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webdev","tag-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.1.2 (Yoast SEO v25.8) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducci\u00f3n de WordPress Shortcodes para Desarrolladores<\/title>\n<meta name=\"description\" content=\"WordPress shortcodes proporcionan una forma r\u00e1pida y f\u00e1cil para llevar a cabo diferentes tareas. A continuaci\u00f3n los desarrolladores pueden aprender su uso.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducci\u00f3n de WordPress Shortcodes para Desarrolladores\" \/>\n<meta property=\"og:description\" content=\"WordPress shortcodes proporcionan una forma r\u00e1pida y f\u00e1cil para llevar a cabo diferentes tareas. A continuaci\u00f3n los desarrolladores pueden aprender su uso.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-10T11:46:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-08T22:07:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2018\/11\/kinsta-ES-OG.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"WordPress shortcodes proporcionan una forma r\u00e1pida y f\u00e1cil para llevar a cabo diferentes tareas. A continuaci\u00f3n los desarrolladores pueden aprender su uso.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/2017\/05\/wordpress-shortcodes-tw.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/staging.kinsta.site\/es\/#\/schema\/person\/2d28bf60168ccf5e1a3004e843d481ad\"},\"headline\":\"Introducci\u00f3n de WordPress Shortcodes para Desarrolladores\",\"datePublished\":\"2017-05-10T11:46:25+00:00\",\"dateModified\":\"2020-11-08T22:07:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/\"},\"wordCount\":1822,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/staging.kinsta.site\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/wordpress-shortcodes.png\",\"keywords\":[\"webdev\",\"WordPress\"],\"articleSection\":[\"Desarrollo de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/\",\"url\":\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/\",\"name\":\"Introducci\u00f3n de WordPress Shortcodes para Desarrolladores\",\"isPartOf\":{\"@id\":\"https:\/\/staging.kinsta.site\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/wordpress-shortcodes.png\",\"datePublished\":\"2017-05-10T11:46:25+00:00\",\"dateModified\":\"2020-11-08T22:07:20+00:00\",\"description\":\"WordPress shortcodes proporcionan una forma r\u00e1pida y f\u00e1cil para llevar a cabo diferentes tareas. A continuaci\u00f3n los desarrolladores pueden aprender su uso.\",\"breadcrumb\":{\"@id\":\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#primaryimage\",\"url\":\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/wordpress-shortcodes.png\",\"contentUrl\":\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/wordpress-shortcodes.png\",\"width\":1024,\"height\":512,\"caption\":\"wordpress shortcodes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/staging.kinsta.site\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducci\u00f3n de WordPress Shortcodes para Desarrolladores\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/staging.kinsta.site\/es\/#website\",\"url\":\"https:\/\/staging.kinsta.site\/es\/\",\"name\":\"Kinsta\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/staging.kinsta.site\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/staging.kinsta.site\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/staging.kinsta.site\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/staging.kinsta.site\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/staging.kinsta.site\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/kinsta.png\",\"contentUrl\":\"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/kinsta.png\",\"width\":580,\"height\":580,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/staging.kinsta.site\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/staging.kinsta.site\/es\/#\/schema\/person\/2d28bf60168ccf5e1a3004e843d481ad\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/staging.kinsta.site\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/57c0b51e899a9e0e953de1b66a1d27a416331bc25ca0ffe68ab29d6e16ef2269?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/57c0b51e899a9e0e953de1b66a1d27a416331bc25ca0ffe68ab29d6e16ef2269?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for over 10 years, also in collaboration with Italian and European universities and educational institutions. He has written dozens of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find Carlo on Twitter.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/staging.kinsta.site\/es\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introducci\u00f3n de WordPress Shortcodes para Desarrolladores","description":"WordPress shortcodes proporcionan una forma r\u00e1pida y f\u00e1cil para llevar a cabo diferentes tareas. A continuaci\u00f3n los desarrolladores pueden aprender su uso.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/","og_locale":"es_ES","og_type":"article","og_title":"Introducci\u00f3n de WordPress Shortcodes para Desarrolladores","og_description":"WordPress shortcodes proporcionan una forma r\u00e1pida y f\u00e1cil para llevar a cabo diferentes tareas. A continuaci\u00f3n los desarrolladores pueden aprender su uso.","og_url":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/","og_site_name":"Kinsta","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2017-05-10T11:46:25+00:00","article_modified_time":"2020-11-08T22:07:20+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2018\/11\/kinsta-ES-OG.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"WordPress shortcodes proporcionan una forma r\u00e1pida y f\u00e1cil para llevar a cabo diferentes tareas. A continuaci\u00f3n los desarrolladores pueden aprender su uso.","twitter_image":"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/2017\/05\/wordpress-shortcodes-tw.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Carlo Daniele","Tiempo de lectura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#article","isPartOf":{"@id":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/staging.kinsta.site\/es\/#\/schema\/person\/2d28bf60168ccf5e1a3004e843d481ad"},"headline":"Introducci\u00f3n de WordPress Shortcodes para Desarrolladores","datePublished":"2017-05-10T11:46:25+00:00","dateModified":"2020-11-08T22:07:20+00:00","mainEntityOfPage":{"@id":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/"},"wordCount":1822,"commentCount":0,"publisher":{"@id":"https:\/\/staging.kinsta.site\/es\/#organization"},"image":{"@id":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/wordpress-shortcodes.png","keywords":["webdev","WordPress"],"articleSection":["Desarrollo de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/","url":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/","name":"Introducci\u00f3n de WordPress Shortcodes para Desarrolladores","isPartOf":{"@id":"https:\/\/staging.kinsta.site\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#primaryimage"},"image":{"@id":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/wordpress-shortcodes.png","datePublished":"2017-05-10T11:46:25+00:00","dateModified":"2020-11-08T22:07:20+00:00","description":"WordPress shortcodes proporcionan una forma r\u00e1pida y f\u00e1cil para llevar a cabo diferentes tareas. A continuaci\u00f3n los desarrolladores pueden aprender su uso.","breadcrumb":{"@id":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#primaryimage","url":"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/wordpress-shortcodes.png","contentUrl":"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2017\/05\/wordpress-shortcodes.png","width":1024,"height":512,"caption":"wordpress shortcodes"},{"@type":"BreadcrumbList","@id":"https:\/\/staging.kinsta.site\/es\/blog\/wordpress-shortcodes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/staging.kinsta.site\/es\/"},{"@type":"ListItem","position":2,"name":"Introducci\u00f3n de WordPress Shortcodes para Desarrolladores"}]},{"@type":"WebSite","@id":"https:\/\/staging.kinsta.site\/es\/#website","url":"https:\/\/staging.kinsta.site\/es\/","name":"Kinsta","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/staging.kinsta.site\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/staging.kinsta.site\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/staging.kinsta.site\/es\/#organization","name":"Kinsta","url":"https:\/\/staging.kinsta.site\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/staging.kinsta.site\/es\/#\/schema\/logo\/image\/","url":"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/kinsta.png","contentUrl":"https:\/\/staging.kinsta.site\/es\/wp-content\/uploads\/sites\/8\/2021\/08\/kinsta.png","width":580,"height":580,"caption":"Kinsta"},"image":{"@id":"https:\/\/staging.kinsta.site\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES"]},{"@type":"Person","@id":"https:\/\/staging.kinsta.site\/es\/#\/schema\/person\/2d28bf60168ccf5e1a3004e843d481ad","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/staging.kinsta.site\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/57c0b51e899a9e0e953de1b66a1d27a416331bc25ca0ffe68ab29d6e16ef2269?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/57c0b51e899a9e0e953de1b66a1d27a416331bc25ca0ffe68ab29d6e16ef2269?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for over 10 years, also in collaboration with Italian and European universities and educational institutions. He has written dozens of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find Carlo on Twitter.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/staging.kinsta.site\/es\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/wp\/v2\/posts\/8990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/wp\/v2\/comments?post=8990"}],"version-history":[{"count":10,"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/wp\/v2\/posts\/8990\/revisions"}],"predecessor-version":[{"id":37667,"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/wp\/v2\/posts\/8990\/revisions\/37667"}],"alternate":[{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/staging.kinsta.site\/es\/wp-json\/kinsta\/v1\/posts\/8990\/translations\/es"},{"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/kinsta\/v1\/posts\/8990\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/wp\/v2\/media\/8997"}],"wp:attachment":[{"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/wp\/v2\/media?parent=8990"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/wp\/v2\/tags?post=8990"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/staging.kinsta.site\/es\/wp-json\/wp\/v2\/topic?post=8990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}