Quando se trata de menus suspensos, sempre fui um grande fã do SuperFish. Não só o plugin SuperFish jQuery é super fácil de usar e personalizar, mas tudo é dado a você, então você praticamente só precisa copiar e colar o código em seu design.
Adicionar SuperFish ao WordPress é realmente uma tarefa muito simples, mas para quem está começando pode ser um pouco mais difícil ou você pode acabar fazendo da maneira errada (como chamar o script no seu arquivo header.php). Portanto, a postagem a seguir o guiará por todas as etapas para adicionar o menu suspenso ao seu tema.
Passo 1: Baixe o plugin SuperFish
O primeiro passo é simplesmente visitar a página de download do SuperFish e baixar seu código. Sugiro apenas baixar o arquivo .ZIP que inclui tudo o que você precisa. Há também uma página no Github que eu recomendo que você marque caso precise de ajuda extra ou tenha algum problema com o script js, você pode publicá-los lá.
Passo 2: Adicione o SuperFish CSS e JS à sua pasta de temas
Em seguida, você desejará extrair o conteúdo da pasta zip e enviá-lo para a pasta do tema em que está trabalhando.
- Copie o conteúdo de superfish.css para seu style.css
- Copie o conteúdo do arquivo superfish-navbar.css para o arquivo style.css do seu tema – isso lhe dará o estilo que você pode editar depois
- Arraste os arquivos superfish.js e supersubs.jps para o seu tema – prefiro colocá-los em uma pasta chamada “js”
Etapa 3: iniciar o script SuperFish
Agora que você tem todo o CSS e JS adicionados ao seu tema, você vai querer chamar o JS e iniciar o script. Primeiro, mostrarei como chamar seus scripts da maneira correta em seu arquivo functions.php. Por último, darei o código que deve ir no seu header.php para iniciar o script.
Adicionar ao seu arquivo Functions.php para enfileirar os scripts
// Load superfish scripts
function myprefix_load_superfish_scripts() {
// load jquery if it isn’t
wp_enqueue_script( ‘jquery’ );
// SuperFish Scripts
wp_enqueue_script( ‘superfish’, get_template_directory_uri() . ‘/js/superfish.js’ );
wp_enqueue_script( ‘supersubs’, get_template_directory_uri() . ‘/js/supersubs.js’ );
}
add_action( ‘wp_enqueue_scripts’, ‘myprefix_load_superfish_scripts’ );
Observe que estamos usando get_template_directory_uri() que vincula ao seu tema pai. Se você estiver usando um tema filho, certifique-se de alterar isso para get_stylesheet_directory_uri(), que aponta para seu tema filho.
Adicione o seguinte código para iniciar o SuperFish Script
Você pode adicionar o código abaixo ao arquivo functions.php que iniciará o script superFish adicionando o javascript ao rodapé do site antes da tag de fechamento do corpo. Ou você pode, claro, colocar seu javascript em seu próprio arquivo e carregá-lo através da função anterior.
function myprefix_start_superfish() { ?>
<script type=”text/javascript”>
jQuery( function( $ ) {
$( document ).ready( function() {
$(‘ul.sf-menu’).supersubs( {
minWidth : 16, // minimum width of sub-menus in em units
maxWidth : 40, // maximum width of sub-menus in em units
extraWidth : 1 // extra width can ensure lines don’t sometimes turn over
} ).superfish();
} );
} );
</script>
<?php }
add_action( ‘wp_footer’, ‘myprefix_start_superfish’ );
Etapa 4: adicione a classe sf-menu à função WP_Nav_Menu
Agora tudo o que você precisa fazer é adicionar a classe “ sf-menu ” ao seu ul de navegação. Esta é a classe usada para transformar seu menu em um menu suspenso SuperFish. Se você já tinha uma barra de navegação em seu tema, você vai querer remover todos os estilos e apenas deixar o código php no menu (já que você adicionou todo o estilo necessário para o menu suspenso na etapa 2).
Em algum lugar no cabeçalho do seu tema ou se você não conseguir encontrá-lo no cabeçalho, faça uma busca rápida nos arquivos do tema com qualquer editor de texto que você esteja usando para modificar o código do tema e localize a função “wp_nav_menu” para o menu que você deseja alterar . Uma vez localizado basta editar (ou adicionar se não existir) o parâmetro “menu_class” para que inclua a classe sf-menu como no exemplo abaixo:
wp_nav_menu( array(
‘theme_location’ => ‘primary’,
‘sort_column’ => ‘menu_order’,
‘menu_class’ => ‘sf-menu’,
‘fallback_cb’ => ‘default_menu’
) );
Agora, se você está criando um tema do zero e ainda não definiu nenhuma região de menu e as adicionou ao site e não tem certeza de como, dê uma olhada nas seguintes 2 páginas de documentação úteis no WordPress Codex: