Artigo Diretório
Muito deMarketing na Internetas pessoas escolhemWordPressVenhaconstruir um site, mas a barra de navegação de alguns temas não suporta menus secundários/de vários níveis. Se você não estiver satisfeito, pode tentar adicionar ou modificar manualmente o estilo de menu do tema.
A modificação começa em header.php.Uma função importante neste arquivo de template é a exibição do menu.
Se você usar o código para chamar a categoria como um menu, também é possível, mas não é conveniente classificar os itens de menu.
O diretório com subcategorias não é fácil de manusear, então também quero adicionar uma função de menu personalizada ao meu tema, como outros temas.
Não é difícil adicionar a função de personalização do menu ao tema recém-criado, existem principalmente 2 etapas.
O primeiro passo, o registro do menu WordPress
Para usar o menu, você deve primeiro se registrar, abrir o arquivo de funções sob o tema e anexar o seguinte código ▼
<?php //自定义菜单 if (function_exists('register_nav_menus')) { register_nav_menus( array( 'top_navi' => __('顶部菜单') ) ); register_nav_menus( array( 'menu_navi' => __('站点导航') ) ); register_nav_menus( array( 'foot_navi' => __('底部菜单') ) ); } ?>
- Se não houver nenhum arquivo functions.php sob o tema, crie um novo e copie o código acima para salvá-lo.
登录back-end do WordPresse, em seguida, vá para Aparência→Menu.
Se você puder ver a tela abaixo, significa que você se registrou como ▼
O acima registra 2 menus:
- Um menu superior Barra de menu superior.
- um menu principal Main barra de menu.
A segunda etapa, a chamada de menu do WordPress
Após o menu ser registrado, ele pode ser chamado no arquivo template do tema.Coloque o seguinte código no arquivo header.php, e você pode chamá-lo onde deseja exibir o menu.
No arquivo header.php, chame o "menu superior"▼
//顶部菜单调用 <?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>
No arquivo header.php, chame o "menu principal"▼
//主菜单调用 <div id="menu"><?php if(function_exists('wp_nav_menu')) { wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul')); } ?> </div>
'menu_navi')); ?>
Chame o "menu inferior" no arquivo footer.php▼
//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>
Etapa XNUMX: menu de configurações
Depois que o menu é registrado e a posição de exibição do menu é definida no arquivo do tema, você pode criar um novo item de menu no plano de fundo do WordPress.
Em seguida, atribua o item de menu recém-criado ao menu registrado e sugira a relação correspondente ▼
Faça a barra de navegação do menu multi-nível do wordpress
Agora vamos falar sobre como fazer um menu multinível do WordPress:
Primeiro exclua o código do menu original no arquivo de funções do seu próprio tema WordPress.
ou adicione este código diretamente ▼
<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>
- Nota: deve estar emAdicionado fora.
Em seguida, encontre o código PHP do tema para chamar o menu, se for raw, geralmente é assim ▼
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
remova-o e substitua-o por ▼
<div id="menu"><?php if(function_exists('wp_nav_menu')) { wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul')); } ?> </div>
- Nota: Certifique-se de que este código não contém outros divs, caso contrário, ele será limitado pelo div externo.
A próxima etapa é adicionar o código da função JS suspensa e adicionar o seguinte código ao arquivo JS do tema ▼
jQuery(document).ready(function($) { $('#nav li').hover(function() { $('ul', this).slideDown(200)}, function() {$('ul', this).slideUp(300)});});
Estilos CSS do menu WordPress
Finalmente, o embelezamento do estilo CSS.
Que tipo de efeito deve ser, dê plena liberdade à sua imaginação, o CSS pode fazer isso ▼
#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");} #menu li{border-right:0px #ace solid;} #nav{margin-left:30px;width:900px;height:36px;} #nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid} #nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;} #nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;} .sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;} .sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px; text-align:center; padding:0 20px; display:block; _width:48px;}
- Adicione o código CSS acima ao arquivo style.css do tema e salve-o.
Depois de salvar, atualize a página inicial do seu site, você pode ver o efeito, é muito simples?
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) compartilhou "Como o WordPress chama o menu personalizado da barra de navegação secundária/multi-nível? , para ajudá-lo.
Bem-vindo a compartilhar o link deste artigo:https://www.chenweiliang.com/cwl-1521.html
Bem-vindo ao canal Telegram do blog de Chen Weiliang para receber as últimas atualizações!
📚 Este guia contém um valor enorme, 🌟Esta é uma oportunidade rara, não perca! ⏰⌛💨
Compartilhe e curta se gostar!
Seus compartilhamentos e curtidas são nossa motivação contínua!