{"id":8059,"date":"2017-02-08T05:46:36","date_gmt":"2017-02-08T13:46:36","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=8059"},"modified":"2025-01-17T12:05:47","modified_gmt":"2025-01-17T11:05:47","slug":"tema-twenty-seventeen","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/","title":{"rendered":"Introducci\u00f3n de Un Desarrollador al Tema Twenty Seventeen"},"content":{"rendered":"<p>Con el lanzamiento de WordPress 4.7, tambi\u00e9n lleg\u00f3 el nuevo <a href=\"https:\/\/wordpress.org\/themes\/twentyseventeen\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tema Twenty Seventeen <\/a>. M\u00e1s que todos sus predecesores, el nuevo tema por defecto es altamente personalizable para usuarios y desarrolladores, es f\u00e1cil de usar y perfectamente adecuado para fines personales y profesionales. Por otra parte, es genial cuando se trata del funcionamiento del sitio, como Brian explica en\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/google-pagespeed-insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u00bfC\u00f3mo Sacar 100\/100 en Google PageSpeed Insights con WordPress?<\/a>.<\/p>\n<p>Revisamos el \u00faltimo tema por defecto, Twenty Nineteen. Si tienes curiosidad por saber qu\u00e9 hay de nuevo, echa un vistazo a nuestro an\u00e1lisis en profundidad: <a href=\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-nineteen\/\">Introducci\u00f3n al Tema Twenty Nineteen<\/a> (Tema para Gutenberg)<\/p>\n<p>El tema Twenty Seventeen proporciona el vestido perfecto para nuevas caracter\u00edsticas incre\u00edbles de WordPress como el <a href=\"https:\/\/make.wordpress.org\/core\/2016\/11\/26\/video-headers-in-4-7\/\" target=\"_blank\" rel=\"noopener noreferrer\">encabezado de video personalizable<\/a>. Adem\u00e1s, proporciona caracter\u00edsticas espec\u00edficas del tema como secciones de la primera p\u00e1gina, soporte de iconos SVG, iconos de edici\u00f3n visible en el Personalizador.<\/p>\n<p>(Lectura sugerida:\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-twenty\/\">Introducci\u00f3n al Tema Twenty Twenty<\/a>)<\/p>\n<p>Ya se ha escrito mucho sobre el tema de Twenty Seventeen , por lo que en este post no har\u00e9 una nueva lista de sus caracter\u00edsticas y funciones interesantes. En su lugar, voy a proponer cinco peque\u00f1os tutoriales con el objetivo de ayudar a los desarrolladores y usuarios avanzados a sacar el m\u00e1ximo provecho del nuevo tema por defecto de WordPress. Gracias a un tema hijo, vamos a:<\/p>\n<ul style=\"margin-left: 30px\">\n<li><a href=\"#header\">Personalizar el encabezado de la p\u00e1gina frontal<\/a><\/li>\n<li><a href=\"#video\">Establecer controles de encabezado de video personalizados<\/a><\/li>\n<li><a href=\"#sections\">A\u00f1adir m\u00e1s secciones a la p\u00e1gina frontal<\/a><\/li>\n<li><a href=\"#svgs\">A\u00f1adir iconos SVG personalizados al men\u00fa de iconos sociales<\/a><\/li>\n<li><a href=\"#scrolling\">Animar el movimiento de la p\u00e1gina y construir un sitio web de una p\u00e1gina<\/a><\/li>\n<\/ul>\n<h2>Un Tema Secundario para Mejorar las funciones del Tema Twenty Seventeen<\/h2>\n<p>Asumir\u00e9 que usted es familiar con <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-child-wordpress\/\">los temas hijos de WordPress<\/a>. Si necesita recordar, t\u00f3mese el tiempo para leerlo en nuestro art\u00edculo <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-child-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tema Secundario de WordPress \u2013 C\u00f3mo Empezar<\/a>. Cuando haya terminado, cree una nueva carpeta en el directorio\u00a0<i>\/wp-content\/themes\/<\/i>\u00a0 con un nombre \u00fanico y reconocible como <strong>Twenty Seventeen<\/strong><strong>-secundario<\/strong>. En esta carpeta, cree el\u00a0siguiente\u00a0<em>style.css<\/em>:<\/p>\n<pre><code class=\"language-css\"> \/*\nTheme Name:   Twenty Seventeen Child\n Theme URI:    http:\/\/example.com\/\n Description:  Twenty Seventeen Child Theme\n Author:       Your Name\n Author URI:   http:\/\/example.com\n Template:     twentyseventeen\n Version:      1.0.0\n License:      GNU General Public License v2 or later\n License URI:  http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready\n Text Domain:  twentyseventeen-child\n*\/<\/code><\/pre>\n<p>El encabezado de hoja de estilo proporciona los detalles necesarios sobre el tema en forma de comentarios. No se requieren etiquetas adicionales, ni a\u00f1adiremos declaraciones de estilo personalizadas en nuestros ejemplos. Despu\u00e9s, tenemos que insertar las hojas de estilo primario y secundario. A\u00f1adamos la siguiente funci\u00f3n al archivo <i>functions.php<\/i> del tema secundario:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function childtheme_enqueue_styles() {<\/span><\/p>\n<pre><code class=\"language-php\">  wp_enqueue_style( 'parent-style', \n    get_template_directory_uri() . '\/style.css' );\n\n  wp_enqueue_style( 'child-style',\n    get_stylesheet_directory_uri() . '\/style.css',\n    array( 'parent-style' ),\n    wp_get_theme()-&gt;get('Version')\n  );\n}\nadd_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles' );<\/code><\/pre>\n<p>Vamos a activar el tema secundario y comenzar a personalizar el Tema Twenty Seventeen.<\/p>\n<h2 id=\"header\">Personalizando el Encabezado de la P\u00e1gina Frontal<\/h2>\n<p>Una de las caracter\u00edsticas m\u00e1s atractivas del tema Twenty Seventeen es el encabezado de pantalla completa en la portada. En la secci\u00f3n Medios del Personalizador del Encabezado puede establecer una o m\u00e1s im\u00e1genes de fondo o un v\u00eddeo de fondo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9054 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/01\/header_video-1024x490.jpg\" alt=\"Tema Twenty Seventeen\" width=\"1024\" height=\"490\"><\/p>\n<p>El Tema Twenty Seventeen permite personalizar el encabezado desde el archivo <i>functions.php<\/i> de un tema secundario, gracias al filtro <strong>twentyseventeen_custom_header_args<\/strong>. A trav\u00e9s de este filtro podemos pasar a una funci\u00f3n de rellamada de una matriz de los siguientes args:<\/p>\n<ul>\n<li>\u2018<strong>default-image<\/strong>\u2018 (<i>string<\/i>) URL de imagen de fondo;<\/li>\n<li>\u2018<strong>default_text_color<\/strong>\u2018 (<i>string<\/i>) color del texto del encabezado;<\/li>\n<li>\u2018<strong>width<\/strong>\u2018 (<i>integer<\/i>) anchura del encabezado (por defecto es 2000);<\/li>\n<li>\u2018<strong>height<\/strong>\u2018 (<i>integer<\/i>) altura del encabezado (por defecto es 1200);<\/li>\n<li>\u2018<strong>flex-height<\/strong>\u2018 (<i>bool<\/i>) Soporte flexible para altura de encabezado (por defecto es\u00a0<strong>true<\/strong>);<\/li>\n<li>\u2018<strong>video<\/strong>\u2018 (<i>bool<\/i>) soporte de video (por defecto es\u00a0<strong>true<\/strong>);<\/li>\n<li>\u2018<strong>wp-head-callback<\/strong>\u2018 (<i>string<\/i>) Funci\u00f3n de rellamada utilizada para dise\u00f1ar la imagen del encabezado y el texto en el blog (el valor por defecto es\u00a0<strong>twentyseventeen_header_style<\/strong>)<\/li>\n<\/ul>\n<p>Como ejemplo, vamos a agregar el siguiente c\u00f3digo al archivo de funciones:<\/p>\n<pre><code class=\"language-php\">function my_custom_header_args( $args ) {\n  $args['default-image'] = get_theme_file_uri( '\/assets\/images\/header.jpg' );\n  return $args;\n}\nadd_filter( 'twentyseventeen_custom_header_args', 'my_custom_header_args' );<\/code><\/pre>\n<p>La funci\u00f3n\u00a0<strong>get_theme_file_uri<\/strong>\u00a0 ha sido introducida en WordPress 4.7, y nos ayuda mucho en el desarrollo de nuestro tema hijo. La funci\u00f3n busca primero el tema secundario para el archivo especificado y, despu\u00e9s, regresa al tema primario si no se ha encontrado ning\u00fan archivo.<\/p>\n<blockquote style=\"margin-left: 30px;font-size: 1em\"><p>Nota: para usar\u00a0<strong>get_theme_file_uri<\/strong>\u00a0y su funci\u00f3n acompa\u00f1ante\u00a0<strong>get_theme_file_path<\/strong>\u00a0El tema secundario debe respetar la estructura de archivos de los primarios.<\/p><\/blockquote>\n<h2 id=\"video\">Establecer Controles de Encabezado de Video Personalizados<\/h2>\n<p>El video de encabezado es un elemento central de WordPress que es modificado por Tema Twenty Seventeen gracias al filtro <strong>header_video_settings<\/strong>\u00a0de WordPress. Podemos modificar estos ajustes de nuevo, devolviendo una lista personalizada de ajustes a trav\u00e9s del mismo filtro. Vamos a agregar el siguiente c\u00f3digo en el tema secundario <i>functions.php<\/i>:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function childtheme_setup() {<\/span><\/p>\n<pre><code class=\"language-php\">  remove_filter( 'header_video_settings', 'twentyseventeen_video_controls' );\n}\nadd_action( 'after_setup_theme', 'childtheme_setup' );\n\nfunction childtheme_video_controls( $settings ) {\n  $settings['l10n']['play'] = __( 'Play', 'twentyseventeen-child' );\n  $settings['l10n']['pause'] = __( 'Pause', 'twentyseventeen-child' );\n  return $settings;\n}\nadd_filter( 'header_video_settings', 'childtheme_video_controls' );<\/code><\/pre>\n<p>Primero, hemos retirado la funci\u00f3n\u00a0<strong>twentyseventeen_video_controls<\/strong>\u00a0 adjunta al filtro\u00a0<strong>header_video_settings<\/strong>\u00a0. Luego, hemos a\u00f1adido nuestros controles de video personalizados. En este ejemplo, acabamos de usar dos palabras, pero entienda el punto: puede usar este filtro para reemplazar los iconos predeterminados con sus gr\u00e1ficos personalizados.<\/p>\n<h2 id=\"sections\">A\u00f1adir M\u00e1s Secciones a la P\u00e1gina Frontal<\/h2>\n<p>El Tema Twenty Seventeen proporciona una p\u00e1gina frontal est\u00e1tica dividida en secciones. Cada secci\u00f3n toma su contenido de una p\u00e1gina est\u00e1tica y remonta una imagen a la pantalla completa (la imagen destacada de cada p\u00e1gina).<\/p>\n<figure id=\"attachment_9057\" aria-describedby=\"caption-attachment-9057\" style=\"width: 299px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9057\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/01\/theme_options.png\" alt=\"Theme options\" width=\"299\" height=\"831\"><figcaption id=\"caption-attachment-9057\" class=\"wp-caption-text\">Las secciones de la p\u00e1gina principal se pueden configurar en el panel Opciones de Personalizador de Tema<\/figcaption><\/figure>\n<p>Por defecto, el Tema Twenty Seventeen admite hasta cuatro secciones, pero podemos agregar un n\u00famero arbitrario de secciones gracias al filtro <strong>twentyseventeen_front_page_sections<\/strong>. Como por ejemplo, vamos a a\u00f1adir la siguiente l\u00ednea en el tema secundario <i>functions.php<\/i>\u00a0:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">add_filter( &#8216;twentyseventeen_front_page_sections&#8217;, function(){ return 6; } );<\/span><\/p>\n<figure id=\"attachment_9058\" aria-describedby=\"caption-attachment-9058\" style=\"width: 305px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9058\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/01\/additional_sections.png\" alt=\"Additional sections\" width=\"305\" height=\"303\"><figcaption id=\"caption-attachment-9058\" class=\"wp-caption-text\">Una versi\u00f3n mejorada del panel Opciones de Tema<\/figcaption><\/figure>\n<h2 id=\"svgs\">A\u00f1adiendo m\u00e1s SVGs (Gr\u00e1ficos Vectoriales Redimensionables)<\/h2>\n<p>El soporte de gr\u00e1ficos SVG es una de las caracter\u00edsticas m\u00e1s interesantes de Twenty Seventeen. El tema ofrece un buen n\u00famero de iconos SVG, agrupados en el archivo sprite <i>\/assets\/images\/svg-icons.svg<\/i>. Podemos apreciar SVGs en el men\u00fa de enlaces sociales en el pie de p\u00e1gina. Podemos reemplazar estos iconos o a\u00f1adir nuestros iconos sociales personalizados gracias a la funci\u00f3n b\u00e1sica <strong>get_theme_file_path<\/strong>\u00a0y al filtro\u00a0<strong>twentyseventeen_social_links_icons<\/strong>\u00a0.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-9063\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/01\/footer-1024x524.png\" alt=\"Twenty Seventeen footer\" width=\"1024\" height=\"524\"><\/p>\n<p>Pie de p\u00e1gina del Tema Veinte Diecisiete<\/p>\n<p>Supongamos que desea agregar un enlace a su incre\u00edble p\u00e1gina de proyecto Kickstarter, pero Twenty Seventeen no proporciona el icono SVG correspondiente.<\/p>\n<p>Primero necesita un archivo sprite SVG personalizado como el siguiente:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">&lt;svg style=\u00bbposition: absolute; width: 0; height: 0; overflow: hidden;\u00bb version=\u00bb1.1&#8243; xmlns=\u00bbhttp:\/\/www.w3.org\/2000\/svg\u00bb xmlns:xlink=\u00bbhttp:\/\/www.w3.org\/1999\/xlink\u00bb&gt;<\/span><\/p>\n<pre><code class=\"language-markup\">&lt;defs&gt;\n&lt;symbol id=\"icon-kickstarter\" viewBox=\"0 0 16 16\"&gt;\n&lt;path d=\"M6.406 5.453L9.34 1.2C9.895.4 10.61 0 11.49 0c.715 0 1.335.254 1.86.762.522.51.784 1.117.784 1.826 0 .523-.138.986-.416 1.386L11.073 7.82l3.235 4.102c.323.408.485.886.485 1.433 0 .724-.254 1.345-.763 1.865-.508.52-1.124.78-1.848.78-.793 0-1.398-.258-1.814-.774l-3.962-4.944v2.726c0 .778-.135 1.383-.405 1.814C5.51 15.607 4.8 16 3.86 16c-.855 0-1.518-.29-1.987-.866-.44-.532-.66-1.237-.66-2.114V2.91c0-.83.224-1.516.67-2.055C2.348.285 2.995 0 3.82 0c.786 0 1.44.285 1.964.855.292.316.477.635.554.96.047.2.07.572.07 1.12v2.518z\"\/&gt;\n&lt;\/symbol&gt;\n&lt;\/defs&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<p>El atributo <strong>id<\/strong> del elemento de <strong>s\u00edmbolo<\/strong> identifica el icono social y su valor se utilizar\u00e1 m\u00e1s adelante en nuestro c\u00f3digo.<\/p>\n<p>Ahora tenemos que incluir el nuevo sprite SVG en la p\u00e1gina del archivo de funciones del tema secundario:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function childtheme_include_svg_icons() {<\/span><\/p>\n<pre><code class=\"language-php\">  \/\/ Define SVG sprite file.\n  $custom_svg_icons = get_theme_file_path( '\/assets\/images\/svg-custom-icons.svg' );\n\n  \/\/ If it exists, include it.\n  if ( file_exists( $custom_svg_icons ) ) {\n    require_once( $custom_svg_icons );\n  }\n}\nadd_action( 'wp_footer', 'childtheme_include_svg_icons', 99999 );<\/code><\/pre>\n<p>Esta funci\u00f3n es muy parecida a la funci\u00f3n correspondiente <strong>twentyseventeen_include_svg_icons<\/strong>\u00a0definida en el archivo del Tema Veinte Diecisiete <i>functions.php<\/i>. La diferencia principal es que en nuestra funci\u00f3n personalizada estamos utilizando <strong>get_theme_file_path<\/strong>\u00a0para obtener el archivo SVG del tema secundario.<br \/>\nFinalmente, podemos agregar nuestro icono de Kickstarter al conjunto de iconos de V\u00ednculos Sociales compatibles:<\/p>\n<pre><code class=\"language-php\">function childtheme_social_links_icons( $social_links_icons ) {\n  $social_links_icons['kickstarter.com'] = 'kickstarter';\n  return $social_links_icons;\n}\nadd_filter( 'twentyseventeen_social_links_icons', 'childtheme_social_links_icons' );<\/code><\/pre>\n<p>Agregue el elemento Kickstarter al men\u00fa Lazos Sociales y salte al pie de p\u00e1gina para apreciar el resultado de nuestro trabajo.<\/p>\n<figure id=\"attachment_9059\" aria-describedby=\"caption-attachment-9059\" style=\"width: 369px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9059\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/01\/kikstarter.png\" alt=\"kikstarter\" width=\"369\" height=\"373\"><figcaption id=\"caption-attachment-9059\" class=\"wp-caption-text\">Un men\u00fa de Lazos Sociales Personalizado<\/figcaption><\/figure>\n<h2 id=\"scrolling\">Construyendo un Sitio Web de Una P\u00e1gina Desplegable<\/h2>\n<p>Incluso si el Tema Twenty Seventeen proporciona una p\u00e1gina principal de varias secciones, el desplazamiento animado no es una caracter\u00edstica. El tema utiliza el plugin jQuery ScrollTo para crear un efecto de desplazamiento animado. Desafortunadamente, la animaci\u00f3n se activa s\u00f3lo cuando el usuario hace clic en la flecha de navegaci\u00f3n hacia abajo y no est\u00e1 disponible para los elementos del men\u00fa. Pero somos desarrolladores y podemos dar a Twenty Seventeen m\u00e1s poderes. Por lo tanto, en este \u00faltimo ejemplo, extenderemos la funcionalidad de desplazamiento animado para que el administrador del sitio pueda crear un sitio web animado de una p\u00e1gina.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-9060 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/01\/nav_menu.png\" alt=\"Navigation menu in twenty seventeen theme\" width=\"782\" height=\"468\"><\/p>\n<p>Cuando el usuario hace clic en el icono de flecha en el men\u00fa de navegaci\u00f3n, la primera p\u00e1gina se desplaza hasta la secci\u00f3n de la primera p\u00e1gina<\/p>\n<p>En el Tema Twenty Seventeen el efecto de animaci\u00f3n es controlado por el archivo\u00a0<i>global.js<\/i>\u00a0, colocado en la carpeta\u00a0<i>\/assets\/js\/<\/i>. Por lo tanto, nuestra primera tarea es copiar y pegar global.js desde su ubicaci\u00f3n original a la carpeta correspondiente del tema secundario.<\/p>\n<figure id=\"attachment_9061\" aria-describedby=\"caption-attachment-9061\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9061\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/01\/child_theme_file_structure.png\" alt=\"File structure\" width=\"300\" height=\"201\"><figcaption id=\"caption-attachment-9061\" class=\"wp-caption-text\">La estructura del tema secundario<\/figcaption><\/figure>\n<p>Ahora podemos empezar a codificar. Para lograr esta tarea final, vamos a<\/p>\n<ul>\n<li>obligar a WordPress a cargar el archivo global.js del tema secundario en lugar del archivo primario original,<\/li>\n<li>a\u00f1adir una clase CSS espec\u00edfica a los enlaces del men\u00fa,<\/li>\n<li>agregar un ID a cada secci\u00f3n en la portada,<\/li>\n<li>modificar el archivo global.js para obtener el efecto de animaci\u00f3n.<\/li>\n<\/ul>\n<h3>1. Obligar\u00a0WordPress a Cargar el Archivo del Tema Secundario\u00a0<em>global.js<\/em><\/h3>\n<p>Modifiquemos la funci\u00f3n\u00a0<strong>childtheme_enqueue_styles<\/strong>\u00a0 definida en nuestro primer ejemplo de la siguiente forma:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function childtheme_enqueue_styles() {<\/span><\/p>\n<pre><code class=\"language-php\">  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\n\n  wp_enqueue_style( 'child-style',\n    get_stylesheet_directory_uri() . '\/style.css',\n    array( 'parent-style' ),\n    wp_get_theme()-&gt;get('Version')\n  );\n\n  if( is_front_page() ){\n    wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '\/assets\/js\/global.js' ), array( 'jquery' ), '1.0', true );\n  }\n}\nadd_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles' );<\/code><\/pre>\n<p>Si la p\u00e1gina actual es la primera p\u00e1gina, WordPress encola el archivo <i>global.js<\/i> del tema secundario. Si no existe, WordPress carga <i>global.js<\/i> del primario.<\/p>\n<p><span style=\"color: #444444;font-size: 26px\">2. A\u00f1adiendo una Clase CSS Class al\u00a0Men\u00fa\u00a0Enlaces<\/span><\/p>\n<p>Para agregar una clase CSS al men\u00fa de <strong>a<\/strong> elementos, podemos usar el filtro <strong>nav_menu_link_attributes<\/strong>\u00a0. A\u00f1ada el siguiente c\u00f3digo en functions.php:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">function childtheme_theme_menu_class($atts, $item, $args) {<\/span><\/p>\n<pre><code class=\"language-php\">  if( is_array( $atts ) ) {\n    $atts['class'] = 'nav-menu-scroll-down';\n  }\n  return $atts;\n}\nadd_filter('nav_menu_link_attributes','childtheme_theme_menu_class', 0,3);<\/code><\/pre>\n<p>La marcaci\u00f3n del elemento de men\u00fa cambiar\u00e1 de la siguiente manera:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">&lt;li id=\u00bbmenu-item-96&#8243; class=\u00bbsections menu-item menu-item-type-custom menu-item-object-custom menu-item-96&#8243;&gt;<\/span><\/p>\n<pre><code class=\"language-markup\">  &lt;a href=\"\/kinsta\/#section-1\" class=\"nav-menu-scroll-down\"&gt;Section 1&lt;\/a&gt;\n&lt;\/li&gt;<\/code><\/pre>\n<p>Ahora podemos seleccionar f\u00e1cilmente cualquier enlace de men\u00fa desde un script.<\/p>\n<p><span style=\"color: #444444;font-size: 26px\">3. A\u00f1adiendo IDs a las Secciones de la Portada<\/span><\/p>\n<p>Con el fin de\u00a0 hacer que la p\u00e1gina sea desplegable, debemos crear objetivos de v\u00ednculo de men\u00fa proporcionando un atributo <strong>id<\/strong> a cada secci\u00f3n. Copie y pegue el archivo primario <i>content-front-page-panels.php<\/i>\u00a0desde\u00a0<i>\/template-parts\/page\/<\/i>\u00a0en la carpeta del mismo tema hijo. Luego vaya a la l\u00ednea 30 y c\u00e1mbielo como sigue:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">&lt;div class=\u00bbpanel-content\u00bb id=&lt;?php echo get_post()-&gt;post_name; ?&gt;\u00bb&gt;<\/span><\/p>\n<p>Ahora las secciones de la primera p\u00e1gina tienen identificaciones que nos permiten apuntarlas desde el men\u00fa de navegaci\u00f3n. Aqu\u00ed est\u00e1 la nueva marca de los wrappers de secci\u00f3n:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">&lt;div class=\u00bbpanel-content\u00bb id=\u00bbsection-1&#8243;&gt;&#8230;&lt;\/div&gt;<\/span><\/p>\n<blockquote style=\"margin-left: 30px;font-size: 1em\"><p>Tenga en cuenta que el valor del atributo <strong>id<\/strong> ser\u00e1 el post slug.<\/p><\/blockquote>\n<figure id=\"attachment_9055\" aria-describedby=\"caption-attachment-9055\" style=\"width: 299px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9055\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/01\/section1.png\" alt=\"Navigation\" width=\"299\" height=\"458\"><figcaption id=\"caption-attachment-9055\" class=\"wp-caption-text\">La imagen muestra la URL de un enlace de men\u00fa<\/figcaption><\/figure>\n<h3>4. Modificar el Archivo global.js<\/h3>\n<p>Ahora vamos a abrir el archivo <i>global.js<\/i> del tema secundario y declarar la siguiente variable:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">$navMenuScrollDown = $body.find( &#8216;.nav-menu-scroll-down&#8217; ),<\/span><\/p>\n<p>Vaya a la l\u00ednea 213 y a\u00f1ada el siguiente c\u00f3digo:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace\">$navMenuScrollDown.click( function( e ) {<\/span><\/p>\n<pre><code class=\"language-javascript\">  \/\/ grab target URL\n  var url = $(this).attr(\"href\");\n  \/\/ get # position\n  var index = url.indexOf(\"#\");\n  if(index  == -1){\n    return;\n  }\n  \/\/ extract the target id value\n  var targetId = url.substring(index);\n\n  e.preventDefault();\n  \/\/ remove classes from any menu list items\n  $(\"a[href*='#']\").parent().removeClass(\"current-menu-item current_page_item\");\n  \/\/ add classes to current menu item\n  $(this).closest(\"li\").addClass(\"current-menu-item current_page_item\");\n\n  \/\/ scroll down\n  $( window ).scrollTo( targetId, {\n    duration: 800,\n    offset: { top: menuTop - navigationOuterHeight }\n  });\n}); <\/code><\/pre>\n<p>En esta funci\u00f3n verificamos si la URL contiene un car\u00e1cter de libra. Si no, la funci\u00f3n devuelve. A continuaci\u00f3n, obtenemos el identificador de secci\u00f3n de destino, prevemos el comportamiento predeterminado y manejamos las clases de CSS. Finalmente, el m\u00e9todo <strong>scrollTo<\/strong> mueve la ventana de visualizaci\u00f3n a la secci\u00f3n de destino.<\/p>\n<p><iframe loading=\"lazy\" title=\"animated scrolling\" src=\"https:\/\/player.vimeo.com\/video\/200461705?dnt=1&amp;app_id=122963\" width=\"500\" height=\"291\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media\"><\/iframe><\/p>\n<p><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/01\/twentyseventeen-child.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Descargue aqu\u00ed<\/a>\u00a0el tema secundario desarrollado en este post.<\/p>\n<h2>Resumen<\/h2>\n<p>Los medios de encabezado, las secciones de la p\u00e1gina principal y los SVG son algunas de las caracter\u00edsticas m\u00e1s interesantes que ofrece el tema Veinte Diecisiete a los administradores del sitio para configurar sitios web personales y profesionales con facilidad. Pero el tema de Twenty Seventeen tambi\u00e9n es una gran herramienta para los desarrolladores, gracias a un buen n\u00famero de filtros que pueden utilizar en temas hijo\u00a0para personalizar la apariencia de cualquier sitio web. \u00bfYa ha construido un tema hijo Twenty Seventeen? \u00bfSugiere alguna idea adicional para mejorar las funciones por defecto? \u00a1Dejenos un comentario abajo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Con el lanzamiento de WordPress 4.7, tambi\u00e9n lleg\u00f3 el nuevo Tema Twenty Seventeen . M\u00e1s que todos sus predecesores, el nuevo tema por defecto es altamente &#8230;<\/p>\n","protected":false},"author":36,"featured_media":8061,"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":[1355],"class_list":["post-8059","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webdev","tag-wordpress","topic-temas-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducci\u00f3n de Un Desarrollador al Tema Twenty Seventeen<\/title>\n<meta name=\"description\" content=\"Cinco tutoriales para ayudar a los desarrolladores y usuarios avanzados para sacar lo m\u00e1ximo del Tema Twenty Seventeen de WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducci\u00f3n de Un Desarrollador al Tema Twenty Seventeen\" \/>\n<meta property=\"og:description\" content=\"Cinco tutoriales para ayudar a los desarrolladores y usuarios avanzados para sacar lo m\u00e1ximo del Tema Twenty Seventeen de WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-08T13:46:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T11:05:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Cinco tutoriales para ayudar a los desarrolladores y usuarios avanzados para sacar lo m\u00e1ximo del Tema Twenty Seventeen de WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.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:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Introducci\u00f3n de Un Desarrollador al Tema Twenty Seventeen\",\"datePublished\":\"2017-02-08T13:46:36+00:00\",\"dateModified\":\"2025-01-17T11:05:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/\"},\"wordCount\":2048,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.png\",\"keywords\":[\"webdev\",\"WordPress\"],\"articleSection\":[\"Los mejores plugins y temas de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/\",\"name\":\"Introducci\u00f3n de Un Desarrollador al Tema Twenty Seventeen\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.png\",\"datePublished\":\"2017-02-08T13:46:36+00:00\",\"dateModified\":\"2025-01-17T11:05:47+00:00\",\"description\":\"Cinco tutoriales para ayudar a los desarrolladores y usuarios avanzados para sacar lo m\u00e1ximo del Tema Twenty Seventeen de WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.png\",\"width\":1460,\"height\":730,\"caption\":\"tema veinte diecisiete\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Temas WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/temas-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introducci\u00f3n de Un Desarrollador al Tema Twenty Seventeen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?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 more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introducci\u00f3n de Un Desarrollador al Tema Twenty Seventeen","description":"Cinco tutoriales para ayudar a los desarrolladores y usuarios avanzados para sacar lo m\u00e1ximo del Tema Twenty Seventeen de WordPress.","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:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/","og_locale":"es_ES","og_type":"article","og_title":"Introducci\u00f3n de Un Desarrollador al Tema Twenty Seventeen","og_description":"Cinco tutoriales para ayudar a los desarrolladores y usuarios avanzados para sacar lo m\u00e1ximo del Tema Twenty Seventeen de WordPress.","og_url":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2017-02-08T13:46:36+00:00","article_modified_time":"2025-01-17T11:05:47+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Cinco tutoriales para ayudar a los desarrolladores y usuarios avanzados para sacar lo m\u00e1ximo del Tema Twenty Seventeen de WordPress.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.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:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Introducci\u00f3n de Un Desarrollador al Tema Twenty Seventeen","datePublished":"2017-02-08T13:46:36+00:00","dateModified":"2025-01-17T11:05:47+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/"},"wordCount":2048,"commentCount":2,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.png","keywords":["webdev","WordPress"],"articleSection":["Los mejores plugins y temas de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/","url":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/","name":"Introducci\u00f3n de Un Desarrollador al Tema Twenty Seventeen","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.png","datePublished":"2017-02-08T13:46:36+00:00","dateModified":"2025-01-17T11:05:47+00:00","description":"Cinco tutoriales para ayudar a los desarrolladores y usuarios avanzados para sacar lo m\u00e1ximo del Tema Twenty Seventeen de WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/02\/twenty-seventeen-theme.png","width":1460,"height":730,"caption":"tema veinte diecisiete"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Temas WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/temas-wordpress\/"},{"@type":"ListItem","position":3,"name":"Introducci\u00f3n de Un Desarrollador al Tema Twenty Seventeen"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?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 more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/8059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=8059"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/8059\/revisions"}],"predecessor-version":[{"id":26978,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/8059\/revisions\/26978"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/8059\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/8059\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/8059\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/8061"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=8059"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=8059"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=8059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}