Suporte » Temas » Alterar ID e Class do Menu

  • Resolvido Guilherme Velloso

    (@guilherme-velloso)


    Olá Galerinha,como vão todos por aqui?!

    Estou querendo mudar o forma como é impresso o código do menu principal do wordpress para adicionar um id ou class para cada item.

    Gostaria que ficasse como no ex abaixo:

    div class="nav main-nav">
                        <ul>
                            <li id="nav-empresa"><a href="/">Empresa</a></li>
                            <li id="nav-clientes"><a href="/">Clientes</a></li>
                            <li id="nav-trabalhos"><a href="/">Trabalhos</a></li>
                            <li id="nav-contato"><a href="/">Contato</a></li>
                            <li id="nav-blog"><a href="/">Blog</a></li>
                        </ul>
                        </div><!-- /.nav .main-nav -->

    Seria possível fazer isso? Já procurei muito no google e aqui mas não encontrei nada ou não estou sabendo como colocar em prática..rs
    Se alguém poder me ajudar eu seria muito grato!

    Abração galerinha e fico no aguardo de uma alma caridosa…hehe

Visualizando 12 respostas - 1 até 12 (de um total de 12)
  • Se vc está se referendo ao menu personalizado que está presente desde de a versão 3.0 é possível colocar classes css em cada item do menu.

    id infelizmente não é possível sem alterar o código com uma class gigantesca só pra fazer isso, mas class css já é padrão.

    Se quiser saber mais sobre os menus personalizados vc pode ver este artigo aqui http://webotera.com/tutoriais-e-dicas/criando-menus-personalizados-1-parte/

    Caraca Myst1010 era isso mesmo!! Tinha visitado alguns tutoriais mas não explicava muito bem, por isso não achava onde habilitar a class para os menus. Muito obrigado mesmo!

    Aproveitando a deixa gostaria de tentar sanar um outra duvida se você não se importar.

    Existe a possibilidade de dentro do get_header criar divs diferente para home e outro para as demais páginas?
    Exemplo…dentro do get_header eu tenho

    <div id="container">
    	<div id="header">
        	<div id="header-top">
            	<div id="header-logo">
                        Minha Logo
                    </div>
                        <div id="header-menu">
                        <div class="nav main-nav">
                              Meu Menu
                        </div><!-- /.nav .main-nav -->
                    </div>
            </div>
            <div id="header-slogan">
                 Meu Slogan
            </div>
    
            <div id="header-curve"></div>
        </div>
        <!-- Fim Header -->
        <div id="slide-header">
        	<?php if (is_home()) {
                  include (TEMPLATEPATH.'/slideshow.php');
            	}
            ?>
        </div>
        <div id="slider_curve"></div>
        <!-- Fim Slide Header -->

    Quero mudar a div header para header-2 por exemplo. A div header-curve para header-curve-2 etc.
    Estou tentando fazer o mesmo efeito de curva deste Theme, mas não sei como ele faz para mudar os tamanhos para home e outras páginas…rs

    Não sei se deu pra entender bem mas não sei como explicar..hehehe
    Abração

    É só usar as Conditional Tags:

    if ( is_home() ) {
    // Suas infos pra home
    } elseif ( is_page() ) {
    // Suas infos pra páginas
    } else {
    // Suas infos genéricas
    }

    Para mais infos:
    http://codex.wordpress.org/Conditional_Tags

    Opa…acho que encontrei uma solução! Mas se alguém tiver formas melhores de fazer isso ou achar que essa forma não é boa por algum motivo estou aberto a sugestões.

    Vou colocar aqui para quem estiver com a mesma duvida.
    Na minha index eu troquei o
    <?php get_header(); ?>
    por

    <?php
    if ( is_home() ) :
      get_header('home');
    else :
      get_header();
    endif;
    ?>

    Ai você deixa o arquivo header.php como o padrão para todas as páginas, mantendo o <?php get_header(); ?> normal para todas as outras páginas. E criei um arquivo header-home.php que vai ser chamado pelo código acima na minha index. Se for mudar o nome é só salvar o arquivo como header-eonome.php e alterar o código para:

    <?php
    if ( is_eonome() ) :
      get_header('eonome');
    else :
      get_header();
    endif;
    ?>

    Tem um exemplo para quem estiver a fim de criar varios headers:

    <?php
    if ( is_home() ) :
      get_header('home');
    elseif ( is_404() ) :
      get_header('404');
    else :
      get_header();
    endif;
    ?>

    E por ai vai…rs

    Em fim se alguém tiver uma dica melhor manda ai. Ou até uma melhor explicação deste código, porque não manjo php e não intendo a lógica da coisa…hehehe

    Abração galerinha!

    Caraca gustamociaro, vlw..hehehe
    Não tinha visto sua resposta antes de postar..rs

    Abração

    Ambas as soluções são válidas e em questão de performance não vejo nenhuma das formas sendo melhor que a outra, então se funcionou para você mete bronca.

    Só verifique como funciona caso seja escolhido uma página como página estática para a home, pois se seu trabalho é para terceiros eles podem usar esta opção e acabar te gerando problemas.

    Se o get_header não funcionar bem com a página estática use a condicional

    if(is_home() || is_front_page()) { 
    
    }

    Assim além de verificar se está na home verifica se uma página estática está no lugar da home.

    Vlw Myst1010 por responder!
    Mas não entendi muito bem o que você disse…hehehe
    Perdão mas sou muito leigo ainda em php e wp…hehe

    O que tentei dizer é, se vc está fazendo este tema para outra pessoa usar é bom tomar certos cuidados, pois o usuário pode usar o recurso de deixar uma página estática como sendo a home do site.

    Se quiser saber mais sobre este recurso veja
    http://www.ferramentasblog.com/2011/09/como-criar-paginas-estaticas-no-wordpress-org.html

    Então se a sua verificação para adicionar o header personalizado causar erros utilizando este recurso de página estática ou simplesmente não funcionar como o esperado use a verificação is_home em conjunto com is_front_page.

    A verificação is_front_page verifica se uma página estática está sendo usada como home do site e desta forma vc poderá criar um header especial para a home que se enquadre nas duas formas de usar o WP ou então até mesmo criar um header personalizado só para as páginas estáticas.

    @myst1010 Vou aproveitar pra tirar uma dúvida:

    Quando você declara assim:

    if(is_home() || is_front_page()) { 
    
    }

    Esse || significa que a tem que atender as 2 condições, ou a uma ou outra?

    Leia assim

    || = ou – Uma ou outra opção retorna true
    && = e – uma e outra opção retorna true, se não se enquadra nas duas opções ao mesmo tempo retorna false

    Se é home ou se é página estática retorna true

    if(is_home() || is_front_page()) {}

    Se é single e se é o usuário admin que está conectado vendo a página single retorna true

    if(is_single() && current_user_can( 'administrator' )) {}

    Legal, valeu.

    Caraca, vlw a força galerinha!!
    Vou estudar melhor tudo que vocês passaram aqui.

    Abração

Visualizando 12 respostas - 1 até 12 (de um total de 12)
  • O tópico ‘Alterar ID e Class do Menu’ está fechado para novas respostas.