Maak een categoriepagina met behulp van het loop grid of loop carousel

Taxonomy Queries stellen je in staat om loops te maken op basis van post- of productcategorieën of tags. Als je bijvoorbeeld een foodblog runt, kun je een Loop Grid of Loop Carousel maken die de categorieën van artikelen weergeeft – Voorgerechten, Soepen, Desserts etc..

Maak een categoriepagina

Het onderstaande voorbeeld toont een Taxonomy query voor posts in een Loop Grid, maar dezelfde principes gelden voor producten en voor de loop Carousel.

Voor details over het maken van een Loop Grid, zie Bouw een Loop Grid.

Om een taxonomy query te maken:

1. Sleep de Loop Grid naar het canvas. Voor details, zie Elementen toevoegen aan een pagina.
   
   Een Loop Grid verschijnt op het canvas.
2. Ga in het paneel naar de dropdown Kies templatetype en selecteer Post Taxonomy.
   
   Als Woocommerce is geïnstalleerd, verschijnt er ook een “Product Taxonomy” optie.
   
3. Klik op Maak een template.
   Wanneer we de template bouwen, gebruiken we dynamische informatie. In plaats van bijvoorbeeld de categorienamen in te typen, gebruiken we de dynamische tag “Archive Title”. Dit haalt automatisch de categorienamen op zonder dat je ze handmatig hoeft in te voeren. Voor meer informatie, zie Dynamische tags.
   
   Important

   Taxonomy loops voor Posts kunnen de volgende dynamische tags gebruiken:

   • Archive title
   • Archive description
   • Archive URL
   • Je kunt ook afbeeldingen voor je categorieën toevoegen met behulp van ACF taxonomy images. Zie Een afbeelding toevoegen aan postcategorieën voor meer details.  
   
   
4. Klik in het pop-upvenster op Opslaan.
   
5. Sleep een Heading widget naar de template die je zojuist hebt gemaakt.
   
6. Klik in het paneel op het dynamische icoon naast Titel. 
   
7. Selecteer Archive Title uit de dropdown.
   
   Note

   In WordPress worden Post en Product taxonomies beschouwd als een type archief.
   
   
   Meestal wil je niet dat het woord Categorie in de loop verschijnt, dus we gaan dat verwijderen.
   
8. Klik in het paneel, in het veld Titel, op het moersleutelicoon om toegang te krijgen tot Instellingen.
   
9. Schakel in het venster Include Context naar Nee.
   Nu gaan we de categoriebeschrijving toevoegen.
   
10. Voeg een Text Editor widget toe aan de template en selecteer met behulp van de dynamische tag Archive Description.
    
11. Klik op Opslaan & Terug om de template op te slaan.
    

Je ziet hoe bezoekers de pagina zullen bekijken.

Je kunt de pagina stylen met behulp van de bedieningselementen in de Loop Grid of Loop Carousel. Voor details, zie Loop Grid widget en Loop Carousel.  

Maak de categorieën klikbaar

Nu je een categoriepagina hebt gemaakt, moet je deze nuttig maken. Over het algemeen verwachten gebruikers dat ze op een categorie kunnen klikken en naar een categoriepagina worden gebracht.  

Er zijn twee manieren om de items klikbaar te maken:

• Je kunt een van de elementen klikbaar maken. Bijvoorbeeld de heading klikbaar maken zodat bezoekers op de heading kunnen klikken en naar de categoriepagina gaan.
• Je kunt de container klikbaar maken zodat bezoekers overal in de container kunnen klikken en naar de categoriepagina gaan. 

In dit voorbeeld maken we de container klikbaar.

Om een categorie klikbaar te maken:

1. Selecteer tijdens het bewerken van de template de container door op het icoon in de linkerbovenhoek te klikken.
   
   Container-instellingen verschijnen in het paneel.
   
2. Open in het paneel de sectie Additional Options.
   
3. Selecteer in het dropdown-menu HTML Tag de optie a (link).
   
4. Klik in het veld Link op het dynamische tag icoon .
   
5. Selecteer Archive URL uit de lijst.

Wanneer bezoekers op de container klikken, gaan ze naar de categoriepagina.

Een afbeelding toevoegen aan postcategorieën

Je kunt afbeeldingen toevoegen aan productcategorieën met behulp van WooCommerce en vervolgens die Featured Images aan je template toevoegen. Voor posts heb je echter de third-party ACF plugin nodig om afbeeldingen aan je categorie toe te voegen. Voor meer informatie over het koppelen van afbeeldingen aan categorieën, raadpleeg de ACF documentatie.

Zodra deze afbeeldingen aan je categorieën zijn gekoppeld, kun je ze aan je loop toevoegen.

In het volgende voorbeeld staan de categorieafbeeldingen in een veld met het label Featured image.  

Om afbeeldingen aan de template toe te voegen:

1. Voeg een Image widget toe.
   
   Note

   Deze stappen gelden voor elke widget die afbeeldingen gebruikt.
   
   
2. Klik in het paneel, in het tabblad Content, op het dynamische tag icoon .
   
3. Selecteer in het dropdown-menu ACF Image Field.
   
4. Klik in het dynamische veld op het sleutelicoon.
   
5. Selecteer in de dropdown Key het veld dat je hebt gekozen voor categorieafbeeldingen.

De template toont nu de categorieafbeeldingen.