Como adicionar o recurso de menus personalizada para um tema wordpress

Video: Download Tema Épico Como Fazer Menus no Wordpress

O recurso WordPress personalizado Menus já está construído para o Vinte Treze tema padrão, assim você não precisa se preocupar em preparar o seu tema para ele. No entanto, se você estiver usando um tema diferente, ou criar o seu próprio, siga estes passos para adicionar esta funcionalidade:

1. No painel, escolher Aparência → Editor.

   Video: Colocando Icones nos Menus do Wordpress

   A página Editar Temas aparece.

2. Clique nas funções temáticas (functions.php) Molde.

   O modelo Funções Tema abre no editor de texto no centro da página Editar temas.

3. Digite a seguinte função em uma nova linha em qualquer lugar acima do fechamento ?gt; no modelo Funções Tema:

   // adiciona MENU SUPPORTadd_theme_support ( `nav-menus`) -

   Esta tag diz WordPress que seu tema pode usar o recurso menus personalizados.

4. Clique no botão Atualizar Arquivo para salvar as alterações no modelo.

   Um link Menus aparece no menu Aparência.

   Em seguida, você deseja adicionar a tag menus para o modelo Header (header.php).

5. Na página editar temas, abra o modelo Header (header.php).

   O modelo de cabeçalho abre no editor de texto no meio da página Editar temas.

6. Adicione o seguinte tag, digitando-o em uma nova linha em qualquer lugar do modelo de cabeçalho (header.php):

   
   
   
   

   ? Lt; wp_nav_menu php () - gt;

   Esta tag é necessária para que o menu que construir usando o recurso menus personalizados aparece na parte superior do seu site. Tabela 12-6 dá os detalhes sobre os diferentes parâmetros que você pode usar com o wp_nav_menu () - tag modelo para personalizar a exibição para atender às suas necessidades.

7. Clique no botão Atualizar Arquivo para salvar as alterações feitas ao modelo de cabeçalho.

   O menu de navegação que você constrói na página Menus no seu Dashboard (escolher Aparência → Menus) agora aparece na área do cabeçalho do seu site.

Este é o padrão Vinte Treze tema com um menu de navegação exibido abaixo do cabeçalho gráfico (você veja os links Início, Blog, e Sobre).

Você pode criar um menu principal do WordPress Dashboard. A tag template usado no tema para exibir esse menu se parece com isso:

? Lt; php wp_nav_menu ( ‘Main’) - gt;

A marcação HTML para o menu é gerado como uma lista não ordenada, por padrão, e se parece com isso:

Casa
Blog
Sobre

Aviso na marcação HTML que a primeira linha define o ID CSS e classe:

O ID nessa linha reflete o nome que você deu o seu menu. Esta atribuição de nomes de menu no CSS e marcação HTML permite que você use CSS para criar diferentes estilos e formatos para seus menus.

Ao desenvolver temas para si ou para outros, certifique-se de que o CSS definido para os menus responde por subpáginas através da criação drop-down efeitos lista, ou ligações que caem a partir do menu quando você passar o ponteiro do mouse sobre o link pai principal. Você pode fazer isso de várias maneiras. Aqui está um bloco de CSS que você pode usar para criar um estilo agradável para o seu menu.

# Menu principal {width: 960px; font-family: Georgia, Times New Roman, Trebuchet MS-font-size: 16px; color: # FFFFFF-margin: 0 auto 0-clear: both-overflow: hidden -} Menu # -Main ul {width: 100% -float: left; list-style: none; margin: 0-padding: 0 -} # menu principal li {float: left; list-style: none;} # li menu principal a {color: # FFF-display: block-font-size: 16px; margin: 0-padding: 12px 15px; text-decoration: none; position: relative -} # menu principal li a: hover, # menu principal li a: active, # menu principal .current_page_item um, menu principal # .Current-gato um, # menu principal .Current-item de menu {color: #CCC -} # menu principal li li um, #menu -Main li li a: link, # menu principal li li a: visited {background: # 555-color: # FFF-width: 138px; font-size: 12px; margin: 0-padding: 5px 10px; border-left : 1px solid # FFF-border-right: solid # FFF-border-bottom 1px: 1px solid # FFF-position: relative -} menu principal # li li a: hover, menu principal # li li a: active {background : # 333-cor: #FFF -} # menu principal li ul {índice z: 9999-posição: absoluta-esquerda: -999em-altura: auto-largura: 160px;} # Menu principal li ul {uma largura: 140px;} # menu principal li ul ul {margem: -31px 0 0 159px;} li # menu principal: pairar ul ul, # menu principal li: pairar ul ul ul {left: -999em -} li # menu principal: hover ul, # menu principal li li: hover ul, # menu principal li li li: hover ul {left: auto -} li # menu principal: hover { posição: static-}