Comment afficher un article WordPress uniquement s'il contient un champ personnalisé spécifique

Vous savez quand vous avez besoin d'afficher un article WordPress uniquement s'il possède un champ personnalisé spécifique ? Nous sommes passés par là.

Quand nous avons commencé avec WordPress, voir un extrait de code nous intimidait, surtout quand tout ce que nous voulions était d'afficher des articles avec des informations spécifiques.

Mais voici la bonne nouvelle : après avoir aidé des milliers de débutants sur WordPress, nous avons constaté que même quelque chose qui semble technique, comme le filtrage par champs personnalisés, n'a pas à être effrayant.

En fait, nous allons vous guider à travers une méthode de code simple pour le faire.

Cette solution fonctionne parfaitement, que vous publiiez des articles de blog réguliers ou des types d'articles personnalisés basés sur des critères spécifiques.

📌 Note rapide : Ce tutoriel concerne l'affichage des articles WordPress s'ils ont une valeur saisie dans un champ personnalisé spécifique. Si vous souhaitez afficher des champs personnalisés sur le front-end d'un article WordPress, vous pouvez consulter notre guide sur comment afficher les champs personnalisés dans les thèmes WordPress.

Pourquoi afficher des articles WordPress avec un champ personnalisé spécifique ?

Lorsque vous créez un article sur votre site web WordPress, vous pouvez utiliser des champs personnalisés pour ajouter des métadations supplémentaires à l'article.

Les métadonnées sont des informations supplémentaires que vous pouvez ajouter à un article. Par exemple, si vous écriviez une critique de livre, vous pourriez ajouter des champs personnalisés pour « Nom de l'auteur » ou « Note en étoiles ».

Les champs personnalisés sont un concept avancé de WordPress, et il existe de nombreuses façons d'ajouter des champs personnalisés dans WordPress. Vous trouverez de nombreux conseils utiles sur la façon d'utiliser et d'afficher les champs personnalisés dans notre article, Champs personnalisés WordPress 101 : Conseils, astuces et hacks.

Un de nos utilisateurs nous a demandé comment afficher les articles WordPress uniquement si un champ personnalisé spécifique était présent. Cela peut être utile si vous cherchez à créer une page personnalisée qui liste tous les articles contenant un champ personnalisé et/ou une valeur spécifique.

Après avoir répondu avec la réponse, nous avons pensé qu'il serait préférable de la partager avec tout le monde afin que la communauté WordPress.org plus large puisse en bénéficier également.

Modification de vos fichiers de thème WordPress : ce qu'il faut garder à l'esprit

Avant de commencer, il y a quelques points importants à garder à l'esprit lorsque vous travaillez avec les fichiers de thème.

Si vous ajoutez du code directement dans les fichiers de votre thème, vos modifications seront perdues lors de la prochaine mise à jour de votre thème.

C'est pourquoi nous recommandons d'utiliser un plugin comme WPCode pour ajouter en toute sécurité du code PHP personnalisé sans modifier votre thème. Si vous préférez modifier les fichiers de thème, assurez-vous d'utiliser un thème enfant afin que vos modifications soient conservées.

Pour pouvoir suivre ce tutoriel correctement, voici quelques éléments à garder à l'esprit :

1. Ce tutoriel implique l'ajout de code à votre site WordPress, il n'est donc pas le plus adapté aux débutants complets. Si vous êtes nouveau dans ce domaine, vous devrez lire notre guide sur comment copier et coller du code dans WordPress.
2. Nous vous recommandons de sauvegarder votre site web et/ou d'utiliser un environnement de staging afin que votre site en direct ne soit pas affecté en cas d'erreur. En effet, vous ajouterez du code aux fichiers de votre thème, ce qui peut être risqué.
3. Nous vous recommandons de comprendre comment fonctionne la hiérarchie des modèles WordPress afin de savoir où ajouter le code plus tard.
4. Vous devrez également vous familiariser avec le fonctionnement des boucles WordPress car nous appellerons ces paramètres dans une requête WordPress.

Cela étant dit, examinons comment afficher un article WordPress uniquement s'il possède un champ personnalisé spécifique.

Étape 1 : Installer un plugin d'extraits de code

Certains tutoriels vous diront d'ouvrir le fichier index.php de votre thème et de réécrire complètement la boucle WordPress en utilisant quelque chose appelé WP_Query. Nous ne recommandons pas de faire cela.

La modification des fichiers de modèle principaux peut casser la mise en page de votre site, entraîner des requêtes de base de données en double qui ralentissent votre site et casser complètement votre pagination (les boutons « Page suivante »).

