() translation by (you can also view the original English article)
È frequente utilizzare nelle pagine di archivio le immagini in evidenza dei post, ma alcune volte potremmo aver bisogno di usarle in maniera un po' differente. A volte ho lavorato in siti dove le immagini visualizzate nei post erano relative alla categoria e non all'articolo in sé. Invece di inserire la stessa immagine in evidenza in ogni articolo di uguale categoria, sarebbe molto più semplice poter assegnare ad ogni categoria un'immagine e visualizzare quella.
I casi nei quali potrebbe essere utile sono:
- quando ogni post è associato con un brand e vogliamo visualizzare il logo
- quando ogni post è associato con uno o più luoghi e ne vogliamo visualizzare l'immagine (o la mappa)
- quando ogni post è relazionato con un determinato argomento (per esempio in un sito elearning) e vogliamo visualizzare un'icona di questo argomento
- quando i post fanno parte di una serie (come qualche volta capita in questo sito) e vogliamo usare un'immagine per identificare ogni serie
In questo tutorial userò alcune delle tecniche che ho già mostrato in due precedenti tutorial:
- Applicare categorie agli allegati: per fare in modo che ogni categoria abbia i propri allegati.
- Creare un'immagine personalizzata per una categoria: in questo tutorial spiego come creare 'immagini in evidenza' per le categorie e come visualizzarle nell'archivio della categoria. Questo tutorial è leggermente diverso in quanto visualizzeremo le immagini delle categorie nella pagina principale del blog.
Perché questo tutorial funzioni bisogna seguire questi passaggi:
- registrare la categoria per gli allegati
- creare le categorie e aggiungere a queste le immagini
- nel loop, identificare a quale categoria appartiene il post e quindi eseguire la query per visualizzare l'immagine di questa categoria
Nota: Per ogni post viene identificata solo una categoria, e per ogni categoria viene visualizzata una sola immagine (la più recente).
Vedremo anche come è possibile adattare questa tecnica per altre pagine di archivio, ad esempio per gli archivi dei custom post type (post personalizzati).
Di cosa abbiamo bisogno
Per seguire questo tutorial abbiamo bisogno di:
- un'ambiente di sviluppo per WordPress
- un tema da poter editare (io creo un tema figlio di Twenty Fourteen)
- accesso FTP (o MAMP e simili se stai lavorando in locale)
- un editor di codice
Impostiamo i file del tema
Per seguire questo tutorial, abbiamo bisogno di creare o editare un tema. Io vado a creare un child theme (tema figlio) del tema Twenty Fourteen
Questo è il mio foglio di stile:
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'); |
Questo imposta il tema come un tema figlio di Twenty Fourteen. Se vuoi sapere di più riguardo i temi figlio, dai uno sguardo alla pagina del Codex
Per andare aventi con questo tutorial dobbiamo inoltre creare un file functions.php per il nostro tema (o editarlo se ne già ne abbiamo uno nel tema), e anche creare un file index.php.
Registrare Categorie per le Immagini
Di default Wordpress non permette di assegnare categorie alle immagini, ma questo può essere facilmente cambiato.
Se il tema non ha ancora un file functions.php , creiamo un file chiamato functions.php e ci inseriamo il codice seguente:
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' ); |
Salviamo il file e andiamo nella schermata Media del nostro sito. Vediamo che le categorie sono state aggiunte al sottomenù dei media.
Nota: per sapere di più, guarda questo tutorial.
Aggiungere Immagini di Categoria
Adesso dobbiamo caricare alcune immagini e associare a ciascuna una categoria. Le immagini da caricare dipendono dalle esigenze del tuo sito: ho usato i colori per le categorie così ho cercato immagini funzionali ai colori. Ho assegnato le categorie rilevanti, quindi così ora appare la mia Libreria Media:
Ora, aggiungo alcuni articoli e assegno loro le categorie.
Creazione del file index.php
Ora che abbiamo impostato gli articoli e abbiamo assegnato le categorie alle immagini, bisogna editare il file index.php per visualizzare le immagini in evidenza per le categorie.
Impostiamo il File
Dobbiamo quindi editare il file index.php esistente o aggiungerne uno nuovo. Ne ho creato uno basato sul file index.php e il content.php del tema Twenty Fourteen. Ora appare così:
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(); ?> |
Identificare la categoria del post
Per visualizzare la relativa immagine di categoria dobbiamo identificare a quale categoria appartiene l'articolo. E dobbiamo farlo dentro il loop.
Primo, se stiamo lavorando con Twenty Fourteen, rimuoviamo la funzione che visualizza l'immagine in evidenza del post. Togliamo questa linea:
1 |
<?php twentyfourteen_post_thumbnail(); ?> |
Immediatamente dopo l'apertura di <article>, aggiungiamo il seguente codice:
1 |
<?php
|
2 |
|
3 |
// Find the first category the post is in.
|
4 |
$categories = get_the_category(); |
5 |
$category = $categories[ 0 ]->term_id; |
Questo crea una variabile chiamata $category il cui valore è quello dell'ID della prima categoria a cui il post appartiene, usando la funzione get_the_category()
Creare gli argomenti della Query
Adesso possiamo usare questa variabile negli argomenti della query. Sotto il codice appena inserito, aggiungere questo:
1 |
$args = array( |
2 |
'cat' => $category, |
3 |
'post_status' => 'inherit', |
4 |
'post_type' => 'attachment', |
5 |
'posts_per_page' => '1' |
6 |
);
|
Questi argomenti fanno in modo che la nostra query visualizzi solo un'immagine nella categoria indicata. Notare come dobbiamo usare l'argomento 'post_status' perché di default le immagini hanno 'post_status' => 'inherit' e non 'public' come gli altri post.
Ora aggiungiamo alla query questo codice:
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 |
?>
|
Questo mette l'immagine dentro un div con classe category-featured-image che possiamo usare per aggiungere regole di stile. Utilizziamo quindi la funzione di wp_get_attachment_image() per visualizzare l'immagine.
Ora, se aggiorniamo la pagina del blog, vediamo le immagini visualizzate:
Adesso c'è troppo spazio vuoto, quindi aggiungiamo qualche regola di stile.
Formattare le Immagini
Apriamo il nostro foglio di stile del tema e aggiungiamo le regole di stile che vogliamo attribuire alle immagini. I ho aggiunto le seguenti:
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 |
}
|
Questo sposta le immagini alla sinistra del post:
Adattare questa tecnica ad altri tipi di contenuto.
Possiamo usare questa tecnica con altri tipi di contenuto. Per esempio:
- Con i custom post type, possiamo creare un file
archive-$posttype.phpper i post type con un loop simile a quello visto in precedenza. - Se stiamo usando delle tassonomie invece delle categorie, possiamo aggiungere gli
'attachment'ai post type associati alla tassonomia quando la registriamo. In questo caso dobbiamo sostituire la funzioneget_the_category()con get_the_terms()e nella query gli argomenti della categoria con quelli della tassonomia. - È possibile combinare due tassonomie visualizzando per esempio le immagini di una tassonomia nei post dell'archivio di un'altra tassonomia, con magari l'immagine che collega alla pagina di archivio della tassonomia corrispondente.
- E possiamo usare una tecnica simile a questa nel file
archive.php, se il nostro tema ne ha uno, e visualizzare anche nell'archivio le immagini in evidenza della categoria dei post. - Se vogliamo combinare una o più delle tecniche sopra, possiamo creare e includere un file con il nostro loop (inserendo l'immagine della categoria) e richiarmarlo nei relativi template files.
Sommario
Come ho descritto all'inizio di questo tutorial, ci possono essere dei casi dove invece di mostrare l'immagine in evidenza di ogni post, si desidera visualizzare un'immagine relativa alla categoria al quale il post è associato.
In questo tutorial abbiamo imparato a fare questo, associando categorie alle immagini, identificando la prima categoria per ciascun post nel loop, e quindi creando una query per visualizzare l'immagine di quella categoria.
