Estrutura

Como criar campo de linha-fina (subtítulo) no WordPress

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

A linha-fina, subtítulo ou sutiã no jornalismo e diagramação, é uma parte importante do artigo, servindo como introdução ao conteúdo. Ali podem estar, dependendo do contexto, um brevíssimo resumo de toda a notícia, ou um texto de apoio para aumentar o interesse do leitor. Para saber mais sobre títulos e linha-fina, leia aqui.

O WordPress não tem um campo padrão para isso, mas podemos perfeitamente usar os Campos Personalizados, lembra deles? Já os mostrei num outro post inserindo dados adicionais (metadados) para os sistemas de busca (“Rich Snippets no WordPress – como usar microdata do Schema“). Eles são flexíveis e dá pra fazer muita coisa, e melhor ainda: não exigem instalação de plugins, nem inserção de códigos complicados, é bem simples atribuir valores e chamá-los dentro do tema.

Vejamos então como vai ser isso. Digamos que seu site tem a estrutura padrão. No exemplo, usei o tema Twenty Twelve.

artigo no tema twentytwelve

Temos lá o título, o link dos comentários e logo depois o conteúdo. Mas quero um subtítulo / linha-fina logo abaixo do título.

Pra começar, você precisa saber qual arquivo da estrutura do seu tema leva o loop do conteúdo dos posts. Normalmente é o arquivo single.php, mas pode ser outro – caso do Twenty Twelve, onde o loop está no arquivo content.php.

Seja qual for, o local é logo abaixo do título, que é chamado em PHP por algo como:

<h1 class="entry-title"><php the_title(); ?></h1>

Nota: se quiser também em páginas, procure no arquivo page.php.

Então logo abaixo desse heading 1, é onde estará nosso subtítulo. Para testar, escreva qualquer coisa ali, salve o arquivo no servidor e atualize a página. Se o que escreveu aparecer logo abaixo do título, está certo.

nova linha no código
Linha de teste no código HUEHUEHEUHE
nova linha como subtítulo
Se aparecer no post, ali é o lugar certo.

Muito bem, já confirmou que ali é o lugar certo? Então vamos colocar o código que chamará a linha-fina direto do nosso Campo Personalizado.

É esse aqui (coloque no lugar da risada-teste ali):

<?php
$postid = get_the_ID();
     if (get_post_meta($postid, 'subtitulo', true)) {
	      echo '<div>'. get_post_meta($postid, 'subtitulo', true) .'</div>';
		  }	 
wp_reset_query();
?>

Ele vai pegar o conteúdo de um campo chamado “subtitulo” e exibir no local; se não tiver nada, não exibe nada.

Agora salve no servidor e vamos testar: crie um novo post e vá lá nos campos personalizados. Se não estiver vendo onde criá-los, devem estar desativados: clique em Opções de Tela no alto da página de edição do post e marque a caixa.

ative os campos personalizados
Ativando os campos personalizados

Agora role a página até depois da área de edição e digite “subtitulo” em Nome, e seu conteúdo no campo Valor. Clique em Adicionar campo personalizado. Feito.

conteúdo do campo personalizdo

Salve ou publique seu post e visualize-o. Se fez tudo certo, estará lá a linha-fina que atribuiu.

linha-fina adicionada ao post

Estilizar é fácil, basta dar um identificador de CSS ao elemento: ficaria assim já com a id “linha-fina“:

<?php
$postid = get_the_ID();
     if (get_post_meta($postid, 'subtitulo', true)) {
	      echo '<div id="linha-fina">'. get_post_meta($postid, 'subtitulo', true) .'</div>';
		  }	 
wp_reset_query();
?>

Aí crie os estilos na sua folha (style.css).

#linha-fina { seus estilos aqui }

Molezinha…

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

5 Comentários

  1. O título e o subtítulo nos site e blogues de notícias e opinião, são de extrema importância porque os internautas são convidados à clicar no link fisgados pelo subtítulo, que resume o que será a matéria. Infelizmente no template ColorMeg eu não consegui instalar plugins. O ideal seria no campo abaixo do título e dos botões shares.

    • Pode ser também, mas se o usuário preferir um excerpt mais longo, acho que não fica bom no subtítulo. É o caso num outro site meu: uso o excerpt para SEO (description) e esse campo para um subtítulo mais resumido.

Deixe um Comentário

Pin