Como criar um menu de navegação personalizado em wordpress vinte quinze
Video: Aula 5: Como Criar Menus Personalizados no WordPress
Conteúdo
Depois de adicionar o recurso de menu para o seu tema WordPress (ou se você já está usando um tema que tem a função de menu), a construção de menus é fácil - basta seguir estes passos:
Clique no link Menus no menu Aparência no seu Dashboard.
Video: Wordpress 4 - #20 (Páginas Personalizadas)
A página Menus abre em seu WordPress Dashboard.
Digite um nome na caixa Nome do menu e clique no botão Criar Menu.
A página Menus é recarregada com uma mensagem que informa o seu novo menu foi criado.
Adicionar links para o menu recém-criado.
WordPress dá-lhe três maneiras de adicionar links para o novo menu que acabou de criar:
Páginas: Clique no Ver todos link para exibir uma lista de toda a página (s) de ter publicado em seu site. Selecione a caixa ao lado dos nomes de página que você deseja adicionar ao seu menu. Em seguida, clique no botão Adicionar ao Menu.
Links personalizados: No campo URL, digite a URL do site que você deseja adicionar (https://google.com). Em seguida, digite o nome do link que você deseja exibir no seu menu no campo de texto Rótulo (Google). Em seguida, clique no botão Adicionar ao Menu.
Video: WordPress AULA 20 Conhecendo O Menu Aparência - Editor
categorias: Clique no Ver todos link para exibir uma lista de todas as categorias que você criou no seu site. Selecione a caixa ao lado dos nomes das categorias que você deseja adicionar ao menu. Em seguida, clique no botão Adicionar ao Menu.
Reveja suas opções de menu no lado direito da página.
Quando você adicionar novos itens de menu, a coluna do lado direito da página Menus preenche com suas escolhas de menu.
Editar as suas opções de menu, se necessário.
Clique no link Editar à direita do nome do link do menu para editar as informações de cada link individual em seu novo menu.
Salve o seu menu antes de sair da página Menus.
Não esqueça de clicar no botão Salvar menu em Configurações de menu no lado direito no topo da página Menus. Uma mensagem é exibida, confirmando que o novo menu foi salvo.
As opções de menus personalizados na página Menus no painel.
Você pode criar quantos menus como você precisa para o seu site. Basta seguir os parâmetros para a tag modelo de menu para se certificar de que você está puxando no menu correto no local correto em seu tema. Preste atenção, quer ao ID menu ou nome de menu na tag.
Você encontra mais opções para seus menus de navegação clicando na guia Opções de tela no canto superior direito do seu Dashboard. De lá, você pode adicionar coisas como postes e costumizadas Postar Tipos de suas opções de menu, bem como adicionar descrições de itens do menu.
A marcação HTML para o menu é gerado como uma lista não ordenada, por padrão, e se parece com isso no código fonte locais:
Aviso na marcação HTML que a primeira linha define ID CSS e classe: “menu principal” class =“cardápio”gt;. 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 é por WordPress permite que você use CSS para criar diferentes estilos e formatos para os diferentes menus.
Ao desenvolver temas para si ou outras pessoas para usar, você quer ter certeza de que o CSS definido para os menus pode fazer coisas como conta para subpages criando efeitos menu drop-down. Você pode fazer isso de várias maneiras diferentes. O exemplo a seguir é um bloco de CSS que você pode usar para criar um estilo agradável para o seu menu (neste exemplo CSS assume que você tem um menu chamado “Main” - portanto, a marcação HTML e CSS indicam ‘menu principal’).
# 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: # FFFFFF-display: block-font-size: 16px; margin: 0-padding: 12px 15px 12px 15px; text-decoration: none; position: relative -} # menu principal li a: hover, #menu -Main li a: active, # menu principal .current_page_item um, menu principal # .Current-gato um, # menu principal .Current-item de menu {color: # CCCCCC -} # menu principal li li um, # menu principal li li a: link, menu principal # li li a: visited {background: # 555555-color: # FFFFFF-width: 138px; font-size: 12px; margin: 0-padding: 5px 10px 5px 10px ; border-left: 1px solid # FFFFFF-border-right: solid # FFFFFF-border-bottom 1px: 1px solid # FFFFFF-position: relative -} menu principal # li li a: hover, menu principal # li li um : activo {fundo: # 333333-cor: #FFFFFF -} # menu principal li ul {índice z: 9999-posição: absoluta L- eft: -999em-height: auto-width: 160px;} li # menu principal ul a {width: 140px;} # menu principal li ul ul {margin: -31px 0 0 159px;} # menu principal li: pairar ul ul, # menu principal li: hover ul ul {left: -999em -} # menu principal li: hover ul, # menu principal li li: hover ul, # menu principal li li li: hover ul, {left: auto -} # menu principal li: hover {position: static-}A CSS que você usa para personalizar a exibição de seus menus serão diferentes. Depois de obter o jeito de usar CSS, você pode tentar métodos diferentes, cores e estilo para criar uma aparência personalizada de seu próprio país.