Voeg een automatisch 'Uitgelichte afbeelding' toe aan blogposts op basis van categorie

Het gebruik van aanbevolen afbeeldingen in postarchieven is een veel voorkomende functie van thema's, maar soms wilt u de aanbevolen afbeeldingen een beetje anders gebruiken. Af en toe heb ik gewerkt aan sites waar de afbeeldingen die moeten worden weergegeven betrekking hebben op de categorie waarin een bericht is geplaatst en niet op de post zelf. In plaats van het toevoegen van dezelfde aanbevolen afbeelding aan elke post in elke categorie, zou het veel eenvoudiger zijn als ik de categorie aan elk van mijn afbeeldingen zou kunnen toewijzen, en dan de afgebeelde afbeelding voor de categorie met de post zou kunnen weergeven.

Voorbeelden van wanneer u dit wilt doen zijn:

• wanneer elk bericht is gekoppeld aan een merk en u het logo wilt weergeven
• wanneer elk bericht is gekoppeld aan een van een aantal plaatsen en u een afbeelding (of kaart) van die plaats wilt weergeven
• wanneer elk bericht betrekking heeft op een bepaald onderwerp (bijvoorbeeld op een leersite) en u een pictogram voor dat onderwerp wilt weergeven
• wanneer berichten deel uitmaken van een aantal series (zoals soms het geval is op deze site) en u een afbeelding wilt gebruiken om elke reeks te identificeren

In deze zelfstudie gebruik ik enkele van de technieken die ik al in twee eerdere zelfstudies heb gedemonstreerd:

• Categorieën toepassen op bijlagen: we moeten dit doen zodat elke categorie zijn eigen bijlagen heeft.
• Een 'uitgelichte afbeelding' maken voor een categorie: in deze zelfstudie heb ik laten zien hoe ik 'aanbevolen afbeeldingen' voor categorieën kan maken en deze vervolgens in het categoriearchief kan weergeven. Deze tutorial is enigszins anders, omdat ik de categorie-afbeeldingen op de hoofdblogpagina zal weergeven.

In deze zelfstudie worden de volgende stappen uitgevoerd:

1. registratie van de categorie-taxonomie voor bijlagen
2. categorieën instellen en afbeeldingen eraan toevoegen
3. in de lus, om te identificeren in welke categorie een bericht staat en vervolgens een query uit te voeren om de bijlage uit die categorie uit te voeren

Opmerking: voor elke post wordt slechts één categorie geïdentificeerd en voor elke categorie wordt slechts één afbeelding uitgevoerd (de meest recente).

Ik zal ook kijken naar hoe je deze techniek kunt aanpassen aan andere archiefpagina's, zoals archieven op basis van het type bericht.

Wat je nodig hebt

Als je deze zelfstudie wilt volgen, heb je het volgende nodig:

• een ontwikkelingsinstallatie van WordPress
• een thema dat je kunt bewerken (ik maak een kindthema voor Twintig veertien)
• FTP-toegang (of MAMP of vergelijkbaar als u lokaal werkt)
• een code-editor

Uw themabestanden instellen

Als u deze zelfstudie wilt volgen, moet u een thema maken of bewerken. Ik ga een kindthema van het Twenty-veertien-thema maken.

Dit is mijn stylesheet:

/ * Naam van het thema: automatisch uitgelichte afbeelding op basis van thema-URI: http://code.tutsplus.com/tutorials/add-an-automatic-featured-image-to-blog-posts-based-on-category--cms -22664 Versie: 1.0.0 Beschrijving: heem bij de zelfstudie over het toevoegen van categorie-afbeeldingen aan een archiefpagina voor tutsplus, op http://bit.ly/14cm0ya Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co. Britse Licentie: GPL-3.0 + Licentie-URI: http://www.gnu.org/licenses/gpl-3.0.html Domeinpad: / lang Tekstdomein: tutsplus Sjabloon: twentyfourteen * / @import url ('... / twentyfourteen / style.css');

Dit zet het thema op als een kindthema van Twintig veertien. Als je meer wilt weten over het maken van kindthema's, bekijk dan de relevante Codex-pagina.

Terwijl je deze tutorial doorwerkt, maak je ook een functions.php bestand voor uw thema (of bewerk de bestaande als u er al een in uw thema hebt) en maak een index.php bestand ook.

Categorieën voor bijlagen registreren

Standaard kunt u met WordPress geen categorieën aan bijlagen toewijzen, maar dit kan eenvoudig worden gewijzigd.

Als uw thema nog geen functiesbestand heeft, maakt u een bestand met de naam functions.php en voeg het volgende toe:

Sla uw bestand op en ga naar uw site Media scherm. Je zult zien dat categorieën zijn toegevoegd aan het media-submenu:

