4 trucos para personalizar el tema Twenty Seventeen

4 trucos para personalizar Twenty Seventeen

Twenty Seventeen es un tema de moda estos días, salió de la mano de WordPress 4.7 y viene incorporado de serie, lo que potencia su visibilidad. Es de esos temas minimalistas, rápidos y atractivos que tan acostumbrados nos tienen los chicos de Automattic. Está en los primeros lugares en descargas en WordPress.org (+800.000 😛 y contando ).

En este articulo te muestro como personalizar Twenty Seventeen con 4 sencillos hacks que seguro te serán de utilidad si optas por este excelente tema para tu sitio web.

Nota
Al personalizar Twenty Seventeen te recomiendo crees un child theme, para que no pierdas nada cuando se actualice el tema. Te dejo mi artículo  si no tienes ni idea de que es eso del tema hijo 😆 .

El Notepad++ es una excelente opción para la edición de archivos php y css, entre muchos otros. Recuerda guardarlos al terminar de editarlos para que surtan efecto los cambios.

Si los cambios realizados no lo observas en el navegador, puede deberse al caché almacenado. Intenta con una pestaña de Navegación en privado.

1. Agrega soporte para Google Fonts

El uso de fuentes variadas se ha impuesto en el diseño web actual, lejos de amainar, cada día irá con más fuerzas. Google Fonts es el repositorio de fuentes online por excelencia.

Para tener la posibilidad de visualizarlas en nuestra web, debemos modificar el archivo functions.php de nuestro child theme y agregarle esto:

Debes hacer algunas modificaciones a este código para que lo adaptes a tus necesidades:

  1. Los nombres y estilos de las fuentes que quieras agregar van después de family=
  2. El estilo por lo general se refiere al grosor y las itálicas. Se coloca después de los dos puntos de cada nombre de fuente, separados por las comas.
  3. Cada fuente que desees agregar se separan con el símbolo |

Para ejemplificarlo, tomemos la  porción de código que nos interesa modificar:

Aquí agregamos soporte para las fuentes Open Sans y Roboto, con los estilos: 400 (grosor normal), 600 (semi-negritas) y 600i (semi-negritas itálicas).

Para conocer la nomenclatura de los nombres y código para estilos, dirígete a Google Fonts. En la fuente deseada, haz clic al botón de (+) que está en la parte superior derecha de cada una, para que se agregue a tus favoritos en la parte inferior de la página.

Al seleccionar la barra de favoritos, podrás observar dos pestañas: Embed y Customize. Los estilos que agregues en Customize los verás en la pestaña Embed en: Link href , con el nombre exacto de la fuente (por lo general el nombre de la fuente con + entre los espacios) y el estilo seleccionado.

agregar soporte google fonts Twenty Seventeen

Reemplaza esta porción de código en el espacio correspondiente en el functions.php.

Pueden ser tantas fuentes como desees, aunque por cuestiones de diseño te recomiendo, incorporar no más de tres en tu sitio, no lo hagas parecer un circo 😉 .

Las fuentes y estilos se agregan en el styles.css de tu child theme para su visualización en la web. Por ejemplo:

2. Font Awesome en Twenty Seventeen

Agregar soporte para los famosos iconos Font Awesome en Twenty Seventeen, es tan sencillo como seguir estos dos pasos:

  1. Descarga la última versión de Font Awesome desde aquí. De este archivo necesitarás las carpetas: fonts y css. Cópialas en el directorio principal de tu child theme.
    La carpeta fonts tiene los iconos Font Awesome en formato de fuentes; dentro de css se encuentra el archivo font-awesome.min que sirve para hacer el llamado de las mismas en WordPress.
  2. Agrega este código al functions.php de tu tema hijo.

Ya podrás agregar mediante css los iconos que desees en tu tema 😀 .

3. Logo en barra de navegación

Por defecto, en Twenty Seventeen el logotipo se agrega en el título de la página.

barras de navegacion y titulo en twenty seventeen

Si quieres que este aparezca en la barra navegación, al lado izquierdo de los links, es necesario que hagas lo siguiente:

  1. Copia el archivo navigation-top.php del tema padre de Twenty Seventeen al child theme, es necesario duplicar también las carpetas que la contengan. Está ubicado en / template-parts/ navigation . Las carpetas deben quedar así:ubicación carpeta navigation-top.php
  2. Edita el archivo navigation-top.php y sustituye este código en la línea 11:
    Reemplázalo por:
    Lo que hice fue agregar <?php the_custom_logo(); ?>  justo después de la cabecera.
  3. Adiciona lo siguiente al archivo style.css de tu child theme, para hacer que el logotipo se coloque al nivel de los vínculos de la barra de navegación.
