Comment ajouter facilement des filtres de publication à votre site WordPress

Une demande fréquente que je rencontre est la possibilité de laisser les utilisateurs filtrer ou trier les publications sur le front-end de leur site Web.

Peut-être que les utilisateurs souhaitent afficher les messages par ordre alphabétique, ou peut-être ne voir que les messages avec des vignettes ? Cela a déjà du sens pour les publications régulières, mais peut être encore plus significatif dans le cas de produits, de photos ou d'autres types de contenu.

Dans le Weekend WordPress Project d'aujourd'hui, je vais vous donner un bref aperçu de la façon dont vous pouvez implémenter une fonctionnalité comme celle-ci dans le thème Twenty Fifteen. Allons craquer !

• Créer un thème enfant
• Création de contrôles
• Modification de la requête
• Formulaires plus intelligents
• Comportement WordPress
• Conclusion

Créer un thème enfant

Comme toujours, vous avez besoin d'un thème enfant. Nous avons un guide des thèmes enfants ici sur WPMU DEV, je vous recommande de le lire si vous n'êtes pas familier avec les thèmes enfants.

Création de contrôles

Ajoutons trois contrôles : un pour trier les messages, un pour définir le sens du tri et un pour afficher uniquement les messages avec des vignettes.

La première étape consiste à copier le index.php du thème parent dans notre thème enfant.

Ouvrez le fichier index.php dans votre thème enfant et collez le code HTML suivant sous le conteneur principal (qui devrait être à la ligne 20) :

Et voici à quoi ça ressemble sur le front-end :

Comme vous pouvez le voir, nous manquons un peu de style. Résolvons cela en ajoutant quelques styles à la feuille de style :

Une réaction que j'entends fréquemment de la part des nouveaux venus dans la programmation est : "comment a-t-il su que ce sont les styles qui le feront se fondre dans le thème ?"

La solution est assez simple : je triche. J'utilise les outils de développement de Chrome pour inspecter les éléments d'article réguliers. Dans ce cas, cela m'a permis de voir comment les éléments obtiennent leur ombre de boîte et leurs marges et j'ai simplement appliqué ces règles à mon propre élément.

Modification de la requête

Sélectionnons « trier par titre », « croissant » et « messages avec vignettes » et soumettons le formulaire. Vous devriez en fait voir un changement sans rien faire au code.

Pour voir pourquoi, inspectons l'URL. Cela devrait ressembler à ceci :

 http://votredomaine.com/?orderby=post_title&order=DESC&thumbnail=only_thumbnailed

Les bribes d'informations peuvent être rappelées dans nos scripts PHP à l'aide de la variable $_GET . WordPress sait déjà ce que signifient les paramètres order et orderby et les utilise dans la requête par défaut. Par conséquent, si nous n'avons besoin que de la commande et de la direction de la commande, nous avons en fait terminé.

C'est très bien, mais encore une fois, comment ai-je su cela ? J'aurais pu utiliser "order_by" comme paramètre au lieu de "orderby". Dans ce cas, WordPress ne reprend pas nos intentions. J'ai jeté un coup d'œil à la documentation WP_Query dans le WordPress Codex où il y a un tas de paramètres, dont beaucoup peuvent être utilisés dans les URL.

Maintenant, implémentons notre paramètre post thumbnail. Une publication a une vignette si elle a des métadonnées avec la clé _thumbnail_id qui lui est associée. Nous devrons modifier notre requête pour nous assurer que cela est pris en compte. Faisons cela maintenant avec query_posts() .

Collez le code suivant au-dessus de la fonction get_header() en haut du fichier :

Nous fusionnons les paramètres de la requête d'origine avec notre propre nouveau paramètre, ce qui donne un ensemble différent de publications. Notre formulaire fonctionne maintenant mais il ne se souvient pas de nos sélections. Corrigeons cela en réécrivant notre formulaire et en utilisant du PHP.

Formulaires plus intelligents

En plus de lister toutes les options de la commande par sélecteur, nous avons besoin d'un moyen d'indiquer laquelle est sélectionnée. Si nous faisions cela sans boucle, cela ressemblerait à ceci :

Comprenez-vous tout cela? Je ne t'en veux pas ! Dans chaque option, nous vérifions si la valeur actuellement sélectionnée est égale à la valeur de l'option. Si c'est le cas, nous affichons la propriété sélectionnée. Rendons cela beaucoup plus propre avec une boucle :

C'est un peu plus long, mais seulement parce que nous avons trois options. Il s'agit d'un format bien meilleur pour gérer tout type de sélection. Étendons cela à l'ensemble du formulaire :

Terminé. Le formulaire devrait maintenant mémoriser nos sélections basées sur les variables $_GET dans l'URL.

Comportement WordPress

Rappelez-vous comment j'ai mentionné que je sais utiliser "order" et "orderby" parce que j'ai consulté la documentation WP_Query ? C'est une bonne pratique, mais cela peut conduire à des résultats inattendus. Trouvez le slug d'une catégorie que vous avez, disons que cette catégorie est "wordpress".

Utilisez maintenant l'URL suivante : http://yourwebsite.com/?category_name=wordpress. Vous devriez voir votre archive de catégorie, répertoriant tous vos articles WordPress. C'est très bien, mais nous avons deux problèmes :

Si vous avez de jolis permaliens activés (ce que vous devriez), la page a été redirigée vers une nouvelle URL, très probablement http://votresiteweb.com/category/wordpress. Nos filtres ne seront pas visibles car le fichier archive.php gère cette vue, pas index.php . De plus, notre nom de catégorie n'est pas transmis en tant que paramètre d'URL, nous devrons donc utiliser quelques astuces supplémentaires pour faire fonctionner nos filtres.

Le raccourci pour que cela fonctionne est de ne pas utiliser délibérément les mêmes paramètres que WordPress. Vous pouvez transmettre le nom de la catégorie en utilisant le paramètre catname dans l'URL, car WordPress ne le détectera pas. Vous pouvez ensuite alimenter la requête en utilisant le nom de paramètre correct. Quelque chose comme ça:

L'alternative serait d'utiliser une fonction au lieu de sortir notre formulaire dans index.php tel quel. Vous auriez besoin de détecter la catégorie à partir de la requête WordPress elle-même et d'afficher la sélection actuelle en fonction de cela.

Conclusion

L'ajout de vos propres filtres n'est pas si difficile mais nécessite un peu de bricolage. Dans notre cas, vous voudrez peut-être vous assurer que la pagination est supprimée lorsque la commande est définie sur aléatoire. Il pourrait être remplacé par un bouton "montrer plus d'aléatoire", qui recharge simplement la page.

J'espère que cet article vous a donné les bases de la façon dont vous pouvez accomplir cela par vous-même et que vous serez en mesure de créer les filtres dont vous avez besoin.

• projets wordpress du week-end