Um guia para formatação de data e hora em Divi

Exibir a data e a hora em seu site é uma daquelas coisas que a maioria das pessoas realmente não pensa. Temos a tendência de manter a formatação padrão para a data de publicação nos metadados da postagem. E, se tivermos tempo, adicionaremos o ano atual dinamicamente à barra de rodapé ao lado do texto de copyright.

No entanto, entender como formatar a data e a hora é útil. Dá a você a liberdade de tornar uma data mais legível para os usuários. Por exemplo, "Na segunda-feira, 23 de maio de 2020" é um pouco mais quente (e mais humano) do que a data mínima exibida como "23/05/20". Embora o último tenha o seu lugar. O mesmo se aplica à formatação da hora atual em um site. Alguns sites podem se beneficiar de uma exibição de 12 horas como "20:30", enquanto outros (como sites militares ou médicos) preferem uma exibição de 24 horas como "20:30".

Divi e WordPress oferecem uma quantidade surpreendente de controle sobre a formatação de data e hora disponível em PHP. Neste tutorial, vamos ajudá-lo a entender como exibir, formatar e estilizar a data e a hora no Divi. Você poderá dar às postagens do blog um formato personalizado para a data de publicação ou até mesmo adicionar um elemento dinâmico a uma chamada para ação para um toque mais pessoal (por exemplo, “Feliz segunda-feira ! Confira nosso novo acordo.”).

Vamos começar!

Baixe um guia de formatação de data e hora Divi Layout GRATUITAMENTE

Para ajudar a obter um salto na formatação de data e hora no Divi, baixe este útil layout do Guia de formatação de data e hora. Inclui exemplos de cada formato de data / hora sendo usado como conteúdo dinâmico em um módulo de texto Divi para que você possa ver em primeira mão como cada um funciona em uma página ao vivo.

Para ter acesso ao guia de formatação de data e hora, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.

Clique no botão Importar.

No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.

Em seguida, clique no botão importar.

Feito isso, o layout da seção estará disponível no Divi Builder.

Vamos para o tutorial, vamos?

Caracteres de formato disponíveis para exibição de data e hora

Como mencionado antes, o Divi aproveita a formatação de data e hora embutida do WordPress. Mas antes de entrarmos em como formatar uma data e hora em Divi, é útil entender os caracteres de formatação disponíveis para nós.

Abaixo está uma lista de caracteres de formato disponíveis que podem ser usados ​​juntos (ou combinados) para criar formatos de data e hora personalizados. Isso será útil ao experimentar formatos exclusivos de data e hora em seu site Divi.

Formatação de Data

Caracteres de formato DAY

• d = Dia do mês, 2 dígitos com zeros à esquerda (“02”, “22”)
• D = Dia do mês em três letras (“junho”, “julho”)
• l (“L” minúsculo) = Dia da semana, palavra completa (“segunda-feira”, “terça-feira”)
• N = ISO-8601 numérico dia da semana (“1” para segunda-feira e “7” para domingo)
• S = sufixo para o dia do mês; usar com j (“nd”, “st”, “rd”)
• w = Dia numérico da semana (“0” para domingo e “6” para sábado)
• z = O dia do ano, começando em 0 (ou seja, "173" ou "este é o 173º dia do ano")

WEEK formato caractere

• W = 26 (número da semana do ano, semanas começando na segunda-feira; ou seja, "esta é a 26ª semana do ano")

Caracteres de formato MONTH

• F = uma representação textual completa de um mês (“janeiro” ou “março”)
• m = mês numérico, com zeros à esquerda (junho é exibido como “06”)
• M = Mês em três letras (março é exibido como “março”)
• n = mês numérico, sem zeros à esquerda (junho é exibido como “6”)
• t = Número de dias em um determinado mês (se junho exibiria “30”)

Caracteres de formato YEAR

• Y = 2020 (ano numérico de 4 dígitos; ou seja, “2020”)
• y = 20 (ano numérico de 2 dígitos; ou seja, “20”)

Exemplo de strings de formato de data

• M j, Y = 22 de junho de 2020
• F d, Y = 22 de junho de 2020
• m / d / Y = 22/06/2020
• mdY = 22/06/2020
• j M, Y = 22 de junho de 2020
• l, M d = segunda-feira, 22 de junho
• l, F jS, Y = segunda-feira, 22 de junho de 2020
• m · d · y = 06 · 22 · 20

Formatação de hora

Caracteres de formato TIME

• a = (“am” minúsculo ou “pm”)
• A = PM (maiúscula “AM” ou “PM”)
• 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 = 10 (minutos, com zeros à esquerda (“00-59”)
• s = 52 (segundos, com zeros à esquerda (“00-59”)
• T = fuso horário (“CDT”, “EST”)

Exemplo de strings de formato de hora

• g: ia = 4:10 pm
• g: i: sa = 4:10:52 pm

Strings de formato de data + hora

• Y / m / dg: i: s A = 2020/06/22 4:10:52 PM
• M j, Y @ G: i = 22 de junho de 2020 às 16:10

Escapando Strings de Formato com “\” para Incorporar Texto / Caracteres Adicionais

Este é um truque muito útil para personalizar a exibição de data e hora. Basta adicionar “\” antes de cada caractere / letra que deseja incluir na string de formato e esse caractere será processado como faria normalmente (fora da string). Portanto, “/ T / h / e” renderizaria a palavra “The” na string de formato em vez de um elemento de data / hora real como Fuso horário (“T”) ou hora (“h”).

• D \ a \ t ga = Seg às 16h
• \ T \ h \ e dS \ d \ a \ y \ o \ f F = Dia 22 de junho

Formatando a data e hora com Divi

Alteração do formato de data padrão em todo o site

Se você quiser alterar o formato padrão de data e hora em todo o site, o WordPress tem uma opção integrada para isso. No painel do WordPress, navegue até Configurações> Geral. Lá, você verá a opção de alterar o fuso horário, formato de data e formato de hora padrão.

Divi, na verdade, usa esses mesmos formatos padrão quando você adiciona uma data ou hora usando conteúdo dinâmico com o Divi Builder (como a data de pós-publicação e a data atual).

Se estiver usando o layout de postagem de blog padrão do Divi (não um layout customizado criado com o Divi Builder), você pode inserir uma string de formato de data customizada a ser usada para todas as postagens de blog em todo o site. Você pode encontrar a opção de formato de data navegando até Divi> Opções de tema e role a página para baixo na guia Geral.

Curiosamente, você pode até inserir caracteres de formato de hora para exibir a hora em que a postagem foi publicada.

Usando o conteúdo dinâmico da Divi para formatar e exibir data e hora

Ao usar o Divi Builder, você tem a opção de adicionar a data atual ou a data de pós-publicação como conteúdo dinâmico para qualquer módulo. Esta é uma ótima maneira de substituir o formato padrão de data e hora caso a caso, bem como adicionar um estilo personalizado ao texto de data / hora.

Para adicionar uma data de publicação de postagem ou data atual como conteúdo dinâmico para sua página no Divi, basta adicionar um módulo de texto à página.

Em seguida, selecione o ícone de conteúdo dinâmico enquanto passa o mouse sobre a caixa de conteúdo.

Uma vez que a data dinâmica foi adicionada ao conteúdo do módulo, você pode clicar para editar a data dinâmica para mais personalização. Essas configurações adicionais incluem a opção de adicionar antes e depois do conteúdo à exibição de data, bem como a opção de personalizar o formato da data.

Formatos de data integrados da Divi

Na lista suspensa de formatos de data, você encontrará os seguintes formatos de data predefinidos que você pode selecionar.

• M j, Y = 22 de junho de 2020
• F d, Y = 22 de junho de 2020
• m / d / Y = 22/06/2020
• mdY = 22/06/2020
• j M, Y = 22 de junho de 2020
• l, M d = segunda-feira, 22 de junho

Adicionar um formato de data / hora personalizado

Para criar um formato de data / hora personalizado, selecione a opção personalizada no menu suspenso. Depois de escolher a opção personalizada, você terá uma caixa de entrada disponível onde poderá fazer sua mágica adicionando qualquer combinação de caracteres de formato disponíveis para criar a string de formato perfeita para a data, hora ou ambos.

Este mesmo processo pode ser usado para adicionar a hora atual ou a hora da publicação posterior. Basta adicionar os caracteres de formatação de hora dentro da caixa Formato de data personalizado.

Depois de ter o conteúdo no lugar, você pode usar as configurações de design integradas do Divi, na guia de design do módulo de texto, para personalizar o corpo do texto como quiser. O formato dinâmico de data / hora adotará o estilo do corpo do texto.

Exemplos mais úteis

Ano de Copyright

A formatação de data e hora é útil para criar um ano de copyright dinâmico para o rodapé global de seu site Divi. Aqui está um formato personalizado que você pode usar para exibir as informações de copyright com o ano dinâmico em um único módulo de texto.

Adicione a data atual como conteúdo dinâmico a um módulo de texto. Em seguida, edite o conteúdo dinâmico com o seguinte:

• Antes: ©
• Depois: Empresa | Todos os direitos reservados.
• Formato de data personalizado: Y

Frase de chamariz dinâmica

Você também pode adicionar um formato de data ou hora dinâmico (embutido) a uma frase de chamariz ou título em seu site Divi. Para fazer isso, adicione uma data atual como conteúdo dinâmico a um módulo de texto. Em seguida, atualize o seguinte:

• Antes:

  <h1>It's

• Depois de:

  ... <br>Time to Design!</h1>

• Formato de data personalizado: l… \ a \ f \ t \ e \ rga

Observe que o cabeçalho h1 é adicionado ao elemento usando tags html nas entradas antes e depois. A palavra “terça-feira” está sendo exibida pelo “l” na caixa de formato de data personalizado, seguido pela palavra “depois” usando o “\” para escapar da string de formato. Em seguida, o "g" e "a" são usados ​​para exibir as "18 horas"

Em seguida, você pode personalizar os estilos de título h1 na guia de design.

Pensamentos finais

Esperançosamente, este post tem (e continua sendo) um guia útil sobre como formatar a data e a hora em Divi. Se você é como eu, seus olhos foram abertos para algumas opções de formatação surpreendentes que você pode conseguir sem um plugin e com código personalizado!

Estou ansioso para ouvir de você nos comentários.

Saúde!