Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como exibir datas relativas no WordPress (2 métodos)

Depois de administrar sites WordPress por muitos anos, aprendemos que pequenas mudanças podem fazer uma grande diferença. Um desses detalhes pequenos, mas importantes, é a forma como você mostra a data em suas postagens.

A maioria dos blogs geralmente mostra a data exata em que uma postagem foi publicada. Mas o uso de datas relativas, como “2 dias atrás” ou “Ontem”, pode ser melhor para os leitores. Essas datas informam rapidamente às pessoas o quanto seu conteúdo é novo e relevante, o que pode aumentar a probabilidade de elas o lerem.

O problema é que a maioria dos temas do WordPress não mostra as datas dessa forma por padrão. Mas não se preocupe! Descobrimos duas maneiras fáceis de mostrar datas relativas em seu site do WordPress: uma usando um plug-in e outra usando um código simples.

How to Display Relative Dates in WordPress

Por que exibir datas relativas em vez de datas absolutas/exatas?

Você já notou como as plataformas de mídia social, como o Facebook ou o Twitter, mostram as datas de publicação como “2 horas atrás” ou “3 dias atrás” em vez de datas exatas? Isso é chamado de formato de data relativa.

Diferentemente das datas absolutas (como “21 de agosto de 2024”), as datas relativas no WordPress dão aos seus leitores uma rápida noção da atualidade do seu conteúdo.

Vamos dar uma olhada em um exemplo. Quando os visitantes veem uma publicação datada de “2 dias atrás” em vez de uma data específica, eles sabem instantaneamente que se trata de conteúdo recente. Dessa forma, os leitores podem saber rapidamente quais postagens são novas e valem a pena ser conferidas sem precisar pensar na data de hoje ou fazer qualquer cálculo mental.

No entanto, vale a pena observar que as datas relativas não são adequadas para todos os tipos de site.

Por exemplo, se você estiver administrando um blog histórico ou um site em que datas precisas são cruciais, talvez seja melhor usar datas absolutas. A chave é considerar o tipo de conteúdo e as preferências do público-alvo ao decidir se deve adicionar datas relativas ao seu site WordPress.

Com tudo isso dito, vamos dar uma olhada em duas maneiras de adicionar datas relativas no WordPress. Encontramos um plug-in que facilita o processo para você, mas também criamos um método de código que oferece mais controle. Você pode usar os links rápidos abaixo para pular para o método de sua preferência:

Método 1: Usando o plug-in Meks Time Ago (gratuito, mas limitado)

Se você está procurando um plugin simples para exibir datas e horários relativos no WordPress, temos uma ótima opção para você. De todos os plugins de datas relativas que testamos, o Meks Time Ago é um dos mais fáceis para iniciantes. Além disso, ele é gratuito e funciona com temas clássicos e em blocos.

Para usar o Meks Time Ago, você pode instalar e ativar o plug-in do WordPress em sua área de administração.

Depois disso, vá para Settings ” General (Configurações ” Geral ) em seu painel. Role para baixo e você encontrará as configurações de plug-in do Meks Time Ago.

The Meks Time Ago plugin settings

A primeira configuração que você deve ativar é onde aplicar o formato “time ago”. Aqui, você precisa escolher “Date” (Data) e “Time” (Hora).

Você também pode optar por aplicar esse formato de data a postagens que não sejam mais antigas do que um determinado número de minutos, horas, dias e meses.

Decidimos optar por 12 meses.

Configuring the Meks Time Ago plugin settings

Em seguida, você pode alterar onde colocar a palavra “ago” no formato de data.

Optamos por mantê-lo após a data relativa porque a maioria das pessoas está familiarizada com esse texto.

Choosing where to place the word ago in Meks Time Ago plugin page

Por fim, você pode substituir a palavra “ago” por um termo diferente, se necessário. Você também pode deixá-la em branco.

Depois de fazer isso, basta clicar em “Salvar alterações”.

Saving the Meks Time Ago plugin settings

É isso aí! Agora, todas as suas datas de postagem terão datas relativas. Você pode visualizar suas alterações no celular, no desktop e no tablet para ver se tudo está certo.

Veja um exemplo:

Example of relative dates added with the Meks Time Ago plugin

Um aspecto que não gostamos no Meks Time Ago é que, mesmo que o post tenha sido publicado hoje ou ontem, o plug-in exibirá a data de publicação como “X minutos atrás” ou “X horas atrás”.

Algumas pessoas não se importam com esse formato, mas outras também podem querer que a data seja exibida como “Hoje” ou “Ontem”. Se for essa a sua preferência, você pode seguir o próximo método.

Método 2: Usar código personalizado (personalizável, mas ligeiramente avançado)

Esse método envolve código personalizado e, como explicamos anteriormente, é a melhor opção se você quiser mostrar datas como “Today” ou “Yesterday” em vez de “X mins ago” ou “X hours ago”.

Mas não se sinta intimidado! Vamos orientá-lo passo a passo no processo. Além disso, usaremos um plug-in de snippet de código chamado WPCode, que torna seguro e fácil adicionar códigos personalizados sem quebrar seu site.

Você pode saber mais sobre o plug-in em nossa análise do WPCode.

Primeiro, instale e ative o plug-in do WordPress em sua área de administração.

Depois disso, você precisa ir para Code Snippets ” + Add Snippet. Em seguida, selecione “Add Your Custom Code (New Snippet)” (Adicionar seu código personalizado (novo snippet)) e clique no botão “+ Add Custom Snippet” (Adicionar snippet personalizado).

Adding a new custom code snippet in WPCode

Agora, dê um nome ao seu novo código personalizado. Pode ser algo simples, como “Data relativa formatada com hora”.

Além disso, altere o tipo de código para “PHP Snippet”.

Creating custom code to display relative dates with WPCode

Feito isso, basta copiar e colar o trecho de código abaixo na caixa Code Preview (Visualização de código):

/**
 * Converts a timestamp into a human-readable relative date string.
 *
 * @param int $timestamp The timestamp to convert
 * @return string The human-readable relative date string
 */
function human_readable_relative_date( $timestamp ) {
    $time_difference = time() - $timest  // Calculate the time difference between now and the timestamp
    $seconds_in_a_day = 86400;  // Number of seconds in a day


    if ( $time_difference < 0 ) {
        return 'Date is in the future';  // Handle future dates
    } elseif ( $time_difference < $seconds_in_a_day ) {
        return 'Today at ' . date( 'H:i', $timestamp );  // Handle same-day dates
    } elseif ( $time_difference < 2 * $seconds_in_a_day ) {
        return 'Yesterday at ' . date( 'H:i', $timestamp );  // Handle one-day-old dates
    } elseif ( $time_difference < 7 * $seconds_in_a_day ) {
        $days = floor( $time_difference / $seconds_in_a_day );  // Calculate full days ago
        return $days . ($days == 1 ? ' day' : ' days') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last week
    } elseif ( $time_difference < 30 * $seconds_in_a_day ) {
        $weeks = floor( $time_difference / ( 7 * $seconds_in_a_day ) );  // Calculate full weeks ago
        return $weeks . ($weeks == 1 ? ' week' : ' weeks') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last month
    } elseif ( $time_difference < 365 * $seconds_in_a_day ) {
        $months = floor( $time_difference / ( 30 * $seconds_in_a_day ) );  // Calculate full months ago
        return $months . ($months == 1 ? ' month' : ' months') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last year
    } else {
        $years = floor( $time_difference / ( 365 * $seconds_in_a_day ) );  // Calculate full years ago
        return $years . ($years == 1 ? ' year' : ' years') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates older than a year
    }
}


/**
 * Shortcode function to convert a given timestamp or date to a human-readable relative date string.
 *
 * @param array $atts Shortcode attributes
 * @return string The human-readable relative date string
 */
function relative_date_shortcode( $atts ) {
    $attributes = shortcode_atts(
        array(
            'timestamp' => '',  // Default value for 'timestamp' attribute
            'date' => '',       // Default value for 'date' attribute
        ),
        $atts
    );


    // If no timestamp or date attribute provided, use the post's published date
    if ( empty($attributes['timestamp']) && empty($attributes['date']) ) {
        global $post;
        if ( !is_null($post) ) {
            $attributes['timestamp'] = get_the_time('U', $post->ID);  // Get the post's timestamp
        }
    } elseif ( !empty($attributes['date']) ) {
        $attributes['timestamp'] = strtotime($attributes['date']);  // Convert 'date' attribute to timestamp
    }
    
    // Validate the timestamp
    if ( !empty($attributes['timestamp']) && is_numeric($attributes['timestamp']) ) {
        return human_readable_relative_date( $attributes['timestamp'] );  // Return the human-readable relative date
    } else {
        return 'Invalid timestamp or date';  // Return an error message if the timestamp is invalid
    }
}
add_shortcode( 'relative_date', 'relative_date_shortcode' );  // Register the shortcode

A primeira função, human_readable_relative_date, pega uma data e a transforma em um formato fácil de usar.

Por exemplo, ele pode mostrar “Hoje às 14h30” ou “3 dias atrás às 10h15”. Isso facilita para os leitores entenderem a idade de uma postagem.

A segunda função, relative_date_shortcode, cria um shortcode que você pode usar no WordPress. Esse shortcode permite que você adicione facilmente datas relativas ao seu conteúdo sem alterar os arquivos do tema.

Ao usar esse código, você pode tornar as datas das postagens mais fáceis de usar. Os leitores verão rapidamente o quão recente é seu conteúdo, o que pode tornar seu site mais atual e envolvente.

Em seguida, role para baixo até a seção “Insertion” (Inserção). Em seguida, escolha “Auto Insert” (Inserção automática) para o método de inserção e “Frontend Only” (Somente front-end) para o local.

Choosing Frontend Only as the code insertion location in WPCode

No canto superior direito, altere a opção “Inactive” (Inativo) para “Active” (Ativo) e clique no botão “Save Snippet” (Salvar snippet).

Com o código ativo, vamos ver como habilitar as datas relativas em seu blog do WordPress. O processo será diferente de acordo com o tipo de tema que você estiver usando.

Como adicionar o formato de data relativa em temas de bloco

Se você usa um tema de bloco, pode simplesmente adicionar o shortcode à parte do modelo “Post Meta”.

Essa parte do modelo é responsável por exibir informações sobre as publicações do blog, como o autor, a categoria e a data de publicação.

Dica profissional: se não estiver vendo o menu do personalizador de temas no administrador do WordPress, isso significa que você provavelmente está usando um tema de bloco. Caso contrário, pule para o próximo método.

Primeiro, vá para Appearance ” Editor para abrir o editor de site completo.

Selecting the Full-Site Editor from the WordPress admin panel

Agora você verá várias opções para personalizar o tema do bloco.

Aqui, clique em “Patterns” (Padrões).

Clicking the Patterns menu in the Full Site Editor

Na próxima página, você verá todos os padrões e partes de modelos que seu tema possui.

Basta selecionar a opção “Post Meta”.

Editing the Post Meta template part with the full site editor

Agora você deve ver a parte do modelo Post Meta.

Primeiro, você precisa excluir o bloco Date existente para que possamos substituí-lo pelo nosso shortcode.

Para fazer isso, você pode clicar no bloco Date (Data).

Se for difícil clicar nele, você pode simplesmente clicar no botão “List View” (Exibição de lista) na parte superior e selecionar o bloco “Date” (Data). Em seguida, clique no menu de três pontos e escolha “Excluir”.

Selecting the Date block in the Post Meta template part

Com o bloco Date excluído, vá em frente e adicione o bloco “Shortcode” ao Post Meta.

Você pode fazer isso clicando no botão “+” em qualquer lugar da página e arrastando e soltando o bloco de Shortcode lá.

Adding a shortcode block in the full site editor

Depois disso, digite o seguinte shortcode no bloco:

[relative_date]

Depois disso, basta clicar em “Salvar”.

Adding the relative date shortcode in the full site editor

Agora, seu modelo de postagem única usará datas relativas.

Veja como ele se parece em nosso site de demonstração:

Example of a relative date made with the WPCode custom code on a block theme

Como adicionar o formato de data relativa em temas clássicos

O processo para adicionar datas relativas em temas clássicos do WordPress é um pouco diferente e mais técnico. Isso ocorre porque cada tema clássico tem configurações diferentes.

Mas tenha paciência conosco. Daremos um exemplo para que você possa entender facilmente como fazer isso por conta própria, independentemente de estar usando um tema WordPress gratuito ou premium.

Se esta for a primeira vez que você personaliza os arquivos do tema clássico, recomendamos que o faça em um site de teste ou em uma versão local do seu site WordPress. Dessa forma, qualquer erro inesperado causado pela edição do código não afetará seu site ativo.

A primeira etapa que você precisa fazer é localizar o arquivo de tema responsável por exibir os metadados da postagem. Ele pode ser:

  • Seu arquivo de postagem única (geralmente chamado single.php)
  • A parte do modelo que exibe o conteúdo da postagem (algo como content.php)
  • Seu arquivo de tags de modelo, que contém funções para exibir informações de postagem (geralmente denominado template-tags.php)

Como regra geral, você deve procurar linhas de código que exibam a data da postagem. Essas linhas geralmente chamam funções do WordPress como the_date(), the_time(), get_the_date(), get_the_time(), get_the_modified_date() ou get_the_modified_time().

Se precisar de ajuda, temos um guia passo a passo sobre como encontrar quais arquivos de tema do WordPress devem ser editados usando um plug-in simples. Como alternativa, você pode entrar em contato com o desenvolvedor do tema do WordPress ou verificar a documentação dele para obter mais assistência.

Em nosso caso, o arquivo responsável por exibir a data de publicação é o template-tags.php. Aqui está o código original completo que o tema estava usando para mostrar a data exata de publicação:

