Nosso tema está disponível para venda! Tenha um blog incrível agora mesmo.

Como criar um mega-menu sem uso de plugins

Muitas vezes você deseja criar um mega-menu para seu site, mas a maioria dos pugins para esse fim são muito pesados, possuem diversas ferramentas que não são do seu interesse ou até mesmo não ficam totalmente da forma que gostaria. Por esse e outros motivos, decidi ensinar como criar um megamenu de forma rápida e fácil, diretamente no seu tema, com uso das funções do WordPress + CSS.

Algumas motivos que podem te fazer precisar criar um mega-menu:

  • Você codificou um tema WordPress, o menu de navegação já está no lugar e é responsivo.
  • Vários itens de menu têm menus suspensos com um nível de subpáginas.
  • Agora você deseja adicionar um mega menu a ALGUM dos itens de menu, que possuem mais de um nível de subpáginas.
  • As subpáginas serão exibidas em colunas. A subpágina de primeiro nível será um título de coluna e seus filhos serão os links em uma coluna.
  • Você também deseja adicionar imagens sob o título de cada coluna.
  • Todas as colunas devem ter largura igual.
  • O conteúdo das colunas pode ser menor ou mais alto, mas as colunas ainda terão a mesma altura. Eles não vão quebrar o layout.
  • As colunas devem quebrar automaticamente em uma segunda linha se um determinado número de colunas por linha for atingido.

Parece impossível? Na verdade, é bem fácil. Vamos lá…

1Configure a estrutura das páginas no admin do WordPress

  • Vá para Admin > Aparência > Menus.
  • Selecione o menu ao qual você deseja adicionar um mega menu.
  • Insira todas as subpáginas do primeiro e segundo nível.
  • Salve o menu.

Você deve ter algo como a imagem abaixo. Adicione quantos subitens forem necessários. Usamos as categorias do blog, mas você pode usar páginas, postagens, ou uma combinação de páginas, postagens, categorias etc.

 

2Adicione classes CSS aos itens do menu no admin

Na estrutura do menu que você criou, retire o item de menu de nível superior e insira a classe bwp-mega-menu no campo Classes CSS (opcional).

Se você não vir o campo CSS Classes (opcional) , clique na guia Screen Options no canto superior direito da tela e marque a caixa de seleção Classes CSS. Se não souber como fazer isso, clique aqui ou role até o final do post e saiba como fazer isso.

Agora, insira a classe bwp-mega-menu-column em cada uma dos submenus de primeiro nível do campo CSS Classes (opcional). Conforme imagem abaixo:

3Configurando o CSS do mega-menu

Agora vamos ao CSS. Abaixo iremos criar o CSS que dará à estrutura do mega menu. Vale ressaltar que cada tema usa uma estrutura própria, e o código abaixo pode não funcionar diretamente, e será preciso você adaptar ao seu tema.

Adicionem o CSS ao arquivo de CSS do seu tema.

 

@media screen and (min-width: 600px){
    .bwp-mega-menu:hover> .sub-menu {
    min-width: 220px;
    padding: 0 15px 25px 12px;
    background-color: #fff;
    max-width: 685px;
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(50%, 1fr));
    left: 0 !important;
}
.bwp-mega-menu ul li {
    padding: 3px !important;
}
.bwp-mega-menu ul li a {
    font-size: 16px !important;
}
.bwp-mega-menu > ul >li {
    display: table-cell;
    width: 200px;
    min-width: 200px;
    z-index: 1;
}
}

Como você vê, estamos começando a exibir o mega menu para telas com pelo menos 600 pixels de largura. Não adianta exibi-lo em telas menores. Use seu estilo móvel padrão para telas <600px.

É importante dar position:static; para o item de menu de nível superior, acima do .bwp-mega-menu. Dessa forma, o .sub-menu terá 100% da largura do primeiro contêiner que possui position:relative;. Portanto, certifique-se de fornecer position:relative no cabeçalho do site ou qualquer outro contêiner que preferir. Se o menu de nível superior tiver position:relative; então o mega menu terá apenas a largura do item de menu de nível superior.

Essa linha grid-template-columns: repeat(auto-fit,minmax(50%, 1fr));informa ao .sub-menu (classe de sub-navegação padrão do WP) que todos os seus filhos imediatos serão exibidos como 2 colunas de largura igual em telas com largura de 600px. Se quiser exibir 3 colunas por exemplo, mude para  grid-template-columns: repeat(auto-fit,minmax(33%, 1fr));.

