L'utilizzo di immagini in primo piano negli archivi postali è una caratteristica comune dei temi, ma a volte potresti voler usare le immagini presentate in modo leggermente diverso. Occasionalmente ho lavorato su siti in cui le immagini da visualizzare si riferiscono alla categoria in cui si trova un post e non al post stesso. Invece di aggiungere la stessa immagine in evidenza ad ogni post in ogni categoria, sarebbe molto più semplice se potessi semplicemente assegnare la categoria a ciascuna delle mie immagini e quindi visualizzare l'immagine in primo piano per la categoria con il post.
Esempi di quando potresti voler fare questo includono:
In questo tutorial userò alcune delle tecniche che ho già dimostrato in due tutorial precedenti:
Questo tutorial funzionerà attraverso questi passaggi:
Nota: per ogni post verrà identificata una sola categoria e per ciascuna categoria verrà prodotta solo un'immagine (la più recente).
Vedrò anche come è possibile adattare questa tecnica per altre pagine di archivio, ad esempio archivi di tipo di post personalizzati.
Per seguire questo tutorial avrai bisogno di quanto segue:
Per seguire questo tutorial, devi creare o modificare un tema. Creerò un tema figlio del tema Twenty Fourteen.
Ecco il mio foglio di stile:
/ * Nome del tema: Immagine automatica basata su URI tema categoria: http://code.tutsplus.com/tutorials/add-an-automatic-featured-image-to-blog-posts-based-on-category--cms -22664 Versione: 1.0.0 Descrizione: heme per accompagnare il tutorial sull'aggiunta di categorie di immagini in evidenza a una pagina di archivio per tutsplus, all'indirizzo http://bit.ly/14cm0ya Autore: Rachel McCollin Autore URI: http://rachelmccollin.co. uk Licenza: GPL-3.0 + URI della licenza: http://www.gnu.org/licenses/gpl-3.0.html Percorso del dominio: / lang Text Domain: tutsplus Template: twentyfourteen * / @import url ('... / twentyfourteen / style.css');
Questo pone il tema come tema di bambino di Twenty Fourteen. Se hai bisogno di saperne di più sulla creazione di temi figli, dai un'occhiata alla pagina del Codex pertinente.
Mentre lavori attraverso questo tutorial, creerai anche un functions.php
file per il tuo tema (o modifica quello esistente se ne hai già uno nel tuo tema) e crea un index.php
anche il file.
Di default WordPress non ti permette di assegnare categorie agli allegati, ma questo è facilmente modificabile.
Se il tuo tema non ha già un file di funzioni, crea un file chiamato functions.php
e aggiungi il seguente:
Salva il tuo file e vai al tuo sito Media schermo. Vedrai che le categorie sono state aggiunte al sottomenu dei media:
Nota: per ulteriori informazioni, vedere questo tutorial.
Aggiunta di immagini di categoria
Ora ho bisogno di caricare un numero di immagini e dare a ciascuna una categoria. Le immagini caricate dipenderanno dalle esigenze del tuo sito: ho usato i colori per le mie categorie, quindi ho trovato alcune immagini con ciascuno di quei colori. Ho assegnato le categorie rilevanti quindi questo è ciò che è mio Libreria multimediale sembra:
Ora aggiungerò alcuni post e assegnerò loro le categorie:
Creare il file index.php
Ora che abbiamo impostato i post e le immagini delle categorie in atto, dobbiamo modificare il
index.php
file per visualizzare le immagini in evidenza della categoria.Impostazione del file
Dovrai o modificare il tuo esistente
index.php
file o aggiungine uno nuovo. Ne ho creato uno basato suindex.php
file di modello e ilcontent.php
includere il file dal tema Twenty Fourteen. In questo momento sembra così:> ',''); ?>→', 'venti quattordici' ) ); wp_link_pages (array ('before' => '', ",''); ?>'. __ ('Pagine:', 'twentyfourteen'). '',' dopo '=>'',' link_before '=>'',' link_after '=>'',)); ?>Identificazione della categoria del post corrente
Per visualizzare l'immagine della categoria pertinente, dovrai identificare in quale categoria si trova il post corrente. Dovrai farlo all'interno del ciclo.
Innanzitutto, se stai lavorando con Twenty Fourteen, rimuovi la funzione che genera l'immagine in primo piano. Rimuovi questa linea:
Immediatamente dentro l'apertura
tag, aggiungi il seguente:
term_id;Questo crea una variabile chiamata
$ categoria,
il cui valore è l'ID della prima categoria in cui è inserito il post, utilizzando ilget_the_category ()
funzione.Creazione di argomenti per la query
Ora puoi usare questa variabile negli argomenti per la tua query. Sotto quello che hai appena aggiunto, aggiungi questo:
$ args = array ('cat' => $ categoria, 'post_status' => 'inherit', 'post_type' => 'attachment', 'posts_per_page' => '1');Questi argomenti indicano che la tua query produrrà solo un allegato nella categoria che hai già identificato. Si noti che è necessario utilizzare il
'Post_status'
argomento perché gli allegati sono impostati su'post_status' => 'inherit'
, non'pubblico'
come altri tipi di post.Ora aggiungi la query stessa:
$ query = new WP_Query ($ args); if ($ query-> have_posts ()) while ($ query-> have_posts ()) $ query-> the_post (); ?>ID, 'miniatura'); ?>Questo mette l'immagine all'interno di un div con il
categoria-featured-image
classe, che puoi usare per lo styling. Quindi usa ilwp_get_attachment_image ()
funzione per visualizzare l'immagine.Ora se aggiorni la pagina iniziale del tuo blog, vedrai le immagini visualizzate:
In questo momento c'è troppo spazio vuoto, quindi aggiungiamo un po 'di stile.
Disegnare le immagini
Apri il foglio di stile del tema e aggiungi lo stile che vuoi dare alle tue immagini. Ho aggiunto il seguente:
.category-featured-image float: left; margine: 10px 2%; .blog .entry-header .entry-title, .blog .entry-header .entry-meta clear: none;Questo porta le immagini a sinistra del post:
Adattamento di questa tecnica per altri tipi di contenuto
Potresti usare questa tecnica con altri tipi di contenuti. Per esempio:
Archive- $ posttype.php
file modello per quel tipo di post con un ciclo simile a quello sopra.'Allegato'
i post digitano i tipi di post in cui la tassonomia è registrata al momento della prima registrazione. Dovresti quindi sostituire il get_the_category ()
funzione con get_the_terms ()
e gli argomenti di categoria per la tua query con argomenti di tassonomia.archive.php
file se il tuo tema ne ha uno, in modo che i post negli archivi abbiano anche una categoria in primo piano visualizzata.Come ho delineato all'inizio di questo tutorial, ci possono essere degli scenari in cui invece di mostrare un'immagine in primo piano per ogni post, vuoi visualizzare un'immagine relativa alla categoria in cui è inserito il post.
In questo tutorial hai imparato come farlo, aggiungendo categorie agli allegati, identificando la prima categoria per ogni post nel tuo ciclo e creando una query per produrre l'immagine per quella categoria.