Pregunta sobre Twenty Seventeen de Wordpress:

Problemas con la navegación interna de un sitio de una sola página

Un usuario preguntó 👇

Construí un sitio web de una página usando veinte. Consta de algunas páginas, que se especifican en el personalizador de opciones del tema.

El problema es que no salto mi menú a una de mis páginas usando el caracol en la forma «#», pero funciona para la otra página.

El menú enlaza con “/ # ubicación” y salta correctamente a la página de configuración. Pero no salte el menú de las tarjetas de regalo al caracol correcto (# cant-decide-give-a-montclair-farm-gift-card).

Traté de darle al caracol un nombre más corto (#gift) e intenté recrear la página y dejar al caracol autógeno.

Si cambio el menú para navegar a la página con una URL sin la tarjeta hash (/ cant-decide-give-a-montclair-farm-gift), funciona bien, pero ese no es el efecto que estoy buscando. Quiero desplazarlo (usando el plugin de desplazamiento de desplazamiento), como lo hace en la página de configuración.

¿Algunas ideas?

-Mhael

(@columna vertebral)

Hace 2 años, 1 mes

El panel de la página frontal de la sección no tiene un identificador.

¿Está utilizando un plugin o un script de terceros para implementar la barra de desplazamiento lista para usar? El inspector del navegador muestra constantemente la comprobación de la secuencia de comandos para cada clic en href con # y el destino.

Si tiene alguna experiencia básica con jQuery, cambie a global.js para crear una solución de navegación completa de una página.

Sugerencia de usabilidad, establezca el enlace para el comando en línea, desplácese hasta la sección de la página y agregue un enlace de «inicio» para volver a la página principal. Si llegara a esa página y quisiera hacer un pedido y hacer clic en el enlace, volvería a cargar la página una y otra vez.

(@michaelshulman)

Hace 2 años, 1 mes

Hola Backbone,

El panel de la página frontal de la sección no tiene un identificador.

¿Dónde pongo eso? No recuerdo haberlo configurado para la página Ubicación. ¿Está en la propia página de Regalos? ¿O debería establecerse por tema al compilar la página?

¿Está utilizando un plugin o un script de terceros para implementar la barra de desplazamiento?

Sí, estoy usando el plugin scroll2id. Da el efecto de desplazamiento suave. Pero incluso sin el plugin, veo la navegación a la página del sitio, pero no a la página de regalo.

Si tiene alguna experiencia básica con jQuery, cambie a global.js para crear una solución de navegación completa de una página.

No estoy asustado. Pero se supone que el tema vigésimo primero se ocupa de esto, ¿verdad?

Sugerencia de usabilidad, establezca el enlace para el comando en línea, desplácese hasta la sección de la página y agregue un enlace de «inicio» para volver a la página principal.

Esta es una buena idea. Pero no sé cómo hacerlo en el tema. El pedido en línea es el home página en el acondicionador veintiuno. ¿Cómo creo un objetivo en la sección de pedidos en línea de la página? No creo que pueda aplicar una clase personalizada al bloque de título de una página, sino solo a los bloques de contenido.

Gracias por la ayuda hasta ahora y me disculpo por no saber cómo implementar sus sugerencias.

-Mhael

Esta respuesta fue modificada hace 2 años, hace un mes por.

(@michaelshulman)

Hace 2 años, 1 mes

¡Creo que lo arreglé!

Miré la fuente y descubrí que el ID del primer contenido es «principal» y el segundo «panel1» y el ID de la página del sitio es «panel2».

Establezco los objetivos en el menú temático para /#primary, /#panel1y /#panel2, respectivamente, y ahora funciona.

No funciona cuando el usuario va a la página de Recetas, ya que esa página no es un panel en la página principal. Ahora necesito una forma de crear un menú diferente para las páginas de recetas, de modo que pueda usar URL sin hash en ese menú.

¿Era este el arreglo correcto?

-Sra

(@columna vertebral)

Hace 2 años, 1 mes

¡Excelente!

Es una valiosa lección; trabaje primero dentro de la construcción del tema (marcado, navegación, etc.) mientras personaliza la apariencia. Una vez que lo comprende, los cambios se vuelven mucho más rápidos, más predecibles y más importantes; la actualización no será una pesadilla.

Se llama a la función scrollbar-to-jquery en la barra de menú de la página principal. /template-parts/header/site-branding.php

si la declaración verifica tres condiciones – ¿es veintiuno_is_frontpage () O – la página del blog está configurada en la página principal Y – si alguna es verdadera, el sitio ‘superior’ tiene un menú de navegación? -luego muestra (‘icono’ => ‘flecha-derecha’)

La función scroll-to-jquery /assets/js/global.js

-Buscar valor de clase «menu-scroll-down» $ menuScrollDown = $ body.find (‘.menu-scroll-down’) -función

$menuScrollDown.click( function( e ) {
    e.preventDefault();
    $( window ).scrollTo( '#primary', {
        uration: 600
      , offset: { top: menuTop - navigationOuterHeight }
     });
});

Ahora que sabe cómo motivar la función y el objetivo de la función, puede reutilizarla. Todo lo que necesita hacer es ingresar en el nombre de la clase «menú-desplazamiento-abajo» para realizar una función de disparo.

En Menú, las opciones de pantalla muestran la clase. Agregue el nombre de la clase al elemento del menú. En la página de la sección, debe agregar el nombre de identificación correspondiente en la ubicación de destino. Puede ser tan simple como el modo de texto,

Texto

o use img.png transparente y agregue el valor de id, que es menos probable que se elimine accidentalmente.

Normalmente, se escribe una función para verificar condicionalmente el menú de navegación con el URI de destino construido correctamente para cargar. Probablemente necesite agregar el dominio URI completo.com/#anchor_name a los enlaces del menú.

Esta respuesta fue modificada hace 2 años, hace un mes por. Esta respuesta fue modificada hace 2 años, hace un mes por.

(@michaelshulman)

Hace 2 años, 1 mes

Hola backbone,

Nunca he cambiado ningún js. Solo agregué un plugin para preparar el desplazamiento, pero lo desactivé como parte de mi investigación.

No veo cómo hacer esto en WordPress 5.0

En Menú, las opciones de pantalla muestran la clase. Agregue el nombre de la clase al elemento del menú.

¿Se refiere a la página Aparecen menús (https://montclairfarms.com/wp-admin/nav-menus.php), o en la propia página de la publicación (https://montclairfarms.com/wp-admin/post.php?post=386&action=edit). No veo ninguna forma de agregar un nombre de clase a ninguno de los lugares.

En la página de la sección, debe agregar el nombre de identificación correspondiente en la ubicación de destino. Puede ser tan simple como el modo de texto,

Texto

o use img.png transparente y agregue el valor de id, que es menos probable que se elimine accidentalmente.

En 5.0, con Gutenberg, puedo ver el código del cuerpo de la publicación, pero parece que no hay forma de ver la vista HTML del título de la página. Nuevamente, quiero modificar cualquier javascript en el sitio y quiero hacer todo a través de la interfaz de usuario.

Finalmente, pude resolver mi problema haciendo referencia al uso de «panel1» como la URL de destino en el menú con un tipo de elemento de menú Enlace personalizado. Estaba buscando una solución que usara un caracol de página, para obtener más flexibilidad.

-Mhael

(@lillan)

Hace 2 años

Lea el artículo «Creación de un sitio web desplazable de una página» en https://kinsta.com/blog/twenty-seventeen-theme/. Creo que lo aprovecharás. =)

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada.