Adicionar um atributo ao link no WP_NAV_MENU.
-
Bom dia galera!
Tenho um esquema que faz a rolagem do meu site ficar mais “elegante”.
Mas no hiperlink âncora precisa ter isso logo após o HREF:
onclick="$('html,body').animate({ scrollTop: $('#DIV_DESTINO').offset().top }, 900);"
Ficando algo assim:
<a href="http://localhost/wordpress/#inicial" onclick="$('html,body').animate({ scrollTop: $('#inicial').offset().top }, 900);">INICIAL</a>
Como estou usando o menu interativo do WordPress, gostaria de um campo lá ou uma forma de adicionar isso aos hiperlinks. Pode ser pré definido nos ficheiros também, se funcionar, pois os links que colocarei isso são áreas da mesma página e sempre estarão lá.
Abraços!
-
Olá ClaaauS
precisei fazer a mesma coisa hoje e achei este plugin aqui:
http://wordpress.org/plugins/page-links-to/Particularmente eu tinha preferência por fazer “na mão” para não ficar carregando o wordpress de plugins mas ele funcionou perfeitamente e será a solução para este projeto.. pelo menos até encontrar alguma outra forma.
Opa, valeu pela resposta, mas mesmo assim não funciona.
Ele cria uma Widget bem parecido com o que já tem no menu. Ele te deixa colocar uma URL customizável lá também, mas não deixa colocar o atributo onclick.
<a href="http://localhost/wordpress/#inicial" onclick="$('html,body').animate({ scrollTop: $('#inicial').offset().top }, 900);">INICIAL</a>
Ele retira as aspas igualzinho o wp-nav-menu. Não serve pra mim colocar só o URL, pois o link navega mas sem o efeito. O onclick faz a rolagem suave do conteúdo.
Como você fez?
Obrigado!
ClaaauS,
Essa não é uma duvida propriamente relacionada ao WP, mas já que estamos aqui, eu sugiro que use uma abordagem diferente, ao inves de por o evento direto na tag, você pode, por exemplo, por a classe ‘animatedScroll’ no link e um JS ao final da página que adicione esse comportamento aos links que tiverem essa classe:
$('.animatedScroll').on('click', function(e) { var anchor = $(this).attr('href'); $('html, body').animate({ scrollTop: $(anchor).offset().top }, 900); });
Fiz esse comportamento recentemente neste site: http://www.mouthex.com
você não precisa do evento onclick no link.. coloca as url’s customizadas (#nomedoitem) e codifica a página com as respectivas âncoras… no footer é preciso chamar o jquery e colocar o javascript da função.
Como estou usando bootstrap a que funcionou corretamente foi esta aqui:<script> $(document).ready(function(){ $('a[href^="#"]').on('click',function (e) { e.preventDefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing', function () { window.location.hash = target; }); }); }); </script>
*Semana que vem o site que tem essa funcionalidade deverá estar online.
Opa!
Valeu galera. Ajudou bastante já. Só tenho mais uma dúvida sobre o assunto.
Tô fazendo em um servidor local aqui, usando o XAMP.
Tenho um menu que aparece em TODAS as páginas, e nele além dos links pra própria página, tenho links pra outras páginas também, então no HREF preciso colocar: “http://localhost/wordpress/#ANCORA” ou caso eu estiver em outra página não consigo voltar pros links âncoras. Vou exemplificar:
INICIAL – O QUE FAZEMOS – WEBSITES – ORÇAMENTO
Desses 4 links, os 3 primeiros são na mesma página como âncoras. O orçamento é uma página criada pelo WordPress. Por isso preciso colocar o “http//local…”, porque se eu estiver na página orçamento, se eu não colocar não consigo voltar pros outros links.
Aí que tá o problema. Com o código que vocês passaram, se eu colocar somente “#ANCORA” ele faz a rolagem suave, mas com o link inteiro não faz…
Alguma ideia de como resolver isso? Não me importo se vier da outra página (Orçamento) sem rolagem nenhuma. Mas gostaria que funcionasse a rolagem suave se eu estiver na mesma página, e que os links funcionem se estiver na outra.
Será que consegui explicar bem? Hehe…
Valeu galera!
Não sei se entendi direito ClaaauS sua necessidade mas veja….
eu uso o Wamp que, praticamente, é a mesma coisa que o Xamp e não vejo a necessidade de usar a url como localhost.. basta o próprio link ou âncora desde que você tenha configurado o wp para usar url’s amigáveis (nome do post).
Tive uma questão parecida com a sua em relação a um item do menu que precisa ser acessado por outra página. No meu caso era a página de contato que precisaria estar na mesma página de uma das seções do site e também poder ser acessada por outra seção cujo itens do menu eram diferentes.
Exemplo (não são os itens reais, apenas para exemplificar mesmo):
Na Seção 1 -> itens do menu: Home – O que Fazemos – Equipe – Contato
com todos os itens na mesma página com rolagem suave…
Na seção 2 -> itens do menu: Home – Notícias – ContatoO que eu fiz então foi criar dois menus.. um para cada seção e criei também uma segunda página Contato com o mesmo código do formulário. .
No menu da seção 1 coloquei o link como âncora.. no menu da seção 2 coloquei o link padrão para abrir nova página.Pode não ser a melhor solução, mas é bastante simples..
A necessidade de usar a URL como localhost… é que em outra página, se eu deixar o link “href=#ancora”, ele vai procurar a âncora na página em que ele está!
Não entendi como essa parte da URL amigável pode ajudar…
Não sei se o modo de fazer que você quis me passar foi este, mas pelo seu post me veio a ideia de como fazer.
Meu menu é no Header. E se eu fizesse 2 headers? Na página inicial deixaria o header 1 com o menu com os links âncoras puro, ai a rolagem funcionaria normal. E nas pages, single-posts, archives e searchs eu chamasse o header auxiliar com os links completos? Aí funcionaria os links pra inicial normalmente.
O que acha?
não vejo necessidade de fazer dois headers… se você tiver os dois menus apenas utilize as funções do próprio wordpress para verificar em qual página está e carregar o conteúdo apropriado.
Algo como isto:
<?php if(is_front_page() || is_home() || is_single() || is_archive() || is_search() ){ ?> //aqui carrega o conteúdo/menu relacionado à estas páginas <?} ?> <?php if(is_page('nome-da-pagina') ) { ?> //aqui carrega o conteúdo/menu relacionado à outra página <?php } ?>
Pô. Valeu!
Pensei no IF mas não ia usar pois sou novato em WordPress (1 mês), hehe. E não sei php :/
Mas entendi o esquema. Vou criar o segundo menu!
Valeu pelas respostas e pela dedicação!
Abraço!
Olá Pessoal,
Sou iniciante no wordpress, mas veterano em programação, estou com dificuldades para usar a função wp_nav_menu. Estou com o código do header.php desta forma:
<li><a href="<?php echo get_option('home'); ?>">Home</a></li> <li><a href="http://localhost/truecriptfinal/index.html<?php echo get_option('TrueCrypt'); ?>" target="_self">TrueCrypt</a></li>
O link TrueCrypt leve a uma página feita por mim com recursos em flash, css, html5 e java! Preciso que o mesmo seja exibido na página principal, pois usei o atributo target=”_self”, mas está sendo aberto numa nova janela.
Tenho este código no functions.php:
<?php /* add_theme_support( 'menus' ); */ ?> <?php /* register_nav_menu( 'principal', 'menu principal'); */ ?>
Será que alguém pode me dar um exemplo de como usar a função?
Obrigado a todos!
- O tópico ‘Adicionar um atributo ao link no WP_NAV_MENU.’ está fechado para novas respostas.