Configurando correctamente el Tema Twenty Seventeen

Configurar el tema Twenty Seventeen de WordPress

Este artículo puede parecer un poco básico, pero nunca está de más aprender a configurar correctamente el tema twenty seventeen que viene por defecto en WordPress 4.7. La última versión de WordPress llegó con el nuevo tema Twenty Seventeen, este es el primer Tema por defecto que no está enfocado a un blog, sino a un negocio, por lo que, como he dicho antes, no está demás aprender a configurar el tema twenty seventeen de manera sencilla y personalizarlo a tu gusto.

Generalidades

Nada más actualizar WordPress (al menos a la versión 4.7) o descargarte la última versión, puedes observar el nuevo tema en el menú de Apariencia, Temas.

Cómo configurar el tema Twenty Seventeen

Si activas el tema y vas a la opción de Personalizar, lo primero que notarás son unos iconos para editar diferentes secciones del sitio, estos iconos de edición son en realidad accesos directos a las opciones de configuración del menú de la parte izquierda. Esto es propio de la nueva versión de WordPress.

Por ejemplo si quieres cambiar el nombre del sitio con el icono de edición (el lápiz), te dirigirá a la opción de Identidad del Sitio.

Personalizar Colores

Si nos vamos a la opción de colores, verás que puedes cambiar el aspecto del Tema, Claro y Oscuro, sin embargo hay una opción de color personalizado para definir el color de los links (esta opción funciona sólo con la apariencia clara).

Cabeceras Multimedia

El tema Twenty Seventeen tiene un área para colocar contenido multimedia, y tenemos las siguientes opciones:

  • Una imagen estática: se mostrará en todo el ancho de pantalla en la página de inicio, en otras páginas se muestra sólo una parte.
  • Imágenes aleatorias: similar a la opción anterior, pero en este caso debes subir más de una imagen y además marcar el botón de Cabeceras subidas al azar.
  • Vídeo de Cabecera: esta es una de las opciones más interesantes, se mostrará un video de fondo, te recomiendo usar vídeos en bucle para fondos (puedes subir tus propios videos o usar videos de YouTube).

Opciones de Menús

El tema cuenta con dos ubicaciones de menú y dos menús creados por defecto para cada ubicación.

  • Menú Principal: es el menú que aparece en la parte superior, debajo de la imagen de cabecera que hemos definido anteriormente.
  • Menú de enlaces a las Redes Sociales: las redes sociales que aparecen en la parte inferior son definidas a través de ítems de menú, tal como se puede ver en la siguiente imagen.

Si quieres ver cómo se ven los iconos de las Redes Sociales cuando las creamos sólo tienes que desplazarte hacia abajo en esta pantalla de edición.

El Tema tiene una funcionalidad que permite detectar el dominio de la url del ítem de menú, por ejemplo si en el ítem de menú colocas youtube.com, entonces aparecerá automáticamente el icono de YouTube.

Esta funcionalidad se define en el archivo:

\wp-content\themes\twentyseventeen\inc\icon-functions.php

Opciones de Widgets

El Tema viene con tres posiciones para Widgets, como se puede ver en la siguiente imagen:

  • Barra Lateral: sólo se muestra cuando estamos en la página blog, o la que tengamos asignada para mostrar las entradas de la web.
  • Pie 1 y Pie 2: se muestran siempre y se muestran como columnas en la parte inferior, una al lado de la otra.

Opción de Portada Estática

Aquí podemos definir si en la página index de la web se mostrará las últimas entradas del blog o se mostrará (como viene por defecto) la página de inicio como página estática.

Ya que estamos aprendiendo a configurar el tema twenty seventeen, te recomiendo dejar esta última opción activada, ya que tiene diseño más bonito.

En esta pantalla se define la página de inicio y una página de blog, ambas deben tener una imagen destacada que se mostrará en la parte superior de cada sección.

En esta pantalla hay una novedad a partir de WordPress 4.7, se añaden unos links para crear una página para cada sección directamente desde esta pantalla.

Opciones del Tema

Y ya casi para terminar de configurar el tema twenty seventeen, tenemos las Opciones del tema, en esta parte se definen:

  • Diseño de página: para mostrar el título de la página y el contenido en columnas, o dejarlo por defecto todo en una columna.
  • Contenido de las secciones: define qué páginas se mostrarán en el inicio y en qué orden, y cada una de ellas con su imagen destacada. Recuerda que la imagen destacada se asigna desde la edición de cada página (en la parte inferior derecha).

Opción de CSS Adicional

Finalmente llegamos a una de las opciones más flexibles y novedosas del tema. Utilizar CSS es como decir: si todo lo demás falla haz esto, evidentemente para usar esta opción hay que tener conocimientos de código CSS.

Con esta opción las modificaciones que hagamos permanecerán a salvo en caso de que actualicemos el Ttema (incluso nos podemos ahorrar crear un Child Theme).

Como extra para terminar de configurar el tema twenty seventeen de forma correcta,  verás que el tema tiene un link de “Creado con WordPress” en el footer, también podemos cambiar este enlace en el archivo:


wp-content/themes/twentyseventeen/template-parts/footer/site-info.php

También puedes visitar el artículo Agregar nuevos menús y nuevas posiciones para estos en WordPress, en donde reemplazamos este link de copyright por un menú creado por nosotros mismos.

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

2 Comentarios

  1. Hola
    Muchas gracias por el artículo. Está muy bien y muy claro. ¿Sabrías explicar de una forma sencilla cómo incorporar un nuevo icono al menú de redes sociales? ¿Hay documentación de todos los iconos existentes?
    Gracias

    1. Hola Alberto, ante todo te doy las gracias por pasarte por mi blog y leer los artículos. Respecto a lo que me comentas, si abres con el bloc de notas (o con el software que utilices para trabajar con código) el archivo icon-functions.php, que puedes encontrar en esta ruta: \wp-content\themes\twentyseventeen\inc\icon-functions.php, en la parte inferior de ese archivo verás una función llamada twntyseventeen_social_links_icons y justo debajo podrás ver todas las redes sociales soportadas por este Theme. En cada red social se incluye la url, el nombre y el icono de dicha red social. Así que incluir una nueva red social sería tan sencillo como crear una nueva entrada en el menú social y añadirle la url definida en el archivo icons-functions.php.
      De nuevo te agradezco tu visita y tu comentario.
      Un saludo.

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *