Aller au contenu principal

Bibliothèque de codes

Fiches techniques, extraits de code et correctifs publiés depuis 2013 : PrestaShop, WordPress, WooCommerce, PHP, MySQL, nginx et administration serveur, mais aussi HTML et CSS.

69 fiches, 115 extraits de code, 14 technologies

PrestaShop

11 fiches

  1. Ajouter un bouton de rétractation dans l’espace client PrestaShop

    Un module PrestaShop qui affiche un bouton de rétractation dans le détail de commande pendant le délai légal, avec étape de confirmation et contrôle du client.

    2 extraits de code

  2. Écrire un module compatible PrestaShop 1.7 et 8

    Les points à vérifier pour qu’un même module fonctionne sur PrestaShop 1.7 et PrestaShop 8 : déclaration de compatibilité, méthodes supprimées, version de PHP et tests.

    2 extraits de code

  3. Repérer les fichiers modifiés après un piratage de boutique PrestaShop

    Les commandes pour lister les fichiers récemment modifiés d’une boutique PrestaShop, les comparer à l’archive officielle et chercher le code injecté le plus courant.

    2 extraits de code

  4. Ajouter un champ personnalisé à la fiche produit en back-office (PrestaShop 1.7)

    Un module PrestaShop 1.7 qui ajoute un champ à la fiche produit du back-office, l’enregistre dans sa propre table et l’affiche sur la boutique, sans override.

    2 extraits de code

  5. Lancer une tâche planifiée PrestaShop par cron, protégée par jeton

    Un contrôleur de module PrestaShop appelé par cron : protection par jeton, verrou contre les exécutions simultanées et journalisation dans le back-office.

    2 extraits de code

  6. Hook ou override : modifier PrestaShop 1.7 sans toucher au cœur

    Quand utiliser un hook, quand se résoudre à un override dans PrestaShop 1.7, et comment écrire un override qui appelle la méthode d’origine au lieu de la recopier.

    2 extraits de code

  7. Créer un hook personnalisé dans un module PrestaShop 1.7

    Déclarer son propre point d’accroche dans un module PrestaShop 1.7, l’appeler depuis le thème et y brancher du contenu, sans toucher aux fichiers du cœur.

    2 extraits de code

  8. Variables PrestaShop

    Mémo des variables globales disponibles dans les templates PrestaShop : base_dir, base_dir_ssl, content_dir et les autres chemins de la boutique.

    1 extrait de code

  9. Mémo des liens PrestaShop

    Mémo des méthodes de l’objet link dans les templates PrestaShop : lien vers une page CMS, le panier, une catégorie ou un produit, avec les échappements.

    1 extrait de code

  10. PrestaShop : ouvrir une page CMS dans une Fancybox

    Charger une page CMS PrestaShop dans une Fancybox en iframe, avec le paramètre content_only qui retire l’en-tête et le pied de page de la boutique.

    2 extraits de code

  11. PrestaShop 1.5 : accéder au thème mobile

    Basculer entre le thème mobile et le thème classique d’une boutique PrestaShop avec les paramètres d’URL mobile_theme_ok et no_mobile_theme.

    1 extrait de code Archivée

WordPress

4 fiches

  1. Fermer XML-RPC et protéger wp-login.php au niveau de nginx

    Bloquer xmlrpc.php et limiter le rythme des tentatives de connexion sur wp-login.php directement dans nginx, avant que PHP ne soit sollicité.

    2 extraits de code

  2. Remplacer WP-Cron par une vraie tâche cron système

    Désactiver WP-Cron, déclenché par les visiteurs, et confier les tâches planifiées de WordPress à la crontab du serveur avec WP-CLI. Plus fiable et plus rapide.

    2 extraits de code

  3. Créer un bloc Gutenberg sur mesure sans extension

    Un bloc Gutenberg « encadré à retenir » en PHP et JavaScript, sans outil de compilation ni extension de blocs : l’enregistrement, l’édition et le rendu.

    2 extraits de code

  4. Déclarer un type de contenu personnalisé dans une extension, pas dans le thème

    Déclarer un custom post type WordPress dans une petite extension plutôt que dans functions.php, pour que les contenus survivent à un changement de thème. Le code complet.

    1 extrait de code

WooCommerce

2 fiches

  1. Rendre une extension WooCommerce compatible HPOS

    Déclarer la compatibilité HPOS d’une extension WooCommerce et remplacer les accès directs aux commandes (get_post_meta, get_posts) par les fonctions qui marchent avec les deux stockages.

    2 extraits de code

  2. Ajouter des frais ou une remise selon le contenu du panier

    Le hook woocommerce_cart_calculate_fees pour appliquer une remise à partir d’une quantité dans une catégorie, ou des frais sur les petites commandes, sans extension.

    1 extrait de code

PHP

4 fiches

  1. Éviter les commandes en double dans un connecteur : idempotence et file d’attente

    Une file d’attente en base et une clé d’unicité pour qu’un connecteur boutique vers ERP n’envoie jamais deux fois la même commande, même après une erreur ou un double déclenchement.

    2 extraits de code

  2. Passer un vieux code à PHP 8 : les erreurs qui reviennent le plus

    each(), create_function(), accolades sur les chaînes, count() sur null : les ruptures de PHP 8 que l’on retrouve dans presque chaque module ancien, avec leur correction.

    2 extraits de code

  3. Installer l’extension Brotli pour plusieurs versions de PHP

    Compiler php-ext-brotli et l’activer pour chaque version de PHP installée sur un serveur, de git clone à update-alternatives. Les commandes, dans l’ordre.

    3 extraits de code

  4. Appeler une API REST avec cURL : délais, erreurs et journalisation

    Une fonction PHP d’appel d’API REST avec cURL qui fixe des délais, distingue erreur réseau et erreur HTTP, et lève une exception exploitable plutôt que de renvoyer false.

    2 extraits de code

MySQL

2 fiches

  1. Sauvegarder MariaDB sans bloquer le site, avec rotation des archives

    Un script de sauvegarde quotidienne de toutes les bases MariaDB avec mysqldump en transaction unique, compression, rotation sur quatorze jours et test de restauration.

    2 extraits de code

  2. Trouver les tables qui font grossir une base MySQL ou MariaDB

    La requête qui classe les tables d’une base MySQL ou MariaDB par taille, et les coupables habituels sur PrestaShop et WordPress : statistiques, sessions, options chargées à chaque page.

    2 extraits de code

nginx

3 fiches

  1. Cache FastCGI nginx : accélérer un site sans casser le panier

    Mettre en cache les pages PHP au niveau de nginx pour WordPress, tout en excluant les visiteurs connectés, le panier, la commande et les requêtes POST.

    2 extraits de code

  2. Bloquer les robots indésirables par User-Agent avec map

    Repérer dans les journaux les robots qui consomment le plus, puis les écarter avec une directive map nginx et une réponse 444, sans pénaliser les moteurs de recherche.

    2 extraits de code

  3. Rediriger HTTP vers HTTPS et vers www en une seule redirection avec nginx

    Trois blocs server nginx pour envoyer toutes les variantes d’un domaine vers une adresse unique en HTTPS, en une seule redirection 301, avec l’en-tête HSTS.

    2 extraits de code

Linux

2 fiches

  1. Vérifier SPF, DKIM et DMARC d’un domaine avec dig

    Lire en trois commandes dig les enregistrements SPF, DKIM et DMARC d’un domaine, trouver le sélecteur DKIM et repérer les erreurs de configuration les plus courantes.

    2 extraits de code

  2. Vérifier la chaîne de certificats d’un serveur avec openssl s_client

    Contrôler en ligne de commande le certificat servi par un site, sa chaîne jusqu’à l’autorité racine et sa date d’expiration, et tester les connexions sortantes du serveur.

    2 extraits de code

ISPConfig

2 fiches

  1. ISPConfig : messages d’erreur récursifs quand MySQL est indisponible

    Sur ISPConfig 3.1.2 à 3.1.5, une base de données arrêtée génère des milliers de lignes mysqli_ping dans les journaux et sature le disque. Cause et correctif.

    2 extraits de code

  2. ISPConfig : rediriger un site actif vers un autre

    Mettre en place une redirection de site depuis l’onglet Redirection d’ISPConfig, sans éditer le vhost : choix du flag et chemin de destination.

Drupal

