Tuto – s2prod ⋮

Problème d’emojis sur WordPress ? La Solution Ici !

s2prod — Wed, 12 Jul 2023 15:54:41 +0000

Si vous êtes ici, c’est probablement que les emojis 😭n’apparaissent pas correctement sur votre WordPress. Certains s’affichent peut-être, d’autres laissent place à des ??? ou bien encore des espaces vides.

Pas de panique, j’ai la solution et ce problème d’affichage des émoticônes sur WordPress sera de l’histoire ancienne.

Sommaire

show

Avant d’aller plus loin : Faites une sauvegarde !
Modification des jeux de caractères dans wp-config.php
Changement de librairie MySQL depuis votre panneau d’administration
Mettre à jour l’interclassement des tables
Les emojis ne s’affichent toujours pas

Avant d’aller plus loin : Faites une sauvegarde !

Personnellement, je n’ai rencontré aucun problème lors de cette manipulation. Cependant comme nous allons intervenir sur la base de données, je ne tiens pas à être responsable d’une perte données. Donc, je ne serai trop vous recommander de faire une backup de votre WordPress.

Il est possible que votre hébergeur fasse déjà une sauvegarde quotidienne, c’est le cas si vous êtes chez o2switch, planethoster, infomaniak et hostinger selon le plan que vous avez choisi.

Si vous n’êtes pas certain d’avoir une sauvegarde via votre hébergeur, utilisez le plugin Udraftplus WordPress Backup. C’est un freemium, mais les options gratuites feront le job.

Modification des jeux de caractères dans wp-config.php

Ouvrez votre fichier wp-config.php et vérifiez si la constante concernant les jeux de caractères est définie comme celle ci-dessous :

/* utf8mb4 est un jeu de caractères qui permet l'encodage de pratiquement tous les caractères Unicode, y compris les émojis. */
define( 'DB_CHARSET', 'utf8mb4' );

Si à partir de maintenant les emojis apparaissent, c’est formidable 🎉🥳🍾. Ne touchez plus à rien ! Dans le cas contraire, on continue !

Changement de librairie MySQL depuis votre panneau d’administration

Si vous êtes sur un environnement cPanel, vous devriez pouvoir choisir votre version de Php en cliquant sur l’icône Select PHP Version.

① Dans mon cas je suis en 7.4(native). Conservez votre version de PHP en cliquant dans le menu déroulant et cliquez sur la version native. Une fois le choix effectué, vous devriez voir les librairies (bibliothèques) activées et non activées.

② Cliquez sur mysqli pour la désactiver. Puis cliquez sur nd_mysqli pour l’activer.

Les emojis apparaissent !? 🎉🥳🍾. Ne touchez plus à rien ! Dans le cas contraire, on continue !

Mettre à jour l’interclassement des tables

Dans mon cas, c’était cette dernière partie qui posait problème. Mon installation initiale de WordPress datait de 2012 et toutes mes tables étaient en latin1_swedish_ci. Il faut les mettre en utf8mb4_unicode_520_ci pour que celles-ci puissent afficher les emojis.

Pour ce faire, allez sur PhpMyAdmin.
Cliquez sur la base de données concernée.
Cliquez sur l’onglet Opérations.
Tout en bas, dans l’encadré Interclassement, cliquez sur champ déroulant puis choisissez utf8mb4_unicode_520_ci.

Retournez sur votre site, ajoutez des emojis et testez. Vous devriez voir des emojis à l’écran.

Les emojis ne s’affichent toujours pas

Si vous utilisez un plugin de mise en cache à l’instar de WP rocket, WP-Optimize ou tout autre plugin de mise en cache, videz le cache ! Si vous utilisez un plugin de cache objet comme Redis, désactivez-le puis vérifiez à nouveau.

Enfin pensez également à vider le cache de votre navigateur.

Comment retirer le bouton « ajouter au panier » sur la page d’accueil de mon WooCommerce ?

s2prod — Tue, 07 Mar 2023 19:07:58 +0000

La question peut paraître farfelue, mais elle m’a été posée et les raisons pour lesquelles elle a été évoquée étaient loin d’être stupides.

Sommaire

show

Pourquoi supprimer le bouton ajouter au panier sur votre page d’accueil ?
Diminution du taux de rebond et augmentation du taux de rétention
Suppression du bouton ajouter au panier et le prix uniquement sur la page d’accueil avec CSS

Et si on veut retirer le bouton ajouter au panier sur d’autres pages ?

Suppression du bouton ajouter au panier et le prix uniquement sur la page d’accueil avec JavaScript

1ère méthode
2ème méthode

