Con el lanzamiento de WordPress 4.7, también llegó el nuevo Tema Twenty Seventeen . Más que todos sus predecesores, el nuevo tema por defecto es altamente personalizable para usuarios y desarrolladores, es fácil 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 ¿Cómo Sacar 100/100 en Google PageSpeed Insights con WordPress?.

Revisamos el último tema por defecto, Twenty Nineteen. Si tienes curiosidad por saber qué hay de nuevo, echa un vistazo a nuestro análisis en profundidad: Introducción al Tema Twenty Nineteen (Tema para Gutenberg)

El tema Twenty Seventeen proporciona el vestido perfecto para nuevas características increíbles de WordPress como el encabezado de video personalizable. Además, proporciona características específicas del tema como secciones de la primera página, soporte de iconos SVG, iconos de edición visible en el Personalizador.

(Lectura sugerida: Introducción al Tema Twenty Twenty)

Ya se ha escrito mucho sobre el tema de Twenty Seventeen , por lo que en este post no haré una nueva lista de sus características y funciones interesantes. En su lugar, voy a proponer cinco pequeños tutoriales con el objetivo de ayudar a los desarrolladores y usuarios avanzados a sacar el máximo provecho del nuevo tema por defecto de WordPress. Gracias a un tema hijo, vamos a:

Un Tema Secundario para Mejorar las funciones del Tema Twenty Seventeen

Asumiré que usted es familiar con los temas hijos de WordPress. Si necesita recordar, tómese el tiempo para leerlo en nuestro artículo Tema Secundario de WordPress – Cómo Empezar. Cuando haya terminado, cree una nueva carpeta en el directorio /wp-content/themes/  con un nombre único y reconocible como Twenty Seventeen-secundario. En esta carpeta, cree el siguiente style.css:

 /*
Theme Name:   Twenty Seventeen Child
 Theme URI:    http://example.com/
 Description:  Twenty Seventeen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyseventeen-child
*/

El encabezado de hoja de estilo proporciona los detalles necesarios sobre el tema en forma de comentarios. No se requieren etiquetas adicionales, ni añadiremos declaraciones de estilo personalizadas en nuestros ejemplos. Después, tenemos que insertar las hojas de estilo primario y secundario. Añadamos la siguiente función al archivo functions.php del tema secundario:

function childtheme_enqueue_styles() {

  wp_enqueue_style( 'parent-style', 
    get_template_directory_uri() . '/style.css' );

  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( 'parent-style' ),
    wp_get_theme()->get('Version')
  );
}
add_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles' );

Vamos a activar el tema secundario y comenzar a personalizar el Tema Twenty Seventeen.

Una de las características más atractivas del tema Twenty Seventeen es el encabezado de pantalla completa en la portada. En la sección Medios del Personalizador del Encabezado puede establecer una o más imágenes de fondo o un vídeo de fondo.

Tema Twenty Seventeen

El Tema Twenty Seventeen permite personalizar el encabezado desde el archivo functions.php de un tema secundario, gracias al filtro twentyseventeen_custom_header_args. A través de este filtro podemos pasar a una función de rellamada de una matriz de los siguientes args:

  • ‘default-image‘ (string) URL de imagen de fondo;
  • ‘default_text_color‘ (string) color del texto del encabezado;
  • ‘width‘ (integer) anchura del encabezado (por defecto es 2000);
  • ‘height‘ (integer) altura del encabezado (por defecto es 1200);
  • ‘flex-height‘ (bool) Soporte flexible para altura de encabezado (por defecto es true);
  • ‘video‘ (bool) soporte de video (por defecto es true);
  • ‘wp-head-callback‘ (string) Función de rellamada utilizada para diseñar la imagen del encabezado y el texto en el blog (el valor por defecto es twentyseventeen_header_style)

Como ejemplo, vamos a agregar el siguiente código al archivo de funciones:

function my_custom_header_args( $args ) {
  $args['default-image'] = get_theme_file_uri( '/assets/images/header.jpg' );
  return $args;
}
add_filter( 'twentyseventeen_custom_header_args', 'my_custom_header_args' );

La función get_theme_file_uri  ha sido introducida en WordPress 4.7, y nos ayuda mucho en el desarrollo de nuestro tema hijo. La función busca primero el tema secundario para el archivo especificado y, después, regresa al tema primario si no se ha encontrado ningún archivo.

Nota: para usar get_theme_file_uri y su función acompañante get_theme_file_path El tema secundario debe respetar la estructura de archivos de los primarios.

Establecer Controles de Encabezado de Video Personalizados

El video de encabezado es un elemento central de WordPress que es modificado por Tema Twenty Seventeen gracias al filtro header_video_settings de WordPress. Podemos modificar estos ajustes de nuevo, devolviendo una lista personalizada de ajustes a través del mismo filtro. Vamos a agregar el siguiente código en el tema secundario functions.php:

