Outils pour utilisateurs

Outils du site


Panneau latéral

webdev:plugins

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) :

Hack des styles par défaut (style noir) :

Cliquez pour afficher ⇲

Cliquez pour masquer ⇱

/* 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. 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. Site officiel

Carousel 3d, jQuery. Open source. Marche plutôt bien, pas de fonction responsive de base mais on peut le hacker, voir plus bas. Dépôt GitHub

Hack responsive :

Cliquez pour afficher ⇲

Cliquez pour masquer ⇱

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 :

Cliquez pour afficher ⇲

Cliquez pour masquer ⇱

        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. 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. 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. 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. Page du plugin

Google XML Sitemaps

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. 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 :

Cliquez pour afficher ⇲

Cliquez pour masquer ⇱

[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.

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. 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();

Page du plugin

Ninja forms

Formulaire de contact “freemium”. Bonnes fonctionnalités de base, lourd ? À tester. 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. Page du plugin

TinyMCE Advanced

Ajoute des fonctionnalités à TinyMCE. Résoud le problème des <p> et des <br/> qui disparaissent et ajoute des options intéressantes pour l'édition, en plus de permettre de visualiser la hiérarchie des blocks html… Excellent ! Page du plugin


Traduction

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 ?

Page du plugin 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.

Page du plugin Plugin de synchronisation avec ACF 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. Page du plugin

Bogo

Plugin de traduction par le créateur de contact form 7. À étudier. Approche “one post per langage”. 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é ? Page du plugin

PDF Viewer

Permet d'intégrer des pdf en se basant sur PDF.js, un script libre. Intéressant mais en V0.1. À tester.

Hacking :

Cliquez pour afficher ⇲

Cliquez pour masquer ⇱

Utiliser la dernière version :

  1. Récupérer le dernier pre-built ici.
  2. Copier et dézipper le dossier téléchargé dans le répertoire du plugin.
  3. 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.

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;}

Page du plugin

Velvet Blues Update URLs

Mise à jour rapide des URLs des images pour les changements de domaine. Page du plugin

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

Page du plugin

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. Page du plugin

All in one WP security & firewall

Good shit. Page du plugin


Sauvegarde

UpdraftPlus Backup and Restoration

Intéressant, pompe à fric, pas de support multi-site gratuit. À voir. Page du plugin

UpdraftCentral

Gestion centralisée des backups depuis une install locale, style MainWP + maj plugin il me semble. À tester quand même. Page du plugin

BackWPup Free - WordPress Backup Plugin

Intéressant, pas mal buggé apparemment. Support multi-site gratuit. À tester. Page du plugin

BackUpWordPress

Système de sauvegarde simple. Mal codé apparemment… À tester. Page du plugin

WP-DB-Backup

Sauvegarde des bases de données. Ne marche pas à priori. Page du plugin


WooCommerce

À tester voir si ça tient vraiment la route. Main plugin

Thème officiel : 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

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

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

Page du plugin - Proposé à l'installation. Vraiment utile ?


Plugins PHP

Matomo

Site - GitHub
Anciennement Piwik.
Alternative à Google analytics intéressante.

Pré-requis élevés, coûteux en ressources et espace BDD ?

Open web analytics

webdev/plugins.txt · Dernière modification: 06/09/2018 17:18 de dolo