Comment ajouter un fichier Javascript à mon thème WordPress ?
Suppression du bouton ajouter au panier uniquement sur la page d’accueil avec Php

Pourquoi supprimer le bouton ajouter au panier sur votre page d’accueil ?

Le boutique d’un client qui tourne sous WooCommerce a vu son taux de rebond augmenter et le taux rétention diminuer. Outre le fait que cette multitude de boutons ajouter au panier était très moche, l’action d’avoir supprimée le bouton ajouter au panier ET le prix de l’article sur la home à complétement changer la donne.

Diminution du taux de rebond et augmentation du taux de rétention

En supprimant le bouton ajouter au panier et le prix sur la page d’accueil, le client doit impérativement cliquer sur l’article pour en connaître le prix et l’ajouter dans son panier.

Vous allez me dire : « Rien de révolutionnaire là-dedans« , et vous avez raison. Amazon applique déjà cette stratégie. Cependant, il n’y a pas d’option par défaut qui permettent ce hack sur un site WooCommerce et cela est fort dommage.

Suppression du bouton ajouter au panier et le prix uniquement sur la page d’accueil avec CSS

Si on peut reconnaître un point positif à WordPress c’est son système de classes CSS qui est bien pensé. Vous n’avez peut-être jamais fait attention mais dans votre balise , lorsque vous êtes sur votre page d’accueil il y une classe home. Cette classe est uniquement visible sur la page d’accueil. Ainsi, si vous utilisez un sélection commençant par .home les règles ne s’appliqueront que sur la page d’accueil.

Dans notre cas, nous voulons rendre invisible les boutons ajouter au panier et le prix. Il faudra donc utiliser ceci:

/* Suppression du bouton ajouter */
.home .add_to_cart_button{
display:none!important;
}

/* Suppression du prix */
.home .price{
display:none!important;
}

Et si on veut retirer le bouton ajouter au panier sur d’autres pages ?

Même principe. On regarde la classe du body et on créer les sélecteurs CSS qui vont bien.

/* Suppression du bouton ajouter dans les pages archives*/
.archive.add_to_cart_button{
display:none!important;
}

/* Suppression du prix */
.archive .price{
display:none!important;
}

Visuellement parlant le CSS fait le job et le prix comme le bouton ont disparu. Cependant, ils sont toujours bien visibles dans le code. Si vous souhaitez totalement supprimer les nœuds html, il faudra passer par JavaScript.

Suppression du bouton ajouter au panier et le prix uniquement sur la page d’accueil avec JavaScript

Je vais vous proposer deux méthodes. La première est suffisante si vous comptez uniquement supprimer une liste de nœuds, dans notre exemple le bouton ajouter au panier. Si vous souhaitez supprimer le bouton et le prix, il faudra utiliser la seconde méthode.

1ère méthode

On connaît déjà le sélecteur CSS à cibler pour notre bouton ainsi que la classe que doit contenir notre body.

// On sélectionne tous les boutons ajouter au panier
 const addToCart = document.querySelectorAll('.add_to_cart_button'); 

// On teste si la classe home est bien présente dans le body puis on applique la méthode remove() sur tous les boutons.
 if (document.body.classList.contains("home")){
     addToCart.forEach(buttons => buttons.remove())
 }

2ème méthode

Dans celle-ci on veut supprimer le bouton ajouter au panier ainsi que le prix. Le mieux est donc de se créer une petite fonction.

// On déclare nos nodeList avec des constantes
const addToCart = document.querySelectorAll('.add_to_cart_button'); 
const price = document.querySelectorAll('.price');

// On créer la fonction hideElements et on met en argument nodeLists avec le spread operator ... qui permettra d'accueillir autant de nodeList que nécessaire. Dans notre cas seulement 2

function hideElements(...nodeLists) {

// On teste si la classe home est bien présente dans le body 
 if (document.body.classList.contains("home")){

// La méthode flat() permet de combiner les nodeLists en une seule
  const combineList= nodeLists.flat();

  combineList.forEach(item => item => buttons.remove())
}
}

// On exécute notre fonction en lui passant en argument nos deux nodeList
hideElements(addToCart, price)

Comment ajouter un fichier Javascript à mon thème WordPress ?

On est content, on a notre code JavaScript, mais on le place où ?

Cela dépend des thèmes, certains proposent cette fonctionnalité en natif, d’autres non. Vous pouvez bien évidemment passer par un plugin à l’instar Header, Footer and Post Injections qui est gratuit et qui fait bien le job.

