WordPress – Criando Menus Personalizados no WordPress 3.0 (Parte 2)

Os menus não são compatíveis com temas antigos no WordPress, mas você pode fazê-los aparecer seguindo esse tutorial exclusivo: Versão em texto do vídeo:

No vídeo anterior sobre a criação de menus para o WordPress 3.0, nós mostramos como adicionar menus ao seu site utilizando temas novos, criados especificamente para o WordPress 3.0. Porém, muitos sites utilizam temas antigos que não possuem este suporte.

Vamos ver agora como integrar, de uma maneira simples e objetiva, menus ao seu tema antigo e você nem vai precisar ter muitos conhecimentos na área de programação, basta seguir os passos que serão mostrados aqui.

Para demonstrar este processo, voltamos o nosso site para um tema antigo que foi o primeiro tema que escolhi logo que estávamos criado o blog do Juvenal. Note que, neste tema, existe um espaço exatamente para o menu, mas os itens são a “Home”, “Contato” e “Sobre” que são exatamente as páginas que criamos para o nosso site dentro do painel administrativo do WordPress através do menu “Páginas”.

Dentro do painel administrativo, se você realizou os procedimentos da vídeo-aula anterior, ao clicar sobre o item “Menus” na área “Aparência”, você poderá perceber que o menu que está criado não é o mesmo exibido na página inicial do seu site em WordPress. E, na área “Locais dos Temas”, você poderá notar a mensagem “O tema atual não suporta menus nativamente, mas você pode usar o widget “Menu Personalizado” para adicionar qualquer menu criado aqui à barra lateral do tema”.

Vamos aprender como fazer com que os itens do nosso menu personalizado criado dentro do painel administrativo do WordPress apareça na área de menu do tema na página inicial.

A primeira coisa é criar o menu personalizado, na primeira parte do vídeo foi mostrado como fazer este procedimento. Se, por acaso, o seu tema não permitir a criação de menus personalizados, siga até a seção “Aparência” dentro do painel administrativo do WordPress e clique sobre o item “Temas” e ative o tema “Twenty Ten”. Basta clicar sobre o link “Ativar” logo abaixo do menu. O tema “Twenty Ten” vem automaticamente instalado no WordPress disponibilizado no Instalador Automático da Hostnet.

Desta forma será possível criar o menu personalizado, mas apenas faça isso caso não consiga criar o menu personalizado utilizando o tema atual.

Vamos agora até a seção “Aparência”, localizada na lateral esquerda do painel administrativo, e clicar sobre o item “Editor”. Perceba que, na nova página, é exibido o nome do tema que está sendo editado. O campo se chama “Selecionar um tema para editar” e fica na parte superior direita da página, em nosso caso o tema selecionado é o “Wpdarkredwhite”, pois é o que estamos utilizando no site.

Em primeiro lugar, na lateral direita da página, vamos localizar o arquivo “functions.php”, ele fica dentro da seção “Funções do Tema” se o seu WordPress é em português.

Dependendo do seu tema, o arquivo “functions.php” pode ser grande ou pequeno, mas os procedimentos serão os mesmos. Note que, no começo do arquivo, estamos começando um código em PHP com a tag “<?php”, este código pode terminar também utilizando a tag “?>”.

No meu caso, o tema que estamos editando não utiliza a tag “?>” no final do código, então não vamos adicionar esta tag, vamos deixar da mesma forma. Mas, caso o seu código termine utilizando a tag “?>” você não deve adicionar o código para adicionar o menu personalizado em qualquer local.

Então, caso seu tema tenha a tag “?>” no final do código, você deve digitar o seguinte código antes desta tag. Mas, caso seu tema não tenha a tag “?>” basta você digitar este código no final do arquivo:
add_theme_support('nav-menus');

Esta linha vai adicionar o suporte à menus ao seu tema atual. Agora precisamos salvar estas alterações, basta navegar até o final da página e clicar sobre o botão “Atualizar Arquivo”. Se o botão “Atualizar Arquivo” não estiver sendo exibido, você deve modificar a permissão da pasta do seu tema e do arquivo que está sendo editado para 777 utilizando uma ferramenta de FTP. Você pode verificar os procedimentos para alterar a permissão de pastas e arquivos dentro do seu WordPress clicando aqui.

