• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Crear un sitio One Page en WordPress

Crear un sitio One Page en WordPress

Crear un sitio One Page en WordPress

[ 14 enero 2021 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

js mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

One page resultado final

 

En un artículo anterior ya habíamos creado una funcionalidad similar para el contenido, puedes revisar Saltos de enlace en una misma página en WordPress.

 

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.

Definir encabezados

 
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.

Definir ancla

El nombre del ancla tiene que ser descriptivo de la sección, usar sólo texto sin espacios y sin caracteres especiales.
Si estas usando el editor clásico puedes agregar el identificador, que servirá para el ancla, directamente desde la vista HTML definiendo el atributo id, por ejemplo 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.

Creación de ítems de menú con ancla

 
Al final todos los items de menú serán tipo enlace personalizado.

Items de menú creados

 

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

 

Es recomendable agregar este código en un archivo javascript como parte de un tema hijo
Podrías igualmente evaluar tener una cabecera fija para tu sitio en caso tu theme no tenga esta funcionalidad

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Saltos de enlace en WordPressSaltos de enlace en una misma página en WordPress
  • Búsqueda en tabla personalizada en WordPressBúsqueda en tabla personalizada en WordPress
  • Páginas en ancho completo en el tema StorefrontPáginas en ancho completo en el tema Storefront
  • Formulario de búsqueda en un menú WordPressAgregar búsqueda en un menú de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jose

    14 enero, 2021

    Es necesario agregarlo al tema hijo?

    O podemos agregarlo como un hook al footer?

    • Jhon Marreros Guzmán

      15 enero, 2021

      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/

  2. Priscila

    17 febrero, 2021

    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.

    • Jhon Marreros Guzmán

      18 febrero, 2021

      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.

  3. Alberto Mateo

    11 mayo, 2022

    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

    • Jhon Marreros Guzmán

      13 mayo, 2022

      Hola, simplemente ingresa el enlace absoluto (es decir incluyendo / delante o directamente toda la url desde https) a tus otras páginas.

  4. Juan

    8 septiembre, 2022

    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.

    • Jhon Marreros Guzmán

      11 septiembre, 2022

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Interceptar correos enviados en WordPress

Cómo eliminar todos los productos de WooCommerce

Eliminar campo URL de los comentarios de WordPress

Configura el tema Twenty Twenty One WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados