Portuguese (Português) translation by João Fagner (you can also view the original English article)
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:
- Aplicação de categorias para anexos: nós precisamos fazer isso para que cada categoria tenha seus próprio anexos.
- Criando uma imagem de 'destaque' para uma categoria: neste tutorial eu demonstrei como criar 'imagens de destaque' para as categorias e, em seguida, exibi-los no arquivo da categoria. Este tutorial é um pouco diferente, vai ser como exibir as imagens de categoria na página principal do blog.
Este tutorial vai funcionar através desses passos:
- registrando a taxonomia de categoria para anexos
- configurando as categorias e adicionando imagens para elas
- 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:
1 |
/*
|
2 |
Theme Name: Automatic Featured Image Based On Category
|
3 |
Theme URI: https://code.tutsplus.com/tutorials/add-an-automatic-featured-image-to-blog-posts-based-on-category--cms-22664
|
4 |
Version: 1.0.0
|
5 |
Description: heme to accompany tutorial on adding category featured images to an archive page for tutsplus, at http://bit.ly/14cm0ya
|
6 |
Author: Rachel McCollin
|
7 |
Author URI: http://rachelmccollin.co.uk
|
8 |
License: GPL-3.0+
|
9 |
License URI: http://www.gnu.org/licenses/gpl-3.0.html
|
10 |
Domain Path: /lang
|
11 |
Text Domain: tutsplus
|
12 |
Template: twentyfourteen
|
13 |
*/
|
14 |
|
15 |
@import url('../twentyfourteen/style.css'); |
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:
1 |
<?php
|
2 |
|
3 |
/**
|
4 |
* Add featured image to category.
|
5 |
*/
|
6 |
function tutsplus_add_attachments_to_categories() { |
7 |
|
8 |
register_taxonomy_for_object_type( 'category', 'attachment' ); |
9 |
|
10 |
}
|
11 |
|
12 |
add_action( 'init' , 'tutsplus_add_attachments_to_categories' ); |
Salve seu arquivo e vá para a tela de Media do seu site. Você verá que foram adicionadas categorias ao submenu de mídia:
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:
Agora vou adicionar alguns posts e atribuir categorias a eles:
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á:
1 |
<?php
|
2 |
/**
|
3 |
* The primary template file.
|
4 |
*
|
5 |
* Based on the `index.php` file from TwentyFourteen, with an edited version of the `content.php` include file from that theme also included here.
|
6 |
*/
|
7 |
?>
|
8 |
|
9 |
<?php get_header(); ?> |
10 |
|
11 |
<div id="main-content" class="main-content"> |
12 |
|
13 |
<?php
|
14 |
|
15 |
if ( is_front_page() && twentyfourteen_has_featured_posts() ) { |
16 |
|
17 |
// Include the featured content template.
|
18 |
get_template_part( 'featured-content' ); |
19 |
|
20 |
}
|
21 |
|
22 |
?>
|
23 |
|
24 |
<div id="primary" class="content-area"> |
25 |
<div id="content" class="site-content" role="main"> |
26 |
|
27 |
<?php
|
28 |
|
29 |
if ( have_posts() ) { |
30 |
|
31 |
while ( have_posts() ) { |
32 |
|
33 |
the_post(); |
34 |
|
35 |
?>
|
36 |
|
37 |
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> |
38 |
|
39 |
<?php twentyfourteen_post_thumbnail(); ?> |
40 |
|
41 |
<header class="entry-header"> |
42 |
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) { ?> |
43 |
<div class="entry-meta"> |
44 |
<span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span> |
45 |
</div>
|
46 |
<?php } ?> |
47 |
<?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?> |
48 |
</header>
|
49 |
|
50 |
<div class="entry-content"> |
51 |
<?php
|
52 |
|
53 |
the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyfourteen' ) ); |
54 |
wp_link_pages( |
55 |
array( |
56 |
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>', |
57 |
'after' => '</div>', |
58 |
'link_before' => '<span>', |
59 |
'link_after' => '</span>', |
60 |
)
|
61 |
);
|
62 |
|
63 |
?>
|
64 |
</div>
|
65 |
|
66 |
<?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?> |
67 |
</article>
|
68 |
|
69 |
<?php
|
70 |
|
71 |
}
|
72 |
|
73 |
// Display previous / next post navigation.
|
74 |
twentyfourteen_paging_nav(); |
75 |
|
76 |
} else { |
77 |
|
78 |
// If there is no content, include the "No posts found" template.
|
79 |
get_template_part( 'content', 'none' ); |
80 |
|
81 |
}
|
82 |
|
83 |
?>
|
84 |
|
85 |
</div>
|
86 |
</div>
|
87 |
<?php get_sidebar( 'content' ); ?> |
88 |
</div>
|
89 |
|
90 |
<?php get_sidebar(); ?> |
91 |
<?php get_footer(); ?> |
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:
1 |
<?php twentyfourteen_post_thumbnail(); ?> |
Imediatamente dentro da abertura da tag <article>, adicione o seguinte:
1 |
<?php
|
2 |
|
3 |
// Find the first category the post is in.
|
4 |
$categories = get_the_category(); |
5 |
$category = $categories[ 0 ]->term_id; |
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:
1 |
$args = array( |
2 |
'cat' => $category, |
3 |
'post_status' => 'inherit', |
4 |
'post_type' => 'attachment', |
5 |
'posts_per_page' => '1' |
6 |
);
|
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:
1 |
$query = new WP_Query( $args ); |
2 |
|
3 |
if ( $query->have_posts() ) { |
4 |
|
5 |
while ( $query->have_posts() ) { |
6 |
|
7 |
$query->the_post(); |
8 |
|
9 |
?>
|
10 |
|
11 |
<div class="category-featured-image"> |
12 |
<?php echo wp_get_attachment_image( $post->ID, 'thumbnail' ); ?> |
13 |
</div>
|
14 |
|
15 |
<?php
|
16 |
|
17 |
}
|
18 |
}
|
19 |
|
20 |
// Reset postdata to restore ordinal query.
|
21 |
wp_reset_postdata(); |
22 |
|
23 |
?>
|
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:
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:
1 |
.category-featured-image { |
2 |
float: left; |
3 |
margin: 10px 2%; |
4 |
}
|
5 |
|
6 |
.blog .entry-header .entry-title, |
7 |
.blog .entry-header .entry-meta { |
8 |
clear: none; |
9 |
}
|
Isto traz as imagens até a esquerda do post:
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.phppara 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 deget_the_category()comget_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.phpcaso 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!
