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
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/
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.
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
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).
