Como exibir e estilizar metadados de postagem no WordPress
Publicados: 2017-10-26
Você já notou uma data ou categoria em um post de blog? Isso é o que chamamos de ”metadados de postagem” – uma parte importante de uma postagem de blog. Ele ajuda a fornecer metadados sucintos sobre as peças de conteúdo do seu blog.
Se usado corretamente, o post meta pode melhorar a experiência do usuário; digamos que um visitante está interessado apenas em um determinado tópico, a meta de categoria pode ajudá-los a postar postagens curtas por categoria para que possam visualizar postagens sobre esse tópico específico em vez de ver todas as postagens. Ou, se você quiser ver apenas as postagens de um autor específico, a meta da postagem pode ajudá-lo a fazer isso.
Neste post, mostrarei como exibir e estilizar os metadados do post.
O que é Post Meta Data e como isso pode ajudar meu blog?
A seção de metadados de postagem contém informações relevantes de uma postagem de blog, como data de publicação, nome do autor, categorias, tags e taxonomias personalizadas, etc.
Se você tiver um blog, verifique se os metadados de sua postagem estão corretos, pois essas informações podem ajudar o visitante a entender mais sobre a postagem e também podem ajudar a aumentar suas visualizações de página, tornando seu site mais fácil de navegar.
Quantos metadados de postagem você deve exibir?
A localização dos metadados da postagem varia de tema para tema. Alguns podem exibi-lo antes do título do post, alguns após o título e alguns logo após o conteúdo.
Mas muitas meta-peças post podem atrapalhar o layout. A situação ideal é aquela em que você exibiria apenas as informações que considera necessárias.
Agora vamos ver como você pode personalizar e adicionar meta de postagem.
Personalizando os metadados de postagem
Como mencionado, a meta localização do post varia de tema para tema. Aqui trabalharemos em um tema específico – neste caso, o tema padrão do TwentySeventeen, portanto, lembre-se de que o código e as páginas podem ser diferentes do seu tema.
Em temas modernos, o meta do post é definido na página de tags de modelo e chamado quando necessário, mas em alguns temas você pode achar que o meta do post é colocado diretamente antes ou depois do título do post.
Geralmente, você encontraria meta tags de postagem nas páginas index.php , single.php , archive.php e de modelo de conteúdo .
Um código simples ficaria assim:
postado em
<?php the_time('F jS, Y'); ?> por <?php the_author_posts_link(); ?> <?php edit_post_link(); ?>Este código exibirá algo assim Postado na data por nome do autor com botão de edição (somente se você estiver logado no painel).
Mas agora a maioria dos temas modernos está usando a página de tags de modelo para lidar com a meta do post. Vamos ver como isso funciona.
Primeiro, você teria que criar um tema filho antes de fazer qualquer alteração.
Trabalharemos em uma página de postagem única e é assim que fica no front-end.
Digamos que queremos adicionar um ícone de usuário antes do nome do autor, para isso faça o seguinte:
No tema TwentySeventeen, o modelo single.php é usado para exibir um único post. Agora procure por get_template_part e observe o caminho do template lá, no nosso caso o caminho é:
get_template_part( 'template-parts/post/content', get_post_format() );
Agora, de acordo com o caminho, abra content.php e procure a seção entry-header .
<header class="entry-header">
<?php
if ( 'postar' === get_post_type() ) {
echo '<div class="entry-meta">';
if ( is_single() ) {
Twentyseventeen_posted_on();
} senão {
echo vinte dezessete_tempo_link();
vinte dezessete_edit_link();
};
echo '</div><!-- .entry-meta -->';
};
if ( is_single() ) {
the_title( '<h1 class="entry-title">', '</h1>' );
} elseif ( is_front_page() && is_home() ) {
the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
} senão {
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
}
?>
</header>
<!-- .entry-header -->
Podemos ver twentyseventeen_posted_on(); é chamada aqui para exibir a meta do post, temos que editar essa função. Você encontrará esta função no arquivo template-tags.php .
Uma dica: verifique o arquivo function.php do tema para obter o nome e o caminho do arquivo.
Procure por twentyseventeen_posted_on() e copie e cole a função inteira no arquivo function.php do seu tema filho (se você não tiver o arquivo function.php em seu tema filho, crie um arquivo em branco com o mesmo nome).
Usaremos ícones de fontes incríveis aqui, a maneira mais simples de usar fontes incríveis no WordPress é instalando o plugin Better Font Awesome.
if (! function_exists('twentyseventeen_posted_on')):
/**
* Imprime HTML com meta-informações para a data/hora atual e autor.
*/
function twentyseventeen_posted_on() {
// Obtém o nome do autor; envolvê-lo em um link.
$byline = sprintf(
/* tradutores: %s: autor do post */
__( 'por %s', 'vinte e dezessete' ),
'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '"><i class="fa fa-user" aria-hidden="true"></i>' . get_the_autor() . '</a></span>'
);
// Finalmente, vamos escrever tudo isso na página.
echo '<span class="posted-on">' . Twentyseventeen_time_link() . '</span><span class="byline"> ' . $byline. '</span>';
}
fim se;
Agora você pode ver um ícone de usuário ao lado do nome do autor.
Uma dica: você pode fazer essas alterações diretamente no arquivo content.php , mas é uma boa prática seguir a estrutura do tema.
Adicionando metadados de postagem
Até agora, personalizamos as metatags existentes. Agora para enfeitar as coisas – vamos supor que queremos exibir categoria e tags após o título do post.
Para fazer isso, copie o arquivo content.php do tema pai e cole-o no tema filho, mantendo o mesmo padrão de diretório.
Twentyseventeen > template-parts > post > content.php para twentyseventeen-child > template-parts > post > content.php
Agora você tem que escrever uma nova função.
Acha difícil? Na verdade não é, aqui está o que você precisa fazer.
A maioria dos temas mostrará categoria e tags em algum lugar do post, você só precisa localizar o arquivo e replicar o código em sua função e pronto.
Em nosso exemplo, no tema TwentySeventeen, a categoria e as tags são colocadas após o conteúdo. Agora precisamos seguir nosso fluxo de trabalho anterior.
Abra content.php e veja qual função é usada para categoria e tags.
<?php
if ( is_single() ) {
vinte dezessete_entrada_rodapé();
}
?>
Aqui está vinte dezessete_entrada_rodapé().
Agora vá para o arquivo template-tags.php e procure por twentyseventeen_entry_footer().
if (! function_exists('twentyseventeen_entry_footer')):
/**
* Imprime HTML com meta-informações para as categorias, tags e comentários.
*/
function vinte dezessete_entrada_rodapé() {
/* tradutores: usado entre os itens da lista, há um espaço após a vírgula */
$separate_meta = __( ', ', 'vinte e dezessete');
// Obter categorias para postagens.
$categories_list = get_the_category_list( $separate_meta );
// Obter Tags para postagens.
$tags_list = get_the_tag_list('', $separate_meta);
// Nós não queremos gerar .entry-footer se ele estiver vazio, então certifique-se de que não esteja.
if ( ( ( twentyseventeen_categorized_blog() && $categories_list ) || $tags_list ) || get_edit_post_link() ) {
echo '<footer class="entry-footer">';
if ( 'postar' === get_post_type() ) {
if ( ( $categories_list && twentyseventeen_categorized_blog() ) || $tags_list ) {
echo '<span class="cat-tags-links">';
// Verifique se há mais de uma categoria antes de exibir.
if ( $categories_list && twentyseventeen_categorized_blog() ) {
echo '<span class="cat-links">' . twentyseventeen_get_svg( array( 'icon' => 'folder-open') ) . '<span class="screen-reader-text">' . __('Categorias', 'vinte e dezessete') . '</span>' . $categories_list . '</span>';
}
if ( $tags_list ) {
echo '<span class="tags-links">' . twentyseventeen_get_svg( array( 'ícone' => 'hashtag' ) ) . '<span class="screen-reader-text">' . __('Tags', 'vinte e dezessete') . '</span>' . $tags_list . '</span>';
}
echo '</span>';
}
}
vinte dezessete_edit_link();
echo '</footer> <!-- .entry-footer -->';
}
}
fim se;
Encontre o código para a categoria e as tags e copie e cole o código no arquivo function.php do seu tema filho dentro de uma nova função, como esta -
if (! function_exists('twentyseventeen_post_meta')):
/**
* Imprime HTML com meta-informações para a data/hora atual e autor.
*/
function twentyseventeen_post_meta() {
/* tradutores: usado entre os itens da lista, há um espaço após a vírgula */
$separate_meta = __( ', ', 'vinte e dezessete');
// Obter categorias para postagens.
$categories_list = get_the_category_list( $separate_meta );
// Obter Tags para postagens.
$tags_list = get_the_tag_list('', $separate_meta);
echo '<span class="cat-tags-links">';
// Verifique se há mais de uma categoria antes de exibir.
if ( $categories_list && twentyseventeen_categorized_blog() ) {
echo '<span class="cat-links"><i class="fa fa-folder-open" aria-hidden="true"></i><span class="screen-reader-text">' . __('Categorias', 'vinte e dezessete') . '</span>' . $categories_list . '</span>';
}
if ( $tags_list ) {
echo '<span class="tags-links"><i class="fa fa-tags" aria-hidden="true"></i><span class="screen-reader-text">' . __('Tags', 'vinte e dezessete') . '</span>' . $tags_list . '</span>';
}
echo '</span>';
};
fim se;
Você pode ver que usei ícones incríveis de fontes para categorias e tags.
Estilizando seu Post Meta
Como colocamos nossas metatags no local desejado, é hora de ajustar algum estilo.
É muito simples se você conhece o básico de CSS. Vamos ajustar nossa seção de categorias e tags.
.entry-header .cat-tags-links {
tamanho da fonte: 14px;
}
.entry-header .cat-links {
padding-right: 5px;
}
Agora parece diferente.
Mas se você quiser mostrar seu próprio ícone personalizado em vez de uma fonte incrível ou qualquer outra, você pode usar sua imagem como imagem de fundo em CSS assim:
.entry-header .cat-links {
background: url(category-img.jpg) centro esquerdo sem repetição;
padding-left: 5px;
padding-right: 5px;
}
.entry-header .tags-links {
background: url(tag-img.jpg) centro esquerdo sem repetição;
padding-left: 5px;
padding-right: 5px;
}
Uma vez feito, não se esqueça de remover o código incrível da fonte do seu arquivo function.php .
Remover qualquer meta de postagem
Remover qualquer meta de postagem é muito simples, basta encontrar o código e excluí-lo.
Por exemplo, se você vir nossa página de postagem única agora, as categorias e tags agora estão aparecendo em duas seções. Se você não quiser exibi-lo após o conteúdo, simplesmente exclua a categoria e o código da tag da função twentyseventeen_entry_footer().
Portanto, o novo código ficaria assim no seu tema filho.
if (! function_exists('twentyseventeen_entry_footer')):
/**
* Imprime HTML com meta-informações para as categorias, tags e comentários.
*/
function vinte dezessete_entrada_rodapé() {
// Nós não queremos gerar .entry-footer se ele estiver vazio, então certifique-se de que não esteja.
if ( get_edit_post_link() ) {
echo '<footer class="entry-footer">';
vinte dezessete_edit_link();
echo '</footer> <!-- .entry-footer -->';
}
}
fim se;Conclusão
Como você pode ver, os meta-dados de postagem podem ser exibidos de várias maneiras, mas é melhor se você adquirir um entendimento básico da estrutura do seu tema primeiro e só então, se possível, fazer os ajustes de acordo. Isso minimiza a possibilidade de seu tema quebrar. PS não se esqueça de criar um backup.
Espero que este post tenha ajudado você a entender como os metadados do post funcionam, mas se você tiver alguma dúvida relevante, poste seus comentários abaixo.