Suporte » Plugins » Adicionar class automaticamente ao menu personalizado

  • Resolvido Myst1010

    (@myst1010)


    Fala galera, estou desenvolvendo um tema que o usuário pode colorir algumas coisas no layout e até gerar cores aleatórias a cada visita.

    Gostaria de estender esta funcionalidade ao menu personalizado adicionando classes numeradas para personalização com css.

    Alguém sabe de alguma função ou plugin que possibilita adicionar classes no menu automaticamente, ou seja, sem que o usuário tenha que fazer isso manualmente?

    Não precisa ser especificamente adicionando classes, qualquer outra forma de manipulação do menu personalizado já ajuda, pois quero estudar a manipulação para desenvolver meu próprio código.

    Quem souber de alguma coisa referente a isso agradeceria muito se postassem os links.

    Abrigado.

Visualizando 14 respostas - 1 até 14 (de um total de 14)
  • voce pode utilizar jQuery para adicionar classes ou regras CSS ao menu a cada reload.

    .addClass()

    .css()

    Se tiver duvidas da aplicacao, é so avisar! =)

    Rafael Sirotheau obrigado por sua resposta.

    Sei como adicionar class com JQuery, mas com a aplicação que tenho desenvolvido o mais apropriado seria com php mesmo.

    Na verdade gostaria de aplicar essa class na opção do menu fixamente, no lugar onde o usuário pode adicionar classes especiais, assim se o usuário não quiser ele pode remover a class.

    Mas aproveitando:
    Sei como adicionar classes, mas não sei como adicioná-las numeradamente com jquery, vc saberia como fazer isso, porque na falta de opções em php pode ser que eu use JQuery mesmo.

    adicioná-las numeradamente com jquery

    nao entendi.. poderia explicar melhor, ou exemplificar?

    Tipo, suponhamos que eu queira adicionar a class menu-item, mas quero que cada uma delas tenha uma numeração como no exemplo abaixo.

    <ul>
      <li class="menu-item-1">Home</li>
      <li class="menu-item-2">Contato</li>
      <li class="menu-item-3">Galeria</li>
      <li class="menu-item-4">Blog</li>
    </ul>

    entao voce faria algo como

    $('ul li').each(function(index) {
        $(this).addClass('menu-item-'+(index+1));
    });

    Obrigado Rafael funcionou direitinho como devia.

    Ainda prefiro descobrir como adicionar a class especial a opção do menu no painel admin, mas na falta de opção posso usar este mesmo, valeu mesmo por sua contribuição.

    Abraços

    Para personalizar o menu você precisará manipilar totalmente a saída do wp_nav_menu(). Pra isso, use o parâmetro walker.
    Assim: <?php wp_nav_menu( ‘walker’ => new meu_walker() ); ?>

    Veja como fazer em: http://goldenapplesdesign.com/2010/10/05/dropdown-menus-walker_nav_menu/

    flws

    Affectueux,

    Achei muito interesse, e muito util em alguns projetos, quando se quer ter controle total quanto a exibicao do menu, nao conhecia… valeu por compartilhar!

    agora.. Myst1010,
    Acho que é mais simples com jQuery.. Ja que é so pra adicionar classes, utilizar o walker, neste caso, vai ser como pescar com dinamite. IMHO =P

    Bem, eu não entendi exatamente como ele quer aplicar as classes no menu.
    Distribuí-las como menu-item-1++ no li, fico meio remóto de se entender.
    O menu seria do tipo que cada item tem uma cor/estilo diferente? Só isso me faz entender essa nomeclatura.

    O exemplo do Rafael é realmente prático e simples, se o caso for como os exemplo do Myst1010 ele serve.
    Pra fazer o mesmo em PHP sem o walker, só tem a opção deselegante de se fazer, caçando os ‘ class=’ e inserindo as suas classes dentro. Mas isso você já sabe…

    Obrigado Affectueux por sua contribuição.

    Independente do que estou fazendo com minha aplicação, estes códigos que manipulam este menu são extremamente úteis, por exemplo, na criação de um super-menu demo.

    No meu caso eu não estou querendo fazer isso, só queria estender a funcionalidade que já criei de alguma forma, mas não imaginei nada específico ainda para o menu.

    Para explicar melhor vejam a imagem com as opções que o usuário pode personalizar em minha aplicação.
    exemplo

    Como podem ver o usuário tem controle sobre os elementos do tema, configuração que ele personaliza por uma página com as personalizações do tema.

    Opções:
    1) Cor padrão
    2) Cor padrão escolhida pelo usuário
    3) Cores sendo geradas aleatoriamente a cada visita do usuário
    4) Cores escolhidas pelo usuário para cada categoria em especial

    Estendendo esta funcionalidade ao menu, preciso de classes sendo geradas automaticamente dependendo das configurações escolhidas no painel admin, classes que não dependem do dono do tema adicioná-la ou não.

    Estou ainda recolhendo códigos que possam me ajudar a desenvolver alguma coisa em relacionada a isso.

    No caso das classes numeradas eu não creio que vou utilizar agora, mas já pensando em um outro projeto que tenho em mente elas me serão úteis.

    Quem tiver mais dicas relacionadas ou idéias eu agradeço.

    Entendi a situação. Só que, a solução que eu pensei desde meu comentário anterior é um tanto óbvia, que acredito que você já tenha feito até melhor(sou novato no WP).

    Eu faria seguindo esse raciocínio:

    <?php
    add_action('wp_head', 'css_personalizado', 12);
    
    function css_personalizado()
    {
    	global $user_id, $default_style;
    
    	$cor_do_menu = get_the_author_meta('cor_do_menu', $user_id);
    
    	if( !$cor_do_menu )
    		$cor_do_menu = $default_style['cor_do_menu'];
    ?>
    <style type="text/css">
    .menu_personalizado { background-color:<?php echo $cor_do_menu ?>; }
    .menu_personalizado ul {...}
    .menu_personalizado ul li {...}
    </style>
    <?php } ?>

    E na impressão do menu:
    wp_nav_menu( array( 'menu_class' => 'menu menu_personalizado' ) );

    Isso serviria pra personalização de todo o layout.

    Como tudo isso é algo simples pra nós, tentei entender o que faz do seu menu algo complexo, que faz o padrão do código acima não ser o suficiente pra ele.
    Em um menu simples você criaria um conteiner e aplicaria os estilos nas tags de dentro. Mas para o seu menu, não faço idéia do que deveria ser feito pra obter o resultado que desconheço.

    Bom, boa sorte!

    Affectueux achei sua idéia bem interessante, serve até mesmo para outras aplicações, mas no meu caso, a personalização não é feita pelo usuário do site e sim pelo administrador via painel de personalização do tema.

    No meu menu não tem nada de complexo na verdade, mas também não quero que a funcionalidade que eu venha a desenvolver dependa do administrador do tema adicione classes para que a aplicação funcione.

    Ainda não elaborei exatamente o que vou fazer com o menu, pois as partes do tema que recebem uma cor personalizada ficou até legal com todo o restante do conjunto, mas um menu com cada item colorido não sei se vai parecer um carnaval.

    De qualquer forma, aprender como adicionar classes numeradas com JQuery, adicionar cores personalizadas com base na configuração que o usuário escolher e personalizar a saido do menu de maneira flexível já fez este tópico valer muito a pena para mim.

    Fico muito grato pela colaboração de vocês, mesmo que eu não vá usar isso neste projeto certamente irei usar em outros.

    hmm… interessante.

    Então é só trocar:
    $cor_do_menu = get_the_author_meta('cor_do_menu', $user_id);
    Por:
    $cor_do_menu = get_option('cor_do_menu');
    hehe

    O tópico está sendo mesmo útil. Aprendi sobre o walker(nem conhecia).

    Abraço

    Na verdade para existir um campo get_the_author_meta(‘cor_do_menu’, $user_id); vc precisa criar ele anteriormente, pois ele não existe.

    Mas depois de criado seria só fazer isso mesmo que vc mostrou em um dos tópicos anteriores.

    E o get_option funciona da mesma forma, vc precisa criar sua tela de configurações adicionando as opções que o administrador terá, depois recuperar essas informações em qualquer lugar que vc precise dentro do seu tema.

Visualizando 14 respostas - 1 até 14 (de um total de 14)
  • O tópico ‘Adicionar class automaticamente ao menu personalizado’ está fechado para novas respostas.