if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
	/**
	 * Prints HTML with date information for current post.
	 *
	 * Create your own twentysixteen_entry_date() function to override in a child theme.
	 *
	 * @since Twenty Sixteen 1.0
	 */
	function twentysixteen_entry_date() {
		$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';

		if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
			$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
		}

		$time_string = sprintf(
			$time_string,
			esc_attr( get_the_date( 'c' ) ),
			get_the_date(),
			esc_attr( get_the_modified_date( 'c' ) ),
			get_the_modified_date()
		);

		printf(
			'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
			/* translators: Hidden accessibility text. */
			_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
			esc_url( get_permalink() ),
			$time_string
		);
	}
endif;

Para editar o arquivo em si, você pode abri-lo via FTP ou pelo gerenciador de arquivos do seu provedor de hospedagem WordPress.

Se você for um usuário da Bluehost, poderá usar o gerenciador de arquivos fazendo login na sua conta de hospedagem na Web. Em seguida, no painel de controle, clique na guia “Websites” e selecione “Settings” (Configurações) para o site que você está tentando personalizar.

Bluehost site settings

Isso abrirá a página de configurações do seu site.

Vá para a guia “Advanced” (Avançado) e clique no botão “Manage” (Gerenciar) na seção File Manager (Gerenciador de arquivos).

Click Manage button next to the File Manager option

Agora você deve estar no gerenciador de arquivos da Bluehost.

Como nosso arquivo se chama template-tags.php, tivemos que ir para public_html ” wp-content ” theme-name ” inc.

Opening the inc folder inside a WordPress theme using a file manager

Agora você verá vários arquivos para escolher.

Aqui, vá em frente e escolha template-tags.php. Clique com o botão direito do mouse no arquivo e selecione “Editar”.

Editing the template tags classic theme file with the file manager

Agora, localize o código que é responsável por exibir a data de publicação.

Você pode usar as teclas CTRL/Command e F para fazer isso.

Finding the code responsible for displaying post dates in a WordPress theme file using the file manager

Agora, você terá que editar esse código específico para que ele chame a função human_readable_relative_date que adicionamos usando o WPCode anteriormente.

Veja como substituímos o código original de if ( ! function_exists( 'twentysixteen_entry_date' ) : para endif;:

if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
	/**
	 * Prints HTML with date information for current post.
	 *
	 * Create your own twentysixteen_entry_date() function to override in a child theme.
	 *
	 * @since Twenty Sixteen 1.0
	 */
	function twentysixteen_entry_date() {
		// Get the post's published timestamp
		$published_timestamp = get_the_time('U');


		// Generate the human-readable relative date
		$relative_date = human_readable_relative_date( $published_timestamp );


		// Output the relative date
		printf(
			'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
			/* translators: Hidden accessibility text. */
			_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
			esc_url( get_permalink() ),
			$relative_date
		);
	}
endif;

Depois de modificar o código, clique no botão “Save Changes” (Salvar alterações).

Saving changes made to the template tag file in the file manager

Se o seu código não funcionar e você for totalmente iniciante nisso, sugerimos usar uma ferramenta de IA como o ChatGPT da OpenAI para descobrir o que há de errado com seu código.

Você poderia fazer uma pergunta simples como: ‘Olá, estou tentando fazer X usando o código abaixo [cole seu código aqui], mas não está funcionando. Você pode me ajudar a descobrir o que há de errado com isso?”.

Dito isso, se seu código funcionar, é isso que você deve ver no modelo de postagem única:

Example of a relative date on a classic theme, made with the WPCode custom code

Dicas de bônus para personalizar seu blog WordPress

Além de adicionar datas relativas às postagens do WordPress, há muitas outras maneiras de personalizar seu blog. Aqui estão algumas ideias:

Esperamos que este artigo tenha ajudado você a aprender como exibir datas relativas no WordPress. Talvez você também queira conferir nossas escolhas de especialistas dos melhores construtores de páginas de arrastar e soltar para WordPress e nosso guia definitivo sobre como editar um site WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

4 ComentáriosDeixe uma resposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ziaul Hai

    I want to know how to remove relative dates. My wordpress theme shows the relative date by default. But I am not able to change that.

    • WPBeginner Support

      You could replace the relative_post_the_date with the PHP in this article depending on how you want it to display but if you reach out to your theme’s support they may have a built-in method to disable this style of date.

      Administrador

  3. Sreeharsh

    Hi, I’m getting wrong time stamp using Meks Time Ago plugin in my homescreen. For a 9 hour ago post, its showing 2 weeks ago. Please help me solve it.
    Thank you.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.