function childtheme_setup() {

  remove_filter( 'header_video_settings', 'twentyseventeen_video_controls' );
}
add_action( 'after_setup_theme', 'childtheme_setup' );

function childtheme_video_controls( $settings ) {
  $settings['l10n']['play'] = __( 'Play', 'twentyseventeen-child' );
  $settings['l10n']['pause'] = __( 'Pause', 'twentyseventeen-child' );
  return $settings;
}
add_filter( 'header_video_settings', 'childtheme_video_controls' );

Primero, hemos retirado la función twentyseventeen_video_controls  adjunta al filtro header_video_settings . Luego, hemos añadido 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áficos personalizados.

Añadir Más Secciones a la Página Frontal

El Tema Twenty Seventeen proporciona una página frontal estática dividida en secciones. Cada sección toma su contenido de una página estática y remonta una imagen a la pantalla completa (la imagen destacada de cada página).

Theme options
Las secciones de la página principal se pueden configurar en el panel Opciones de Personalizador de Tema

Por defecto, el Tema Twenty Seventeen admite hasta cuatro secciones, pero podemos agregar un número arbitrario de secciones gracias al filtro twentyseventeen_front_page_sections. Como por ejemplo, vamos a añadir la siguiente línea en el tema secundario functions.php :

add_filter( ‘twentyseventeen_front_page_sections’, function(){ return 6; } );

Additional sections
Una versión mejorada del panel Opciones de Tema

Añadiendo más SVGs (Gráficos Vectoriales Redimensionables)

El soporte de gráficos SVG es una de las características más interesantes de Twenty Seventeen. El tema ofrece un buen número de iconos SVG, agrupados en el archivo sprite /assets/images/svg-icons.svg. Podemos apreciar SVGs en el menú de enlaces sociales en el pie de página. Podemos reemplazar estos iconos o añadir nuestros iconos sociales personalizados gracias a la función básica get_theme_file_path y al filtro twentyseventeen_social_links_icons .

Twenty Seventeen footer

Pie de página del Tema Veinte Diecisiete

Supongamos que desea agregar un enlace a su increíble página de proyecto Kickstarter, pero Twenty Seventeen no proporciona el icono SVG correspondiente.

Primero necesita un archivo sprite SVG personalizado como el siguiente:

<svg style=»position: absolute; width: 0; height: 0; overflow: hidden;» version=»1.1″ xmlns=»http://www.w3.org/2000/svg» xmlns:xlink=»http://www.w3.org/1999/xlink»>

<defs>
<symbol id="icon-kickstarter" viewBox="0 0 16 16">
<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"/>
</symbol>
</defs>
</svg>

El atributo id del elemento de símbolo identifica el icono social y su valor se utilizará más adelante en nuestro código.

Ahora tenemos que incluir el nuevo sprite SVG en la página del archivo de funciones del tema secundario:

function childtheme_include_svg_icons() {

  // Define SVG sprite file.
  $custom_svg_icons = get_theme_file_path( '/assets/images/svg-custom-icons.svg' );

  // If it exists, include it.
  if ( file_exists( $custom_svg_icons ) ) {
    require_once( $custom_svg_icons );
  }
}
add_action( 'wp_footer', 'childtheme_include_svg_icons', 99999 );

Esta función es muy parecida a la función correspondiente twentyseventeen_include_svg_icons definida en el archivo del Tema Veinte Diecisiete functions.php. La diferencia principal es que en nuestra función personalizada estamos utilizando get_theme_file_path para obtener el archivo SVG del tema secundario.
Finalmente, podemos agregar nuestro icono de Kickstarter al conjunto de iconos de Vínculos Sociales compatibles:

function childtheme_social_links_icons( $social_links_icons ) {
  $social_links_icons['kickstarter.com'] = 'kickstarter';
  return $social_links_icons;
}
add_filter( 'twentyseventeen_social_links_icons', 'childtheme_social_links_icons' );

Agregue el elemento Kickstarter al menú Lazos Sociales y salte al pie de página para apreciar el resultado de nuestro trabajo.

kikstarter
Un menú de Lazos Sociales Personalizado

Construyendo un Sitio Web de Una Página Desplegable

Incluso si el Tema Twenty Seventeen proporciona una página principal de varias secciones, el desplazamiento animado no es una característica. El tema utiliza el plugin jQuery ScrollTo para crear un efecto de desplazamiento animado. Desafortunadamente, la animación se activa sólo cuando el usuario hace clic en la flecha de navegación hacia abajo y no está disponible para los elementos del menú. Pero somos desarrolladores y podemos dar a Twenty Seventeen más poderes. Por lo tanto, en este último ejemplo, extenderemos la funcionalidad de desplazamiento animado para que el administrador del sitio pueda crear un sitio web animado de una página.

Navigation menu in twenty seventeen theme

Cuando el usuario hace clic en el icono de flecha en el menú de navegación, la primera página se desplaza hasta la sección de la primera página