Opmerking: zie voor meer informatie hierover deze tutorial.
Categoriefoto's toevoegen
Ik moet nu een aantal afbeeldingen uploaden en elke categorie een categorie geven. De afbeeldingen die u uploadt, zijn afhankelijk van de behoeften van uw site: ik heb kleuren voor mijn categorieën gebruikt, dus ik heb enkele afbeeldingen gevonden met elk van deze kleuren. Ik heb de relevante categorieën toegewezen, dus dit is wat mijn Mediatheek lijkt op:
Nu zal ik wat berichten toevoegen en categorieën aan hen toewijzen:
Het index.php-bestand maken
Nu de posts zijn ingesteld en de categorie-afbeeldingen zijn geplaatst, moeten we de index.php bestand om de categorie uitgelichte afbeeldingen weer te geven.
Het bestand instellen
Je zult je bestaande moeten bewerken index.php bestand of voeg een nieuwe toe. Ik heb er een gemaakt op basis van de index.php sjabloonbestand en de content.php neem een ​​bestand op uit het Twenty-veertien-thema. Op dit moment ziet het er als volgt uit:
  
  
 
  
>    
  
  ',''); ?>  
 →', 'twintig veertien' ) ); wp_link_pages (array ('before' => ')
'. __ ('Pages:', 'twentyfourteen'). '',' na '=>'
',' link_before '=>'',' link_after '=>'',)); ?> 
 ', ",''); ?> 
  
 
  
  
De categorie van de huidige post identificeren
Als u de relevante categorie-afbeelding wilt weergeven, moet u aangeven in welke categorie het huidige bericht zich bevindt. U moet dit binnen de lus doen.
Ten eerste, als je met Twenty Fourteen werkt, verwijder dan de functie die de geposte afbeelding uitvoert. Verwijder deze regel:
Direct in de opening 
 tag, voeg het volgende toe:
term_id;
Dit maakt een variabele genaamd $ categorie, waarvan de waarde de ID is van de eerste categorie waarin het bericht zich bevindt, met behulp van de get_the_category () functie.
Argumenten voor de query maken
Nu kunt u deze variabele gebruiken in de argumenten voor uw zoekopdracht. Onder wat je zojuist hebt toegevoegd, voeg je dit toe:
$ args = array ('cat' => $ category, 'post_status' => 'inherit', 'post_type' => 'attachment', 'posts_per_page' => '1');
Deze argumenten betekenen dat uw zoekopdracht slechts één bijlage zal uitvoeren in de categorie die u al hebt geïdentificeerd. Merk op dat u de 'Post_status' argument omdat bijlagen standaard zijn ingesteld op 'post_status' => 'erven', niet 'openbaar' zoals andere berichttypen.
Voeg nu de vraag zelf toe:
$ query = new WP_Query ($ args); if ($ query-> have_posts ()) while ($ query-> have_posts ()) $ query-> the_post (); ?> 
 ID, 'miniatuur'); ?> 
 
Dit plaatst de afbeelding binnen een div met de -Categorie gekenmerkt-image klasse, die je kunt gebruiken om te stylen. Het gebruikt dan de wp_get_attachment_image () functie om de afbeelding weer te geven.
Als u nu de startpagina van uw blog ververst, ziet u de afbeeldingen worden weergegeven:
Op dit moment is er te veel lege ruimte, dus laten we wat styling toevoegen.
De afbeeldingen stylen
Open de stylesheet van uw thema en voeg de gewenste styling toe om uw afbeeldingen weer te geven. Ik heb het volgende toegevoegd:
.category-featured-image float: links; marge: 10px 2%;  .blog .entry-header .entry-title, .blog .entry-header .entry-meta clear: none; 
Dit brengt de afbeeldingen aan de linkerkant van de post:
Deze techniek aanpassen voor andere inhoudstypen
Je zou deze techniek kunnen gebruiken met andere inhoudstypen. Bijvoorbeeld:
 
Met een aangepast berichttype zou u een archief- $ posttype.php sjabloonbestand voor dat berichttype met een vergelijkbare lus als hierboven.
 
Als u een aangepaste taxonomie gebruikt in plaats van categorieën, voegt u de 'Attachment' berichttype voor de berichttypen waarop de taxonomie is geregistreerd wanneer u het voor het eerst registreert. Je zou dan de get_the_category () functie met get_the_terms () en de categorieargumenten voor uw vraag met taxonomieargumenten.
 
Je zou twee taxonomieën kunnen combineren door de afbeeldingen van één taxonomie te tonen met berichten op de archiefsjabloon voor een andere taxonomie, misschien met de afbeelding die naar de archiefpagina verwijst voor zijn taxonomieterm.
 
Je zou een vergelijkbare techniek als hierboven in je kunnen gebruiken archive.php bestand als uw thema er een heeft, zodat berichten in archieven ook een categorie weergegeven afbeelding hebben.
 
Als u een of meer van de bovenstaande items wilt combineren, kunt u een include-bestand met uw loop maken (inclusief de categorie met afbeelding) en dat in de relevante sjabloonbestanden aanroepen..
 
Samenvatting
Zoals ik aan het begin van deze zelfstudie heb geschetst, kunnen er scenario's zijn waarbij u in plaats van een aanbevolen afbeelding voor elke post een afbeelding wilt weergeven met betrekking tot de categorie waarin de post zich bevindt.
In deze zelfstudie hebt u geleerd hoe u dit doet, door categorieën aan bijlagen toe te voegen, de eerste categorie voor elke post in uw lus te identificeren en vervolgens een query te maken om de afbeelding voor die categorie uit te voeren.



		
			
	   
	




Code