Exibição da Data ou do Ano Atual – Ao criar um tema de blocos no WordPress, muitas vezes surge a necessidade de exibir informações dinâmicas, como a data ou apenas o ano atual, diretamente no editor ou no site final. No entanto, o formato tradicional de temas baseados em PHP não é aplicado diretamente aos temas baseados em blocos e no theme.json, exigindo abordagens específicas.
Neste guia, exploramos as melhores práticas para adicionar essa funcionalidade, abrangendo diferentes cenários e níveis de personalização. As soluções incluem:
Exibição da Data ou do Ano Atual
- Shortcodes: Uma abordagem mais simples, que pode ser usada em qualquer parte do conteúdo para a exibição da data ou do ano atual no formato desejado.
- Blocos Dinâmicos: Perfeitos para temas modernos, permitem integrar conteúdo dinâmico, como a data ou o ano atual, diretamente no editor de blocos.
- Blocos HTML no Editor: Para casos onde um ajuste rápido é necessário, utilizando códigos PHP diretamente em blocos personalizados.
- Configuração via theme.json: Apesar de limitada para elementos dinâmicos, combinada com um bloco dinâmico, esta abordagem mantém o tema alinhado com a estrutura dos temas de blocos.
Com essas soluções, é possível garantir que a data ou o ano atual sejam exibidos corretamente, seja para fins de design, informações de copyright, ou para qualquer outra necessidade. Vamos detalhar cada método para que você escolha o que melhor se adapta ao seu projeto!
Para exibir a data atual global em vez da data de publicação do post, você precisará personalizar o bloco ou usar um código PHP no WordPress. Abaixo estão duas abordagens possíveis:
Ídice
1. Usar um Shortcode para exibir a data atual
Você pode criar um shortcode que retorna a data atual e inseri-lo no lugar do bloco de data do post:
Código para o Shortcode:
Adicione o seguinte código ao arquivo functions.php do seu tema ou a um plugin personalizado:
function exibir_data_atual() {
return date_i18n( get_option( 'date_format' ) );
}
add_shortcode( 'data_atual', 'exibir_data_atual' );
Como usar:
- Escolha o bloco “Shortcode” na aba blocos do editor.
- Insira o shortcode [data_atual] no conteúdo.
![Insira o shortcode [data_atual] no conteúdo.](https://wilson66.net.br/wp-content/uploads/2024/12/Insira-o-shortcode-data_atual-no-conteudo.webp)
Isso exibirá a data atual no formato definido nas configurações de data do WordPress.
2. Customizar o bloco diretamente com um código dinâmico
Aqui está um exemplo de código para criar um bloco dinâmico no editor Gutenberg que exibe a data atual. O bloco utiliza PHP para renderizar dinamicamente a data no frontend e JavaScript para registrá-lo no editor.
Exemplo de um bloco dinâmico:
Crie uma pasta dentro da pasta do seu tema.
/meu-tema/
|-- /data-atual/
| |-- bloco-data-atual.php
| |-- bloco.js
Crie e adicione o seguinte código ao arquivo bloco-data-atual.php:
<?php
// Registra o bloco dinâmico
function register_dynamic_date_block() {
// Registra o script do bloco
wp_register_script(
'dynamic-date-block-editor',
get_template_directory_uri() . '/data-atual/block.js', // Atualize o caminho conforme necessário
array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components'),
filemtime(get_template_directory() . '/data-atual/block.js')
);
// Registra o bloco com renderização dinâmica
register_block_type('custom/dynamic-date', array(
'editor_script' => 'dynamic-date-block-editor',
'render_callback' => 'render_dynamic_date_block',
));
}
add_action('init', 'register_dynamic_date_block');
// Função de renderização dinâmica do bloco
function render_dynamic_date_block() {
return '<div class="dynamic-date-block">' . date_i18n(get_option('date_format')) . '</div>';
}Em seguida crie o segundo arquivo, bloco.js e adicione o seguinte código:
const { registerBlockType } = wp.blocks;
registerBlockType('custom/dynamic-date', {
title: 'Data Atual',
icon: 'calendar',
category: 'widgets',
edit: () => wp.element.createElement('p', null, 'Data atual: será exibida no frontend, não pode ser editada aqui.'),
save: () => null, // O conteúdo é renderizado dinamicamente via PHP
});Finalmente, abra o arquivo functions.php do seu tema e cole o trecho de código abaixo:
require get_template_directory() . '/data-atual/bloco-data-atual.php';
Como usar:
- Escolha o bloco “Data Atual” na aba blocos do editor.
- Ele exibirá automaticamente a data atual no formato global.
Exibindo a renderização do texto gerado pelo bloco data atual.
3. Usar um bloco de texto com código embutido no editor
Se você prefere simplicidade e não quer mexer em PHP, basta inserir um bloco de texto com o shortcode PHP embutido (se seu WordPress permitir executar PHP em blocos).
<?php echo date_i18n( get_option( 'date_format' ) ); ?>
4. Para temas de blocos com suporte ao arquivo theme.json
Para temas baseados em blocos e com suporte ao arquivo theme.json, você pode criar um bloco dinâmico ou usar um filtro de blocos existente. Como o arquivo theme.json não permite diretamente a inserção de PHP, você precisará criar um bloco personalizado que exiba a data atual, essa é uma abordagem bem mais complexa, pois você tem que ter pelo menos um pouco de noção de .JSON e Javascript. Aqui está o passo a passo correto para temas de blocos:
1. Criar um Bloco Dinâmico para Data Atual
Blocos dinâmicos são adequados para temas de blocos (block themes) e permitem exibir conteúdo gerado dinamicamente, como a data atual.
a) Crie um diretório para o bloco
No seu tema, adicione a estrutura:
Nome-do-tema/
├── blocos/
| |--bloco-data-atual.php
│ ├── data-atual/
│ │ ├── block.json
│ │ ├── render.php
│ │ ├── index.js (opcional, se precisar de JavaScript)
b) Registrar o bloco
Crie o arquivo bloco-data-atual.php dentro da pasta blocos, este é responsável por registrar o bloco data atual no editor gutenberg do Wordprress. Copie e cole o código abaixo:
<?php
/**
* Bloco Dinâmico para WordPress
*
* Copyright (c) 2024 Wilson66Blog
* Este código foi criado como parte de um exemplo funcional para blocos dinâmicos no WordPress.
* Você pode usar e modificar este código conforme necessário, respeitando os créditos ao autor.
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* Registers the block using the metadata loaded from the `block.json` file.
*/
function externo_bloco_data_atual_init() {
register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'externo_bloco_data_atual_init' );c) Configure o block.json
O block.json é usado para registrar o bloco no WordPress e contém metadados. O arquivo block.json define o bloco. Adicione o seguinte conteúdo:
{
"apiVersion": 3,
"name": "custom-namespace/bloco-data-atual",
"version": "0.1.0",
"title": "Data Aual",
"category": "widgets",
"description": "Exiba a data atual do seu site.",
"example": {},
"attributes": {
"fallbackCurrentYear": {
"type": "string"
},
"showStartingYear": {
"type": "boolean"
},
"startingYear": {
"type": "string"
}
},
"supports": {
"color": {
"background": false,
"text": true
},
"html": false,
"typography": {
"fontSize": true
}
},
"textdomain": "bloco-data-atual",
"editorScript": "file:./index.js",
"render": "file:./render.php"
}d) Crie o arquivo render.php
Esse arquivo define como o conteúdo dinâmico será renderizado no front-end. Este arquivo será responsável por gerar a data atual:
<?php
/**
* Bloco Dinâmico para WordPress
*
* Copyright (c) 2024 Wilson66Blog
* Este código foi criado como parte de um exemplo funcional para blocos dinâmicos no WordPress.
* Você pode usar e modificar este código conforme necessário, respeitando os créditos ao autor.
*/
// Obtenha o ano atual.e a data atual
//$current_year = date_i18n( 'Y' );
$current_year = date_i18n( get_option( 'date_format' ) );
// Determina qual conteúdo exibir.
if ( isset( $attributes['fallbackCurrentYear'] ) && $attributes['fallbackCurrentYear'] === $current_year ) {
// Se o ano atual for o mesmo do fallback, então use o conteúdo do bloco salvo no banco de dados (pela função save.js).
$block_content = $content;
} else {
// Se o ano atual for diferente do fallback, então renderize o conteúdo do bloco atualizado.
if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) {
$display_date = $attributes['startingYear'] . ' a ' . $current_year;
} else {
$display_date = $current_year;
}
$block_content = '<p ' . get_block_wrapper_attributes() . '>' . esc_html( $display_date ) . '</p>';
}
echo wp_kses_post( $block_content, );e) Renderiza o bloco no backend
Este arquivo é responsável por mostrar o bloco e suas configurações no editor, crie o arquivo index.js e cole o código abaixo:
!function() {
"use strict";
var e = window.wp.element;
var t = window.wp.blocks;
var r = window.wp.i18n;
var n = window.wp.blockEditor;
var a = window.wp.components;
var o = window.React;
var l = JSON.parse('{"u2":"custom-namespace/bloco-data-atual"}');
const c = (0, e.createElement)(
"svg",
{
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true",
focusable: "false"
},
(0, e.createElement)("path", {
d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V7h15v12zM9 10H7v2h2v-2zm0 4H7v2h2v-2zm4-4h-2v2h2v-2zm4 0h-2v2h2v-2zm-4 4h-2v2h2v-2zm4 0h-2v2h2v-2z"
})
);
(0, t.registerBlockType)(l.u2, {
icon: c,
edit: function({ attributes: t, setAttributes: l }) {
const { fallbackCurrentYear: c, showStartingYear: i, startingYear: s } = t;
const w = (new Date).getFullYear().toString();
let h;
(0, o.useEffect)(() => {
if (w !== c) {
l({ fallbackCurrentYear: w });
}
}, [w, c, l]);
h = i && s ? `${s}–${w}` : w;
return (
(0, e.createElement)(
e.Fragment,
null,
(0, e.createElement)(
n.InspectorControls,
null,
(0, e.createElement)(
a.PanelBody,
{ title: (0, r.__)("Configurações", "bloco-data-atual") },
(0, e.createElement)(a.ToggleControl, {
checked: i,
label: (0, r.__)("Mostrar ano inicial", "bloco-data-atual"),
onChange: () => l({ showStartingYear: !i })
}),
i && (0, e.createElement)(a.TextControl, {
label: (0, r.__)("Ano de início", "bloco-data-atual"),
value: s,
onChange: e => l({ startingYear: e })
})
)
),
(0, e.createElement)(
"p",
{ ...(0, n.useBlockProps)() },
h
)
)
);
},
save: function({ attributes: t }) {
const { fallbackCurrentYear: r, showStartingYear: a, startingYear: o } = t;
if (!r) return null;
let l = a && o ? `${o}–${r}` : r;
return (0, e.createElement)(
"p",
{ ...n.useBlockProps.save() },
l
);
}
});
}();f) Registre o bloco
Adicione o seguinte código ao arquivo functions.php do seu tema:
require get_template_directory() . '/nova-data-atual/bloco-data-atual.php';
g) Usando o Bloco no Editor
- Após registrar o bloco, ele aparecerá na categoria “Widgets” com o nome “Data Atual”.
- Arraste e solte no editor onde você deseja exibir a data atual. Esse código tem a opção para você definir uma data de início.
Resultado no frontend do site:
2. Configurar para JSON sem criar bloco
Se você deseja usar apenas configuração via JSON e os blocos existentes, infelizmente o theme.json sozinho não suporta diretamente PHP ou JavaScript dinâmico. Nesse caso, use o Bloco de Código Personalizado no editor e adicione:
<!-- wp:html --> <?php echo date_i18n( get_option( 'date_format' ) ); ?> <!-- /wp:html -->
Isso exibe a data atual diretamente.
Exibir somente o ano atual
Para exibir somente o ano atual em um tema baseado em blocos (block theme), você pode ajustar o bloco dinâmico ou usar um atalho no PHP para retornar apenas o ano.
1. Atualizando o Bloco Dinâmico para Mostrar Apenas o Ano
a) Modifique o render.php do bloco dinâmico:
Se você já criou o bloco dinâmico, edite o arquivo render.php para exibir apenas o ano, remova o comentário da primeira linha e comente a segunda linha:
// Obtenha o ano atual.e a data atual $current_year = date_i18n( 'Y' ); // $current_year = date_i18n( get_option( 'date_format' ) );
Este código usa o formato ‘Y’ para exibir o ano atual (exemplo: 2024).
2. Adicionar o Ano Diretamente no Tema via Shortcode
Se preferir usar um shortcode para exibir apenas o ano, crie um no functions.php:
function shortcode_ano_atual() {
return date_i18n( 'Y' );
}
add_shortcode( 'ano_atual', 'shortcode_ano_atual' );Como usar:
- Adicione um bloco de sohortcode ou de texto no editor.
- Insira [ano_atual] no bloco para exibir o ano.
Mostrando apenas o ano atual, essa abordagem geralmente é usada para adicionar o copyright:
3. Alterando um Bloco HTML no Editor
Se você quiser uma solução simples diretamente no editor de blocos:
- Adicione um bloco de código no editor.
- Insira o código PHP diretamente:
<?php echo date_i18n( 'Y' ); ?>
Nota: Essa abordagem depende do suporte do WordPress para executar PHP no editor. Caso contrário, use o bloco dinâmico ou o shortcode.
4. Usando o Formato Padrão no theme.json
Se você estiver configurando blocos de data via JSON, infelizmente o theme.json não suporta diretamente formatação dinâmica. Nesse caso, será necessário usar o método do bloco dinâmico.
- Referência: @wordpress/create-block
- Visite: wilson66
Deixe um comentário