A imagem destacada é essencial na hora de produzir um artigo ou uma nova página em seu site WordPress, tanto no que diz respeito a uma forma de oferecer uma primeira ilustração sobre o conteúdo apresentado, como para compor o SMO (search media optimization) do seu site, além de ser um quesito a mais para fortalecer a sua estratégia de SEO.
Se você está utilizando um tema pronto, o ideal é verificar se o mesmo já possui ou não o suporte para “Imagem destacada”. Para isso, dentro do seu painel WordPress, na página de criação de post, vá no canto superior direito, clique em “Opções de tela” e verifique se a opção “Imagem destacada” está presente, se estiver, basta marcar essa opção, pois provavelmente, seu tema já oferece esse recurso, mas estava apenas desativado, então irá aparecer a imagem abaixo:
Caso essa opção não esteja visível ou até esteja, mas, por mais que você adicione a imagem, ela nunca aparece em seu post, siga os passos abaixo para resolvermos isso.
Acesse o diretório do seu tema, procurei o arquivo functions.php e adicione o bloco de código abaixo, no final desse arquivo.
function ed_support_thumbnails() {
add_theme_support('post-thumbnails'); // thumbnails
}
add_action('after_setup_theme', 'ed_support_thumbnails'); // carrega parametros de suporte do tema
Salve o arquivo, com isso, a opção de imagem destacada estará disponível em seu painel de cadastro de post ou de páginas no WordPress.
Agora precisamos fazer com que essa imagem cadastrada apareça em seu post ou página. Para isso, acesse o arquivo single.php ou single-post.php do seu tema e adicione o bloco de código abaixo no local onde deseja exibir a imagem.
<?php
if (has_post_thumbnail()):
the_post_thumbnail('post-thumbnail', ['class' => 'img-fluid']);
endif;
?>
Como pode observar, no bloco de código acima, adicionamos a classe “img-fluid” a imagem, essa classe é geralmente utilizada pelo Bootstrap 4.x para tornar a imagem responsiva, limitando o max-width em 100%;
Adicionando o FancyBox nas imagens Destacadas
Se você estiver utilizando o plugin Fancybox e deseja adiciona-lo a imagem destacada, como fizemos em nosso blog, substitua o código anterior pelo código abaixo:
<?php if (has_post_thumbnail()):?>
<a class='fancybox' href='<?= get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>'>
<?php the_post_thumbnail('post-thumbnail', ['class' => 'img-fluid']); ?>
</a>
<?php endif; ?>
Com isso, a imagem será exibida com o link contendo a classe ‘fancybox’, assim, se o recurso do plugin “Inline content” estiver ativado, sua imagem destacada também poderá ser exibida com o Fancybox.
Então…, esse mini tutorial foi útil? Deseja sugerir algum complemento ou correção? Deixe nos comentários.
