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
MISE A JOUR - Après de nombreux soucis avec une version PRO et leur add-on WooCommerce, je déconseille vivement l'achat de ce plugin qui n'est pas à la hauteur. Après moins d'un an, de nombreux bugs sont arrivés rendant la gestion très difficile et le support est insupportable. - "As I explain that to you, currently making the MEC compatible with Oxygen builder is not a high priority task for our dev team and our dev team will check this issue to make it compatible in the future which I can't give you an exact ETA for it."
J'ai découvert dernièrement le plug-in MEC que je préfère par rapport Events Calendar (personnel) et j'ai donc décidé de faire la migration pour un client. À noter que le plug-in possède des fonctions d'import, et ce, également pour récupérer les événements de Events Calendar (et d'autres).
La configuration est assez simple après avoir un peu cherché sur le fonctionnement du plug-in. Pour les archives il suffit de choisir un des nombreux modèles proposés par le plug-in et visibles sur leurs démos.
Dans l'administration, se rendre dans l'onglet shortcodes de MEC et sélectionner le modèle désiré et le copier-coller dans un élément shortcode d'Oxygen avec une taille de 100%.
Pour la page des événements, qui normalement est chargée via un thème, il faudra copier de contenu du template single dans un code bloc ce qui nous donnera ceci
<section id="<?php echo apply_filters('mec_single_page_html_id', 'main-content'); ?>" class="<?php echo apply_filters('mec_single_page_html_class', 'mec-container'); ?>">
<?php do_action('mec_before_main_content'); ?>
<?php while(have_posts()): the_post(); ?>
<?php $MEC = MEC::instance(); echo $MEC->single(); ?>
<?php endwhile; // end of the loop. ?>
<?php //comments_template(); ?>
</section>
<?php do_action('mec_after_main_content'); ?>
Le template single seront configurés en fonction du CPT événements. Concernant la modification du contenu, il faudra se rendre dans les paramètres de MEC et sélectionner "Style de la page d'événements".
Beaucoup d'autres options de personnalisation sont disponibles avec le plug-in.
À noter que si vous êtes plus expérimenté, vous pourrez créé un "faux" thème enfant (sans css ni fonctions) et y ajouter un dossier webnus et y insérer vos propres templates personnalisés. Il faudra dans ce cas également utilisé oxythemenabler pour avoir accès à ce dossier.
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/
Il arrive dans certains cas que l'utilisation des éléments WooCommerce d'Oxygen ne suffisent pas pour nos besoins. Néanmoins il existe des solutions pour personnaliser nos modèles de pages WooCommerce grâce aux hook pour WooCommerce.
Il existe deux types de hook: les actions et les filtres. L'action vous permet d'ajouter du code personnalisé à différents endroits. Le filtre, en revanche, vous permet de manipuler, de remplacer et de renvoyer une nouvelle valeur de variable à la fin.
Si vous souhaitez utiliser un hook pour modifier ou ajouter un code personnalisé, vous pouvez l'ajouter dans le fichier functions.php d'OxyChild ou autre. L'utilisation avec le plugin Code Snippets est également possible sous forme de snippet avec l'avantage d'activer et désactiver plus simplement.
Si vous souhaitez modifier ou ajouter un code, vous devez d'abord aller dans le dossier du plugin. Vous pouvez le faire en accédant à woocommerce / templates / archive-product.php. Une fois que vous y êtes, vous devez vérifier les hooks que les auteurs du plugin ont implémentés ici.
Un bon lien pour visualiser l'archive des produits : https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
Comment supprimer le fil d'ariane
Le code personnalisé ci-dessous supprime la fonction woocommerce_breadcrumb qui ajoute un balisage de fil d'Ariane. Nous avons défini la priorité sur 20, car il s'agit d'une valeur de priorité par défaut dans le fichier de modèle de plug-in.
/** * Hook: woocommerce_before_main_content. * * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content) * @hooked woocommerce_breadcrumb - 20 * @hooked WC_Structured_Data::generate_website_data() - 30 */ do_action( 'woocommerce_before_main_content' );
Et maintenant, nous devons définir le même afin de supprimer cette zone.
// Remove breadcrumbs remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
Comment masquer le titre de la page
if ( ! function_exists( 'hide_woocommerce_page_title' ) ) {
/**
* Hide WooCommerce page title
*/
function hide_woocommerce_page_title() {
return false;
}
add_filter( 'woocommerce_show_page_title', 'hide_woocommerce_page_title' );
}
Comment modifier le nombre de produits pour la page de la boutique
if ( ! function_exists( 'change_woocommerce_products_per_page' ) ) {
/**
* Change number of products on main shop page
*/
function change_woocommerce_products_per_page() {
return 8;
}
add_filter( 'loop_shop_per_page', 'change_woocommerce_products_per_page', 20 );
}
Comment changer les positions des prix et des notes
Pour changer la position des éléments dans un certain balisage (dans ce cas, un article de produit), vous pouvez utiliser les fonctions remove_action et add_action avec des priorités. Si des éléments sont ajoutés avec le hook, les priorités définissent l'endroit où l'élément sera à l'intérieur du balisage. La priorité inférieure rendra cet élément comme le premier.
Le plugin WooCommerce a beaucoup de hooks et dans la plupart des cas, les éléments sont ajoutés avec les hooks. Par conséquent, cet article est une occasion idéale de vous montrer comment vous pouvez également le faire.
Ici, nous allons vous montrer comment changer la position des éléments de prix et de notation. Le code pour cela sera:
// Remove functions from woocommerce_after_shop_loop_item_title hook with original priority remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 ); remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 ); // Added functions to woocommerce_after_shop_loop_item_title hook with new priority add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 10 ); add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 5 );
Tout d'abord, nous supprimerons les deux éléments de la partie article du produit avec les fonctions et les priorités d'origine. Vous pouvez trouver les deux éléments dans le fichier content-product.php.
/** * Hook: woocommerce_after_shop_loop_item_title. * * @hooked woocommerce_template_loop_rating - 5 * @hooked woocommerce_template_loop_price - 10 */ do_action( 'woocommerce_after_shop_loop_item_title' );
Ensuite, nous ajouterons les mêmes fonctions sur le même hook avec de nouvelles priorités.
Liens de sources d'un article an anglais : https://wpklik.com/wordpress-tutorials/woocommerce-hooks/
Et avec Oxygen ?
Après avoir vu grâce à cet article les hook et leurs usages, nous allons pouvoir les utiliser dans Oxygen, sous forme de snippet/fontions ou dans des blocs de code, voir les modifier. Voici un exemple de snippet permettant d'afficher les dimensions d'un produit en dessous du titre sur la page d'archive (dans ce cas les produits étant des tableaux, nous voulons informer l'acheteur de la taille de celui-ci) ...
function taille_woo_attribute(){
global $product;
$product_width = $product->get_width();
$pruduct_length = $product->get_length();
$product_dimensions = $product->get_dimensions();
if (!empty($product_width) && !empty($product_length)) {
echo '<div class="size_art">' . $product_length . ' de largeur sur ' . $product_width . ' de hauteur.</div>';
}
if ( $product->has_dimensions() ) {
echo '<div class="size_artdim">Dimensions : ' . $product_dimensions . '</div>';
}
}
add_action( 'woocommerce_shop_loop_item_title', 'taille_woo_attribute', 10 );
Notez que $product_width et lenght peuvent être supprimé car non utilisés, mais il pourrait servir à retourner juste d'autres valeurs dans le "echo". Voir sur le lien suivant les valeurs récupérables sur un produit.
Liens des informations produits : https://www.businessbloomer.com/woocommerce-easily-get-product-info-title-sku-desc-product-object/
Dans un code bloc vous pouvez très bien récupérer le template par défaut de WooCommerc avec
<?php
global $product;
/**
* Hook: woocommerce_before_single_product.
*
* @hooked woocommerce_output_all_notices - 10
*/
do_action( 'woocommerce_before_single_product' );
if ( post_password_required() ) {
echo get_the_password_form(); // WPCS: XSS ok.
return;
}
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
<?php
/**
* Hook: woocommerce_before_single_product_summary.
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
?>
<div class="summary entry-summary">
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
<?php
/**
* Hook: woocommerce_after_single_product_summary.
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_upsell_display - 15
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );
?>
</div>
<?php do_action( 'woocommerce_after_single_product' ); ?>
Dans le cas de problèmes avec le module "Product Image" qui serait insérer dans un repeater, vous pouvez utiliser
<?php do_action( 'woocommerce_before_single_product_summary' ); ?>
Attention que l'avantage de cette action est de récupérer également les badges associés aux produits. Utiliser un fonctions plus sélective peut vous rendre un contenu plus précis mais pas forcément la totalité du code voulu.
Liens des références des hook : https://docs.woocommerce.com/wc-apidocs/hook-docs.html
Anime.js est une bibliothèque d'animation JavaScript légère avec une API simple mais puissante facilement utilisable avec Oxygen.
Il fonctionne avec les propriétés CSS, SVG, les attributs DOM et les objets JavaScript.
Il suffira pour ces exemples de rajouter un bloc de code dans votre page Oxygen avec par exemple (exemple 7 du dernier lien an-dessous) :
<h1 class="ml7">
<span class="text-wrapper">
<span class="letters">Reality is broken</span>
</span>
</h1>
Dans le css
.ml7 {
position: relative;
font-weight: 900;
font-size: 3.7em;
}
.ml7 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.2em;
padding-right: 0.05em;
padding-bottom: 0.1em;
overflow: hidden;
}
.ml7 .letter {
transform-origin: 0 100%;
display: inline-block;
line-height: 1em;
}
Et dans le javascript :
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml7 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml7 .letter',
translateY: ["1.1em", 0],
translateX: ["0.55em", 0],
translateZ: 0,
rotateZ: [180, 0],
duration: 750,
easing: "easeOutExpo",
delay: (el, i) => 50 * i
}).add({
targets: '.ml7',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
Démos sur ce site : https://oxygen.bulgaweb.com/moving-letters/
Lien du Javascript : https://animejs.com/
Lien des tutoriels "Moving Letters" : https://tobiasahlin.com/moving-letters/
Vous pouvez également utiliser mon plugin Oxychild qui inclut le javascript (à activer) DOWNLOAD
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.
Petite remarque humoristique pour commencer, je suis Belge ... On ne peut pas être parfait. Il m'arrive donc assez régulièrement d'avoir des demandes de sites multilingues (3 langues nationales en Belgique). Voici une approche pour faire votre choix.
Le premier facteur à tenir en compte est de savoir si votre site possédera WooCommerce ou non car différents plugins peuvent être utilisés mais tous (premium ou non) vous permettrons de traduire le magasin en ligne.
Polylang
Polylang est disponible gratuitement sur le repo WordPress https://fr.wordpress.org/plugins/polylang/ mais cette version ne vous donnera pas droit au support et ne supporte pas WooCommerce. Une version pro et/ou pour WooCommerce est disponible en payant https://polylang.pro/products/ .
J'ai fait mes premiers sites multilingue avec ce plugin. Il reste relativement léger mais comporte des limites sans la version payante. Il reste un bon plugin si vos sites ne sont pas complexes.
WPML
Malheureusement l'offre à vie pour la licence n'est plus disponible depuis l'année passée. Je l'avais acheté en son temps pour le rapport qualité/prix. WPML peut être un plus gourmand en ressource mais possède des possibilités plus avancées (add-ons pour ACF, WPML All Import, etc.). Comme vous l'avez compris c'est ce que j'utilise et nous allons voir plus bas comment l'utiliser avec Oxygen.
TranslatePress
Ce plugin est utilisé il semble couramment par des utilisateurs d'Oxygen https://wordpress.org/plugins/translatepress-multilingual/ mais il faut noter que cette version gratuite est limitée en fonctions mais également à 2 langues, ce qui peut devenir très problématique si votre client vous demande une troisième langue (et que vous ne désirez pas l'acheter). Les versions payantes sont disponible ici https://translatepress.com/pricing/ Je ne sais pas si je vais prendre le temps de tester ce plugin car le paiement à l'année me semble assez onéreux, ce qui n'avait pas l'air d'être le cas sur le groupe anglais d'Oxygen. TranslatePress supporte WooCommerce et d'après les échos serait d'une facilité déconcertante ...
MultilingualPress
Ce plugin a une approche différente. WordPress permet de faire des multisites, plus précisément d'avoir plusieurs sites dans une même instance WordPress. Ces site vont partager le même dossier de plugins et thèmes mais chacun pourra utiliser ou pas tel ou tel élément. Plus d'informations en français ici https://kinsta.com/fr/blog/multisite-wordpress/
En configurant le multisite avec des sous répertoires, chaque langue sera considérée comme un site (exemple :www;monsite.com/en/) et le plugin permettra de lier les pages/articles entre les langues. Note : lors de la création de ma seconde langue dans mon test, il effectue automatiquement une copie du modèle source (si plus d'une langue installée), cependant l'ajout d'une page ultérieurement ne se duplique pas sur les autres instances.
Le principal avantage de cette technique est la performance car le plugin ne ralenti pas les sites.
Utilisation de WPML
Il y a principalement deux manières de traduire avec WPML, soit en traduisant le texte de la page, soit en dupliquant les pages/articles et templates. Personnellement je préfère la duplication de tout le contenu car (encore plus avec Oxygen), il peut avoir des changements dans des codes blocs ou dans Easypost (exemple le "Lire plus") et ces chaines ne sont pas toujours reconnues dans la traduction WPML.
Note importante : afin d'avoir accès aux templates d'Oxygen dans les diverses langues, il faut mettre dans les règlages de WPML -> Langues "Langues différentes dans les répertoires" sans cocher le " Utiliser le répertoire pour la langue par défaut " sinon vous aurez des erreurs dans l'édition des templates des langues additionnelles. Le reste fonctionnera sans problème. C'est dû à l'ajout par WPML en fin d'URL de ?lang=nl (en néerlandais dans cet exemple) qu'Oxygen ne reconnait pas.
D'après le support de WPML, il est préférable pour les templates de les dupliquer dans la langue principale et renommer le template avec la langue à la fin (exemple Main et Main EN). Ceci afin de préserver des templates et re-usable part qui fonctionnent dans l’administration.
Suite de mon premier tutoriel (qui devenait long) pour l'ajout d'un panier sur un site WooCommerce (compatible avec WPML). Basé sur des propositions/aides d'utilisateurs du groupe Facebook anglais d'Oxygen.
Solution par plugin
La solution la plus simple est d'utiliser ce plugin https://wordpress.org/plugins/woocommerce-menu-bar-cart/ (ou un autre du genre). Pour rappel avec Oxygen, si vous voulez votre panier dans la barre de côté, il faudra utiliser WooSidebars.
Solution avec du code
Un utilisateur a expliqué qu'il est possible de récupérer la fonction du thème Storefront de WooCommerce et de l'intégrer dans notre site réalisé avec Oxygen. Voici son site en allemand https://wewiradirekt.de/ .
La première étape sera d'installer, si ce n'est déjà fait, Code Snippet pour mettre la fonction. https://wordpress.org/plugins/code-snippets/ et d'y insérer
<?php function wc_refresh_mini_cart_count($fragments){
ob_start();
?>
<div id="mini-cart-count">
<?php echo WC()->cart->get_cart_contents_count(); ?>
</div>
<?php
$fragments['#mini-cart-count'] = ob_get_clean();
return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_mini_cart_count');
Ensuite nous allons aller placer notre panier dans le menu (mais cette version permet le placement là où vous le voulez) en allant dans le template Main (ou équivalent).
A l'endroit voulu dans votre menu :
1 Créer une div avec deux classes "custom-mini-cart" et "position-relative" (important pour la suite)
2 Placer votre icône représentant le panier
3 Mettre un module de bloc de code avec dans la partie PHP/HTML (Note : "Panier" est à traduire si le site n'est pas en français)
<a class="ct-link-button cart-button" href="/panier/" title="Panier">Panier</a> <div id="mini-cart-count"></div> <div id="mini-cart-wrapper"> <div class="widget_shopping_cart_content"><?php woocommerce_mini_cart(); ?></div> </div>
4 Mettre le CSS dans la feuille de style CSS (stylesheet) et le personnaliser à votre site.
/*-- CART --*/
#mini-cart-count {
display: inline-block;
color: white;
background: #0000ff;
width: 26px;
height: 26px;
border-radius: 50%;
padding-top: 4px;
text-align: center;
font-size: 12px;
font-weight: 800;
margin-left: 10px;
}
#mini-cart-wrapper {
position: absolute;
top: calc(100% + 1px);
left: 50%;
transform: translate(-50%,10%);
background-color: #d3ced2;
backdrop-filter: blur(20px) saturate(180%);
border-radius: 4px;
padding: 25px;
color: white;
pointer-events: none;
opacity: 0;
text-align: center;
transition: all 50ms linear;
z-index: 99;
}
.cart-button {
background-color: transparent;
border: 1px solid #0000ff;
color: #0000ff;
padding: 7px 15px;
font-weight: 600;
}
.position-relative {
position: relative!important;
}
.widget_shopping_cart_content {
width: 330px;
}
.custom-mini-cart:hover #mini-cart-wrapper {
pointer-events: all;
opacity: 1;
transform: translate(-50%,0%);
transition: all 240ms linear;
}
.cart-button.ct-link-button {
color: #0000ff;
padding: 2px 16px;
}
#mini-cart-wrapper a:not(.remove) {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
width: 90%;
text-align: left;
align-items: center;
}
.custom-mini-cart .woocommerce-mini-cart.cart_list.product_list_widget {
margin: 0px;
}
.buttons.woocommerce-mini-cart__buttons {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.custom-mini-cart .mini_cart_item, .woocommerce .custom-mini-cart ul.product_list_widget li {
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
background-color: rgba(255,255,255,0.04);
padding-top: 10px;
border: none;
}
.woocommerce ul.product_list_widget li {
border-bottom: 1px solid #d3ced2;
margin-bottom: 4px;
padding-bottom: 8px;
}
.widget_shopping_cart_content .woocommerce-mini-cart__total {
margin-bottom: 0px!important;
text-align: left;
}
REMARQUE : le contenu du panier est visible lors du survol du bouton. J'avais essayé de descendre le contenu du panier mais dans ce cas le passage du survol du bouton au contenu du panier fait que le "wrapper" se ferme. Pour la personnalisation vous devez avoir les notions nécessaires du code CSS.
Préambule :
Je ne suis pas développeur et je partage mon expérience. La demande de mon client (en sous-traitance) était d’avoir un site e-commerce qui soit mis à jour quotidiennement depuis la caisse enregistreuse d’un magasin. Le développeur envoie un fichier xml en FTP qui est lancé par une commande cron tous les soirs (jours ouvrables du magasin) avec WP All Import (plugin également de Soflyy). Vu la lenteur du site avec mon ancien thème, j’ai refait le site avec Oxygen et j’ai supprimé certains plugins (Ultimate Member notamment) et simplifié pour conserver de bonnes performances. Le client m’a donné les instructions du design qui est très simple (le client est Roi).
WPML avec Oxygen
J’utilise la duplication de mes templates et pages après avoir réalisé mon site dans la première langue. Pour réaliser cette opération il faudra autoriser WPML à dupliquer les templates d’Oxygen (les pages et articles sont normalement configurés directement). Il faudra se rendre dans “WPML > Paramètres > Traduction des types de publication” et activer “Templates”
Note : ceci doit être également réalisé si vous travaillez avec des blocks à traduire ou d’autres éléments. Pour les Widgets, mettre le plugin WooSidebars et là je crée mes widgets pour les deux langues.
Ensuite, se rendre dans “WPML > Gestion des traductions” et sélectionner le contenu à traduire. Dans l’image ci-dessous j’ai rajouté uniquement une page Test pour l’exemple. Dans votre cas il faudra choisir toutes les pages voulues et ensuite répéter l’opération pour tous les templates. Cochez “Dupliquer le contenu” et ensuite validez avec “Duplication”.
À partir de là, vous pouvez vous rendre dans vos pages et templates et, en choisissant la seconde langue, vous avez toutes vos pages dupliquées mais identiques à la première langue. Il nous reste juste une opération à réaliser sur CHAQUE page/template de la seconde (ou plus) langue. En se rendant sur la page, il faut demander à WPML de traduire la "copie" à part de manière à garder deux différentes, ce qui est le but. Donc, cliquez sur "Traduire à part" et ensuite vous pouvez traduire/changer le contenu de la page/template dans l’autre langue.
Note : prendre en compte le fait qu’à intérieur des templates il faudra modifier certains paramètres pour les queries ainsi que les widgets insérés. C’est logique. Ne pas oublier qu’il faut, suivant les cas, traduire les attributs et catégories mais ce tutoriel est juste fait pour aider l’intégration avec Oxygen.
Pages de connexion / déconnexion WooCommerce
Certains doivent le savoir mais pour moi ce fut une petite surprise. Réaliser une page de connexion avec WooCommerce est très simple. Par défaut lorsque vois insérer le module "My account" d’Oxygen et que le client n’est pas connecté vous avez un bloc avec deux colonnes S’enregistrer et Se connecter. Personnellement je voulais avoir mes formulaires Se connecter et S’inscrire séparés. Un peu de CSS est suffisant.
Note : le module "My account" dans l’édition d’Oxygen ne montre pas le même résultat que sur le front-end (site), pas de panique. Le code block contient le CSS pour séparer les deux colonnes.
CSS pour conserver uniquement la colonne connexion (peut varier suivant votre personnalisation, c’est une base) :
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
display: none;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
float: left;
width: 100%;
}
Pour une page S’inscrire :
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
display: none;
}
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
float: right;
width: 100%;
}
Et voilà ???? (le cadre peut être enlevé à votre convenance)
Dernier point, l’accès pour la connexion
Oxygen permet avec les conditions l’accès aux pages selon que l’utilisateur est connecté ou pas (User logged in) mais je voulais dans mon menu que le client voit Se connecter s’il n’est pas connecté et Déconnexion s’il est connecté. Dans ce cas il faudra installer User menu (gratuit) qui va résoudre ce point. Après installation, rendez-vous dans votre menu et choisissez les pages à autoriser (dans mon cas Connexion/Déconnexion ainsi que Mon Compte) et changer les conditions. WooCommerce, dans la section menu, propose les Terminaisons WooCommerce (à activer éventuellement dans les options de l’écran) où vous trouverez la Déconnexion et où vous pourrez choisir la redirection après déconnexion.
Lien de User Menus https://fr.wordpress.org/plugins/user-menus/
Voilà, pour ce tutoriel, j’espère qu’il vous a été utile et qu’il est clair. Bon travail et, comme on dit, "Y a plus qu’à ... "
Depuis la sortie de WordPress 5, Gutenberg ne cesse d’évoluer et une quantité de développeurs ont créé des plugins proposant des blocs Gutenberg avancés. Dans certains cas, leur utilisation peut faciliter l’implémentation de blocs particuliers (vidéo, timeline, testimonials, carousels, cartes Google, etc.). Voici une liste de plugins (non exhaustive) pouvant être installés en complément d’Oxygen.
Liste des plugins
a) Gutenberg Blocks and Page Builder – Qubely
https://fr.wordpress.org/plugins/qubely/
Note : 27 blocs dont une timeline
b) Stackable – Gutenberg Blocks
https://fr.wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/
Note : 23 blocs + 50 layouts créés avec ces blocs
c) Kadence Blocks – Gutenberg Page Builder Toolkit
https://fr.wordpress.org/plugins/kadence-blocks/
Note : 12 blocs incluant une forme de contact
d) Gutentor : WordPress Page Builder with Unlimited Possibilities to Design
https://fr.wordpress.org/plugins/gutentor/
Note : propose 3 catégories. Éléments, modules et widgets (Heures d’ouverture, menu de restaurant, vidéo popup, …)
e) GutenBooster Addons
https://fr.wordpress.org/plugins/gutenbooster-addons/
Note : un addon à Kioken (en dessous)
f) Page Builder Gutenberg Blocks – Kioken Blocks
https://fr.wordpress.org/plugins/kioken-blocks/
Note : 15 blocs avancés avec animations
g) Page Builder Gutenberg Blocks – CoBlocks
https://fr.wordpress.org/plugins/coblocks/
Note : 31 blocs avec notamment un carousel d’article, carousel de gallerie, bloc d’évènements, etc.
h) Getwid – Gutenberg Blocks
https://fr.wordpress.org/plugins/getwid/
Note : 34 Gutenberg blocs - Les développeurs proposent un thème de base (non reconnu par Oxygen mais ça pourrait être une solution pour des sites simples OnePage)
Injection dans une page ou un article avec Oxygen
Lors de la création d’une page ou d’un article en utilisant Oxygen il est possible de soit faire sa page avec Gutenberg (sans utilisation d’Oxygen) ou de créer avec Oxygen, qui va “prendre la main” sur le contenu Gutenberg qui, du coup, ne sera plus visible.
Il est cependant possible dans Oxygen de récupérer le contenu créé avec Gutenberg. La seule limitation étant que ce contenu ne peut être récupéré qu’en un seul bloc. Il n’est donc pas possible d’incruster deux blocs différents dans deux positions différentes sur votre page.
Dans Oxygen, vous aller insérer un élément texte et insérer dynamiquement le contenu de la page/article.
Dans la page/article Gutenberg...
Sur le site...
Avantages et inconvénients
Sans rentrer dans une polémique, cette technique permet de faire très simplement et rapidement, par exemple, un carrousel de témoignages ou tout module un peu plus évolué. Certes, il est toujours possible de coder via ACF, ou d’autres techniques, ce genre de blocs mais ça prendra plus de temps et, étant donné que Gutenberg est disponible dans WordPress, vous ne surchargez pas beaucoup le site (suivant le plugin utilisé).
Pour vos clients cela permet aussi une édition plus simple qu’en leur donnant accès à Oxygen.
Ces plugins rajoutent quand même du CSS et/ou d’autres .js pour fonctionner. Il est donc conseillé de ne pas en installer trop, car ça pourrait ralentir votre site avec l’ajout de nombreuses dépendances.
Notes supplémentaires
- Lors du rajout du bloc vidéo Gutenberg récupéré dans Oxygen, la vidéo ne s'affiche pas ! Il suffira de rajouter dans un code bloc d’Oxygen ce CSS :
.ct-span.oxy-stock-content-styles {display: unset;}
- Si vous utilisez Asset CleanUp, vous pouvez désactiver le CSS de Gutenberg. Attention de le laisser activé si vous l’utilisez ????
CRÉER UN ENSEMBLE AVEC ICOMOON
Visitez IcoMoon.io et cliquez sur IcoMoon App en haut à droite. Vous êtes redirigé vers l'application Web.
Choisissez les icônes à ajouter à votre jeu d'icônes. Vous pouvez télécharger vos propres icônes en cliquant sur Importer des icônes dans la barre supérieure.
Une fois que vous avez terminé, cliquez sur Générer SVG et plus, cliquez sur Préférences en haut et sélectionnez "Ajouter à symbol-defs.svg". Fermez la fenêtre contextuelle, puis cliquez sur Télécharger. La vidéo ici montre comment procéder.
ATTENTION que depuis une mise à jour d'IcoMoon, il faut aller dans les préférences de l'application et cocher "add title" comme le montre cette vidéo https://www.loom.com/share/ae1c88e4cec34c8fa5cec6a4cc47de06?fbclid=IwAR3Gsj9rSMzszmZcVdvdUlMYO28ZE_eMmtsPTbTqrZXwERU8BZGbgW5pDdc
Lien pour IcoMoon : https://icomoon.io/
Dans le même esprit que Typed.js, dans un premier temps installez d'abord le plugin javascript. Créez un bloc de texte riche (rich text) Oxygen avec une structure comme celle-ci
<p>Oxygen est <span class="headingfx1">plus rapide, plus léger, très personnalisable, très cool ...</span></p>
Chaque virgule déterminera un bloc de texte qui sera mis en rotation avec les autres. De le même manière que Typed.js, rajoutez un code bloc (et respectez la classe assignée dans le riche texte) avec ceci
(function($) {
$(".headingfx1").Morphext({
animation: "bounceIn",
separator: ",",
speed: 2000
});
}(jQuery));
Lien du plugin : https://morphext.fyianlai.com/
Après avoir installé la librairie javascript, insérer une classe à un élément texte d'Oxygen et un code bloc avec ceci
(function($) {
var typed = new Typed(".typefx1", {
strings: ["Mon texte Typed.js "],
typeSpeed: 50,
startDelay: 1000,
loop: true,
});
}(jQuery));
Configurez les options du plugin à votre goût, texte (à l'intérieur des guillemets de "strings", vitesse de l'animation, délai, boucle, ...
Lien du plugin : https://github.com/mattboldt/typed.js/
Le plugin s'utilise très facilement avec OxyPowerPack ou OxyAttributes. Après avoir installer le plugin, il faudra l'initialiser avec ce code :
window.onload = function() {
lax.setup() // init
const updateLax = () => {
lax.update(window.scrollY)
window.requestAnimationFrame(updateLax)
}
window.requestAnimationFrame(updateLax)
}
Ensuite il suffira de rajouter une classe (lax par exemple) et de rajouter les attributs comme ceci :
<p class="lax" data-lax-preset="spin fadeInOut">Look at me goooooo!</p>
NOTE : Oxygen ayant rajouté les attributs dans le constructeur de base OxyAttributes n'est plus nécessaire.
Vous retrouverez tous les presets sur la page du plugin.
Lien du plugin : https://github.com/alexfoxy/lax.js
Swiper vous permet de faire différents sliders avec une quantité d'options intéressantes comme la pagination, les sliders verticaux, la scrollbar, lazy load, effets 3D, ...
Vous pouvez intégrer Swiper avec Oxygen et utiliser Easypost ou le Repeater pour générer vos slides. Il faudra dans un premier temps recréer la structure nécessaire pour Swiper. Vous pouvez également utiliser les démos pour suivre le code. Nous allons suivre cet exemple swiper démo
Commençons par insérer une section avec une première div qui aura la classe principale de .swiper-container. Celle-ci contiendra le Easypost ou Repeater avec la classe .swiper-wrapper (classe qui va contenir les slides). Pour le repeater la classe créée avec le repeater sera la classe swiper-slide, dans le cas d'Easypost il faudra rajouter cette classe après oxypost dans le template php ce qui donnera <div class='oxypost swiper-slide'>
Dans la cas d'une pagination, rajouter une div avec la classe .swiper-pagination en-dessous du Repeater/EasyPost.
ATTENTION : depuis la version 7 de Swiper il faut changer swiper-container par swiper !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../package/swiper-bundle.min.css">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="../package/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
dynamicBullets: true,
},
});
</script>
</body>
</html>
Lien du plugin : https://swiperjs.com/
Lien démo : https://oxygen.bulgaweb.com/swiper/
