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.
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:
function load_fonts() {
wp_register_style('googleFonts',
'http://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto:400,500');
wp_enqueue_style('googleFonts');
}
add_action('wp_enqueue_scripts', 'load_fonts');Debes hacer algunas modificaciones a este código para que lo adaptes a tus necesidades:
- Los nombres y estilos de las fuentes que quieras agregar van después de family=
- 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.
- Cada fuente que desees agregar se separan con el símbolo |
Para ejemplificarlo, tomemos la porción de código que nos interesa modificar:
'http://fonts.googleapis.com/css?family=Open+Sans:400,600,600i|Roboto:400'
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.
Reemplaza esta porción de código en el espacio correspondiente en el functions.php.
'http://fonts.googleapis.com/css?family=ESPACIO_CORRESPONDIENTE');
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:
h1 {
font-family: 'Open Sans', Sans-Serif;
font-weight: 400;
}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:
- 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. - Agrega este código al functions.php de tu tema hijo.
function wpb_load_fa() { wp_enqueue_style( 'font-awesome', get_stylesheet_directory_uri() . '/fonts/font-awesome.min.css' ); } add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );
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.
Si quieres que este aparezca en la barra navegación, al lado izquierdo de los links, es necesario que hagas lo siguiente:
- 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í:
- Edita el archivo navigation-top.php y sustituye este código en la línea 11:
?>
Reemplázalo por:
?><?php the_custom_logo(); ?>
Lo que hice fue agregar <?php the_custom_logo(); ?> justo después de la cabecera.
- 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.
@media screen and (min-width: 67em) { .navigation-top nav { float: right; } }
.page-title {
display: none;
}
Para 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:
- 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
- Edítalo y cambia esto:
Línea 3:* The template for displaying all pages
Por:
* Template Name: Ancho completo
Línea 20:
<div class="wrap">
Por:
<div class="wrap page-full-width">
- Ahora agrega este código al css:
@media screen and (min-width: 48em) { body.page-template-page-full-width .page-full-width #primary .entry-content { width: 100%; } body.page-template-page-full-width .page-full-width #primary .entry-header { width: 100%; } }
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.
Tus páginas ahora las veras así:
Si te gustó el post compártelo en tus redes sociales 
. Deja tus dudas y comentarios que estaré encantado de ayudar.
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.
Buenas Diógenes, espero que todo genial.
El código del @media screen es para hacer el tema mobile-friendly??
Últimamente me dan algunos errores en google con la usabilidad para móbil (el contenido es mas grande que ancho de pantalla o algo así, botones juntos, etc…)
En caso de que esta sea su finalidad, solamente copiando esta parte de código en el style.css del tema hijo debería funcionar?
Muchísimas gracias krak, tu página es de gran ayuda.
Hola Guillem.
Si, las media queries permiten adaptar el contenido a distintos tipos de pantallas (tamaños), y hacerlas mobile friendly.
Los errores que comentas asumo que son los que envía recientemente Google en la search console, si es así, en mi experiencia, son bastantes exagerados y alarmistas.
Lo importante es que pruebes tu web en distintos tipos de pantallas, como tabletas y celulares, y veas como se ve. Si observas inconsistencias o defectos corregirlas usando las propiedades css, entre ellas: @media.
Saludos.
Muy buen post Diógenes. El único problema que sucede cuando utilizas el pluggin “Fullwidth Templates” es que tu página no presentará espacio en los laterales, es decir, tendrá un ancho del 100%.
Por otro lado, con el pluggin “WP Page Templates” podéis seleccionar la opción “Full width” y el cambio respetará los márgenes de vuestra página.
Un abrazo.
Hola Guillem.
Buena sugerencia, lo apunto para revisarlo 😉
Saludos.
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
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.
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!
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.
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
Hola Alberto.
Aunque este truco ha sido probado por mi y puedo decir que funciona, he leído muchos usuarios con problemas con él 🙁 . Te sugiero pruebes con el plugin Fullwidth Templates, con el template FW No Sidebar.
Debería ayudarte con tu problema.
Saludos.
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?.
Hola Carlos.
De manera predeterminada wordpress silencia los vídeos que no son “explicitamente” reproducciones, de hecho no se recomienda poner audio ya que puede ser molesto para muchos usuarios.
Chrome en próximas versiones silenciara de manera predeterminada los vídeos que se reproducen automáticamente.
Dale un vistaso esta pagina, donde explica como lograr lo que deseas.
Saludos.
¡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.
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.
Muchas gracias Diógenes, ¡todo claro!
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.
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.
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.
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.
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 ¡
Hola Evas.
Prueba con esto en Apariencia > Personalizar > CSS adicional
.single .byline,.entry-date {
display: none;
}
No olvides guardar los cambios.
Saludos.
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!.
Déjame un link con la pagina y reviso a ver que se puede hacer.
Saludos.
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!
Hola Alex.
No comprendo el problema que tienes, envíame la dirección de la página para echarle un vistazo.
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.
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?
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?
El directorio principal es la carpeta principal o carpeta raíz donde esta tu child theme, tal como explico es esta guía, no confundas directorio con archivo.
Saludos.
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*/