Au lieu de cela, le moyen le plus sûr et le plus efficace de le faire est d'utiliser le hook d'action pre_get_posts. Cela indique à WordPress de filtrer les articles *avant* même de charger le modèle de page.

Pour ajouter ce code personnalisé, nous recommandons d'utiliser un plugin comme WPCode. Il vous permet d'ajouter en toute sécurité du code PHP sans toucher directement aux fichiers de votre thème, ce qui signifie que votre site ne sera pas cassé si vous faites une erreur, et vos modifications ne seront pas perdues lors des mises à jour de votre thème.

Étape 2 : Ajouter le code de requête personnalisé

Une fois que vous avez installé et activé WPCode, naviguez vers Extraits de code » Ajouter un extrait dans votre tableau de bord WordPress et sélectionnez « Ajouter votre code personnalisé (Nouvel extrait) ».

Assurez-vous que le « Type de code » est défini sur Extrait PHP.

Ensuite, collez le code suivant :

<?php
add_action( 'pre_get_posts', 'wpb_filter_posts_by_custom_field' );

function wpb_filter_posts_by_custom_field( $query ) {

    // Only modify the main query on the front-end homepage
    if ( ! is_admin() && $query->is_main_query() && $query->is_home() ) {

        // Tell WordPress to only get posts with the custom field key 'color'
        $query->set( 'meta_key', 'color' );

    }
}

Premièrement, le code vérifie qu'il ne modifie que la requête principale sur le front-end de votre site web (spécifiquement la page d'accueil du blog), laissant votre tableau de bord d'administration WordPress complètement intact.

Ensuite, il utilise $query->set pour indiquer à WordPress de ne récupérer que les articles qui ont le champ personnalisé « color » attaché à eux.

Comme ce code modifie la requête avant le chargement de la page, la pagination par défaut de votre thème fonctionnera parfaitement sans code supplémentaire ! Basculez simplement le commutateur WPCode sur Actif et cliquez sur le bouton « Enregistrer le extrait » pour le mettre en ligne.

Étape 3 : Filtrer par valeur méta spécifique (facultatif)

Et si vous voulez trouver des articles où le champ personnalisé « color » a une valeur spécifique, comme « blue » ? Pour ce faire, il vous suffit d'ajouter une règle meta_value à votre code.

Votre extrait mis à jour ressemblera à ceci :

<?php
add_action( 'pre_get_posts', 'wpb_filter_posts_by_custom_field_value' );

function wpb_filter_posts_by_custom_field_value( $query ) {

    if ( ! is_admin() && $query->is_main_query() && $query->is_home() ) {

        $query->set( 'meta_key', 'color' );
        $query->set( 'meta_value', 'blue' );

    }
}

Étape 4 : Filtrer par comparaison méta (facultatif)

Vous pouvez pousser votre filtrage encore plus loin avec le paramètre meta_compare. Cela vous permet de trouver des articles qui ne correspondent pas à une valeur.

Par exemple, pour afficher tous les articles où la couleur n'est pas « blue », votre requête ressemblerait à ceci :

<?php
add_action( 'pre_get_posts', 'wpb_filter_posts_by_meta_compare' );

function wpb_filter_posts_by_meta_compare( $query ) {

    if ( ! is_admin() && $query->is_main_query() && $query->is_home() ) {

        $query->set( 'meta_key', 'color' );
        $query->set( 'meta_value', 'blue' );
        $query->set( 'meta_compare', '!=' );

    }
}

Le != indique à WordPress de trouver tous les articles où le champ « couleur » existe mais n'est pas égal à « bleu ».

Il existe de nombreux autres opérateurs de comparaison que vous pouvez utiliser, que vous trouverez dans la documentation officielle des développeurs WordPress.

Étape 5 : Filtrer les articles par plusieurs champs personnalisés (meta_query)

Pour des scénarios plus complexes où vous devez filtrer les articles en fonction de plusieurs champs personnalisés ou combiner des conditions (comme ET/OU), vous utiliserez le tableau meta_query.

Cela vous permet de définir un tableau de conditions, chacune ciblant un champ personnalisé ou une valeur différent(e).

Par exemple, pour afficher les articles dont la couleur est « blue » et la taille « large », votre code ressemblerait à ceci :

<?php
add_action( 'pre_get_posts', 'wpb_filter_posts_by_multiple_fields' );

