Diecisiete veinte es el tema predeterminado más versátil de WordPress jamás visto. Sin embargo, las opciones integradas en el tema dejan mucho que desear.

En este tutorial, te mostraré cinco métodos para personalizar este tema para que coincida. tu blog. Comenzaremos con lo básico y pasaremos a personalizaciones más difíciles e impactantes.

Cuando hayamos terminado, podrás convertir Twenty Seventeen en un sitio hermoso y moderno para negocios o blogs. ¿No me crees? Mira, esto es lo que puedes crear:

Veinte diecisiete personalización

#1 Crear un menú de enlaces sociales

Bueno, esta primera parte es más que un simple truco. Pero es una personalización que solo se puede hacer en Twenty Seventeen.

Twenty Seventeen tiene un menú atractivo para enlaces sociales en el pie de página.

Vínculos sociales veinte diecisiete

El problema es que algunos usuarios han informado que tienen dificultades para descubrir cómo agregar sus enlaces de redes sociales a este menú. Afortunadamente, es realmente muy simple una vez que sabes cómo hacerlo.

Todo lo que tienes que hacer es crear un menú con enlaces a tus redes sociales y asignarlo a la ubicación del menú de enlaces sociales.

  • Exploremos a través del proceso.
  • Comience abriendo el "Personalizador" (Apariencia> Personalizar).
  • Seleccione la opción "Menús" y luego seleccione "Menú de enlaces sociales".
  • Cambiar el nombre de su nuevo menú.
  • Agregue un enlace a cada una de las redes sociales disponibles.
  • Marque la casilla junto a " Enlaces sociales ".

Cuando termine, su menú debería verse así:

Veinte diecisiete página de personalización

El último paso es hacer clic en el botón "Guardar y publicar" en el Personalizador para guardar el nuevo menú. Sus enlaces a redes sociales ahora se mostrarán en el menú en la parte inferior de la página.

# 2 Cambie la firma "Orgullosamente impulsado por WordPress"

Situación de wordpress

Hay dos razones por las que es posible que desee cambiar el texto en el pie de página que dice que su sitio es "Orgullosamente impulsado por WordPress". "

Tal vez desee ampliarlo y agregar texto adicional: “Orgullosamente desarrollado por WordPress, diseñado por WebPress Designs y alojado por LAMPress Alojamiento Web (Hosting). "

Tal vez quieras cambiar completamente tu firma por algo más personal.

Lo primero que debe hacer es crear y activar un tema secundario (pista: si quieres simplificar tu vida, descarga el el tema de los niños preconcebido para eso).

Una vez que haya creado y activado su tema hijo, copie el archivo "footer.php". Luego, abra este archivo “footer.php” y busque este fragmento de código: get_template_part ('template-parts / footer / site', 'info');.

Ahora, tú tienes dos opciones. Simplemente puede comentar esta línea agregando "//" justo antes del código, o puede considerar reemplazarlo con su propio texto de pie de página personalizado. Aquí está el código para agregar para crear el texto del pie de página.

Pie de página personalizado

#3 Menú de navegación mejorado

Además de crear un menú de navegación funcional en una página de navegación, también arreglaremos el efecto de desplazamiento del menú de navegación y agregaremos un desplazamiento suave para mejorar la experiencia general.

Primero, comenzaremos a agregar el siguiente código en su tema (hijo):

/ * Código de navegación de una página * / jQuery (documento) .ready (function () {/ * Agrega relleno e identificaciones a cada sección de la página principal * / jQuery ("h2.entry-title") .each (function () {var panelId = jQuery (esto) .html (). toLowerCase (). replace (/ s + / g, "-"); jQuery (esto) .wrapInner (function () {return " ";})}) / * Eliminar el resaltado del enlace de navegación * / jQuery ('# top-menu li'). RemoveClass ('current-menu-item current_page_item'); / * Agregar resaltado al hacer clic * / jQuery ('# top -menu li a '). on (' click ', function (event) {jQuery (this) .parent (). parent (). find (' li '). removeClass (' current-menu-item '); jQuery (this) .parent (). addClass ('current-menu-item');}); / * Verifica la URL actual y resalta la navegación para la página actual * / jQuery ('# top-menu li a'). each (function () {var pageUrl = jQuery (ubicación) .attr ('href'); var navUrl = jQuery (esto) .attr ('href'); if (navUrl == pageUrl) {jQuery (esto) .parent (). addClass ('elemento-menú-actual');}})})

Puede agregar este código en un archivo JavaScript cargado por un tema hijo (lo que se recomienda) o use un complemento que le permita agregar JavaScript a su sitio. Asegúrese de cargar el código después de que jQuery ya se haya cargado.

Eche un vistazo a los comentarios en el código para obtener una imagen completa de lo que está sucediendo.

Además, podemos hacer que el movimiento en cada sección sea mucho más fluido instalando y activando un complemento. gratis: jQuery desplazamiento suave.

Por supuesto, aún necesitará crear su menú de navegación agregando un enlace personalizado a cada sección utilizando el nombre de la página que se muestra en esta sección.

Por ejemplo, para vincular a la sección "Acerca de", deberá crear un vínculo personalizado y utilizar " #about Como ancla del enlace. Para obtener más detalles, consulte Cómo personalizar el tema " Diecisiete veinte WordPress ".

Con un poco de esfuerzo llegará a un resultado convincente:

Veinte diecisiete resultados de navegación

Ciertamente, esto no es todo lo que podemos hacer con Twenty Seventeen, luego ofreceremos otros tutoriales sobre Twenty Seventeen.