Personnellement, j’essaie toujours autant que possible de me passer de plugin. Pour ajouter un fichier Javascript à votre thème vous devez ajouter dans votre fichier functions.php

// Dans l'exemple ci-dessous j'ajoute le fichier myscript.js dans le répertoire "js" du thème. Le script s'ajoutera avant la balise . Si vous souhaitez l'activer dans le head, remplacer false par true

function my_script_js() {
    wp_enqueue_script( 'my-script-js', get_template_directory_uri() . '/js/myscript.js', array(), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'my_script_js' );

Et le php alors ??

Je sais ce qu’on vont me dire les puristes : »Proposer du JavaScript alors qu’on peut faire la même chose à travers une fonction Php … ». Ce n’est pas faux. Mais personnellement je préfère le JavaScript.

Pour le Php il faut taper se taper la lecture de la documentation WooCommerce pour savoir sur quel hook est « accroché » le bouton. Comme je suis un gars sympa 😁 je vous mets le code en Php à ajouter à votre fichier functions.php

Suppression du bouton ajouter au panier uniquement sur la page d’accueil avec Php

// On vérifie avec la fonction is_home() si on est bien sur la home, si c'est le cas on supprime le bouton ajouter au panier

function remove_add_to_cart_buttons() {
  if (is_home()) {
    remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
  }
}

add_action('template_redirect', 'remove_add_to_cart_buttons');

Vous voilà armé pour supprimer le bouton ajouter au panier. A vous de choisir votre arme préférée 🤓

Comment corriger l’erreur ERR_TOO_MANY_REDIRECTS sur WordPress ?

s2prod — Tue, 06 Dec 2022 14:30:00 +0000

Quelque soit la manipulation que vous avez effectuée, votre site WordPress ne fonctionne plus.
Pour les impatients, voici la solution.

Cloudflare + Cpanel + Worpdress : une cohabitation parfois difficile

La première fois que j’ai obtenu cette erreur c’est quand j’ai utilisé Cloudflare sur mon blog WordPress afin de masquer mon IP réelle et de bénéficier des services de minification et de protection des attaques DDos.

Voulant faire l’économie d’installer un plugin WordPress et n’ayant pas laisser Cloudflare préconfigurer la zone DNS, j’avais uniquement créé deux champs : Un CNAME et un A.

Exemple de configuration basique pour Cloudflare

La configuration fonctionne très bien mais dès que je l’active je me retrouver avec l’erreur ERR_TOO_MANY_REDIRECTS.

Réparer l’erreur ERR_TOO_MANY_REDIRECTS

Il y a tout un tas d’astuces pour palier à ce problème mais dans mon cas de figure, c’est à dire Cloudflare + Cpanel + WordPress, la seule qui fonctionne à 100 % est celle proposée ci-dessous.

Dans votre fichier wp-config.php située à la racine de votre site ajoutez les lignes suivantes :

define('WP_HOME','https://www.votre-site.tld/');/*Remplacer l'URL par celle de votre site*/
define('WP_SITEURL','https://www.votre-site.tld/');/*Remplacer l'URL par celle de votre site*/
$_SERVER['HTTPS'] = 'on';

Comment rediriger http vers https ?

s2prod — Tue, 29 Nov 2022 14:25:01 +0000

J’ai choisi de catégoriser cette règle réécriture apache dans WordPress, mais elle parfaitement valable sur un site statique ou sur un autre CMS.

Explications rapides

Ligne 1: copier/coller RewriteEngine On si votre .htaccess est vierge. Sur WordPress il est déjà activé par défaut.
La ligne 2 est une condition qui vérifie le trafic n’est pas du https alors, il exécute la règle qui suit.
Ligne 3 est une règle qui s’applique à tous les fichiers, quelque soit leur extension et les exécutent avec le protocole https.

Le code ci-dessous est à coller dans un fichier .htaccess à la racine du site.

#DEBUT HTTP VERS HTTPS
RewriteEngine On 
RewriteCond %{HTTPS}  !=on 
RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L] 
#FIN HTTP VERS HTTPS

Autre alternative qui fonctionne tout aussi bien

#DEBUT HTTP VERS HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
#FIN HTTP VERS HTTPS

Rediriger le trafic http vers https grâce à la fonction wp_redirect

//Fonction à ajouter dans le fichier functions.php de votre thème
if ( !is_ssl() ) {
    wp_redirect('https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'], 301 );
    exit();
}

Attention, si vous n’utilisez pas de thème en enfant, vos modifications du fichier functions.php seront supprimées.

L’idéal serait la création d’un plugin regroupant toutes les fonctions dont vous avez besoin :

Article mis à jour le : 19/01/2023