====== Plugins, avis ====== ====== Plugins javascript ====== ==== nanoGALLERY ==== Galerie intéressante. [[http://nanogallery.brisbois.fr/]] ==== Featherlight ==== Lightbox ultra légère, qui marche bien sur mobile. Plugin JQuery. Modifier les paramètres par défaut directement dans featherlight.js Icône des chargement (3 kO) : {{:webdev:loading1.gif|}} Hack des styles par défaut (style noir) : /* HACK DES STYLES FEATHERLIGHT */ .featherlight .featherlight-content { background-color:black; border-bottom:10px solid transparent; padding:10px 10px 0; max-width:auto; max-height:auto; min-width:auto; overflow:visible; } .featherlight .featherlight-close-icon { color:white; background-color:black; } .featherlight-next:hover, .featherlight-previous:hover { background-color: transparent; top: 10px; } .featherlight-next {right: 10px;} .featherlight-previous {left: 10px;} .featherlight-next span, .featherlight-previous span { color:black; text-shadow: none; } Peut être nécessaire : .featherlight { box-sizing: content-box; padding: 1%; * { box-sizing: content-box; } } .gallery-item:hover { cursor: pointer; } Bonne syntaxe de la gallerie en js : $(document).ready(function(e) { // Featherlight for Wordpress gallery $('.gallery-item').featherlightGallery( { gallery: { previousIcon: '◀', /* Code that is used as previous icon */ nextIcon: '▶', /* Code that is used as next icon */ galleryFadeIn: 100, /* fadeIn speed when slide is loaded */ galleryFadeOut: 300, /* fadeOut speed before slide is loaded */ }, namespace: 'featherlight', /* Name of the events and css class prefix */ targetAttr: 'data-featherlight-img', /* Attribute of the triggered element that contains the selector to the lightbox content */ variant: null, /* Class that will be added to change look of the lightbox */ resetCss: false, /* Reset all css */ background: null, /* Custom DOM for the background, wrapper and the closebutton */ openTrigger: 'click', /* Event that triggers the lightbox */ closeTrigger: 'click', /* Event that triggers the closing of the lightbox */ filter: null, /* Selector to filter events. Think $(...).on('click', filter, eventHandler) */ root: 'body', /* Where to append featherlights */ openSpeed: 250, /* Duration of opening animation */ closeSpeed: 250, /* Duration of closing animation */ closeOnClick: 'background', /* Close lightbox on click ('background', 'anywhere', or false) */ closeOnEsc: true, /* Close lightbox when pressing esc */ closeIcon: '✕', /* Close icon */ loading: '', /* Content to show while initial content is loading */ persist: false, /* If set, the content will persist and will be shown again when opened again. 'shared' is a special value when binding multiple elements for them to share the same content */ otherClose: null, /* Selector for alternate close buttons (e.g. "a.close") */ beforeOpen: $.noop, /* Called before open. can return false to prevent opening of lightbox. Gets event as parameter, this contains all data */ beforeContent: $.noop, /* Called when content is about to be presented. `this` is the featherlight instance. Gets event as parameter */ beforeClose: $.noop, /* Called before close. can return false to prevent opening of lightbox. `this` is the featherlight instance. Gets event as parameter */ afterOpen: $.noop, /* Called after open. `this` is the featherlight instance. Gets event as parameter */ afterContent: $.noop, /* Called after content is ready and has been set. Gets event as parameter, this contains all data */ afterClose: $.noop, /* Called after close. `this` is the featherlight instance. Gets event as parameter */ onKeyUp: $.noop, /* Called on key up for the frontmost featherlight */ onResize: $.noop, /* Called after new content and when a window is resized */ // type: 'image', /* Specify content type. If unset, it will check for the targetAttrs value. */ contentFilters: ['image'] /* List of content filters to use to determine the content */ // jquery/image/html/ajax/text: undefined /* Specify content type and data */ }); }); [[http://noelboss.github.io/featherlight/]] ==== iScroll ==== Plugin qui récréé le scroll pour corriger les problèmes mobiles. Sur iPad : bloque purement et simplement le scroll, naze. Peut être à approfondir mais il me parait mal foutu... [[http://cubiq.org/iscroll-5]] ==== PDF.js ==== Permet d'afficher des pdf dans les pages en utilisant du javascript. Développé par Mozilla. Intéressant. [[http://mozilla.github.io/pdf.js/|Site officiel]] ==== Slick ==== Carousel, jQuery. Fonctionne mais avec un nombre insupportable de bugs, le meilleur atout de ce plugin est la charte graphique de son site. Malgré ça on peut lui faire faire ce qu'on veut, à condition de passer des heures à le débugger... Open source. [[http://kenwheeler.github.io/slick/|Site officiel]] ==== Cloud 9 carousel ==== Carousel 3d, jQuery. Open source. Marche plutôt bien, pas de fonction responsive de base mais on peut le hacker, voir plus bas. [[https://github.com/specious/cloud9carousel|Dépôt GitHub]] Hack responsive : function change_size() { jQuery('#colonneB').height( jQuery('.colonneB-image').eq(jQuery('#colonneB-carousel').data("carousel").nearestIndex()).height()+20 ); jQuery('#colonneB-carousel').data("carousel").xOrigin = jQuery('#colonneB-carousel')[0].getBoundingClientRect().width / 2;// Valeur par défaut jQuery('#colonneB-carousel').data("carousel").yOrigin = jQuery('#colonneB-carousel')[0].getBoundingClientRect().height * 0.1;// Valeur par défaut jQuery('#colonneB-carousel').data("carousel").xRadius = jQuery('#colonneB-carousel')[0].getBoundingClientRect().width / 2.1;// Valeur personnalisée jQuery('#colonneB-carousel').data("carousel").yRadius = jQuery('#colonneB-carousel')[0].getBoundingClientRect().height / 11 * (-1);// Valeur personnalisée for(var i = 0, MAX = jQuery('#colonneB-carousel').data("carousel").items.length; i < MAX; i++ ) { jQuery('#colonneB-carousel').data("carousel").items[i].fullWidth = jQuery('.colonneB-image').eq(i).width();// On met à jour la variable fullWidth qui sert dans les calculs de position du plugin } jQuery('#colonneB-carousel').data("carousel").go(0);// Actualise la position des items } jQuery(window).resize(function(e) { change_size(); }); Pour lancer une fonction à la fin d'un animation, il faut utiliser la méthode onRendered et vérifier que floatIndex est un nombre entier : onRendered: function( carousel ) { var n = jQuery('#colonneB-carousel').data("carousel").floatIndex(); if( n === +n && n === (n|0) ) { // Fonction à exécuter } else if( jQuery('#colonneB-carousel').data("carousel").destRotation == jQuery('#colonneB-carousel').data("carousel").rotation ) { // On a atteint la dernière image et on est pas sur un floatIndex entier, donc on est tout près jQuery('#colonneB-carousel').data("carousel").rotation = (Math.PI/2) + (Math.PI*2/jQuery('#colonneB-carousel').data("carousel").items.length) * Math.round(jQuery('#colonneB-carousel').data("carousel").floatIndex());// Cette étape est théoriquement inutile, mais ça ne marche pas sans... jQuery('#colonneB-carousel').data("carousel").destRotation = (Math.PI/2) + (Math.PI*2/jQuery('#colonneB-carousel').data("carousel").items.length) * Math.round(jQuery('#colonneB-carousel').data("carousel").floatIndex()); jQuery('#colonneB-carousel').data("carousel").rotation = jQuery('#colonneB-carousel').data("carousel").destRotation; jQuery('#colonneB-carousel').data("carousel").play(); } } ==== Flex ==== Effet de grille qui s'agrandit. JQuery, libre. [[http://www.jsonenglish.com/projects/flex/|Site officiel]] ==== TouchSwipe ==== Plugin pour jQuery qui ajoute des événements swipe pour mobile, avec pas mal d'options. **Mal documenté**, sa syntaxe n'est pas claire. Les swipe directionnels sont en fait des paramètres pour la fonction swipe à faire passer en objet (cf exemple). Mis à part ça il fonctionne bien. [[https://github.com/mattbryson/TouchSwipe-Jquery-Plugin|Page Github]] jQuery(function() { jQuery(window).swipe( { swipeUp: move_down, swipeRight: move_left, swipeDown: move_up, swipeLeft: move_right }); }); ---- ====== Plugins Wordpress ====== ==== Advanced Custom Fields ==== Aucun problème, fonctionne correctement sans conflits. [[https://wordpress.org/plugins/advanced-custom-fields/|Page du plugin]] ==== CMB2 ==== Plugin qui gère les champs personnalisés comme ACF, mais plus poussé et moins graphique. Il a des systèmes de boucles. Intéressant, à tester. [[https://wordpress.org/plugins/cmb2/|Page du plugin]] ==== Google XML Sitemaps ==== Aucun soucis. Fait son boulot. [[https://wpvulndb.com/vulnerabilities/8762|Vulnérabilité sur la 4.0.8]] [[https://wordpress.org/plugins/google-sitemap-generator/]] ==== WP Mobile Detect ==== Non mis à jour, mais on peut remplacer le fichier par une version récente et ça fonctionne. [[https://wordpress.org/plugins/wp-mobile-detect/]] ==== WP Statistics ==== Propose des statistiques sur le Tableau de bord, esthétique, intéressant. [[https://wordpress.org/plugins/wp-statistics/]] ==== WP Power Stats ==== Juste installé, à voir. Erreur à l'activation, disparue après coup... Pas de widget pour le tableau de bord. Ne semble enregistrer des stats que quand on s'y connecte en tant qu'utilisateur... Méfiance. [[https://wordpress.org/plugins/wp-power-stats/]] ==== SEO Stats Widget ==== Non testé, potentiellement intéressant. [[https://wordpress.org/plugins/seo-stats-widget/]] ==== Disable Google Fonts ==== Permet de désactiver l'utilisation de polices de Google dans l'interface admin. À tester, mais franchement indispensable... [[https://wordpress.org/plugins/disable-google-fonts/]] ==== MainWP Dashboard ==== Système de gestion d'installations multiples de Wordpress open source, installé sur l'un des sites (une extension Dashboard et des extensions Child). Intéressant, à tester. [[https://wordpress.org/plugins/mainwp/|Page du plugin]] ---- ===== Formulaires de contact ===== ==== Contact Form by BestWebSoft ==== Formulaire de contact. Limité à un seul formulaire pour cette version. Pub pour leurs autres plugins. La personnalisation du formulaire via le backoffice est limitée à la version pro. Entreprise (BestWebSoft) avec des plugins payants douteux (captcha, htaccess, etc). Pas d'erreur W3C sur leur formulaire. Certains paramètres ne semblent pas s'enregistrer/se réafficher correctement... [[https://wordpress.org/plugins/contact-form-plugin/]] ==== Very Simple Contact Form ==== 1 erreur W3C. Protection anti-spam. Simple à éditer visuellement, sinon pas de contrôler sur les champs. À présent la traduction française ne passe plus, mais on peut le remplacer avec des attributs dans le shortcode : [contact email_to="" label_name="Nom " label_email="Email " label_subject="Sujet " label_captcha="Entrez le nombre " label_message="Message " label_submit="Envoyer" message_error="Veuillez remplir tous les champs." error_name="Veuillez entrer au moins 2 caractères" error_email="Veuillez entrer une adresse email valide" error_subject="Veuillez entrer au moins 2 caractères" error_captcha="Veuillez entrer le bon nombre" error_message="Veuillez entrer au moins 10 caractères" message_success="Merci pour votre message. Vous allez recevoir une réponse dans les plus brefs délais."] Ce plugin aussi charge son CSS sur toutes les pages, qu'il y ait un formulaire ou pas. [[https://wordpress.org/plugins/very-simple-contact-form/|Page du plugin]] ==== Contact form 7 ==== Plugin de formulaire de contact gratuit. Réputé. À tester. > In its default settings, Contact Form 7 loads its JavaScript and CSS stylesheet on every page. [[http://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/|Source (Doc)]] Il semblerait que quand on ajoute le code suivant dans functions.php, le chargement soit désactivé sur toutes les pages mais s'active tout seul quand il le faut… add_filter( 'wpcf7_load_js', '__return_false' ); add_filter( 'wpcf7_load_css', '__return_false' ); À confirmer, sinon il faut créer un modèle de page avec les fonctions de l'étape 2 du lien avant le wp_head(); [[https://wordpress.org/plugins/contact-form-7/|Page du plugin]] ==== Ninja forms ==== Formulaire de contact "freemium". Bonnes fonctionnalités de base, lourd ? À tester. [[https://wordpress.org/plugins/ninja-forms/|Page du plugin]] ---- ===== Éditeur de texte ===== ==== tinyWYM Editor ==== Plugin qui permet d'afficher les balises HTML en live. Très intéressant dans l'idée, mais méfiance : c'est un petit plugin. À tester avec précaution. [[https://wordpress.org/plugins/tinywym-editor/|Page du plugin]] ==== TinyMCE Advanced ==== Ajoute des fonctionnalités à TinyMCE. Résoud le problème des

et des
qui disparaissent et ajoute des options intéressantes pour l'édition, en plus de permettre de visualiser la hiérarchie des blocks html... Excellent ! [[https://wordpress.org/plugins/tinymce-advanced/|Page du plugin]] ---- ===== Traduction ===== [[http://codex.wordpress.org/Multilingual_WordPress#Different_types_of_multilingual_plugins|Les différents types de plugins multilangues]] ==== Sublanguage ==== Plugin de traduction qui passe par des champs personnalisés. Très bon dans le concept, mais le plugin est jeune et très peu d'utilisateurs : méfiance.\\ Fonctionnement étrange, incompatible avec les ACF. N'a pas l'air de sauvegarder les champs...\\ Il est quand même intéressant dans l'idée. À garder sous la main ? [[https://wordpress.org/plugins/sublanguage/|Page du plugin]] [[https://wordpress.org/plugins/sublanguage/faq/|FAQ, check "How to make a custom post-meta value translatable?"]] ==== qTranslate X ==== Plugin de traduction basé sur des champs personnalisés. Possède un plugin qui permet de le synchroniser avec ACF.\\ "If you test qTranslate-X for the first time and you are not sure if you will use it later, then do your testing on a test-copy of your site, since after a translated content is added, **site becomes unusable without qTranslate-X**."\\ **Douteux. En plus il n'a pas l'air compatible avec ACF même avec le plugin de synchro. Les champs ont l'air de ne pas être pris en compte. Autant l'éviter et ajouter des champs ACF manuellement pour les langues en attendant une meilleure solution.** [[https://wordpress.org/plugins/qtranslate-x/|Page du plugin]] [[https://wordpress.org/plugins/acf-qtranslate/|Plugin de synchronisation avec ACF]] [[https://wordpress.org/plugins/qtranslate-slug/|Plugin de traduction de slug]] ==== WPGlobus ==== Héritier de qTranslate X mais amélioré (apparemment). À tester pour voir ce que ça donne. Attention il a aussi le problème de l'installation difficile à enlever, mais il y a un outil de nettoyage pour ça désormais. [[https://wordpress.org/support/view/plugin-reviews/wpglobus|Page du plugin]] ==== Bogo ==== Plugin de traduction par le créateur de contact form 7. À étudier. Approche "one post per langage". [[https://wordpress.org/plugins/bogo/|Page du plugin]] ---- ===== Gestion des médias ====== ==== Kaltura All-in-One Video Plugin for WordPress ==== Gestion des vidéos diverses. À tester. Recommandé par Charlène. [[https://wordpress.org/plugins/all-in-one-video-pack/]] ==== PDF Embedder ==== À tester. Quel langage ? Dépendances ? Sécurité ? [[https://wordpress.org/plugins/pdf-embedder/|Page du plugin]] ==== PDF Viewer ==== Permet d'intégrer des pdf en se basant sur PDF.js, un [[https://mozilla.github.io/pdf.js/|script libre]]. Intéressant mais en V0.1. À tester. **Hacking :** **Utiliser la dernière version :**\\ - Récupérer le dernier pre-built [[http://mozilla.github.io/pdf.js/getting_started/|ici]]. - Copier et dézipper le dossier téléchargé dans le répertoire du plugin. - Renommer le dossier beta en beta-backup, et le nouveau dossier en beta. Si on utilise [pdfviewer beta="true"] la dernière version du plugin sera utilisée. **Modifier les menus :**\\ Le plugin utilise une iframe de la page viewer.html de PDF.js. Pour désactiver une option, il suffit de commenter le menu en rapport sur cette page. {{ :webdev:capture_d_ecran_2015-11-04_a_12.27.20.png?nolink |}} **Personnaliser le CSS et cacher les boutons en trop :**\\ style.css : /*--- Hack des styles de PDF viewer */ iframe.pdfjs-viewer { border: none; border-bottom: 4px solid rgb(85, 85, 85); } viewer.css : /*--- Hack des styles de PDF viewer */ body { background-color: transparent; background-image: none; } #toolbarContainer { border-radius: 20px; } #openFile, #print, #download, #viewBookmark, #secondaryOpenFile, #secondaryPrint, #secondaryDownload, #secondaryViewBookmark, #pageRotateCw, #pageRotateCcw, #documentProperties { display: none !important; } #mainContainer {min-width: 0;} [[https://wordpress.org/plugins/pdf-viewer/|Page du plugin]] ==== Velvet Blues Update URLs ==== Mise à jour rapide des URLs des images pour les changements de domaine. [[https://wordpress.org/plugins/velvet-blues-update-urls/|Page du plugin]] ==== Simple Image Sizes ==== Aucun soucis. [[https://wordpress.org/plugins/simple-image-sizes/]] ---- ===== Sécurité ===== ==== Acunetix WP Security ==== Douteux, semble être une porte ouverte aux hackers plus qu'un vrai plugin de sécurité. **À éviter.**\\ [[https://wordpress.org/plugins/wp-security-scan/]] ==== Wordfence Security ==== Plugin de sécurité.\\ Nul à chier d'après [[https://www.pluginvulnerabilities.com/2016/12/21/wordfence-is-leaving-sites-relying-on-their-plugin-vulnerable-to-unfixed-vulnerability-that-they-know-is-being-exploited/|cet article]] : + d'une semaine de réaction suite à une vulnérabilité, passif de vulnérabilité directement dans leur plugin, mensonges pour pousser les gens à utiliser leur plugin, **fix de certaines vulnérabilités majeures repoussé au mois suivant pour les utilisateurs gratuit alors que ceux qui payent l'ont,** etc. [[https://wordpress.org/plugins/wordfence/]] ==== Sucuri Security ==== Plugin de sécurité générale. L'entreprise qui le gère à l'air sérieuse (plusieurs articles intéressants sur le hacking). Bouffe pas mal de mémoire, semble provoquer des bugs dans le backoffice... Balance des alertes mails pour des actions banales par défaut (post update, installation de plugin, etc), attention à bien les désactiver. [[https://wordpress.org/plugins/sucuri-scanner/|Page du plugin]] ==== Login LockDown ==== Aucun soucis. [[https://wordpress.org/plugins/login-lockdown/]] ==== Limit Login Attempts ==== Comme login lockdown, mais bloque aussi les connexions par cookies. Plugin non mis à jour depuis 2 ans. [[https://wordpress.org/plugins/limit-login-attempts/]] ==== WP Security Audit Log ==== Problèmes de base de données étrange, apparition d'erreurs de base de données. Méfiance. Utilité discutable. [[https://wordpress.org/plugins/wp-security-audit-log/]] ==== Plugin vulnerabilities ==== Donne des infos sur les vulnérabilités des programmes installés. À tester. [[https://wordpress.org/plugins/plugin-vulnerabilities/|Page du plugin]] ==== All in one WP security & firewall ==== Good shit. [[https://wordpress.org/plugins/all-in-one-wp-security-and-firewall/|Page du plugin]] ---- ===== Sauvegarde ===== ==== UpdraftPlus Backup and Restoration ==== Intéressant, pompe à fric, pas de support multi-site gratuit. À voir. [[https://wordpress.org/plugins/updraftplus/|Page du plugin]] ==== UpdraftCentral ==== Gestion centralisée des backups depuis une install locale, style MainWP + maj plugin il me semble. À tester quand même. [[https://wordpress.org/plugins/updraftcentral/|Page du plugin]] ==== BackWPup Free - WordPress Backup Plugin ==== Intéressant, pas mal buggé apparemment. Support multi-site gratuit. À tester. [[https://wordpress.org/plugins/backwpup/|Page du plugin]] ==== BackUpWordPress ==== Système de sauvegarde simple. Mal codé apparemment... À tester. [[https://wordpress.org/plugins/backupwordpress/|Page du plugin]] ==== WP-DB-Backup ==== Sauvegarde des bases de données. Ne marche pas à priori. [[https://wordpress.org/plugins/wp-db-backup/|Page du plugin]] ---- ===== WooCommerce ===== À tester voir si ça tient vraiment la route. [[https://wordpress.org/plugins/woocommerce/|Main plugin]] Thème officiel : [[https://woocommerce.com/storefront/#|Storefront]] (casse-couilles à télécharger, ils demandent une facture inutile) Les produits sont bien des posts type ⇒ risque de trop grosse table dans la BDD ? ==== WooCommerce Services ==== [[https://wordpress.org/plugins/woocommerce-services/|Page du plugin]] - Proposé à l'installation de WooCommerce. **Sert à externaliser des fonctions core du site.** Pue la merde comme idée, à voir. ==== Mollie Payments pour WooCommerce ==== [[https://fr.wordpress.org/plugins/mollie-payments-for-woocommerce/|Page du plugin]] - Sert à gérer plein de moyens de paiement facilement, mais se prend une **putain de marge** sur genre tout, genre **0,25 € + 1,8%** pour une carte bleue quand même. J'ai checké ça uniquement parce qu'il y avait une offre pour le câbler, ça a pas l'air ouf. ==== MailChimp for WooCommerce ==== [[https://wordpress.org/plugins/mailchimp-for-woocommerce/|Page du plugin]] - Proposé à l'installation. Vraiment utile ? ---- ====== Plugins PHP ====== ==== Matomo ==== [[https://matomo.org|Site]] - [[https://github.com/matomo-org/matomo|GitHub]]\\ Anciennement Piwik.\\ Alternative à Google analytics intéressante. Pré-requis élevés, coûteux en ressources et espace BDD ? ==== Open web analytics ==== Analyse de trafic open source. À tester. [[http://www.openwebanalytics.com/|Site officiel]] ---- **À trier** [[http://mobiledetect.net/]] [[https://github.com/stephband/jquery.event.swipe]] [[https://github.com/benmajor/jQuery-Touch-Events]] [[https://github.com/yairEO/touchy]] [[http://adaptive-images.com/]] [[https://noelboss.github.io/featherlight/]] Animation avancées et performantes (il parait) : [[http://greensock.com/]] [[http://julian.com/research/velocity/]]