function wpb_filter_posts_by_multiple_fields( $query ) {

    if ( ! is_admin() && $query->is_main_query() && $query->is_home() ) {

        $meta_query = array(
            'relation' => 'AND', // or 'OR'
            array(
                'key'     => 'color',
                'value'   => 'blue',
                'compare' => '=',
            ),
            array(
                'key'     => 'size',
                'value'   => 'large',
                'compare' => '=',
            ),
        );

        $query->set( 'meta_query', $meta_query );

    }
}

Cette requête récupérera les articles qui ont à la fois le champ personnalisé « color » défini sur « blue » ET le champ personnalisé « size » défini sur « large ».

Vous pouvez ajuster le paramètre 'relation' sur « OR » pour trouver les articles correspondant à au moins une des conditions.

Exemple concret : Afficher uniquement les avis 5 étoiles

Disons que vous gérez un site WordPress de critiques de livres et que vous utilisez un champ personnalisé appelé star_rating pour stocker les notes des critiques.

Vous pouvez facilement afficher uniquement les articles ayant une note de 5 étoiles sur la page d'accueil de votre blog en utilisant cette requête :

<?php
add_action( 'pre_get_posts', 'wpb_show_only_five_star_reviews' );

function wpb_show_only_five_star_reviews( $query ) {

    if ( ! is_admin() && $query->is_main_query() && $query->is_home() ) {

        $query->set( 'meta_key', 'star_rating' );
        $query->set( 'meta_value', '5' );

    }
}

C'est extrêmement utile si vous voulez vous assurer que votre flux principal ne présente que votre contenu le mieux noté.

Foire Aux Questions sur l'Affichage d'un Article S'il Possède un Champ Personnalisé Spécifique

Voici quelques questions que nos lecteurs posent fréquemment sur l'affichage d'un article s'il ne possède qu'un champ personnalisé spécifique :

Foire Aux Questions sur l'Affichage d'un Article S'il Possède un Champ Personnalisé Spécifique

Voici quelques questions que nos lecteurs posent fréquemment sur l'affichage d'un article s'il ne possède qu'un champ personnalisé spécifique :

Y a-t-il un moyen de faire cela sans modifier les fichiers du thème ?

Oui ! En fait, la méthode pre_get_posts que nous décrivons dans ce tutoriel est spécifiquement conçue pour que vous n'ayez pas à modifier les fichiers de votre thème. En utilisant un plugin d'extraits comme WPCode, vous pouvez appliquer ce filtre en toute sécurité à votre site sans toucher une seule ligne du code principal de votre thème.

Puis-je filtrer les articles par plusieurs champs personnalisés ?

Vous pouvez. Le hook pre_get_posts accepte des arguments complexes. Vous utiliseriez un tableau « meta_query », qui vous permet de construire une liste de conditions pour faire correspondre plusieurs champs personnalisés à la fois.

Cette méthode fonctionne-t-elle avec les thèmes de blocs ?

Bien que le hook pre_get_posts puisse techniquement interagir avec les thèmes de blocs, le bloc natif WordPress Query Loop n'a pas d'interface intégrée pour le filtrage par champ personnalisé prêt à l'emploi. Si vous utilisez un thème de blocs d'édition complète de site, l'approche la plus simple consiste à utiliser un plugin qui ajoute le filtrage par champ personnalisé au bloc Query Loop, plutôt que d'écrire du PHP personnalisé.

Quelle est la différence entre « meta_key » et « meta_value » ?

Pensez à la « meta_key » comme au nom de l'étiquette, par exemple « Couleur » ou « Statut ». La « meta_value » est la donnée réelle saisie dans ce champ, telle que « Bleu » ou « Publié ».

L'utilisation de la clé permet de trouver n'importe quel article auquel ce champ personnalisé est attaché, tandis que l'utilisation de la valeur permet de le filtrer pour ne trouver que les articles contenant cette information spécifique.

Découvrez d'autres façons de personnaliser votre site WordPress

Voici d'autres façons de personnaliser vos pages WordPress :

• Comment styliser différemment les catégories individuelles dans WordPress
• Comment ajouter une barre de défilement personnalisée dans WordPress
• Comment ajouter des styles personnalisés aux widgets WordPress
• Comment styliser différemment chaque article WordPress
• Comment utiliser les shortcodes dans vos thèmes WordPress
• Comment mettre en évidence les nouveaux articles pour les visiteurs récurrents dans WordPress
• Comment changer le côté de la barre latérale dans WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment afficher un article WordPress uniquement s'il possède un champ personnalisé spécifique. Vous voudrez peut-être aussi consulter notre guide complet sur comment modifier un site web WordPress et nos meilleurs choix de meilleurs plugins Figma pour WordPress.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.