WordPress Twenty Seventeen Pergunta: Problemas com a navegação interna de um site de página única

Um usuário perguntou ?

Eu construí um site de uma página usando vinte. Ele consiste em algumas páginas, que são especificadas no personalizador de opções do tema.

O problema é que eu não pulo meu menu para uma das minhas páginas usando o caracol na forma “#”, mas funciona para a outra página.

O menu liga-se a “/ # localização” e salta com sucesso para a página de definições. Mas não pule o menu do cartão-presente para o caracol correto (#cant-decide-give-a-montclair-farm-gift-card).

Tentei dar um nome mais curto ao caracol (#presente) e tentei recriar a página e deixar o caracol autógeno.

Se eu alterar o menu para navegar até a página com uma URL sem o cartão de hash (/cant-decide-give-a-montclair-farm-gift), funciona bem, mas não é esse o efeito que estou procurando. Eu quero rolar (usando o plug-in de rolagem de rolagem), como na página de configurações.

Alguma ideia?

-Mhael

(@coluna vertebral)

2 anos, 1 mês atrás

O painel da primeira página da seção não possui identificador.

Você está usando um plug-in ou script de terceiros para implementar a barra de rolagem imediatamente? O inspetor do navegador mostra constantemente a verificação de script para cada clique em href com # e alvo.

Se você tiver alguma experiência básica com jQuery, mude para global.js para criar uma solução de navegação completa de uma página.

Dica de usabilidade, defina o link para o comando embutido, role até a seção da página e adicione um link “home” para retornar à página principal. Se eu chegasse a essa página e quisesse fazer um pedido e clicasse no link, ele recarregaria a página várias vezes.

(@michaelshulman)

2 anos, 1 mês atrás

Olá Backbone,

O painel da primeira página da seção não possui identificador.

Onde coloco isso? Não me lembro de defini-lo para a página Localização. Está na própria página Presentes? Ou deve ser definido por tema ao construir a página?

Você está usando um plugin ou script de terceiros para implementar a barra de rolagem?

Sim, estou usando o plugin scroll2id. Dá o efeito de rolagem suave. Mas mesmo sem o plugin, vejo a navegação para a página do site, mas não para a página de presentes.

Se você tiver alguma experiência básica com jQuery, mude para global.js para criar uma solução de navegação completa de uma página.

Eu não estou assustado. Mas o vigésimo primeiro tópico deve lidar com isso, certo?

Dica de usabilidade, defina o link para o comando embutido, role até a seção da página e adicione um link “home” para retornar à página principal.

Essa é uma boa ideia. Mas não sei como fazer isso no tema. O pedido online é home página no condicionador vinte e um. Como crio uma meta na seção de pedidos online da página? Não acho que você possa aplicar uma classe personalizada ao bloco de título de uma página, mas apenas aos blocos de conteúdo.

Obrigado pela ajuda até agora e peço desculpas por não saber como implementar suas sugestões.

-Mhael

Esta resposta foi modificada há 2 anos, um mês atrás por.

(@michaelshulman)

2 anos, 1 mês atrás

Acho que consertei!

Olhei a fonte e descobri que o id do primeiro conteúdo é “main” e o segundo é “panel1” e o id da página do site é “panel2”.

Eu defino as metas no menu do tema para /#primary, /#panel1e /#panel2respectivamente, e agora funciona.

Não funciona quando o usuário acessa a página de Receitas, pois essa página não é um painel na página principal. Agora eu preciso de uma maneira de criar um menu diferente para as páginas de receita, para que eu possa usar URLs sem hash nesse menu.

Esse foi o arranjo correto?

-Em

(@coluna vertebral)

2 anos, 1 mês atrás

Excelente!

É uma lição valiosa; trabalhe primeiro na construção do tema (marcação, navegação, etc.) enquanto personaliza a aparência. Depois de entendê-lo, as mudanças se tornam muito mais rápidas, mais previsíveis e mais importantes; a atualização não será um pesadelo.

A função scrollbar-to-jquery é chamada na barra de menu da página principal. /template-parts/header/site-branding.php

se a declaração verificar três condições – é twentyone_is_frontpage() OU – a página do blog está definida para a página inicial E – se alguma delas for verdadeira, o site ‘top’ tem um menu de navegação? -then show(‘ícone’ => ‘seta para a direita’)

A função scroll-to-jquery /assets/js/global.js

-localizar valor da classe “menu-scroll-down” $menuScrollDown = $body.find(‘.menu-scroll-down’) -function

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

Agora que você sabe como motivar a função e o propósito da função, você pode reutilizá-la. Tudo o que você precisa fazer é digitar o nome da classe “menu-scroll-down” para executar uma função de gatilho.

No Menu, as opções de exibição mostram a turma. Adicione o nome da classe ao item de menu. Na página da seção, você precisa adicionar o nome de identificação correspondente no local de destino. Pode ser tão simples quanto o modo de texto,

Texto

ou use transparente img.png e adicione o valor id, que é menos provável de ser apagado acidentalmente.

Normalmente, uma função é gravada para verificar condicionalmente o menu de navegação em relação ao URI de destino construído corretamente para carregamento. Você provavelmente precisará adicionar o domínio completo URI.com/#anchor_name aos links do menu.

Esta resposta foi modificada há 2 anos, um mês atrás por. Esta resposta foi modificada há 2 anos, um mês atrás por.

(@michaelshulman)

2 anos, 1 mês atrás

Olá espinha dorsal,

Eu nunca mudei nenhum js. Eu apenas adicionei um plugin para preparar a rolagem, mas o desativei como parte da minha pesquisa.

Não vejo como fazer isso no WordPress 5.0

No Menu, as opções de exibição mostram a turma. Adicione o nome da classe ao item de menu.

Você está se referindo à página Os menus aparecem (https://montclairfarms.com/wp-admin/nav-menus.php), ou na própria página de postagem (https://montclairfarms.com/wp-admin/post.php?post=386&action=edit). Não vejo nenhuma maneira de adicionar um nome de classe a nenhum dos lugares.

Na página da seção, você precisa adicionar o nome de identificação correspondente no local de destino. Pode ser tão simples quanto o modo de texto,

Texto

ou use transparente img.png e adicione o valor id, que é menos provável de ser apagado acidentalmente.

Na versão 5.0, com Gutenberg, posso ver o código do corpo do post, mas parece não haver como ver a visualização HTML do título da página. Novamente, quero modificar qualquer javascript no site e quero fazer tudo através da interface do usuário.

Por fim, consegui resolver meu problema fazendo referência ao uso de “panel1” como o URL de destino no menu com um tipo de item de menu Link personalizado. Eu estava procurando uma solução que usasse um caracol de página, para mais flexibilidade.

-Mhael

(@lilan)

Faz 2 anos

Leia o artigo “Criando um site rolável de uma página” em https://kinsta.com/blog/twenty-seventeen-theme/. Acho que você vai aproveitar. =)

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *