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:
#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.
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í:
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"
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.
#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:
Ciertamente, esto no es todo lo que podemos hacer con Twenty Seventeen, luego ofreceremos otros tutoriales sobre Twenty Seventeen.
raro,
¡No se aceptan caracteres acentuados! Termino con signos de interrogación en lugar de alguna idea?
ps: gracias por estos consejos de todos modos!
Hola Nico,
A veces, usa esto en su lugar:
é
'(apóstrofe)
Hola,
Seguí tus instrucciones pero mis íconos solo aparecen en la versión móvil de mi blog y no en la versión para PC, si puedes ayudarme, ¡sería genial!
gracias,
Julie
Bonsoir,
¿puedes compartir capturas de pantalla?
Hola,
usted debe comprobar que el estilo de menú se carga realmente. También puede inspeccionar el código de menú para asegurarse de que las etiquetas que llevan los iconos están presentes.