En este artículo veremos cómo adaptar un tema WordPress para que se comporte como un sitio one page o de una sola página. Las modificaciones las haremos directamente a través de código.
Resultado Final
Al final lo que queremos obtener será algo similar a como se muestra en la siguiente animación.
Creando secciones de la página
Primero crearemos las diferentes secciones de la página, cada sección estará definida por un encabezado, tal como se muestra en la siguiente imagen.
Por cada sección definiremos un ancla, si estas usando Gutenberg verás que puedes agregar fácilmente el ancla en la sección de bloques.
id='nosotros'
Creando los ítems de menú
Ahora crearemos los ítems de menú y que harán referencia a las diferentes secciones de la página anterior.
El tipo de ítem de menú será de tipo Enlace Personalizado y como enlace usaremos los nombres de ancla definido anteriormente para cada sección agregando un # delante.
Al final todos los items de menú serán tipo enlace personalizado.
Código para mejorar los saltos de enlaces
Con lo realizado anteriormente ya debería funcionar correctamente el enlace, llevando a la sección deseada, sin embargo es posible que quieras afinar algunas cosas, como por ejemplo activar la opción de menú, darle un efecto de desplazamiento al scroll, definir un espacio superior.
Estos adicionales lo podemos conseguir a través de código javascript, usa el siguiente código como parte de tu theme.
En el código anterior:
- Establecemos un margen por defecto para separar el ancla del top de la página, especialmente útil si se tiene una cabecera fija
- Definimos las clases CSS que tiene WordPress por defecto para un ítem activo
- Definimos el evento click para todos los enlaces con ancla, es decir con el caracter #
- Dentro de esta función usamos una función de animación que hace referencia al scroll
- Como callback quitamos y agregamos las clases CSS por defecto de WordPress
Conclusión
Tal como hemos visto, para obtener la funcionalidad de One Page en tu sitio sólo necesitas conocer cómo crear saltos de enlaces y si quieres mejorar un poco más el comportamiento, puedes agregar código javascript.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(1 votos, promedio: 5,00 de 5)
Cargando...
Es necesario agregarlo al tema hijo?
O podemos agregarlo como un hook al footer?
Hola, para agregar el código PHP, es recomendable hacerlo en el tema hijo, sin embargo si lo haces en tu theme directamente documenta el cambio porque posiblemente tengas que realizarlo nuevamente cuando actualices. La otra opción es usar un plugin de snippets.
Cuando definas cómo agregar el código PHP, entonces si que puedes agregar el código JS como parte del hook del footer o como un archivo separado.
También tienes otras opciones para agregar código JS directamente: https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/