Tip
Si quieres que la barra de título no se muestre, agrega esto al style.css:
esconder imagen en personalizacion twenty seventeenPara que esto funcione, quita la cabecera multimedia en personalización. Debes ir a la administración de WordPress: Apariencia > Personalizar, en el menú izquierdo selecciona Cabecera multimedia, dale clic al botón: Esconder imagen. Guarda los cambios.

4. Hacer que las páginas ocupen todo el ancho del tema

Si le echas un vistazo a las páginas generados en Twenty Seventeen, verás que coloca el título a la izquierda en grande y el contenido a la derecha.

Si deseas que esto sea una sóla columna, ¡no tardes! y haz esto:

  1. En el tema padre de Twenty Seventeen ubica el archivo page.php en el directorio principal. Cópialo a la carpeta principal del child theme y renómbralo como: page-full-width.php
  2. Edítalo y cambia esto:
    Línea 3:
    Por:
    Línea 20:
    Por:
  3. Ahora agrega este código al css:

Con esto ya deberías tener tu plantilla Full Width. Puedes usarla en el editor de WordPress, en la pestaña Atributos de página, la plantilla: Ancho completo.

seleccionar plantilla full width

Tus páginas ahora las veras así:

plantilla full width

Si te gustó el post compártelo en tus redes sociales :mrgreen: . Deja tus dudas y comentarios que estaré encantado de ayudar.

4 trucos para personalizar el tema Twenty Seventeen
5 (100%) 1 voto

Diógenes Mata

Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.

TAMBIÉN TE PODRÍA INTERESAR