En el Tema Twenty Seventeen el efecto de animación es controlado por el archivo global.js , colocado en la carpeta /assets/js/. Por lo tanto, nuestra primera tarea es copiar y pegar global.js desde su ubicación original a la carpeta correspondiente del tema secundario.

File structure
La estructura del tema secundario

Ahora podemos empezar a codificar. Para lograr esta tarea final, vamos a

  • obligar a WordPress a cargar el archivo global.js del tema secundario en lugar del archivo primario original,
  • añadir una clase CSS específica a los enlaces del menú,
  • agregar un ID a cada sección en la portada,
  • modificar el archivo global.js para obtener el efecto de animación.

1. Obligar WordPress a Cargar el Archivo del Tema Secundario global.js

Modifiquemos la función childtheme_enqueue_styles  definida en nuestro primer ejemplo de la siguiente forma:

function childtheme_enqueue_styles() {

  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( 'parent-style' ),
    wp_get_theme()->get('Version')
  );

  if( is_front_page() ){
    wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/global.js' ), array( 'jquery' ), '1.0', true );
  }
}
add_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles' );

Si la página actual es la primera página, WordPress encola el archivo global.js del tema secundario. Si no existe, WordPress carga global.js del primario.

2. Añadiendo una Clase CSS Class al Menú Enlaces

Para agregar una clase CSS al menú de a elementos, podemos usar el filtro nav_menu_link_attributes . Añada el siguiente código en functions.php:

function childtheme_theme_menu_class($atts, $item, $args) {

  if( is_array( $atts ) ) {
    $atts['class'] = 'nav-menu-scroll-down';
  }
  return $atts;
}
add_filter('nav_menu_link_attributes','childtheme_theme_menu_class', 0,3);

La marcación del elemento de menú cambiará de la siguiente manera:

<li id=»menu-item-96″ class=»sections menu-item menu-item-type-custom menu-item-object-custom menu-item-96″>

  <a href="/kinsta/#section-1" class="nav-menu-scroll-down">Section 1</a>
</li>

Ahora podemos seleccionar fácilmente cualquier enlace de menú desde un script.

3. Añadiendo IDs a las Secciones de la Portada

Con el fin de  hacer que la página sea desplegable, debemos crear objetivos de vínculo de menú proporcionando un atributo id a cada sección. Copie y pegue el archivo primario content-front-page-panels.php desde /template-parts/page/ en la carpeta del mismo tema hijo. Luego vaya a la línea 30 y cámbielo como sigue:

<div class=»panel-content» id=<?php echo get_post()->post_name; ?>»>

Ahora las secciones de la primera página tienen identificaciones que nos permiten apuntarlas desde el menú de navegación. Aquí está la nueva marca de los wrappers de sección:

<div class=»panel-content» id=»section-1″>…</div>

Tenga en cuenta que el valor del atributo id será el post slug.

Navigation
La imagen muestra la URL de un enlace de menú

4. Modificar el Archivo global.js

Ahora vamos a abrir el archivo global.js del tema secundario y declarar la siguiente variable:

$navMenuScrollDown = $body.find( ‘.nav-menu-scroll-down’ ),

Vaya a la línea 213 y añada el siguiente código:

$navMenuScrollDown.click( function( e ) {

  // grab target URL
  var url = $(this).attr("href");
  // get # position
  var index = url.indexOf("#");
  if(index  == -1){
    return;
  }
  // extract the target id value
  var targetId = url.substring(index);

  e.preventDefault();
  // remove classes from any menu list items
  $("a[href*='#']").parent().removeClass("current-menu-item current_page_item");
  // add classes to current menu item
  $(this).closest("li").addClass("current-menu-item current_page_item");

  // scroll down
  $( window ).scrollTo( targetId, {
    duration: 800,
    offset: { top: menuTop - navigationOuterHeight }
  });
});

En esta función verificamos si la URL contiene un carácter de libra. Si no, la función devuelve. A continuación, obtenemos el identificador de sección de destino, prevemos el comportamiento predeterminado y manejamos las clases de CSS. Finalmente, el método scrollTo mueve la ventana de visualización a la sección de destino.

Descargue aquí el tema secundario desarrollado en este post.

Resumen

Los medios de encabezado, las secciones de la página principal y los SVG son algunas de las características más 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én es una gran herramienta para los desarrolladores, gracias a un buen número de filtros que pueden utilizar en temas hijo para personalizar la apariencia de cualquier sitio web. ¿Ya ha construido un tema hijo Twenty Seventeen? ¿Sugiere alguna idea adicional para mejorar las funciones por defecto? ¡Dejenos un comentario abajo!

Carlo Daniele Kinsta

Carlo es un diseñador y desarrollador de front-end freelance. Cuando escribe artículos y tutoriales, Carlo se ocupa principalmente de los estándares web, pero cuando juega con sitios web, su mejor compañero de trabajo es WordPress.