Construire une section "Messages tendance" dans Oxygen Builder - Tutoriel

Publié: 2022-06-22

Dans cet article et ce didacticiel vidéo, nous allons créer une section de messages tendance/populaires dans Oxygen Builder à l'aide de l'élément répéteur, du plugin WordPress Popular Posts et des requêtes avancées.

L'un des premiers tutoriels que nous avons publiés sur ce blog lié à Oxygen était de savoir comment créer une section de publication populaire. Maintenant, en 2022, nous allons revoir ce sujet en utilisant les méthodes les plus récentes et les meilleurs plugins pour le travail.

Notre agence travaille sur de nombreux sites d'actualités et de contenu volumineux. Une exigence constante de ce type de sites Web est la capacité d'afficher les publications populaires et les tendances. Le mécanisme que chacun de ces widgets utilise est le même - d'abord, nous devons comprendre le nombre de vues qu'un message spécifique obtient, puis nous pouvons interroger en fonction de cela.

Cours Oxygen Builder - Bientôt disponible !

Le cours Oxygen Builder Mastery vous amènera du débutant au professionnel - modules ACF, MetaBox et WooCommerce inclus.

Recevez une notification de lancement et une remise

Les publications populaires examinent généralement le nombre total de vues des publications sur une longue période. Par exemple, nous pouvons afficher les articles les plus populaires jamais publiés sur le blog, ou les articles les plus populaires pour une année spécifique.

Les publications de tendance examinent le nombre total de vues sur une période plus courte, généralement un jour ou une semaine. Par exemple, si un article a obtenu 100 vues en une journée, par rapport à la moyenne du site Web de 33 vues, nous saurons que c'est une tendance.

Il existe de nombreux plugins sur le référentiel WordPress qui vous permettent d'ajouter rapidement ce type de widgets à un site Web WordPress. Cependant, le répéteur d'oxygène et l'élément de poste facile vous permettent de personnaliser sérieusement la sortie de données dynamiques de chaque poste. Dans nos projets, nous construisons des présentoirs et des cartes entièrement personnalisés à l'aide de répéteurs.

Avec cette méthode, nous pouvons facilement intégrer des publications populaires et des publications tendance dans Oxygen Builder à l'aide de répéteurs.

Didacticiel vidéo

Obtenez les vues

La première étape consiste à comprendre combien de vues une publication individuelle obtient.

Pour obtenir les vues, nous allions utiliser un plugin populaire appelé " WordPress Popular Posts ". C'est un outil vraiment puissant - il prend en charge plusieurs langues, est livré avec une mise en cache, est vraiment bien documenté sur GitHub, a un tableau de bord de statistiques dans l'administrateur WP et a même un support API !

isotrope-2022-06-19-au-17-41-16 — Installez ce plugin sur votre site Oxygen Builder

Prêt à l'emploi, il vous offre des widgets personnalisables pour afficher facilement les publications les plus populaires sur votre site Web. Vous pouvez les insérer dans Oxygen en utilisant des shortcodes.

Cependant, nous voulons aller plus loin et utiliser l'élément répéteur Oxygen Builder pour afficher les publications les plus populaires et les plus tendances. De cette façon, nous pouvons utiliser le générateur pour personnaliser complètement l'apparence de nos publications les plus populaires.

Cependant, il y a un léger problème avec la façon dont ce plugin gère le nombre de vues. Les vues sont stockées dans une table de base de données distincte des posts ou postmeta . Pour interroger à l'aide de WordPress Square standard dans oxygen builder, nous avons besoin de ces données accessibles via un champ méta.

Ajouter des vues à la méta de la publication

Une fois que vous avez installé le plugin WordPress Popular Posts , il est temps de rendre ces données utilisables pour nos requêtes.

Pour ce faire, nous devons récupérer les numéros de vue les plus récents et les remplir dans un champ personnalisé associé à nos publications.

Une fois ces données accessibles, nous pouvons ensuite les utiliser pour classer les articles par popularité dans les requêtes WordPress personnalisées.