Assim você terá um resultado parecido com esse:

Como editar o formato da hora nos post

A formatação da data e horário exibidos nas postagens do WordPress é muito fácil de ser realizada, pode ser feita no painel administrativo do WordPress de forma rápida e tem sido uma dúvida que muitos tem me perguntado. Por diversas vezes já trabalhei em sites de clientes que chegaram a utilizar plugins para mudar a formatação da data e hora, sendo que não há necessidade disso, uma vez em que é uma função nativa do WordPress.

Abaixo irei ensinar como editar essa formatação e também como exibir os horários dentro das páginas com funções em PHP nativas do WordPress.

Como Formatar o horário:

Primeiro, faça login no seu painel Administrativo do WordPress, em seguida, vá até Configurações > Geral e chegará na página abaixo:

Observe a sequência de caracteres ao lado de cada formatação de Data e Hora na imagem acima. Esta sequência é o que gera a formatação da Data e Hora. Cada letra representa uma parte específica da Data ou Hora, e diz se ela é escrita por extenso, se é abreviada, se é formato 24h ou am/pm entre outras diretrizes.

Por exemplo, veja a sequência a seguir:
l, j \d\e F, Y

Ela cria uma data parecida com esta (observe que as vírgulas são lidas literalmente e para escrever “de” você deve adicionar barras antes da letra para o sistema não identifica-la como código de formatação, ficando “\d\e”):
Terça-feira, 17 de Fevereiro, 2020

Aqui está o que cada caractere de formatação no código acima representa:

    • l = Nome completo para o dia da semana (L minúsculo).
    • F = Nome completo do mês. (M maiúsculo adiciona o mês abreviado)
    • j = O dia do mês. (sem zero à esquerda)
    • Y= O ano em 4 dígitos. (y minúsculo fornece os últimos 2 dígitos do ano)
    • \d\e= adiciona a palavra “de” para ajudar na leitura da data

 

Caracteres de formatação são padronizados e usados ​​globalmente na linguagem de programação PHP. Como o WordPress é escrito na linguagem de programação PHP, você pode usar a tabela de caracteres no formato Data e Hora diretamente do site PHP .

Aqui está uma tabela de alguns dos itens mais úteis encontrados lá:

Dia do mês
d Numérico, com zeros à esquerda 01-31
j Numérico, sem zeros à esquerda 1–31
S O sufixo em inglês para o dia do mês 1º, 2º ou 15º.
Dia da semana
l Nome completo (minúsculo ‘L’) Domingo, sábado
D Nome de três letras Seg – Dom
Mês
m Numérico, com zeros à esquerda 01-12
n Numérico, sem zeros à esquerda 1–12
F Textual completo Janeiro – dezembro
M Três letras textuais Jan – Dez
Ano
Y Numérico, 4 dígitos Por exemplo, 1999, 2003
y Numérico, 2 dígitos Por exemplo, 99, 03
Tempo
a Minúsculas manhã tarde
A Maiúsculas MANHÃ TARDE
g Hora, 12 horas, sem zeros à esquerda 1–12
h Hora, 12 horas, com zeros à esquerda 01-12
G Hora, 24 horas, sem zeros à esquerda 0-23
H Hora, 24 horas, com zeros à esquerda 00-23
i Minutos, com zeros à esquerda 00-59
s Segundos, com zeros à esquerda 00-59
T Abreviação de fuso horário Por exemplo, EST, MDT…
Data / Hora Completa
c ISO 8601 2004-02-12T15: 19: 21 + 00: 00
r RFC 2822 Qui, 21 dez 2000 16:01:07 +200
U Registro de data e hora do Unix (segundos desde a época do Unix) 1455880176

 

Aqui estão alguns exemplos de formatação e seus resultados:

  • j F, Y g:i a – 6 Novembro, 2020 12:50 am
  • d \d\e F, Y – 06 de Novembro, 2020
  • F, Y – Novembro, 2020
  • g:i a – 12:50 am
  • g:i:s a – 12:50:48 am
  • l, F jS, Y – Sábado, 6º Novembro, 2020
  • M j, Y @ G:i – Nov 6, 2020 @ 0:50
  • Y/m/d \a\t g:i A – 2020/11/06 at 12:50 AM
  • Y/m/d \a\t g:ia – 2020/11/06 at 12:50am
  • Y/m/d g:i:s A – 2020/11/06 12:50:48 AM
  • Y/m/d – 2020/11/06