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.
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)
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...
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.
.ct-span.oxy-stock-content-styles {display: unset;}
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.
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.
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.
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).
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.
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)
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à, c’est mon premier tutoriel pour "J’oxygène mon WordPress" et j’espère qu’il vous a été utile et qu’il est clair. Bon travail et, comme on dit, "Y a plus qu’à ... "
Bruno Pirard (Freelancer passionné)
https://oxygen.bulgaweb.com/
Dans un article précédent nous avons partagé la découverte d'un plugin permettant de nettoyer la base de données d'un site de tous les shortcodes Divi. Une amie ayant un site bâti avec Visual Composer qu'elle envisage de me faire refaire avec Oxygen, je me suis dit qu'il me fallait un plugin équivalent à celui pour Divi.
Mais cette fois, pas besoin d'écumer le net. Bien que mon camarade Philippe trouve que le plugin bye-bye Divi est codé avec les pieds, il fait le boulot dont il est chargé et ma foi, ça me suffit bien. Une petite adaptation du code et voilà le plugin : bye-bye Visual Composer !
Vous l'installez comme un plugin classique : Extensions > Ajouter puis clic sur le bouton Téléversez une extension. Allez chercher le fichier zip sur votre disque dur et validez l'installation. Une fois installé, activez-le.
Après activation il apparaît la commande Bye Bye Visual Composer dans votre menu Réglages. Lancez-la :
Traduction :
Cliquez simplement sur le bouton ci-dessous et tous les shortcodess Visual Composer disparaîtront.
REMARQUE: Il s'agit d'une fonction à usage unique qui supprimera littéralement les données de votre base de données. Il n'y a pas de bouton Annuler. Assurez-vous de sauvegarder votre base de données AVANT de continuer. Cela n'affectera que le contenu publié : les brouillons et les révisions ne seront pas affectés. Si vous souhaitez revenir en arrière, vous pourrez donc toujours utiliser le système de révision pour le faire, mais il n’existe pas de processus automatisé pour le faire.
Notez également que ce plugin supprimera simplement les shortcodes et ne traitera pas leur contenu. Les modules de texte fonctionneront bien, mais des éléments tels que les modules d'image, etc. seront entièrement supprimés.
Donc vous sauvegardez votre base de données, par exemple à l'aide du très bon plugin gratuit Updraft Plus. Puis vous cliquez sur le bouton Bye Bye Visual Composer!
Une dernière alerte (avez-vous bien sauvegardé votre base de données ?) :
Vous avez tout bien sauvé donc vous cliquez sereinement sur "OK"... Et voilà le travail...
Enfin : n'oubliez pas de désactiver et supprimer l'extension après usage, elle ne vous sert plus à rien et n'a donc aucune raison de rester en place.
Je ne sais pas pour vous mais moi à chaque fois que je dois choisir un plugin pour un besoin bien précis, je passe des heures à écumer le net pour trouver des avis, des recommandations etc.
Il n'est pas forcément facile d'ailleurs de trouver des avis récents et nombre de blogs spécialisés ne mentionnent pas la date d'écriture / mise à jour de leurs avis ou comparatifs.
Bien que je travaille (m'amuse ?) avec WordPress depuis des années, je n'ai toujours pas compris comment WordPress choisit l'ordre dans lequel vous sont présentées les extensions quand vous tapez un mot clé dans le champ dédié pour ajouter une extension. À titre d'exemple, regardez ce que donne la recherche "cookie" :
Un simple coup d’œil nous montre que le classement ne dépend ni du nombre d'étoiles ni du nombre d'installations actives... Rien à voir non plus avec la date de dernière mise à jour...
Diable. Comment choisir ?
Bon, déjà on va éviter les extensions non mises à jour depuis trop longtemps ou dont la compatibilité avec les dernières versions de WP n'a pas été testée. Et ensuite, si on regardait les chiffres de plus près ? (oui je suis ingénieur, désolée, on ne se refait pas ;-))
En cliquant sur "plus de détails" en dessous du bouton "installer", un popup s'ouvre :
Là, un clic sur "Page WordPress.org de l'extension" nous amène sur la page du plugin dans le repository WordPress :
Et c'est maintenant que j'appelle les maths à mon secours pour essayer de réduire le champ des plugins à regarder de près. Je m'intéresse donc à la note moyenne, à la réactivité du support et au taux de rétention de l'extension, à savoir le nombre d'installations encore actives par rapport au nombre de fois où elle a été téléchargée (ce dernier nombre s'obtenant en suivant le lien "Vue Avancée" au-dessus des notes).
Et je me fais un petit comparatif des principales extensions proposées :
Aucun critère n'est déterminant : ainsi une extension avec une note supérieure à celle de toutes les autres pourra présenter un moins bon taux de rétention, ce qui ferait penser que proportionnellement plus d'utilisateurs la désinstallent après l'avoir testée donc qu'elle est moins bonne.
Je trouve aussi assez intéressant de regarder la proportion d'avis par rapport au nombre d'installations. Dans l'exemple ci-dessus on constate un engagement assez fort des utilisateurs du plugin "Complianz | GDPR Cookie Consent" ce qui, associé à sa note élevée, me donne envie d'essayer ce plugin malgré son nombre d'installations bien plus faible (pour l'instant je n'ai utilisé que les deux "champions", installés des millions de fois...). Son taux de rétention est correct sans plus.
Bien sûr le tableau ne permet pas un choix à coup sûr, je le considère comme une vue d'ensemble permettant de réduire le choix à deux-trois.
Je vais aussi faire un petit tour sur le forum de support pour voir les principaux bugs ou reproches et je regarde la page "commerciale" de l'extension. En principe si l'extension est mise à jour relativement régulièrement il ne doit pas y avoir de mauvaise surprise sur la page "pro".
Et après... comme tout le monde, je cherche l'avis d'autres utilisateurs sur internet !
Allez, un petit cadeau pour vous qui avez lu ma prose jusqu'au bout :
Modèle de tableau à récupérer.
Et vous, comment choisissez-vous les extensions que vous installez ?
Voilà, vous êtes définitivement conquis ! Vous avez testé Oxygen en long, en large et en travers dans le bac à sable et vous êtes enthousiaste... c'est décidé, vous profitez de l'offre lifetime très intéressante et vous allez commencer par refaire votre site, tiens !
Vous aviez pris soin de conserver un thème WordPress standard sur votre site, en plus de Divi, pour pouvoir l'activer en secours en cas de problème avec Divi donc vous l'activez et regardez de quoi votre site a l'air. Eh bien, il est horrible : tous les shortcodes de Divi s'affichent en clair et vous ne retrouvez même plus votre texte dans ce fouillis !
Bref instant de découragement : vous avez publié des dizaines d'articles, votre site a de nombreuses pages, il est inenvisageable de supprimer ces shortcodes en éditant chacun des posts l'un après l'autre. Que faire ?
Une petite recherche Google vous amène sur un blog qui vous suggère une extension qui paraît vraiment bien. En regardant de près, vous vous rendez compte que l'extension enlève bien tous les shortcodes mais c'est "à la volée' à chaque affichage. Si vous désactivez l'extension tous les shortcodes sont bel et bien là, dans votre base de données et donc dans vos posts.
Il existe cependant une version premium de cette extension qui elle apparemment enlève bien les shortcodes de la base de données. C'est ça que vous cherchez.
À tout hasard, vous étendez un peu votre recherche en incluant les sites en anglais et vous tombez enfin sur la solution qui fonctionne, sur le site de Sean Barton.
Vous téléchargez son plugin et vous retrouvez avec ce fichier : bye_bye_divi.php_.zip. Il vous faut le renommer parce qu'en l'état vous ne pourrez pas l'installer. Renommez-le : bye_bye_divi.zip.
Maintenant, vous pouvez l'installer comme un plugin classique : Extensions > Ajouter puis clic sur le bouton Téléversez une extension. Allez chercher le fichier zip sur votre disque dur et validez l'installation. Une fois installé, activez-le.
Après activation il apparaît la commande Bye Bye Divi dans votre menu Réglages. Lancez-la :
Traduction :
Cliquez simplement sur le bouton ci-dessous et tous les shortcodess Divi disparaîtront.
REMARQUE: Il s'agit d'une fonction à usage unique qui supprimera littéralement les données de votre base de données. Il n'y a pas de bouton Annuler. Assurez-vous de sauvegarder votre base de données AVANT de continuer. Cela n'affectera que le contenu publié : les brouillons et les révisions ne seront pas affectés. Si vous souhaitez revenir en arrière, vous pourrez donc toujours utiliser le système de révision pour le faire, mais il n’existe pas de processus automatisé pour le faire.
Notez également que ce plugin supprimera simplement les shortcodes et ne traitera pas leur contenu. Les modules de texte fonctionneront bien, mais des éléments tels que les modules d'image, etc. seront entièrement supprimés. Notez enfin que les éléments de la bibliothèque Divi seront conservés, donc si vous souhaitez enregistrer votre bibliothèque pour une utilisation future, ne vous inquiétez pas !
Donc vous sauvegardez votre base de données, par exemple à l'aide du très bon plugin gratuit Updraft Plus. Puis vous cliquez sur le bouton Bye Bye Divi!
Une dernière alerte (avez-vous bien sauvegardé votre base de données ?) :
Vous avez tout bien sauvé donc vous cliquez sereinement sur "OK"... Et voilà le travail :
Et quand vous allez vous promener dans vos articles et vos pages, plus aucun shortcode ne traîne, c'est fantastique, vous allez pouvoir refaire votre site sans perdre des heures à le nettoyer avant...
Enfin : n'oubliez pas de désactiver et supprimer l'extension après usage, elle ne vous sert plus à rien et n'a donc aucune raison de rester en place.