Tout d'abord, ajoutez ce code à votre site Web à l'aide d'un gestionnaire d'extraits de code. Nous suggérons Scripts Organizer pour les sites Oxygen Builder.

/** * Stocke les vues de différentes périodes sous forme de clés méta. * * @author @migueleste / @radgh * @link https://wordpress.org/support/topic/how-to-sort-a-custom-query-by-views-all-time-monthly-weekly-or- daily/ * @param int $postid L'ID du type de publication/page/personnalisé actuel. */ function custom_wpp_update_postviews($postid) { // Précision : // 10 = 1 visite sur 10 mettra à jour le nombre de vues. (Recommandé pour les sites à fort trafic.) // 30 = 30 % des visites. (Sites Web à trafic moyen.) // 100 = À chaque visite. Crée de nombreuses opérations d'écriture de base de données à chaque requête. $précision = 50 ; if ( function_exists('wpp_get_views') && (mt_rand(0,100) < $accuracy) ) { // Supprimez ou commentez les lignes que vous n'utiliserez pas !! update_post_meta( $postid, 'views_total', wpp_get_views($postid, 'all', false) ); update_post_meta( $postid, 'views_daily', wpp_get_views($postid, 'daily', false) ); update_post_meta( $postid, 'views_weekly', wpp_get_views($postid, 'weekly', false) ); update_post_meta( $postid, 'views_monthly', wpp_get_views($postid, 'mensuel', false) ); } } add_action('wpp_post_update_views', 'custom_wpp_update_postviews');

Ce code est créé par le développeur derrière le plugin pour faire exactement ce dont nous avons besoin - nous donner des données utilisables à interroger.

Cela nous donne quatre nouveaux méta-champs avec lesquels travailler - views_total, views_daily, views_weekly, views_monthly .

Les vues totales et les vues mensuelles sont idéales pour être utilisées pour une section de publication populaire. Les vues quotidiennes et hebdomadaires sont idéales pour les publications tendance.

Chaque champ contient un nombre pour les vues correspondantes - par exemple, sur un article spécifique, je peux afficher le nombre total de vues sur le frontend en ajoutant ceci dans un bloc de code Oxygen sur un modèle appliqué aux articles :

<?php the_field('views_total'); ?> //exemple de sortie serait 1203. Cela signifie que depuis la publication du message, il a reçu 1203 vues.

Attendez!

En fonction du trafic généré par votre site Web, vous souhaiterez l'optimiser afin que les ressources du serveur soient épuisées en écrivant chaque vue dans la base de données. Heureusement, il existe une fonctionnalité intégrée à cet extrait de code qui résout exactement cela.

Près du haut de cet extrait de code, vous pouvez voir une section pour plus de précision. Les instructions sont commentées dans le code.

La précision est contrôlée de 0 à 100. S'il est défini sur 100, chaque page vue sera enregistrée dans la base de données. Si défini sur 1, 1 visite sur 10 mettra à jour le nombre de vues.

La précision doit être réduite pour les sites Web à fort trafic. Cela minimise la charge sur le serveur et les problèmes de performances.

Gardez à l'esprit que ce plugin n'est pas destiné à remplacer une solution d'analyse. Par conséquent, la précision n'a pas beaucoup d'importance, car le rapport entre l'audience et les publications sera le même. Vous saurez toujours lesquels de vos messages sont populaires.

Construire la section des messages tendance

Maintenant, construisons rapidement les sections de publications tendances et populaires.

Je vais utiliser un répéteur et ajouter rapidement une image en vedette, un titre de publication, un extrait et un lien pour en savoir plus. Vous pouvez également utiliser des messages faciles, car nous utiliserons la fonction de requêtes avancées incluse avec Oxygen.

isotrope-2022-06-19-au-18-04-50 — Mon affichage "top stories", construit avec un répétiteur Oxygen Builder

Interroger les messages tendance

Maintenant, il est temps d'interroger les publications tendance. Comme mentionné précédemment, nous allons utiliser le nombre de vues global pour la journée, car cela nous donne une bonne compréhension de ce qui se passe pendant cette période spécifique.

Pour ce faire, utilisez la fonction de requête avancée pour le répéteur ou l'élément de publication facile.

Cliquez sur le bouton "Modifier la requête" pour ouvrir l'interface utilisateur de requête avancée.

Maintenant, ajoutez ce qui suit. Pour ce cas d'occasion, je voulais seulement montrer les huit articles les plus populaires en fonction des vues hebdomadaires.

j'ai mis:

posts_per_page = 8
no_found_rows = true (cela désactive la pagnation pour le répéteur)
post_type = message
meta_key = views_weekly (cela indique à WordPress que nous devons associer les données de ce champ à la requête. N'oubliez pas que nous pouvons changer cela en total, quotidien, hebdomadaire ou mensuel selon que nous voulons des publications populaires ou populaires)
order_by = meta_value_num (cela nous indique que nous allons ordonner par le nombre associé à notre méta-valeur qui dans ce cas est les vues hebdomadaires)
order = desc (cela nous dit de trier les messages du plus de vues au moins de vues)

Maintenant, enregistrez tout et dirigez-vous vers le front-end de votre site Oxygen. Vous allez maintenant afficher les messages dans ce répéteur spécifique triés par le nombre de vues sur la période sélectionnée.

Prime

Je souhaite également afficher le nombre de vues global pour mes lecteurs sur le front-end du blog. Pour ce faire, je vais créer un code court. J'ajoute ce code à mon gestionnaire d'extraits :

<?php add_action('init', function(){ add_shortcode('post_views', function(){ return wpp_get_views(get_the_ID()); }); }); ?>

Ensuite, je peux insérer le nombre de vues pour un seul article en ajoutant ce shortcode :

[post_views]

Pour ce tutoriel, j'ai placé ce shortcode dans mon répéteur pour afficher les vues associées à un post. De cette façon, j'ai pu vérifier que ma requête fonctionnait comme prévu.

isotrope-2022-06-19-au-18-03-45 — Cela ne fonctionnera pas dans l'éditeur, mais le fera sur le frontend.

isotrope-2022-06-19-au-18-14-12 — Répéteur frontal, trié par nombre de vues hebdomadaire, affichant le nombre total de pages vues sur le frontend.

Quelque chose à noter ici est que cela n'utilise pas les champs de nombre de vues que nous avons ajoutés à notre article unique avec l'extrait de code précédent. Au lieu de cela, il extrait de la table de base de données que ce plugin ajoute lors de l'installation. Cela signifie qu'il s'agira toujours d'un nombre de vues précis, quelle que soit la précision indiquée dans l'extrait de code précédent (ce sont deux choses différentes).

Je peux également ajouter cette information en ajoutant le PHP suivant directement à un bloc de code sur un modèle appliqué à un seul article :

<?php if ( function_exists('wpp_get_views') {// get_the_ID() ne fonctionne que lorsqu'il est utilisé // dans The Loop ! (https://codex.wordpress.org/The_Loop) echo wpp_get_views(get_the_ID()); } ?> // Je peux aussi filtrer <?php if ( function_exists('wpp_get_views') ) { // '15' voici l'ID de la publication/page echo wpp_get_views(15, 'last7days'); } ?> // Plus : https://github.com/cabrerahector/wordpress-popular-posts/wiki/2.-Template-tags#wpp_get_views

Conclusion

Cet article vous a montré comment ajouter une section de publication populaire et/ou tendance à l'aide du répéteur Oxygen Builder à un site Web créé avec ce plugin. Si vous avez des questions ou des suggestions, n'hésitez pas à les laisser dans la section commune ci-dessous.

Tu peux aimer

Abonnez-vous et partagez

Si vous avez aimé ce contenu, abonnez-vous à notre tour d'horizon mensuel des actualités WordPress, de l'inspiration pour les sites Web, des offres exclusives et des articles intéressants.

Désabonnez-vous à tout moment. Nous ne spammons pas et ne vendrons ni ne partagerons jamais votre e-mail.