Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Adicione uma 'Imagem de Destaque' Automatica para as Postagens do Blog com Base na Categoria

by
Difficulty:AdvancedLength:MediumLanguages:

Portuguese (Português) translation by João Fagner (you can also view the original English article)

Final product image
What You'll Be Creating

Usando imagens de destaque nos arquivos de post é uma característica comum dos temas, mas às vezes você pode querer usar imagens destaque um pouco diferente. Ocasionalmente, eu trabalhei em sites onde as imagens a serem exibidas referem-se a um post que esta na categoria e não no post em si. Em vez de adicionar a mesma imagem de destaque para cada post em cada categoria, seria muito mais simples se eu pudesse atribuir apenas a categoria para cada uma das minhas imagens e em seguida, exibir a imagem destacada para a categoria com o post.

Exemplos de quando você pode querer fazer esta modificação:

  • Quando cada post é associado a uma marca e você deseja exibir o logotipo
  • Quando cada post é associado a um número de lugares e você deseja exibir uma imagem (ou mapa) daquele lugar
  • Quando cada post refere-se a um determinado tópico (por exemplo, em um site de aprendizado) e você deseja exibir um ícone para esse tópico
  • Quando os posts são parte de um número de série (como às vezes acontece neste site) e você queira usar uma imagem para identificar cada série

Neste tutorial estarei usando algumas das técnicas que já demonstrei em dois tutoriais anteriores:

Este tutorial vai funcionar através desses passos:

  1. registrando a taxonomia de categoria para anexos
  2. configurando as categorias e adicionando imagens para elas
  3. no loop, identificando qual categoria em que post,está, em seguida a execução da consulta para o anexo da categoria de saída

Nota: Para cada post apenas uma categoria será identificada, e para cada categoria apenas uma imagem será mostrada (a mais recente).

Eu também estou olhando como você pode adaptar essa técnica para outras páginas de arquivos, como arquivos do tipo post personalizado.

O que Você vai Precisar

Para seguir este tutorial você precisará do seguinte:

  • uma instalação de desenvolvimento do WordPress
  • um tema, você pode editar (criarei um tema filho do Twenty Fourteen)
  • Acesso ao FTP (ou MAMP ou similar se você estiver trabalhando localmente)
  • um editor de código

Configurando Seus Arquivos do Tema

Para seguir este tutorial, você precisará criar ou editar um tema. Eu vou criar um tema filho do tema Twenty Fourteen.

Essa é a minha folha de estilo:

Isso configura o tema como um filho do tema Twenty Fourteen. Se você precisa saber mais sobre como criar temas filho, dê uma olhada nessa página do Codex.

Se você estiver seguindo esse tutorial você também vai criar um arquivo functions.php para o seu tema (ou editar um existente se você tiver usando o seu tema) e também deve criar um arquivo index.php.

Registrndo Categorias para Anexos

Por padrão WordPress não permite você atribuir categorias aos anexos, mas isso é facilmente alterado.

Se seu tema não tiver um arquivo functions, crie um arquivo chamado functions.php e adicione o seguinte código para ele:

Salve seu arquivo e vá para a tela de Media do seu site. Você verá que foram adicionadas categorias ao submenu de mídia:

Media Library with categories added to submenu

Nota: Para saber mais sobre isso, consulte este tutorial.

Adicionando Imagens da Categoria

Agora eu preciso fazer upload de algumas imagens e adiciona-las em cada uma das categorias. As imagens que você vai enviar para o seu site vão depender da sua necessidade: Eu usei cores para minhas categorias então encontrei algumas imagens represetando cada uma dessas cores. Destaquei as categorias relevantes, então isto é o que aparece em minha Biblioteca de Mídia:

Media Library showing images in different categories

Agora vou adicionar alguns posts e atribuir categorias a eles:

List of posts with different categories

Criando o Arquivo index.php

Agora que temos os posts configurados e as imagens da categoria no lugar, precisamos editar o arquivo index.php para exibir as imagens de destaque da categoria.

Configurando o Arquivo.

Você precisará editar o arquivo index.php existente ou adicionar um novo. Eu criei um modelo baseado no arquivo index.php e adicionei o arquivo content.php do tema Twenty Fourteen. Agora olha como ficará:

Identificando a Categoria do Post Atual

Para exibir a imagem relevante a categoria, você precisará identificar em qual categoria o post atual está. Você precisará fazer isso dentro do loop.

Primeiro, se você está trabalhando com Twenty Fourteen, remova a função que gera a imagem de destaque do post. Remova esta linha:

Imediatamente dentro da abertura da tag <article>, adicione o seguinte:

Isto cria uma variável chamada $category, cujo valor é o ID da primeira categoria em que post esta, usando a função get_the_category().

Criação de Argumentos para a Consulta

Agora você pode usar essa variável para os argumentos da sua consulta. Abaixo ao que você acabou de adicionar, adicione isto:

Estes argumentos dizem que sua consulta de saída será apenas um anexo da categoria que você já identificou. Observe que você deve usar o argumento 'post_status', porque o padrão de anexos para o 'post_status' => 'inherit', e não 'public' como outro post tipos.

Agora adicione a consulta em si:

Isso coloca a imagem dentro de uma div com a classe category-featured-image, que você pode usar para estilizar. Depois ele usa a função wp_get_attachment_image() para exibir a imagem.

Agora, se você atualizar a página do seu blog, você verá as imagens exibidas:

Home page with images displayed for different categories

Agora existe muito espaço vazio, então vamos adicionar algum estilo.

Estilizando as Imagens

Abra a folha de estilos do seu tema e adicione qualquer estilo que você desejar dar a suas imagens. Eu adicionei os seguintes:

Isto traz as imagens até a esquerda do post:

Home page with images flush left

Adaptando-se esta técnica para outros tipos de conteúdo

Você poderia usar essa técnica com outros tipos de conteúdo. Por exemplo:

  • Com um tipo de post personalizado, você poderia criar um arquivo de modelo de archive-$posttype.php para esse tipo de post com um loop semelhante ao de cima.
  • Se você estiver usando uma taxonomia personalizada em vez de categorias, você adicionaria 'attachment' para o tipo de post, a taxonomia será registrada quando você registrá-la primeiro. Então, você poderia substituir a função de get_the_category() com get_the_terms() e os argumentos de categoria para a sua consulta com argumentos de taxonomia.
  • Você pode combinar duas taxonomias, exibindo as imagens de uma taxonomia com posts sobre o modelo de arquivo para outra, taxonomia, talvez com a imagem de ligação para a página de arquivo para o seu termo de taxonomia.
  • Você pode usar uma técnica semelhante a anterior em seu arquivo archive.php caso o seu tenha um, para que os posts em arquivos também tenha uma imagem destaque na categoria exibida.
  • Se você quisesse combinar uma ou mais das opções acima, você poderia criar um arquivo de inclusão com seu loop (incluindo a imagem  de destaque  da categoria) e a chamada aos arquivos relevante do modelo.

Resumo

Como foi descrito no início deste tutorial, pode haver situações onde em vez de mostrar uma imagem de destaque para cada post, você deseja exibi uma imagem relativa a essa categoria em que o post está.

Neste tutorial você aprendeu como fazer isso, adicionando categorias para anexos, identificando a primeira categoria para cada post em seu loop, e em seguida, criando uma consulta para a saída da imagem para essa categoria.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.