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.
Ver comentarios (8)
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/
Hola. Tengo dudas sobre cómo adquirir el hosting y el dominio para una one Page, pues no sé si el procedimiento es el mismo que cuando vas a adquirí para hacer una página web. También me gustaría saber que hosting es el más adecuado en España y el precio del mantenimiento del hosting para una onepage.
Gracias por la respuesta pues recién estoy comenzando a hacer una web sencilla pero me han preguntado si se hacer una one Page y no tengo ni idea de cómo es el procedimiento.
Un saludo.
Hola, es lo mismo para un sitio web normal, el hecho de que lo llamen one page es sólo una nomenclatura para un sitio con una sola página. Si vas a usar WordPress te sugiero buscar un hosting especializado en WordPress como el de Webempresa.
Buenas tardes, tu código me ha ayudado muchísimo, que tendría que modificar en el código para que además de los enlaces a las anclas de la página también funcionase con enlaces a otra página de mi sitio web?
Muchas gracias
Hola, simplemente ingresa el enlace absoluto (es decir incluyendo / delante o directamente toda la url desde https) a tus otras páginas.
Hola, tengo un menu en cabecera fija, me puedes ayudar para que en celulares al tocar un link, también se cierre el menu.
Muchas gracias.
Hola, evalúa realmente si eso es lo que quieres ya que si el menú se oculta, cómo verías las otras opciones de menú en caso quieras navegar a otra página?, En todo caso lo que puedes evaluar es que el menu no sea fijo.