26 comentarios sobre “4 trucos para personalizar el tema Twenty Seventeen

  1. Hola Carlos,
    He probado cambiar el archivo page.php para que se vea la página a todo lo ancho y cuando edito una página y le doy a cambiar a ancho completo me da error 500. He cambiado de nuevo el CSS por el de antes y he solucionado el problema. Por favor, me gustaría que me indicaras de qué forma hacerlo para corregir dicho error. Gracias

    1. Me alegra leerte Guadalupe.
      Un error 500 se produce cuando hay un error en la programación php; es posible que estés obviando algún paso al agregar el código o no lo estas copiando adecuadamente. Te sugiero lo revises con detenimiento.
      También puede probar con el plugin Fullwidth Templates, con el template FW No Sidebar, funciona de maravilla 😉
      Saludos.

      1. Gracias Diógenes, al final he probado con el plugin que me has indicado pero veo que cuando lo pruebo en una entrada no deja espacios a los lados derecho e izquierdo, y me gustaría saber cómo se hace, y además las secciones de la home, en el caso de que meta las entradas, no lo hace a todo lo ancho.
        Por favor, me gustaría que me pudieses ayudar en dicho sentido. Mil gracias!

        1. Hola Guadalupe.

          Este truco y el plugin son aplicables a las paginas de wordpress no a las entradas; las entradas se rigen por la plantillas establecida en tu tema. ¿Se puede usar en ellas?: Si puedes, pero te traerá problemas como el que mencionas.

          Esto también se aplica a la home.

          Para poder hacer cambios en ellas usa la herramienta de personalización de WordPress, aunque para el tema Twenty Seventeen son limitadas.

          Saludos.

  2. Hola Diógenes,

    muy claro todo, haciendo lo que describes consigo que me aparezca en las páginas el atributo de ancho completo, pero cuendo lo activo no parece que se ensanche nada.
    Dónde puede estar el problema? mi theme es Twenty seventeen

    Gracias

  3. Hola, gracias por su explicación. Puse un video en mi cabecera multimedia, pero no se escucha. ¿Es posible que el video aparezca con sonido, a traves de un plugin o algo parecido?.

  4. ¡Hola Diógenes! Mi abuelo se debió sentir igual que yo cuando le intenté explicar cómo programar el vídeo… Te explicas estupendamente, pero soy incapaz de hacerlo bien. En concreto en el punto 4, no sé cómo copiar la carpeta del archivo page.php a mi child theme. He mirado el otro enlace que indicabas, pero no sé como crear la carpeta…
    Si tuvieras un rato para contestarme te lo agradecería enormemente.
    Un saludo y felicidades por tu blog.

    1. Hola Cristina.

      Debes ubicar en tu hosting el directorio de publicación de tu wordpress, o dicho de otra froma, la carpeta principal donde se aloja tu sitio web. Si tienes cPanel usa el Administrador de archivos.

      Una vez ubicada la carpeta de wordpress ve a: wp-content > themes. Ahí estan tus temas incluido el child theme, con el nombre con que lo hayas creado. Ahora copia el archivo (no es una carpeta) page.php de la carpeta del tema Twenty Seventeen (base) a la carpeta principal del child theme de Twenty Seventeen y sigue las instrucciones de la guía.

      También puedes hacer uso del plugin Fullwidth Templates que te agregara un template igual al que te muestro en el truco, llamado FW No Sidebar.

      Espero haberte ayudado, saludos.

  5. Hola.

    Quisiera decir que funciona súper bien el último punto (los otros aún no los he probado).

    ¿Podrías darme una mano con algo? Resulta que sí funciona, pero si la pagina que está de ancho completo se configura como página de Inicio (o sea, del Home) entonces ya no funciona.

    ¿Qué otro cambio podría realizar para que me funcione bien?

    De antemano gracias por la ayuda.

    1. Hola Johnnie.
      Ese truco funciona con las pagina de wordpress, tal como comento en el post.
      Si quieres un template que funcione para el home, instala este plugin, con el tendrás a tu disposición tres nuevas plantillas: una para quitar la barra lateral, otra que elimina el header y footer y una pagina totalmente en blanco.
      Espero te funcione.
      Saludos.

  6. Hola, gracias por el apunte. Lo he intentado de todas maneras, pero soy incapaz de que cualquier cambio en el css, afecte a la pagina. Tengo el child theme y todo lo demas… Pero de verdad que imposible. Quizás sería mejor editar directamente el styles del tema padre? como al compañero de arriba, lluisrd.

    1. Si tienes un child theme y funciona bien, los cambios deberían reflejarse. Hacerlos directamente al tema base no traerá problemas, pero si se actualiza, perderás todo lo que hayas hecho en él.
      Si no lo has intentado, puedes hacer también los cambios al CSS en el administrador de wordpress: Apariencia > Personalizar > CSS adicional, ponlos en el espacio en blanco, veras los cambios en vivo. No olvides darle a Publicar antes de salir.
      Saludos Julia.

  7. Genial tutorial, recientemente instalé este teme en uno de mis proyectos el caso es que es evergreen y me gustaría quitarle las fechas a los post para que no indexen con la fecha, ¿sabrías que parte del código tengo que borrar? Sería un buen quinto truco para añadir al post, también podría usar un plugin pero quiero la web minimalista un saludo ¡

  8. Hola Como Estas? sabes que edite mi pagina web con la plantilla twenty-seventeen. Coloque una pagina de categoría con una imagen destacada pero no logro quitar un espacio muy grande que me queda entre la barra de navegación y la imagen destacada. No se que mas hacer. No se si debo editar la caja de menu o la imagen o la caja de la imagen. Gracias por ayudarme!.

  9. Hola, gracias por las aclaraciones.

    En las fotos de las páginas secundarias (es decir, las que no son página inicial del sitio), en muchas ocasiones se me ve la imagen aleatoria cortada y no aparece ni tan siquiera el escudo y el título. ¿Hay alguna manera de establecer algún min-heigh o similar?

    Gracias!

  10. hola buen dia. Me puedes explicar como elimino totalmente alguna de las paginas del menu de este tema? por defecto vienen 5 pero yo solo quiero tres por ejemplo; como lo elimino totalmente? esque solo me permite eliminar la imagen destacada. Gracias.

    1. En WordPress los menús se modifica en Apariencia > Menús. En cuanto a eliminar paginas, en Paginas > Todas las paginas, desde ahí selecciona las que quieras borrar, y con el menú desplegable las mandas a la papelera.
      Con lo de la imagen destacada no comprendo la pregunta?

  11. Hola,
    tengo un problema con las terminologías. En el punto 2, cuando dices “Cópialas en el directorio principal de tu child theme.”, Cuál es el ‘directorio principal’ el Stylesheet.css? o el Functions.php?

  12. Gracias miles por la ayuda. ME has sacado de un lio

    Solo un detalle.
    Para que me funcione he tenido que modificar el style.css
    linea 3206
    .page-one-column .panel-content .wrap {
    max-width: 740px;

    Lo cambias por
    .page-one-column .panel-content .wrap {
    max-width: 1600px; /*por ejemplo*/

Deja un comentario

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

El responsable de este sitio web es Diógenes Mata. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.