O segundo passo é substituir o menu atual que é composto pelas páginas criadas através do painel administrativo para o menu personalizado criado dentro do WordPress. Para isso, vamos acessar o arquivo de cabeçalho, que é o “header.php”, ele deve ser acessado da mesma forma que fizemos anteriormente com o arquivo “functions.php”. Pois é lá que, geralmente, os menus estão. Isto vai depender também do seu tema, mas é um padrão que a grande maioria segue.

Ao abrir o arquivo “header,php”, vamos procurar uma área dentro deste arquivo que, geralmente, contem uma div de nome “menu” ou algo semelhante. No meu tema, nós temos uma div chamada “menu” e temos alguns itens que são responsáveis por carregar as páginas.

Eu recomendo que você faça o backup deste arquivo antes de realizar qualquer modificação, pois, caso seja gerado algum erro, você poderá retornar para as informações anteriores. Para qualquer alteração que você faça para o seu site, nunca se esqueça de fazer um backup, pois isto pode comprometê-lo.

Você deve encontrar a área responsável dentro do seu tema, em meu caso, o código encontrado foi:
<div id=”menu”>
<ul>
<li class=”<?php if (is_home()) { ?>current_page_item<?php } else { ?> page_item <?php } ?> ” > <a href=”<php bloginfo('url'); ?>” title=”Home”>Home</a></li>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div>

Este é um código específico do meu tema, no seu tema, este código pode estar diferente. No meu caso, posso identificar a área de menus a partir da tag “<div>” com a identificação “menu” até “</div>”. Então, toda a informação que está entre “<div>” e “</div>” são os itens atuais do meu menu, agora precisamos eliminar as linhas que estão entre estas tags, deixando apenas a seguinte informação:
<div id=”menu”>
</div>

Agora, entre estas linhas, devemos digitar o seguinte código:
<?php wp_nav_menu(array('sort_column'=>'menu_order','container_class'=>'menu-header')); ?>

Caso tenha alguma dúvida sobre a digitação deste código, pause o vídeo e digite o código em um bloco de notas e depois o cole no arquivo que estamos editando dentro do WordPress. O código ficará desta forma:
<div id=”menu”>
<?php wp_nav_menu(array('sort_column'=>'menu_order','container_class'=>'menu-header')); ?>
</div>

Vamos atualizar o arquivo que estamos editando, que é o “header.php”. Caso o botão “Atualizar Arquivo” não estiver sendo exibido no final da página, você deve modificar a permissão deste arquivo para 777 utilizando uma ferramenta de FTP. Se ainda não souber como realizar estes procedimentos, veja os procedimentos para alterar a permissão de pastas e arquivos dentro do seu WordPress clicando aqui.

Vamos voltar ao site e atualizar a nossa página inicial. Note que agora o menu do nosso site está com os itens do nosso menu personalizado. Agora, qualquer item adicionado na seção de menus personalizados em nosso painel administrativo no WordPress 3.0 causará uma alteração diretamente no menu de nosso site. Caso realize testes, você poderá perceber que este procedimento que acabamos de realizar não oferece um bom suporte quando temos sub-itens em nosso menu. Por exemplo: se houvesse algum sub-item dentro de algum menu, dificilmente ele seria exibido em nosso site.

Uma outra maneira de adicionar menus à interface do seu site é utilizando um widget pronto. Mas este widget não irá ficar em uma área superior, como sendo um menu. Para tal, acesse o painel administrativo do WordPress e vamos localizar a seção “Aparência” e depois em “Widgets”.

Na nova página, localize o widget “Menu Personalizado”. Vamos o arrastar para a “Barra Lateral” de nosso site, configure o widget da forma que desejar, lembre-se de que é necessário preencher o campo “Selecionar menu” com o menu que você deseja utilizar no widget que será inserindo em seu site. Por fim, clique em “Salvar”.

Agora, quando você voltar para a página inicial do seu site e o atualizar, terá, na lateral do seu site, o item que você configurou na parte de “Widgets” do seu WordPress contendo os mesmos menus que foram inseridos anteriormente através do código. Se você não quiser utilizar o código para adicionar o menu personalizado, basta utilizar o widget, mas ele ficará na barra lateral de seu site.

Tags:3.0, Menu, Parte 2, SEO, Super Wordpress, Wordpress





Compartilhe:

Vídeos relacionados

Veja também

Outros destaques