Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Como adicionar menus suspensos SuperFish no WordPress

Você está em:

Como adicionar menus suspensos SuperFish no WordPress

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:

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

plugins premium WordPress
O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.