Un petit tutoriel complémentaire à la série Gsap de notre ami SupaMike (site). Gsap est une librairie JS qui permet de faire de nombreuses animations dans nos sites et il est possible de l'intégrer dans nos sliders Swiper.
Swiper peut interagir avec les évènements comme le changement de slide (slideChange) ce qui permet d'intégrer une animation dès que slide change. Plus d'informations sur ces propriétés sur cette section de la documentation.
Donc dès que les éléments contenus dans votre slider disposent d'une classe, vous lui appliquez l'animation de votre choix (voir la documentation de Gsap).
Dans mon slider de démonstration j'ai ajouté un déplacement vertical (donc axe Y) avec gsap.fromTo(".swip-title", 0.7, {y: "-200px"},{y: "0px"} ); sur mon titre et un déplacement horizontal sur le résumé (axe X) avec gsap.fromTo(".swip-text", 0.9, {x: "1200px"},{x: "0px"} );. Le code fromTo étant de -200px à 0px (position initiale).
Le code complet de ce simple exemple :
swiper.on("slideChange", function() {
gsap.fromTo(".swip-title", 0.7, {y: "-200px"},{y: "0px"} );
gsap.fromTo(".swip-text", 0.9, {x: "1200px"},{x: "0px"} );
});
Vous trouverez également beaucoup des sources YouTube ou Codepen avec d'autres exemples comme ceux-ci. Exemple 1, exemple 2, exemple 3.
Ma démonstration est ICI. Et l'intégration de Swiper ICI. Amusez-vous bien 😉
Suite à mon article sur l'utilisation globale de Pods avec Oxygen, je rajoute quelques astuces utiles ...
Ouvrir (télécharger) un pdf avec un bouton
En premier nous devrons créer un champ "fichier" et dans ce cas le restreindre au format PDF.
Ayant essayé de récupérer le lien du fichier dans le bouton, je me suis aperçu que je récupérais un tableau. En regardant de plus près, je devais récupérer le ["guid"] qui contient le lien du fichier. Je me suis donc inspiré de l'article de Mohammed Wasim Akram et des codes de Kevin Pauls and Matt Hias membres du groupe anglophone pour créer cette fonction :
function oxychild_pdf($field_name) {
$mypod = pods( $post->post_type, $post->ID );
$pop = $mypod->field($field_name);
return $pop["guid"];
}
Une fois avoir insérer cette fonction dans un plug-in, code snippets ou équivalant, vous pouvez récupérer le lien en utilisant le retour d'une fonction (nom de la fonction en premier et nom du champ ensuite) comme ceci :
Maintenant tout ça est bien sympa, mais j'aimerais que l'utilisateur puisse télécharger directement le fichier. Nous allons donc le faire en deux étapes, la première sera de rajouter la classe .download-button (ou toute autre à votre choix pour autant qu'elle corresponde dans le script) et rajouter ce script pour forcer le téléchargement :
jQuery(document).ready(function() {
var downloadButton = jQuery('.download-button');
downloadButton.each(function(index) {
jQuery(this).attr('download', '');
});
});
Utilisation des templates Pods
Par défaut, avec un thème classique WordPress, Pods permet de créer des templates (activé par défaut) qui utilisent les Magic Tags de Pods. Nous pouvons comparer ceci à un code bloc d'Oxygen. Il nous est donc possible d'utiliser le code court du template Pods dans une page créée avec Oxygen, l'avantage pouvant être de créer un équivalent d'un "reusable parts" et également utiliser la simplicité des codes courts de Pods. Voici une vidéo de présentation (en anglais) sur cet usage. Voir cette documentation.
Ajout d'article en frontend
Pods permet aussi de faire des formes pour ajouter ou éditer un article en frontend. Voir cette documentation.
Récupérer une image d'un champ multiple
Sur le groupe anglophone, un collègue a demandé s'il était possible de récupérer la première image d'un champ image multiple. L'idée étant de ne pas créer un deuxième champ pour une image en avant, par exemple, qui serait la première image d'une galerie. Comme ce champ est un tableau (array) nous pouvons récupérer l'image grâce à sa position dans le tableau. Récupérer le tableau dans une variable et cibler l'élément à récupérer (pour rappel un tableau commence à la valeur 0). Le code sera donc comme ceci pour la première image :
<?php
// get pods object
$mypod = pods( $post->post_type, $post->ID );
if ($mypod->field('property_slider')) {
echo '<h3>Gallery:</h3>';
echo '<div class="gallery-single">';
foreach( $mypod->field('property_slider', true) as $picture) {
echo '<div class="gal-single"><a href="' . $picture['guid'] . '" data-fancybox="gallery"><img src="' . $picture['guid'] . '" width="150" height="150" class="attachment-thumbnail size-thumbnail" alt="" /></a></div>';
}
echo '</div>';
$test = $mypod->field('property_slider', true);
}
<img src="<?php echo $test[0]['guid'];?>" alt="image" />
Pagination avec Pods
Pods possède ces propres fonctions pour la pagination. Attention la pagination fonctionne avec les modules Easypost et Repeater. Par défaut, WordPress utilise la valeur par défaut dans les préférences de lecture, mais il possible de changer ces valeurs suivant des conditions (deuxième code). Globalement nous devrons ajouter ceci :
<?php
$params = array(
'limit' => 4,
'orderby' => 't.post_title ASC',
);
$pods = pods( 'video', $params );
// Get the items, search is automatically handled
//$pods->find();
if ( $pods->total() > 0 ) {
while( $pods->fetch() ) {
//reset id
$pods->id = $pods->id();
//get the template
$temp = $pods->template( 'lifestream' );
//output template if it exists
if ( isset( $temp ) ) {
echo '<div class ="life-content">' . $temp . '</div>';
}
}
//pagination
echo $pods->pagination();
}
else {
echo 'No content found.';
}
?>
Dans certains cas où vous voudriez des paginations différentes, il faudra rajouter une fonction dans le functions.php. Voici les informations du codex et voici un exemple (CPT Properties et Agents, attention curieusement ce ne sont pas les slugs) :
function my_post_queries( $query ) {
// do not alter the query on wp-admin pages and only alter it if it's the main query
if (!is_admin() && $query->is_main_query()){
// alter the query for the home and category pages
if(is_home()){
$query->set('posts_per_page', 3);
}
// alter the query for the Movies category page
if(is_category('Properties')){
$query->set('posts_per_page', 6);
}
// alter the query for the Movies category page
if(is_category('Agents')){
$query->set('posts_per_page', 4);
}
}
}
add_action( 'pre_get_posts', 'my_post_queries' );
à suivre ...
Pas mal de collègues ont manqué l’opportunité d'acheter ACF Pro en version "licence à vie" et n'ont pas envie de payer le plug-in chaque année. Pas de panique, il y a une solution ... Pods !
Introduction
Je vais résumer un peu les différences ... En premier, Pods remplace deux plug-ins, CPT UI et ACF, car il crée aussi bien les CPT et taxonomies que les champs (Fields). Ensuite, Pods a la possibilité de sauver dans une table séparée et créée par le plug-in (option), nos différents champs. Une table assurera le lien entre le poste et ces données.
Au niveau des types de champs, Pods en propose moins qu'ACF (19 contre 30) mais compense par la flexibilité de ces champs. Le meilleur exemple est que le champ image peut se voir attribuer une sélection multiple, ce qui le transforme, si on peut dire, en galerie ... Un champ relation, par défaut, se transformera en liste. En résumé, dans bien des cas, Pods disposera de ce que nous cherchons pour étendre notre site WordPress (page d'options, relations entre postes ...)
Champs simples (un élément)
Bien qu'Oxygen n'ait pas réellement une intégration de Pods, il est cependant assez simple à utiliser (après quelques notions). Voyons en premier les champs "simples" ... Il suffira de copier le nom de votre champ dans "Insert Data -> Custom Field/Meta Options"
Que nous pouvons retrouver sur la page de configuration de nos pods
Récupérer les images
Jusqu'ici tout va bien, les champs uniques passent comme ça, une adresse (en texte) peut être reprise dans l'élément Maps d'Oxygen également. Voyons maintenant pour une image seule. Pods vous donne la possibilité de récupérer ce que vous voulez, soit l'image elle-même, soit son lien (URL) en fonction de sa taille (thumbnail, medium, full, ...). En activant les templates de pods et en en créant un, vous allez avoir dans votre administration à droite, la liste de toutes les références utilisables. En fonction de la taille d'image que vous désirez insérer vous aller mettre dans l'élément Image d'Oxygen, le lien avec la source de votre fichier exemple : featured_image._src.medium pour récupérer l'image en taille moyenne de mon champ featured_image (c'est son nom, car j'ai désactivé celle par défaut pour sauver le maximum de champs dans ma table séparée).
Utiliser le code PHP
Il est également possible de mettre une fonction dans un plug-in pour récupérer vos images, je vous conseille l'article de Mohammed Wasim Akram qui m'a aidé pour mes premiers pas.
Et en PHP alors ? Il arrive que nous ayons besoin de passer par un code bloc. Dans le cas d'une archive avec un repeater, voici ce que va donner le code, notez bien qu'il faut récupérer (dans ce cas) l'identifiant du poste :
<?php
$post_id = get_the_ID();
$html ='';
$color = get_post_meta($post_id,'custom_ribbon_color', true);
$yes = get_post_meta($post_id,'display_custom_ribbon', true);
$label = get_post_meta($post_id,'custom_ribbon_label', true);
if ( $yes == "YES") {
$html = '<div class="ruban" style="background-color:'. $color .' ">';
$html .= '<div class="txt-ruban">'. $label .'</div>';
$html .= '</div>';
echo $html;
}
?>
Dans cet exemple, j'ai un champs Oui/Non (YES/NO) qui permet de choisir si on veut afficher un ruban, un champ ColorPicker pour récupérer la couleur de fond du ruban, et enfin le texte en lui-même.
Il existe aussi une autre manière de récupérer les champs pods comme ceci :
<?php
// get pods object
$mypod = pods( $post->post_type, $post->ID );
$html ='';
if ( $mypod->field('display_custom_ribbon') == "YES") {
$html = '<div class="ribbon" style="background-color:'. $mypod->field('custom_ribbon_color') .' ">';
$html .= '<div class="mts-badge">'. $mypod->field('custom_ribbon_label') .'</div>';
$html .= '</div>';
echo $html;
}
?>
Relation entre CPT
Nous allons terminer avec un exemple de relation entre CPT, j'ai des biens qui sont gérés par plusieurs agents et sur un bien, je veux afficher l'agent qui gère le bien, j'ai donc rajouté une relation dans les propriétés pour connecter un agent. Mettre un champ relation et le connecter avec votre autre CPT (le champ bidirectionnel est facultatif.
Pour récupérer les informations de l'agent, il suffira d'utiliser les champs créés automatiquement pour la relation.
$pod = pods('property', get_the_ID() );
$retour = '</br>';
//getting the pod fields for one pod
if( $pod->exists() ){
echo $pod->field('agent_relation.agent_photo._img.medium') . $retour;
echo $pod->field('agent_relation.post_title') . $retour;
echo $pod->field('agent_relation.sub_title_of_agent') . $retour;
echo $pod->field('agent_relation.phone') . $retour;
}
Champs multiples (tableau/array)
Pour réaliser une galerie, nous allons avoir des champs multiples, soit un tableau (array) d'images (ou de texte pour une liste). Dans ce cas, et particulièrement pour les images, nous allons avoir besoin d'un bloc de code avec quelques lignes de code. Voici ce que ça va nous donner :
<?php
// get pods object
$mypod = pods( $post->post_type, $post->ID );
if ($mypod->field('property_slider')) {
echo '<h3>Gallery:</h3>';
echo '<div class="gallery-single">';
foreach( $mypod->field('property_slider', true) as $picture) {
echo '<div class="gal-single"><a href="' . $picture['guid'] . '" data-fancybox="gallery"><img src="' . $picture['guid'] . '" width="150" height="150" class="attachment-thumbnail size-thumbnail" alt="" /></a></div>';
}
echo '</div>';
}
?>
Petit récapitulatif, pour vérifier qu'un champ existe :
if ($mypod->field('property_slider')) {
}
/* OU - OR */
if ( $mypod->display('add_more_features') == "Oui") {
}
/* Mon champs possède Oui et Non*/
Récupérer un champs :
// get pods object
$mypod = pods( $post->post_type, $post->ID ); //Archives
$item = $mypod->field('rental_includes', true);
echo $item;
/* OU - OR */
$post_id = get_the_ID(); //Single posts
$color = get_post_meta($post_id,'custom_ribbon_color', true);
echo $color;
Conclusion
J'espère vous avoir donné une bonne approche de Pods, ne pas avoir fait d'erreurs et que ce tutoriel vous donnera envie d'utiliser Pods. Il existe d'autres vidéos en anglais pour vous former, même si malheureusement, je reconnais que la documentation manque fortement, particulièrement pour les débutants. Sinon vous pouvez aller lire plus ici sur Pods.
Les références du code peuvent se retrouver via ce lien.
Date de modification
A mettre dans un code bloc, le formatage de la date peut être modifié ainsi que le texte 'Mis à jour le '.
<?php
$updated_date = get_the_modified_time('l j F Y');
echo 'Mis à jour le ' . $updated_date ;
?>
Postes adjacents
J'insère deux code blocs dans une div, précédent à gauche et suivant à droite, je personnalise avec des icônes aux besoins. Voir aussi ICI.
Tutoriel suivant</br> <?php next_post_link(); ?>
Tutoriel précédent</br> <?php previous_post_link(); ?>
Table des matières
Le plugin (gratuit) easy table of content fonctionne très bien avec Oxygen et possède tous les réglages voulus.
Copyright
Vous pouvez facilement ajouter votre copyright dans le pied de page en récupérant l'année an cours avec cette fonction dans le fichier functions.php. Vous pouvez l'ajouter en utilisant les éléments dynamique et "functions", il suffira d'entrer oxychild_current_year.
function oxychild_current_year() { echo date_i18n( 'Y' ); }
NOTE : le nom de la fonction peut être changé, oxychild était utilisé avec mon plugin maison que j'ai remplacé par Advanced Script.
Barre de progression de lecture
Le plugin gratuit Reading Progress Bar permet ceci avec quelques manipulations. La position de la barre reste en "Personnalisé" et j'ai rajouté à la classe .readingProgressbar fixe (fixed) et top à 0px avec !important (ce qui n'est pas conseillé mais obligatoire dans ce cas).
Préchargement
Le préchargement peut se faire en CSS ou avec du javascript (voir ici).
Vous trouverez des animations assez facilement comme sur cette page ou celle-ci.
Lire plus
Plus tard
Catégories des postes
Plus tard
Un petit défi pour un collègue australien. Il avait le plug-in Brands pour WooCommerce mais nous aurions aimé pouvoir filtrer sur les marques ainsi que d'avoir des archives par marques.
Dans un premier temps, nous allons créer l'attribut "Brands" ou "Marques" dans WooCommerce et nous allons cocher "Activer les archives"
Ensuite nous allons installer le plug-in Taxonomy Images et aller activer sur "Produit Brands".
J'ai ensuite créer une simple page Brands ou Marques et ajouter sur celle-ci un code bloc avec :
<?php
$args = array(
'taxonomy' => 'pa_brands',
'term_args' => array(
'hide_empty' => false,
)
);
$terms = apply_filters( 'taxonomy-images-get-terms', '', $args );
foreach ($terms as $term){
$archive_link = get_term_link( $term->slug, 'pa_brands' );
$image_attributes = wp_get_attachment_image_src( $term->image_id, 'thumbnail' );
$html = '<div class="mr-brand"><a href="' . $archive_link . '">';
$html .= '<option>' . $term->name . '</option>';
if ( $image_attributes ) {
$html .= '<img src="' . $image_attributes[0] . '" width="' . $image_attributes[1] . '" height="' .$image_attributes[2] . '" />';
}
$html .= '</div></a>';
echo $html;
}
?>
Nous récupérons donc toutes nos marques à l'intérieur d'une div qui a le lien vers l'archive de la marque ainsi que l'image que nous avons pu insérer avec le plug-in.
N'oubliez pas de faire un template ou de configurer votre template de catégorie sur cette taxonomie. Petite note : l'utilisation des taxonomies d'attributs dans WooCommerce doit être précédées de pa_.
Pour terminer nous allons peut-être aussi vouloir récupérer nos marques sur les produits (single). Voici la fonction à utiliser dans un bloc de code :
<?php
global $product;
$rmbrands = $product->get_attribute( 'pa_brands' );
echo '<div class="rm-brands">Brand: ' . $rmbrands . '</div>';
$mytaxonomy = 'pa_brands';
$post_id = get_the_ID();
$terms = wp_get_post_terms( $post_id, $mytaxonomy ); // Terms for this post
$custom_taxonomy_images = get_option( 'taxonomy_image_plugin' ); // Plugin images data
if ( empty( $terms ) ) return; // If no terms found, we exit.
echo '<div class="rm-brands-container">';
// Loop through each term in this post for the defined taxonomy
foreach( $terms as $term ) {
$attachment_id = $custom_taxonomy_images[intval($term->term_id)]; // Get image Attachement ID
$image = wp_get_attachment_image( $attachment_id, 'thumbnail' ); // Get image to be displayed
$url = get_term_link( $term->term_id, $taxonomy ); // Get term URL
?>
<div class=”rm-brands-image”>
<a href="<?php echo $url; ?>"><?php echo $image; ?>
</div>
<?php
}
echo '</div>';
?>
J'ai été assez étonné en discutant avec un collègue américain hier et qui dans notre échange me demande : "dis j'aime bien l'image de fond que tu as mis sur ton site ...", en l’occurrence celui-ci.
Ce n'est pas une image mais une texture transparente, soit un petit png qui a été conçu par le designer pour pouvoir se répéter. Du coup, ça permet de faire des fonds avec une image de très petite taille, améliorant le chargement par rapport à une image "normale".
Il suffira donc de télécharger une de ces textures sur le site en référence ou sur tout autre le permettant. Vous n'avez plus qu'à le mettre en fond en conservant la taille d'origine et en activant la répétition (sinon votre image va être agrandie et la qualité sera plus que dégradée).
Lien d'une très belle collection avec prévisualisation : https://www.transparenttextures.com/
Oxygen utilise en majorité le Flex CSS (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) mais il existe également une autre possibilité en CSS pour créer des modèles, les grilles (grid). Une bonne ressource pour la compréhension : https://css-tricks.com/snippets/css/complete-guide-grid/
Simplement on pourrait simplifier en disant que nous allons créé comme son nom l'indique une grille, et nous allons pouvoir utiliser toutes les cellules à notre guise. Suivant la conception de celle-ci nous allons pouvoir avoir une grille totalement "responsive".
Pour un exemple simple, je vais commencé par créé une section dans Oxygen avec la classe container à laquelle je vais appliqué un css personnalisé au lieu d'utiliser le flex. La première étape étant de déterminer combien nous voulons de colonnes (columns) et de lignes (rows). Pour cet exemple simple nous allons créer une grille avec 4 colonnes de 25vw (soit un quart de la largeur de l'écran) et pareil pour les lignes (4* 25vh soit quatre fois un quart de la hauteur de l'écran). Code css dans la section (n'oubliez pas la classe container) :
display:grid; margin:0 auto; grid-template-columns : repeat(4, 25vw); grid-template-rows : 25vh 25vh 25vh 25vh; justify-items: stretch; align-items: stretch;
Note : les colonnes et lignes peuvent utiliser d'autres valeurs (px, %, ...) mais aussi une valeur propre au grid qui est fr, correspond uniquement à une fraction 10fr pouvant être considérée comme 10 cellules de 10%. Mais attention que grid-template-columns: 1fr 50px 1fr 1fr; vous donnera 3 fois un tiers de la largeur MOINS 50 px, dans ce cas 1fr n'est pas égal à 33.33% de la largeur.
Une fois cette grille mise en place chaque élément (item) vont pouvoir être assigné dans la grille, mais ils pourront couvrir au minimum une cellule, ou plusieurs (attention au z-index en cas de superposition). Pour cet exemple simple je veux créer 4 div formant la taille de l'écran et une centrée en superposition. NOTE : si j'avais uniquement utilisé deux colonnes et deux lignes, j'aurais pu avoir le résultat pour mes quatre div mais je n'aurais pas pu centré la div au milieu. Une grille avec plus de colonnes et de lignes permet des positionnements plus précis et des grilles plus complexes.
Créons maintenant 5 div avec la classe item. Une fois qu'elles sont créées, nous allons de nouveau mettre le css personnalisé comme ceci,
//première div grid-column:1/3; grid-row:1/3; //seconde div grid-column:3/5; grid-row:1/3; //troisième div grid-column:1/3; grid-row:3/5; //quatrième div grid-column:3/5; grid-row:3/5; //cinquième div grid-column:2/4; grid-row:2/4;
J'ai également, juste pour l'exemple, affecté un rayon de bordure de 50% pour former une ellipse au centre. Notre première div va partir de 1 à 3, 1 correspond au point le plus à gauche de la colonne et 2 à la fin du premier élément de la grille pour avoir l'élément sur deux cellules il faudra donc aller jusqu'à 3. Pareil en hauteur. Le dernier élément que je veux centré sera donc décalé d'une cellule et commencera à 2 pour finir une cellule avant la fin à 4. Pareil en hauteur.
Le résultat est visible ici : https://oxygen.bulgaweb.com/puissance-du-grid-css/ NOTE : nous n'avons pas exactement la taille de l'écran à cause du menu (header) qui n'est pas calculé dans la grille.
Voici un exemple simple, vous pourrez, grâce à la puissance de ce css facilement ajouter un espace entre vos cellules avec le GAP, aligner le contenu de vos cellules avec JUSTIFY-ITEMS et ALIGN-ITEMS. Une bonne maîtrise de ce css permet des mises en place plus complexe.
NE PAS OUBLIER que vous pouvez également changer la position de vos éléments en responsive en utilisant les breakpoints entre les différentes tailles d'écrans.
Un autre exemple où j'ai appliqué ce css pour un client : https://neo-x.be/
La structure du code de base
Au tout début, la première chose dont nous aurons besoin est un bloc de code de départ que nous pouvons modifier selon nos besoins:
<?php
$params = array('posts_per_page' => 5); // (1)
$wc_query = new WP_Query($params); // (2)
if ($wc_query->have_posts()) : // (3)
while ($wc_query->have_posts()) : // (4)
$wc_query->the_post(); // (4.1)
the_title(); // (4.2)
endwhile;
wp_reset_postdata(); // (5)
else: ?>
<p>
<?php _e( 'No Products' ); // (6) ?>
</p>
<?php endif; ?>
Le code ci-dessus extrait les titres des cinq articles les plus récents de notre base de données WordPress en utilisant le processus suivant:
- Un tableau de paramètres avec lequel WP_Query fonctionne est créé; pour commencer, ce ne sont que les publications de base, mais en ajoutant plus de détails à ces paramètres, nous pouvons obtenir des résultats différents pour nos requêtes.
- WP_Query est utilisé pour interroger les paramètres créés dans la première ligne.
- La requête est vérifiée pour voir si elle a renvoyé des résultats.
- S'il y a des résultats, nous les répétons:
4.1 Tout d'abord, définissez la variable globale $ post, qui garantit le fonctionnement de la fonction suivante.
4.2 Deuxièmement, définir la variable the_title (), qui est responsable de l'affichage du titre du message. - Ensuite, lorsque les articles sont affichés, nous retournons la variable $ post à son état d'origine avec la fonction wp_reset_postdata.
- Dans le cas où la vérification à l'étape 3 constate qu'il n'y a pas de publications à afficher, au lieu d'itérer sur des résultats inexistants, nous affichons simplement une invite appropriée.
Tirer des produits WooCommerce au lieu de messages WordPress
Tout ce que nous devons faire est de changer le tableau des paramètres de requête pour inclure le paramètre post_type et lui dire de récupérer les produits :
$params = array(
'posts_per_page' => 5,
'post_type' => 'product'
);
Affichage des produits WooCommerce en promotion
Dans WooCommerce, un champ sale_price est chargé de définir le prix spécial réduit; lorsque le produit n'est plus en promotion, ce champ est vide.
$params = array( 'posts_per_page' => 5, 'post_type' => 'product', 'meta_key' => '_sale_price', 'meta_value' => '0', 'meta_compare' => '>=' );
Affichage de variantes de produits promotionnels
Le code de la dernière section s'occupe d'afficher les produits en promotion, mais qu'en est-il des variantes d'un seul produit? Après tout, si une variante est en vente, nous voudrons probablement aussi que le reste des variantes soit en vente! La raison pour laquelle le code de la dernière section n'affiche pas les variantes en standard est que WooCommerce stocke chaque variante de produit en tant que publication distincte et en tant que publication d'un autre type. Pour contourner ce problème, nous devons apporter une autre petite modification à notre tableau de paramètres:
$params = array(
'posts_per_page' => 5,
'post_type' => array('product', 'product_variation'),
'meta_key' => '_sale_price',
'meta_value' => 0,
'meta_compare' => '>='
'meta_type' => 'NUMERIC'
);
Displaying available products only
Vos clients ne seront pas très satisfaits si vous essayez de leur vendre un produit sur votre page d'accueil que vous n'avez pas en stock, c'est donc une bonne idée d'inclure une telle vérification dans votre code. La situation de stockage est gérée par le champ _stock_status, qui prend deux valeurs: instock et outofstock. Ainsi, pour afficher les produits dont le prix est inférieur à 5 et qui sont en stock, nous devons utiliser les paramètres suivants :
$params = array(
'posts_per_page' => 5,
'post_type' => array('product', 'product_variation'),
'meta_query' => array(
array(
'key' => '_price',
'value' => 5,
'compare' => '<',
'type' => 'NUMERIC'
),
array(
'key' => '_stock_status',
'value' => 'instock'
)
)
);
Source : https://www.gavick.com/blog/wp_query-woocommerce-products
Autres informations en anlgais : https://github.com/woocommerce/woocommerce/wiki/wc_get_products-and-WC_Product_Query
Utiliser les queries dans WordPress vous permets de récupérer quasi ce que vous voulez sur vos pages. Voici une fonction qui vous permettra de récupérer les articles relatifs :
<?php $current_post = get_queried_object(); $args = array( 'post_type' => 'mon-post-type', 'posts_per_page' => 5, 'post__not_in' => [$current_post->ID] ); $query = new WP_Query($args); while($query->have_posts()) : $query->the_post(); ?> <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p> <?php endwhile; wp_reset_query(); ?>
La fonction est à mettre dans un code bloc sur le template des posts en remplaçant mon-post-type par le slug de votre articles.
Note : 'post__not_in' => [$current_post->ID] ce code supprime de la liste l'article sur lequel l'utilisateur se trouve.
Si vous ne disposez pas d'OxyExtras, il est possible de récupérer assez simplement les titres avec liens des articles adjacents. WordPress dispose de deux fonctions qu'il suffira de placer dans deux blocs de code sur votre template de l'article (singular).
Pour l'article précédent
<?php previous_post_link(); ?>
Pour l'article suivant
<?php next_post_link(); ?>
Vous pouvez également personnaliser suivant vos besoins en rajoutant un titre et une icône à chaque bloc.
Mise à jour du 18 mars, un collègue avait fat une demande pour pouvoir inclure l'icône gauche/droite dans le lien afin que les utilisateurs du site puissent cliquer sur celui-ci pour aller au poste suivant ou précédent. Après quelques recherches je suis arrivé au résultat.
En premier nous allons mettre deux fonctions dans le functions.php ou Advanced Script pour récupérer les deux liens, comme ceci
function previous_poste () {
$prev_post = get_adjacent_post (false, '', true);
if (! empty ($prev_post)) {
$link = get_the_permalink ($prev_post-> ID);
return $link;
}
}
function next_poste () {
$next_post = get_adjacent_post (false, '', false);
if (! empty ($next_post)) {
$link = get_the_permalink ($next_post-> ID);
return $link;
}
}
Dans la structure Oxygen vous pouvez créer une div avec deux link wrapper. Le premier lien sera retourné par la fonction previous_poste. Donc cliquer sur data -> php return value -> previous_poste et pareil pour la deuxième avec l'autre fonction.
Ensuite je mets mon icône dans le link wrapper et un code bloc avec un des deux codes suivants qui récupère le titre sans le lien (un lien ne pouvant pas être insérer dans un autre lien)
Tutoriel précédent</br>
<?php
$prev_post = get_adjacent_post(false, '', true);
if(!empty($prev_post)) {
echo $prev_post->post_title; }
?>
Tutoriel suivant</br>
<?php
$next_post = get_adjacent_post(false, '', false);
if(!empty($next_post)) {
echo $next_post->post_title; }
?>
Ensuite vous pouvez personnaliser selon vos besoins le texte et le design.
WordPress a un filtre intégré nommé de manière appropriée "excerpt_length" qui vous permettra de modifier la longueur par défaut de vos extraits. Insérez simplement le morceau de code suivant dans votre fichier functions.php et modifiez le «20» à la quantité de mots que vous souhaitez afficher dans vos extraits.
NOTE : le code peut être insérer via Code Snippet ou Advanced Script.
add_filter( 'excerpt_length', function($length) {
return 20;
} );
Source : https://www.wpexplorer.com/wordpress-excerpt-length/
Première vidéo destinée aux débutants. Ancienne vidéo pour mes clients (sur Divi).
Vidéos pour montrer la gestion de l'affichage des articles WordPress sur des pages différentes en fonction de leurs catégories. Ancienne vidéo pour mes clients (sur Divi).
