lab.elastik

Trucs utiles - Bloc 3

Derniers cours : Trucs utiles

Les cours sont classés par ordre où ils ont été donnés, du plus récent au plus ancien.

Comment customiser l’interface du backend de WordPress en fonction des rôles d’utilisateurs

Pour un client qui a des éditeurs dans différentes organismes, il fallait impérativement que chaque éditeur ne voie que ce qu’il pouvait modifier.

J’ai donc trouvé des scripts à mettre dans le fichier functions.php qui me permettaient d’ajouter et supprimer des éléments dans le menu de l’admin.

Mais il me fallait ensuite encore cacher différents éléments sur toutes les pages. J’ai lors trouvé un script me permettant d’ajouter une feuille de style pour l’interface d’admin dans le thème du site ! Cela permet donc que le fichier css ne soit pas écrasé lors de la màj de WordPress.

Ensuite j’ai encore du trouver un script me permettant de mettre une classe dans le body de l’admin avec le rôle de l’utilisateur connecté. Cela me permet donc de m’adresser à chaque rôle individuellement dans mon fichier CSS.

Je compile ci-dessous tous les scripts tels que je les ai adaptés. Dans mes commentaires se trouvent les liens vers les sources originales.

 

Catch CTRL+P & CMD+P and display message for Safari only

I ran into this problem when I realised that there was a bug in Safari which brakes the column-count property in the print version. Since I didn’t find a solution for this (and I didn’t want o revamp the entire structure) we agreed with the customer on displaying a message to Safari users once they hit CTRL+P or CMD+P.

I combine the detection of CTRL+P or CMD+P press and the browser used :

			document.addEventListener("keydown", function (event) {
			//   event.stopPropagation();
			//   event.preventDefault();

			if(event.ctrlKey && event.keyCode == 80) // pour CTRL

			{
				console.log("CTRL + P was pressed!");
				var ua = navigator.userAgent.toLowerCase(); 
				if (ua.indexOf('safari') != -1) { 
				if (ua.indexOf('chrome') > -1) {
					//alert("1chrome") // Chrome
				} else {
					alert("For best printing experience please use one of the following browsers // Pour une meilleure expérience d'impression, veuillez utiliser l'un des navigateurs suivants: Chrome, Firefox, Edge, Opera... autre que Safari!") // Safari
				}
				}


			}

			else if(event.metaKey && event.keyCode == 80) { // pour CMD mac
				console.log("CMD + P was pressed!");
				var ua = navigator.userAgent.toLowerCase(); 
				if (ua.indexOf('safari') != -1) { 
				if (ua.indexOf('chrome') > -1) {
					alert("1chrome") // Chrome
				} else {
					alert("For best printing experience please use one of the following browsers // Pour une meilleure expérience d'impression, veuillez utiliser l'un des navigateurs suivants: Chrome, Firefox, Edge, Opera... autre que Safari!") // Safari
				}
				}

			}

			else
			{
			//   console.log("Something else was pressed.");
			}
			}); // document add listener

Chrome DevTools: Copier et extraire tout le CSS pour un élément du DOM

Un petit truc tout simple permet de récupérer tout le style d’un élément donné dans le DOM. Peu importe que les propriétés CSS soient réparties à travers différentes classes, ce petit truc permet de tout copier d’un coup.

(suite…)