2 fiches

  1. Migrer un site Drupal 7 vers Backdrop CMS, pas à pas

    Les étapes et les commandes pour faire passer un site Drupal 7 en fin de vie sur Backdrop CMS : inventaire des modules, copie de la base, fichiers, mise à jour et vérifications.

    2 extraits de code

  2. Comment supprimer manuellement un module Drupal 8

    Quand le gestionnaire d’extensions et drush refusent de désinstaller un module Drupal 8, il reste la voie manuelle, sur la configuration du core.

    2 extraits de code

Smarty

3 fiches

  1. Couper un tableau avec un foreach Smarty

    Fermer et rouvrir un conteneur tous les quatre éléments d’une boucle Smarty, avec smarty.foreach.iteration et l’opérateur div by.

    1 extrait de code

  2. Balises Smarty

    Les balises Smarty du quotidien : debug_print_var et var_dump pour inspecter une variable, counter et foreach pour restreindre une boucle à N éléments.

    1 extrait de code

  3. Modificateurs de variable Smarty

    Les modificateurs Smarty du quotidien pour nettoyer et tronquer une chaîne dans un template : strip, strip_tags, truncate et wordwrap.

    1 extrait de code

HTML

8 fiches

  1. Ne charger un script tiers qu’après le consentement du visiteur

    Neutraliser un script de mesure d’audience ou de publicité tant que le visiteur n’a pas donné son accord, puis l’activer au clic, sans bibliothèque externe.

    2 extraits de code

  2. Structure d’un e-mail HTML

    Le gabarit d’un courriel en HTML qui s’affiche correctement dans les messageries : doctype, tableaux imbriqués, styles en ligne et largeurs fixes.

    1 extrait de code

  3. Mobile : lien vers les fonctions « Appel » et « SMS »

    Déclencher un appel téléphonique ou l’ouverture d’un SMS depuis une page web avec les schémas d’URL tel: et sms:. Deux lignes de HTML, reconnues partout.

    1 extrait de code

  4. Structure d’une page HTML5

    Le squelette d’une page HTML5 avec ses balises sémantiques : header, nav, section, article, aside et footer, correctement imbriquées.

    2 extraits de code

  5. Les caractères spéciaux HTML

    Table de correspondance des caractères spéciaux HTML entre le jeu ISO-8859-1 et l’UTF-8 : accents, guillemets, esperluette, symboles monétaires.

  6. Les formulaires HTML avec Bootstrap

    La structure d’un formulaire Bootstrap : form-group, form-control, étiquettes associées et textes d’aide reliés par aria-describedby.

    2 extraits de code

  7. jQuery Mobile : multi-page avec formulaire

    Répartir un formulaire sur plusieurs écrans avec jQuery Mobile, dans un seul document HTML : structure des pages, navigation entre elles et envoi.

    1 extrait de code Archivée

  8. Ajouter une classe spéciale pour Internet Explorer

    Cibler une version précise d’Internet Explorer avec les commentaires conditionnels HTML, pour appliquer une classe au body et corriger l’affichage.

    2 extraits de code Archivée

CSS

9 fiches

  1. Focus visible et contrastes : corriger l’accessibilité d’un thème

    Rétablir un focus visible au clavier, ajouter un lien d’évitement et vérifier les contrastes d’un thème : les corrections CSS les plus rentables avant l’European Accessibility Act.

    2 extraits de code

  2. Bug iPhone : menu en position fixed et défilement

    Un menu en position fixed qui saute pendant le défilement sous iOS se stabilise avec translate3d et -webkit-overflow-scrolling: touch.

    1 extrait de code

  3. Feuille de style d’impression de base

    Une feuille print de base : masquer les adresses affichées après les liens, neutraliser les fonds, et éviter les coupures de page au mauvais endroit.

    1 extrait de code

  4. Bug de Chrome sur les éléments en position fixed

    Un élément en position fixed qui scintille ou disparaît sous Chrome se stabilise avec backface-visibility et translateZ, qui basculent le rendu sur le GPU.

    1 extrait de code

  5. Survol avec délai en CSS

    Faire apparaître un contenu au survol après un court délai, grâce à une animation CSS dont l’opacité reste nulle sur les premiers 70 %, pour éviter les ouvertures intempestives.

    2 extraits de code

  6. Transitions CSS

    Animer un changement d’état en CSS3 avec transition : quelle propriété animer, sur quelle durée et avec quelle fonction de temporisation.

    2 extraits de code

  7. Créer une ancre avec un en-tête fixe

    Une ancre qui passe sous un en-tête fixe cache son titre. La structure HTML et le CSS qui décalent la cible pour que le titre reste visible.

    2 extraits de code

  8. Créer des blocs de hauteur identique

    Égaliser la hauteur de plusieurs colonnes sans JavaScript : la méthode historique avec display table-cell, puis la version Flexbox.

    2 extraits de code

  9. Dessiner des formes en CSS

    Triangles, flèches et autres formes obtenues uniquement avec les bordures CSS, sans image ni SVG. Le principe d’abord, le code ensuite.

    2 extraits de code

Sass

4 fiches

  1. Transitions en cascade avec une boucle Sass

    Appliquer un délai croissant à une série d’éléments animés grâce à une boucle Sass, pour obtenir une apparition en cascade plutôt que simultanée.

    2 extraits de code

  2. Gabarit de page en Flexbox

    Structure de page en Flexbox : en-tête, navigation, colonnes de contenu et pied de page, avec le HTML et le CSS correspondants.

    2 extraits de code

  3. Trois mixins Sass : rem, points de rupture et triangle

    Une fonction et un mixin Sass qui convertissent une taille en pixels vers des rem, avec un repli en pixels pour les navigateurs qui l’ignorent.

    3 extraits de code

  4. Menu circulaire en Sass

    Un menu dont les entrées se déploient en cercle autour d’un bouton, construit en Sass avec des rotations CSS et des icônes.

    2 extraits de code

jQuery

13 fiches

  1. Défilement animé au clic sur un lien d’ancre

    Intercepter le clic sur les liens d’ancre d’une navigation et faire défiler la page en douceur jusqu’à la cible, plutôt que d’y sauter.

    2 extraits de code

  2. Ajouter une classe au défilement

    Appliquer une classe à partir d’un certain seuil de défilement, pour réduire un en-tête ou faire apparaître un bouton de retour en haut de page.

    2 extraits de code

  3. Défilement animé vers un élément

    Faire défiler la page jusqu’à un élément en douceur avec animate et scrollTop, en compensant la hauteur d’un en-tête fixe.

    1 extrait de code

  4. Changer d’image de fond au défilement (parallaxe)

    Alterner des couches de contenu et des fonds fixes pour changer d’image au fil du défilement. Le HTML, le CSS et le JavaScript de l’effet.

    3 extraits de code

  5. Cookie et fenêtre modale

    Ouvrir une fenêtre modale à la première visite seulement, en mémorisant la fermeture dans un cookie. Le HTML de la modale et le script.

    2 extraits de code

  6. Détecter un smartphone ou une tablette

    Reconnaître un mobile ou une tablette par le user agent puis par matchMedia, et ce que chacune des deux méthodes ne sait pas faire.

    1 extrait de code

  7. Couper une liste HTML en deux avec jQuery

    Couper une liste ul en deux à partir d’un élément donné, en déplaçant les éléments suivants dans une nouvelle liste insérée à la suite.

    1 extrait de code

  8. Charger du contenu au défilement

    Charger la suite d’une liste quand le visiteur approche du bas de page, avec un verrou qui empêche les appels simultanés. Le défilement infini.

    1 extrait de code

  9. Compteur animé en jQuery

    Faire défiler un nombre de zéro jusqu’à sa valeur finale avec jQuery animate() et une fonction d’easing : le compteur animé des pages de chiffres clés.

    2 extraits de code

  10. Récupérer des valeurs en jQuery

    Lire la valeur d’une liste déroulante, d’une case à cocher ou d’un champ texte en jQuery : les sélecteurs et les méthodes qui vont avec.

    1 extrait de code

  11. Parcourir le DOM en jQuery

    Atteindre les frères, le parent et les enfants d’un élément en jQuery avec siblings(), parent() et children(), en filtrant par classe.

    1 extrait de code

  12. Effet de parallaxe sur le fond de page

    Déplacer l’image de fond moins vite que le contenu pendant le défilement, pour obtenir un effet de parallaxe en quelques lignes de JavaScript.

    1 extrait de code Archivée

  13. Effet de pluie en JavaScript

    Une animation de pluie dessinée sur un élément canvas en JavaScript, avec la gestion du redimensionnement de la fenêtre.

    1 extrait de code Archivée