Fonctionnalités

Ce plugin est très simple d’utilisation.
Après l’avoir activé, rendez-vous dans la page de réglages pour renseigner les adresses de vos différentes pages de réseaux sociaux.

Proposant de compter le nombre de vos followers (abonnés Twitter), fans (abonnés Facebook) et lecteurs (abonnés au flux RSS feedburner), ce plugin ajoute ces chiffres dans l’administration de votre site WordPress, à la suite de vos statistiques globales.
Bien entendu, vous n’êtes pas obligés d’utiliser tous ces réseaux pour utiliser le plugin.

On regrettera peut-être l’absence de couleurs sur ces liens qui permettraient de distinguer plus rapidement les différents réseaux sociaux.

En plus de vous proposer un affichage des chiffres dans l’espace d’administration, un petit module est mis à votre disposition pour un aperçu de ces chiffres directement sur votre site.

Les réglages de ce module vous permettent d’afficher une accroche précise pour chacun des réseaux que vous utilisez, en plus du titre classique de module.

Un thème par défaut accompagne ce plugin et se veut simple et facilement personnalisable.

Pour les amateurs de CSS, il vous sera possible de personnaliser l’apparence en écrasant les styles existants directement depuis votre feuille de styles.

Évolutions envisageables

D’après ce que j’ai cru entendre ci et là, l’auteur pourrait bien ajouter quelques réseaux sociaux à la liste de ceux déjà disponibles.
Un second thème graphique pourrait également être ajouté (bien que déjà existant :p) et vous permettre, depuis les paramètres du plugins, de choisir entre l’une ou l’autre des apparences.

À suivre donc

Télécharger le plugin
Social Subscribers Counter

Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Cependant, le code commenté reste – je l’espère – accessible.

Avant propos

La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images.

Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. En effet, la rédaction du tutoriel que vous allez lire m’a permis d’alléger, corriger et améliorer le code disponible en téléchargement. Il fera l’objet d’une refonte prochaine.

Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Ne les oubliez pas.

Les défauts des versions précédentes

Comme les expérimentations foireuses sont là pour faire ressortir les limites d’une technique, voyons ce qui nous manquait dans les versions précédentes (gardez-les sous les yeux pour tester, c’est mieux).
Sur la version contrôlable (la première) :

• Un saut de page est visible au clic sur les flèches ;
• Nous sommes obligés de multiplier les éléments (div pour les conteneurs, a pour les flèches) ;
• il faut dupliquer des règles CSS à chaque image ajoutée.

Sur la version automatique (la seconde) :

• Il n’y a pas de commandes (soit…)
• Aucune possibilité de stopper l’animation
• il faut dupliquer des règles CSS à chaque image ajoutée.

Certains de ces problèmes ne sont pas résolubles, j’ai décidé de me concentrer sur la fusion des fonctionnalités et sur la correction de certains points :

• Fusionner le slideshow automatique et contrôlable
• Ajouter une commande de stop et lecture de l’animation
• Limiter la multiplication des éléments
• Virer le saut au clic (grâce à l’astuce CSS de Vincent De Oliveira)

Les autres problèmes persisteront, vous le verrez.

Poser les fondations

Voici du code HTML (HTML5 en l’occurrence) que j’espère suffisamment parlant.

<section id="slideshow">
	<div class="container">
		<div class="c_slider"></div>
		<div class="slider">
			<figure>
				<img src="img/dummy-640x310-1.jpg" alt="" width="640" height="310" />
				<figcaption>The mirror of soul</figcaption>
			</figure><!--
			--><figure>
				<img src="img/dummy-640x310-2.jpg" alt="" width="640" height="310" />
				<figcaption>Let's cross that bridge when we come to it</figcaption>
			</figure><!--
			--><figure>
				<img src="img/dummy-640x310-3.jpg" alt="" width="640" height="310" />
				<figcaption>Sushi<em>(do)</em> time</figcaption>
			</figure><!--
			--><figure>
				<img src="img/dummy-640x310-4.jpg" alt="" width="640" height="310" />
				<figcaption>Waking Life</figcaption>
			</figure>
		</div>
	</div>
	<span id="timeline"></span>
</section>

Ce code HTML pourrait être simplifié en prenant le risque de complexifier la CSS, mais cette dernière va déjà l’être suffisamment…
Pour faire simple nous avons une section pour le slideshow qui réunie le conteneur des images (.container), la partie qui glisse (.slider), les différentes images légendées (sous forme de figure > figcaption) et la petite barre de défilement du temps (#timeline).

Pour ceux qui s’interrogent sur la présence de commentaires HTML, je vous invite à lire cet autre article du blog : Display inline-block, une valeur trop peu utilisée.

Je n’ai mis aucun élément de commande pour le moment, nous verrons cela plus tard.

Voici le code CSS servant principalement à positionner, dimensionner et décorer les différents blocs, que je ne vais pas expliquer dans la mesure où ce n’est pas le cœur de l’article, mais il est un minimum commenté

#slideshow {
	position: relative;
	width: 640px;
	height: 310px;
	padding: 15px;
	margin: 0 auto 2em;
	border: 1px solid #ddd;
	background: #FFF;
	/* CSS3 effects */
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
 
/* avanced box-shadow
 * tutorial @
 * http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow
*/
#slideshow:before,
#slideshow:after {
	position: absolute;
	bottom:16px;
	z-index: -10;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
	left:0;
	transform: rotate(-4deg);
}
#slideshow:after {
	right:0;
	transform: rotate(4deg);
}

Avec ceci nous avons le support graphique des images. C’est un peu tout cassé, mais vous pouvez voir comment réaliser simplement un élément qui semble assez complexe, notamment au niveau des ombres et dégradés.
Gérons le débordement et l’alignement de tout ce contenu.

/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
	position:relative;
	width: 640px;
	height: 310px;
	overflow: hidden;
}
/* on prévoit un petit espace gris pour la timeline */
#slideshow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	width: 100%;
	height: 1px;
	background: #999;
}
/*
   le conteneur des slides
   en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 400%;
	height: 310px;
}
/* annulation des marges sur figure */
#slideshow figure {
	position:relative;
	display:inline-block;
	padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}

Nous voici sur une mise en forme plus propre, les éléments figure sont placés sur une seule et même ligne et le débordement est caché.
Il ne nous reste plus qu’à présenter un peu mieux notre légende qui est actuellement planquée :

/* styles de nos légendes */
#slideshow figcaption {
	position:absolute;
	left:0; right:0; bottom: 5px;
	padding: 20px;
	margin:0;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}

Et voilà qui est mieux.

Nous allons maintenant nous occuper de la phase automatique du slideshow.
Nous verrons dans une troisième partie comment gérer des actions pour contrôler notre slideshow.

Animer notre contenu : phase automatique

Cette phase va être quelque peu répétitive puisque nous allons devoir créer un certain nombre d’animations grâce à la fonction CSS @keyframes. Pour en savoir plus sur les animations, je vous invite à lire la partie « animation » de cet article sur le timing sur Alsacréations.

Pour obtenir une animation cohérente tout le long d’un cycle, vous devez vous poser la question suivante :
Combien de temps est nécessaire pour la compréhension de chaque slide ?

Bien entendu, la réponse va dépendre du contenu, mais imaginons que nous ayons 4 étapes, pas beaucoup de texte, 6 ou 7 secondes peuvent sembler suffisantes pour chaque étape. Il reste alors à estimer la durée d’une transition d’une étape à l’autre, 1 ou 2 secondes. Avec 8 secondes multipliées par 4, ça nous fait 32 secondes d’animation pour boucler un cycle complet.

Animation du conteneur

Commençons par animer le bloc qui contient nos images et légendes en le faisant glisser. Pour cela, créons notre animation :

/* fonction d'animation, n'oubliez pas de prefixer ! */
@keyframes slider {
	0%, 20%, 100%	{ left: 0 }
	25%, 45%		{ left: -100% }
	50%, 70%		{ left: -200% }
	75%, 95%		{ left: -300% }
}

Chaque étape est exprimée en pourcentage, aussi 50% signifie que nous en sommes à la 16^ième seconde de notre animation.
Si plusieurs étapes ont la même valeur d’une propriété, ou si vous souhaitez créer un arrêt, il suffit de mettre la valeur sur la même ligne séparer par une virgule.
Par exemple, sur la première étape, nous avons 0, 20 et 100% qui cohabitent. Cela sous entend que de 0 à 20%, la valeur de left est de 0, nous créons donc un arrêt. Cela signifie aussi que de 95 à 100%, la valeur de left passe de -300% à 0. C’est un moyen facile de retourner à la valeur initiale pour créer une boucle.

Nous avons créer l’animation, il faut maintenant l’attribuer à notre élément de cette manière :

/* complétez le sélecteur : */
#slideshow .slider {
	/* ... avec la propriété animation */
	animation: slider 32s infinite;
}

Cette syntaxe de la propriété animation est le raccourci de animation-name, animation-duration, animation-iteration-count, dans cet ordre précisément ici.

Animation de la ligne de temps

Notre petite ligne d’un pixel de hauteur servant de ligne de temps va être animée sur le même principe.
Mais avant cela, donnons-lui quelques styles de couleur.

#timeline {
	position: absolute;
	background: #999;
	bottom: 15px;
	left: 15px;
	height: 1px;
	background: rgb(214,98,13);
	background: rgba(214,98,13,.8);
	width: 0;
	/* fonction d'animation */
	animation: timeliner 32s infinite;
}

Il est ainsi placé précisément en tenant compte des marges autour des photos, et nous lui attribuons tout de suite une animation nommée timeliner qu’il nous faut déclarer comme ceci :

@keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 640px;	}
}

Ici nous savons que la ligne doit être à son maximum à quatre reprise (avant chaque changement de slide). Il y a donc 4 étapes à 640px (largeur max), et 4 (si on confond 0 et 100) à 0.

Animation de la légende

Même procédé, nous allons faire monter et descendre notre légende à chaque slide.

@keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}

Puis nous accrochons cette animation à notre élément :

/* ajouter à l'élément : */
#slideshow figcaption {
	/* ... la propriété animation */
	animation: figcaptionner 32s infinite;
}

Je ne sais pas si vous avez vu, mais le vignettage des slides est animé. Comme vous avez compris le principe, je vous laisse vous amuser à trouver le code

Nous avons désormais un slideshow qui fonctionne en mode automatique.
Maintenant, voyons comment procéder si l’on souhaite ajouter des boutons stop/marche, et suivant/précédent, ou « aller à la slide 3″, par exemple.

Contrôler notre contenu : phase manuelle

Lorsque l’on conçoit un slideshow, il est très recommandé de permettre à l’utilisateur de stopper l’animation, soit parce que ça le stresse, soit parce qu’il veut contempler une des images, soit… bref, voyons ce qu’on peut faire !

Pour rappel, nous n’avons encore aucun élément HTML pour ces contrôles, nous allons donc les rajouter progressivement.
Ces éléments de contrôles (des liens) vont cibler des ancres placés « à côté » de notre slideshow, en tant que frères indirects.

Juste avant notre élément #slideshow, placez donc ces éléments span :

<span id="sl_play" class="sl_command"></span>
<span id="sl_pause" class="sl_command"></span>
 
<span id="sl_i1" class="sl_command sl_i"></span>
<span id="sl_i2" class="sl_command sl_i"></span>
<span id="sl_i3" class="sl_command sl_i"></span>
<span id="sl_i4" class="sl_command sl_i"></span>

Ceux-ci ont des classes communes (parfois) qui nous permettrons des actions groupées par la suite.
Vous comprendrez leur utilité par la suite, ne vous faites pas de souci.

Bouton jouer et arrêter

Les boutons play et pause peuvent être ajoutés dans la section #slideshow, juste avant notre .container.

Il n’y a aucune obligation à les placer précisément ici, il est généralement conseillé de conserver ordre d’apparition dans le DOM et ordre d’apparition à la lecture de la page. Là nous allons les placer au milieu (verticalement) du slideshow :

<a class="play_commands pause" href="#sl_pause" title="Maintain paused">Pause</a>
<a class="play_commands play" href="#sl_play" title="Play the animation">Play</a>

Ces éléments peuvent prendre leur apparence avec quelques lignes de code uniquement, et sont par défaut cachés : ils n’apparaissent qu’à certains moments bien précis que nous définirons par la suite.

.play_commands {
	/* positionnement en haut à droite */
	position: absolute;
	top: 25px; right: 25px;
	z-index: 10;
	/* dimensionnement des icônes */
	width: 22px;
	height: 22px;
	text-indent: -9999px;
	border:0 none;
	/* placez l'opacité à 1 si vous souhaitez voir les commandes */
	opacity: 0;
	/* préparation de transition sur opacicty et right */
	transition: opacity 1s, right 1s;
}
/* on décale play légèrement sur la gauche */
.play { right: 55px; cursor: default; }
 
/* création de l'icône pause avec 2 pseudos éléments */
.pause:after,
.pause:before {
	position: absolute;
	display: block;
	content: " ";
	top:0;
	width:38%;
	height: 22px;
	background: #fff;
	background: rgba(255,255,255,0.5);
}
.pause:after { right:0; }
.pause:before {	left:0; }
 
/* création de l'icône play avec des bordures */
.play {
	width: 1px;
	height: 1px;
	/* les transparentes forment la flèche */
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 20px solid #fff;
	border-left: 20px solid rgba(255,255,255,0.5);
	/* renseignez 1 pour voir l'icône de suite */
	opacity: 0;
}
 
/* apparition du bouton pause au survole */
/* apparition des boutons au focus */
#slideshow:hover .pause,
.play_commands:focus {
	opacity: 1;
	outline: none;
}

Voilà, toutes ces lignes pour mettre en place nos deux liens. Ceux qui trouveront plus pertinent de charger des images ou un sprite, je ne leur en voudrais pas.
C’est bien, c’est beau, mais pas fonctionnel.

Nous allons maintenant utiliser la pseudo classe target pour agir sur notre animation en fonction du bouton que nous aurons cliqué.
Lorsque pause est cliqué, nous ciblons l’élément #sl_pause, lorsque lecture est cliqué, c’est #sl_play qui est ciblé.
Dans notre scénario, nous n’afficherons que le bouton utile : pause quand la lecture est effective, play lorsque la pause est en place.

/* stopper les animation */
.sl_command:target ~ #slideshow .slider,
.sl_command:target ~ #slideshow figcaption,
.sl_command:target ~ #slideshow #timeline,
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
	animation-play-state: paused;
}
 
/* redémarrer les animations */
#sl_play:target ~ #slideshow .slider,
#sl_play:target ~ #slideshow figcaption,
#sl_play:target ~ #slideshow #timeline,
#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
	animation-play-state: running;
}
 
/* switch entre les boutons */
.sl_command:target ~ #slideshow .pause 		{ opacity:0; }
#sl_play:target ~ #slideshow:hover .pause,
#sl_play:target ~ #slideshow .pause:focus 	{ opacity:1; }
.sl_command:target ~ #slideshow .play 		{ opacity:1; right: 25px; cursor: pointer; }
#sl_play:target ~ #slideshow .play 			{ opacity:0; right: 55px; cursor: default; }

Le premier bloc permet de stopper les animations grâce à la propriété animation-play-state. Cette propriété placée à sa valeur paused permet de figer l’animation.
Les sélecteurs sont assez spéciaux : .sl_command:target ~ #slideshow .slider permet de cibler « L’élément .slider fils de #slideshow lorsque ce dernier est indirectement frère de .sl_command, uniquement lorsque ce dernier est ciblé. ». Autrement dit : si .sl_command est ciblé, alors on va chercher le frère #slideshow puis son fils .slider pour lui appliquer un stop.
On procède de la même manière pour les autres éléments (figcaption, #timeline et .dots_commands que nous verrons plus tard dans le bonux) qui ont une animation en route également.
Pour en savoir plus sur les sélecteurs d’adjacence indirecte, lisez cet autre article du blog : Sélecteur d’adjacence indirecte en CSS3.

Le dernier bloc de code permet d’afficher les boutons en fonction de situation précise, je vous laisse essayer de décortiquer leur signification.

Bonux : Les flèches « suivant » et « précédent »

Il va nous falloir une paire de liens par étape de notre slideshow en gardant en tête que la flèche de gauche de notre première slide nous permet d’aller à la dernière, la flèche de droite de notre dernière slide nous permet d’aller à la première (vous me suivez ?). Lisez les title pour comprendre l’utilité de chaque flèche. Vous pouvez placer ces liens après nos deux liens pause et lecture.

<a class="commands prev commands1" href="#sl_i4" title="Aller à la dernière slide">&lt;</a>
<a class="commands next commands1" href="#sl_i2" title="Aller à la 2ème slide">&gt;</a>
<a class="commands prev commands2" href="#sl_i1" title="Aller à la 1ère slide">&lt;</a>
<a class="commands next commands2" href="#sl_i3" title="Aller à la 3ème slide">&gt;</a>
<a class="commands prev commands3" href="#sl_i2" title="Aller à la 2ème slide">&lt;</a>
<a class="commands next commands3" href="#sl_i4" title="Aller à la 4ème slide">&gt;</a>
<a class="commands prev commands4" href="#sl_i3" title="Aller à la 3ème slide">&lt;</a>
<a class="commands next commands4" href="#sl_i1" title="Aller à la 1ère slide">&gt;</a>

C’est là que la pertinence du markup en prend un coup. Pour des raisons d’accessibilité (clavier ici) ces liens ne sont peut-être pas des plus utiles et pratiques à utiliser. Est peut-être à envisager l’ajout de l’attribut tabindex="-1" pour empêcher le focus sur ces éléments. En effet, nous utiliserons un second système de navigation juste après, qui lui est peut-être plus pertinent.
Donnons quelques styles à nos boutons et cachons ceux qui ne sont pas utiles.

#slideshow .commands {
	position: absolute;
	top: 45%;
	padding: 5px 13px;
	border-bottom:0;
	font-size: 1.3em;
	color: #aaa;
	text-decoration:none;
	background-color: #eee;
	background-image: linear-gradient(#fff,#ddd);
	text-shadow: 0 0 1px #aaa;
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
 
#slideshow .prev { left: -48px; }
#slideshow .next { right: -48px; }
 
#slideshow .commands { display:none; }
#slideshow .commands1 {	display: block; }

Très bien, nous avons des flèches… mais que va-t-on bien pouvoir bouger avec ?
Sur le même principe que précédemment, nous ciblons l’un des span abandonnés en début de code. Si vous cliquez sur une des flèches, pour le moment ça ne fait que stopper l’animation (oui, tous les span sont porteurs de la classe .sl_command, rappelez-vous, en en ciblant un, les animations s’arrête).
En fonction de l’élément ciblé, on pourrait stopper l’animation et changer les valeurs de left pour le slider, de width pour la timeline, et de bottom pour la légende. Ça serait cool hein ?
Oui mais non, parce qu’en fait ça ne fonctionne pas : les keyframes sont « prioritaires ».

C’est ce qui nous oblige à compléter notre code HTML légèrement avec ce petit morceau :

<div class="c_slider"></div>

Il est déjà présent dans le code fourni initialement (premier bloc de cet article).

Cet élément nous permet d’appliquer les images en image de fond. Ces mêmes images que nous avons déjà chargé dans le HTML, nous allons les appliquer en background CSS.
C’est en faisant bouger ce nouvel élément que nous allons donner l’illusion d’un slideshow classique. Je dis bien illusion, car vous aurez compris qu’ici on se restreint à l’idée d’un vrai diaporama, avec des images, et non du contenu textuel qu’il serait difficile de « dupliquer ».

#slideshow .c_slider {
	position: absolute;
	left:0; top:0;
	width: 400%;
	height: 310px;
	/* multiple background */
	background: url(img/dummy-640x310-1.jpg) 0 0 no-repeat,
	            url(img/dummy-640x310-2.jpg) 640px 0 no-repeat,
	            url(img/dummy-640x310-3.jpg) 1280px 0 no-repeat,
	            url(img/dummy-640x310-4.jpg) 1920px 0 no-repeat;
	transition: background 1s;
}

Cette division fournies de quelques images est cachées par la partie principale du diaporama pour le moment. Lorsque nous ciblerons le contenu avec l’une de nos flèches « suivant » ou « précédent », nous cacherons ce diaporama automatique (qui se sera stoppé) pour découvrir nos slides contrôlables qui bougeront en fonction de l’élément ciblé.
Vous n’allez pas m’aimer… :

/* on cache le slider */
.sl_i:target ~ #slideshow .slider									{ visibility: hidden }
/* on planque la 1ère pastille (cf. bonux suivant) */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after		{ display:none; }
/* pour afficher la 2ème pastille (cf. bonux suivant) */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before	{ display:block; }
 
/* lorsque on cible le premier slider */
/* on cache tous les "précédent" et "suivant" */
#sl_i1:target ~ #slideshow .commands								{ display: none; }
/* on affiche seulement deux flèches */
#sl_i1:target ~ #slideshow .commands1								{ display: block; }
/* correspond au décalage des images */
#sl_i1:target ~ #slideshow .c_slider								{ background-position: 0 0, 640px 0, 1280px 0, 1920px 0; }
/* on place la pastille tout à gauche */
#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before	{ left:0; }
 
/* même procédé lorsqu'on cible le second slide */
#sl_i2:target ~ #slideshow .commands								{ display: none; }
#sl_i2:target ~ #slideshow .commands2								{ display: block; }
#sl_i2:target ~ #slideshow .c_slider								{ background-position: -640px 0, 0 0, 640px 0, 1280px 0; }
#sl_i2:target ~ #slideshow .dots_commands li:first-child a:before	{ left:18px; }
 
/* puis le 3ème */
#sl_i3:target ~ #slideshow .commands								{ display: none; }
#sl_i3:target ~ #slideshow .commands3								{ display: block; }
#sl_i3:target ~ #slideshow .c_slider								{ background-position: -1280px 0, -640px 0, 0 0, 640px 0; }
#sl_i3:target ~ #slideshow .dots_commands li:first-child a:before	{ left:36px; }
 
/* et enfin le 4ème */
#sl_i4:target ~ #slideshow .commands								{ display: none; }
#sl_i4:target ~ #slideshow .commands4								{ display: block; }
#sl_i4:target ~ #slideshow .c_slider								{ background-position: -1920px 0, -1280px 0, -640px 0, 0 0; }
#sl_i4:target ~ #slideshow .dots_commands li:first-child a:before	{ left:54px; }

À chaque étape nous déplaçons les images, cachons tous les liens « précédent » et « suivant » sauf ceux dont on peut avoir besoin, et on déplace la petite pastille de la navigation secondaire (voir bonus qui suit).

Bonux : « pagination » pour sauter vers une slide

Vous avez certaine souvent vu ces petits points au pied d’un slideshow qui servent un peu de pagination et qui, parfois, permettent de savoir précisément où on se trouve dans le déroulement des slides.
Nous allons en créer une. Pour commencer, ajoutons ce code HTML juste après l’élément timeline

<ul class="dots_commands"><!--
	--><li><a title="Afficher la slide 1" href="#sl_i1">Slide 1</a></li><!--
	--><li><a title="Afficher la slide 2" href="#sl_i2">Slide 2</a></li><!--
	--><li><a title="Afficher la slide 3" href="#sl_i3">Slide 3</a></li><!--
	--><li><a title="Afficher la slide 4" href="#sl_i4">Slide 4</a></li>
</ul>

Puis, ces quelques lignes de CSS pour donner un style bien propre à nos petits points.
N’hésitez pas à agrandir les dimensions si ça vous semble trop petit.

.dots_commands  {
	padding:0;
	margin:32px 0 0;
	text-align: center;
}
.dots_commands li {
	display: inline;
	padding:0; margin:0;
}
.dots_commands a {
	position: relative;
	display: inline-block;
	height:8px; width: 8px;
	margin: 0 5px;
	text-indent: -9999px;
	background: #fff;
 
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
/* quelques styles au focus */
.dots_commands a:focus {
	outline: none;
	background: orange;
}
.dots_commands li:first-child a { z-index: 25; }

Rien de sorcier ici.
On s’assure simplement en dernière ligne que le premier élément ait un z-index supérieur aux autres. Nous allons nous en servir pour l’animation qui suit.

Nous allons créer un petit disque par dessus ces puces pour représenter le slide visible par un point d’une couleur différente. Pour ce faire nous utilisons les pseudo-éléments.

/* on style after et before, on utilisera les deux */
.dots_commands li:first-child a:after,
.dots_commands li:first-child a:before {
	position: absolute;
	top: 0; left: 0;
	content: " ";
	width: 8px; height: 8px;
	background: #bd9b83;
	z-index:20;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
/* on anime "after" */
.dots_commands li:first-child a:after {
	animation: dotser 32s infinite;
}
/* on cache "before", on l'utilise uniquement au clic (cf. bonux précédent) */
.dots_commands li:first-child a:before { display:none; }
 
/* c'est parti pour l'animation ! */
@keyframes dotser {
	0%, 100% 	{ opacity: 1; left: 0; 		}
 
	20%			{ opacity: 1; left: 0;		}
	22%			{ opacity: 0; left: 0;		}
	23%			{ opacity: 0; left: 18px;	}
	25%			{ opacity: 1; left: 18px;	}
 
	45%			{ opacity: 1; left: 18px;	}
	47%			{ opacity: 0; left: 18px;	}
	48%			{ opacity: 0; left: 36px;	}
	50%			{ opacity: 1; left: 36px;	}
 
	70%			{ opacity: 1; left: 36px;	}
	72%			{ opacity: 0; left: 36px;	}
	73%			{ opacity: 0; left: 54px;	}
	75%			{ opacity: 1; left: 54px;	}
 
	95%			{ opacity: 1; left: 54px;	}
	97%			{ opacity: 0; left: 54px;	}
	98%			{ opacity: 0; left: 0;	}
}

Comme nous l’avons prévu dans notre bonus précédent, nous n’avons rien besoin de gérer en plus. Ces liens ciblent les mêmes éléments que nos flèches latérales et ont donc le même effet. (stop de l’animation et slide contrôlable avec tous les effets qui y sont liés)
L’animation peut sembler compliquée, mais c’est la logique de « disparition, déplacement, apparition » multiplié par 4 (4 étapes). Pour information, jusqu’à très récemment, Google Chrome avait du mal avec les animations sur before ou after. Je ne sais pas si ça a changé, il me semble.

Et on en restera là !

Démonstration

Pour être sûr que tout fonctionne, j’ai effectué un test en suivant ce tutoriel et en préfixant pour Firefox uniquement, voici le résultat : Slideshow Full CSS3.

Lors de la rédaction de ce tutoriel certains éléments comme les infobulles ou le vignettage animés ont été volontairement omis pour alléger le contenu. Si certaines portions de ce tutoriel restent pour vous un mystère à cause d’un manque d’explications, l’espace de commentaires est là pour vous

Analyse personnelle

Ce qui est bloquant est gourmand en lignes de code ici, c’est la volonté de vouloir fusionner système automatique et système contrôlable au clavier, souris ou même touché.

Ce slideshow date de novembre 2011, les techniques se sont multipliées, il existe d’autres solutions full CSS3 passant par l’utilisation détournée des éléments label et input de type radio. En contrôlant la valeur de la coche avec la pseudo-classe checked il est possible d’agir sur les éléments, de la même manière que nous le faisons ici avec la pseudo-classe target.

Je vous invite à regarder ce qui peut se faire ailleurs, comme par exemple sur ce Slideshow Full CSS3 Responsive.

L’espace de commentaires est à vous !

C’est ce type d’interactions et de participations qui me donne envie de continuer à écrire et à partager avec vous. Ce sont ces discussions qui permettent de générer de nouvelles idées, d’améliorer celles existantes, et bannir les mauvaises pratiques.

J’ai rencontré des lecteurs du blog lors de la dernière conférence web KiwiParty. Cette brève rencontre m’a rassuré et encouragé (merci les gars) à continuer à écrire dans l’idée de contribuer – à ma manière – au web francophone (mais pas uniquement).

Quelques chiffres

Sans prétention aucune, et comme je l’ai fait l’an dernier, je vous donne quelques chiffres pour le fun :

Les chiffres précis :

• 138 articles (1 article tous les 5 jours)
• 722 commentaires (1 commentaire par jour)
• 10 catégories d’articles (2 nouvelles dans l’année)

Les moins précis

• 750 visites (650 uniques) quotidiennes
• 47000 pages vues en moyenne par mois
• plus de 230 mentions dans des blogs de référence (français, anglophones, chinois, japonais)
• 5200ème blog Français (Alexa rank)
• une centaine de contacts par e-mail
• une vingtaine de corrections d’articles grâce aux intervenants (merci !)

À venir

J’en profite également pour annoncer une refonte complète du blog courant de l’année (oui c’est vague) qui aura pour objectifs principaux de revoir la navigation aux travers des différentes thématiques phares du blog, mais également d’optimiser l’interface et le chargement du blog sur les différents terminaux (mobiles, tablettes, mini-pc, pc, etc.)
La newsletter devrait également être mise plus en avant dans les mois à venir (les inscriptions sont ouvertes si ça vous dit, il suffit de compléter le formulaire dans la petite colonne latérale).
Bref, tout plein de choses qui vont arriver progressivement dans le but de vous offrir un contenu de bonne qualité, je l’espère.

N’hésitez donc pas à profiter de l’occasion pour critiquer les points qui semblent ne pas vous convenir sur ce blog.

Merci

Je vais avoir du mal à être aussi précis que l’an dernier dans mes remerciements, par peur d’avoir une liste trop longue de personnes à remercier, par peur également d’oublier des personnes, alors merci à tous pour vos commentaires, encouragements et contributions.

Merci à vous pour cette troisième année que nous entamons ensemble !

WordPress prévoit la possibilité de personnaliser le formulaire de commentaire grâce à la fonction comment_form( $args, $post_id ), cette fonction est intéressante mais quelque peu limitée. Nous allons plutôt aborder quelques crochets (hooks) s’y rapprochant.

Concrètement, il faut procéder en trois étapes :

• insérer ou supprimer un champ dans le formulaire
• permettre l’insertion des données renseignées dans la base de données
• afficher les nouvelles données dans les commentaires

Je vous invite à éditer votre fichier functions.php pour effectuer des tests avec les codes que je vais fournir.
Allez, c’parti !

Insérer et supprimer des champs dans le formulaire de commentaire

Cette première étape va utiliser le hook comment_form_defaults et se présente sous la forme d’une manipulation de tableau PHP.
Les champs sont enregistrés dans l’entrée « fields » du tableau et peuvent être manipulés assez simplement. Ils contiennent du code HTML que nous allons reproduire pour nos champs personnalisés.

add_filter( 'comment_form_defaults', 'juiz_manage_default_fields');
 
// $default contient tous les messages du formulaire de commentaire
// il contient également "comment_field", le textarea du message
 
if ( !function_exists('juiz_manage_default_fields')) {
   function juiz_manage_default_fields( $default ) {
 
      // Récupération des infos connues sur le visiteur
      // Permet de pré-remplir nos nouveaux champs
 
      $commenter = wp_get_current_commenter();
 
      // Suppression d'un champ par défaut parmi : author, email, url
 
      unset ( $default['fields']['url'] );
 
      // Ajout des champs dans le tableau "fields"
      // $commenter[] contient les infos sur le visiteur
 
      $default['fields']['job'] = '<p class="comment-form-author-job comment-form-author">
      <label for="job">'. __('Your job') . '</label>
      <span class="required">*</span>
      <input id="job" name="job" value="'.$commenter['comment_author_job'].'" aria-required="true" size="30" type="text" />
      </p>';
 
      $sel_female = $sel_male = '';
      if ( $commenter['comment_author_gender'] != '') ${'sel_'.$commenter['comment_author_gender']} = ' checked="checked"';
 
      $default['fields']['gender'] = '<p class="comment-form-author-gender">
      <span class="label_like">'. __('Your gender') . '</span>
      <label for="female">F</label> <input '. $sel_female .' id="female" name="gender" value="female" type="radio" />
      <label for="male">M</label> <input '. $sel_male .' id="male" name="gender" value="male" type="radio" />
      </p>';
 
      // On retourne le tableau des champs
 
      return $default;
   }
}

Quelques explications s’imposent :
Concernant le HTML produit, je copie et adapte la structure par défaut de mon thème sur les champs de formulaire (ici TwentyEleven) dans le but de limiter les modifications futures sur la CSS (d’où la copie de la classe comment-form-author sur comment-form-author-job).

Le tableau des champs (fields) ressemble à cela :

array(
   'author' => '<p class="comment-form-author">…',
   'email'  => '<p class="comment-form-email">…',
   'url'    => '<p class="comment-form-url">…'
);

Pour ajouter un champ il me suffit donc de faire (en remplaçant « slug » par quelque chose de pertinent) :

$default['fields']['slug'] = '<p class="comment-form-author-slug">…';

La ligne 12 récupère les cookies enregistrés lorsque qu’un commentaire est posté par un utilisateur. Ils n’existent donc pas lorsqu’un visiteur n’a jamais commenté sur votre blog, mais permettent ensuite de pré-remplir les champs (ligne 26 et 30) si l’utilisateur revient poster un commentaire.
Nous verrons plus loin comment nous enregistrons les cookies pour nos nouveaux champs de formulaire.

À noter : Il existe le hook comment_form_defaults_fields qui permet de manipuler directement les champs (ex : unset($default['url']). Cependant j’ai une légère préférence pour le hook comment_form_defaults car il permet d’atteindre d’autres éléments du formulaire.
Par contre, si votre objectif est de supprimer simplement le champ url par exemple :

add_filter('comment_form_default_fields','juiz_remove_url_field');
if ( !function_exists('juiz_remove_url_field')) {
   function juiz_remove_url_field( $fields ) {
      unset($fields['url']); return $fields;
   }
}

Enregistrer les données des champs personnalisés

Cette seconde étape se découpe en deux sous-étapes si certains de vos champs sont obligatoires.
Le premier hook utilisé est comment_post qui permet d’intervenir lorsque le commentaire a été enregistré.
Le second est preprocess_comment qui intervient avant l’enregistrement des données en base, notamment pour les contrôler.

Nous allons donc d’abord contrôler notre champ obligatoire ‘job’ pour retourner une erreur s’il est vide :

add_filter( 'preprocess_comment', 'juiz_verify_comment_data' );
if ( !function_exists('juiz_verify_comment_data') ) {
   function juiz_verify_comment_data( $commentdata ) {
 
      // si job est vide on affiche une erreur
      if ( ! isset( $_POST['job'] ) )
         wp_die( __( 'Error: please fill the required field (job).' ) );
 
      // si job dépasse 45 caractères (arbitraire) on affiche une erreur
      elseif ( isset( $_POST['job'] ) AND strlen ( $_POST['job'] ) > 45 )
         wp_die( __( 'Error: 45 maximum char. for "job" field.' ) );
 
      return $commentdata;
   }
}

Une fois la donnée obligatoire contrôlée, nous enregistrons les données du commentaire :

add_action( 'comment_post', 'juiz_save_comment_data' );
if ( !function_exists('juiz_save_comment_data') ) {
   function juiz_save_comment_data( $comment_id ) {
 
      // définition de la durée de vie des cookies
      $comment_cookie_lifetime = apply_filters('comment_cookie_lifetime', 30000000);
 
      if (isset($_POST['job'])) {
 
         // on enregistre l'info en base de données
         add_comment_meta( $comment_id, 'job', esc_html( $_POST['job'] ) );
 
         // on enregistre un cookie
         setcookie('comment_author_job_' . COOKIEHASH, esc_html( $_POST['job'] ), time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
      }
 
      // on vérifie que le champ gender respecte les valeurs prévues
      if (isset($_POST['gender']) AND in_array ( $_POST['gender'] , array('male', 'female'))) {
         // même schéma que précédemment
         add_comment_meta( $comment_id, 'gender', esc_html($_POST['gender']) );
         setcookie('comment_author_gender_' . COOKIEHASH, esc_html( $_POST['gender']), time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
      }
   }
}

Le cookie est optionnel mais il permet de reproduire le comportement de WordPress qui ajoute un cookie par champ du formulaire de commentaire pour se souvenir des données entrées par le visiteur.

En l’état, nous avons ajouté les infos en base de données, nous avons créé des cookies, et nous avons pris soin, dans l’étape précédente, de récupérer ces cookies grâce à la fonction wp_get_current_commenter(). Sauf qu’en fait cette fonction récupère uniquement les cookies pour les champs « classiques » (Nom, url, e-mail). Il faut donc compléter cette fonction pour l’inviter à piocher dans nos cookies fraichement créés :

add_filter('wp_get_current_commenter', 'juiz_add_custom_comment_cookies');
function juiz_add_custom_comment_cookies($cookies) {
 
	$comment_author_job = '';
	if ( isset($_COOKIE['comment_author_job_'.COOKIEHASH]) )
		$comment_author_job = $_COOKIE['comment_author_job_'.COOKIEHASH];
 
	$comment_author_gender = '';
	if ( isset($_COOKIE['comment_author_gender_'.COOKIEHASH]) )
		$comment_author_gender = $_COOKIE['comment_author_gender_'.COOKIEHASH];
 
 
	$cookies['comment_author_job'] = $comment_author_job;
	$cookies['comment_author_gender'] = $comment_author_gender;
 
	return $cookies;
}

La variable $cookies est un tableau associatif (clé + valeur), dont la clé est le nom du cookie (sans le _cookiehash) et la valeur est la valeur du cookie que l’on récupère s’il existe.

Maintenant il faut afficher ces informations dans notre liste de commentaire !

Afficher les données personnalisées dans la liste de commentaires

Cette dernière étape permet d’afficher les informations dans la liste de commentaires. Il existe un certain nombre de hooks qui permettent d’intervenir sur des zones précises d’un commentaire. Je vais en utiliser deux ici qui sont : get_comment_author_link et get_avatar.

Je souhaite afficher le job à côté du nom de l’auteur d’un commentaire.

add_filter( 'get_comment_author_link', 'juiz_attach_custom_info_to_comments_list' );
if ( !function_exists('juiz_attach_custom_info_to_comments_list') ) {
   function juiz_attach_custom_info_to_comments_list( $author ) {
 
      // on récupère l'info job
      $job = get_comment_meta( get_comment_ID(), 'job', true );
 
      // si l'info existe, on l'ajoute entre parenthèse après l'auteur
      if ( $job )
         $author .= ' (' . $job . ')';
 
      // on retourne l'info
      return $author;
   }
}

La variable $author contient le code HTML qui affiche le nom de l’auteur (avec ou sans lien vers son site). On ne fait donc que rajouter du contenu à la suite de cette chaine.
Cette technique a l’avantage d’ajouter l’information également dans le widget qui traite des derniers commentaires postés.

Pour afficher la valeur de gender, j’aurais très bien pu faire la même chose en ajoutant l’information à la suite après l’avoir récupérée avec get_comment_meta(). Mais comme j’aime bien me compliquer la vie, j’ai décidé d’ajouter une classe autour de l’avatar de l’utilisateur.

add_filter ( 'get_avatar', 'juiz_attach_custom_gender_to_avatar');
if ( !function_exists('juiz_attach_custom_gender_to_avatar') ) {
   function juiz_attach_custom_gender_to_avatar( $avatar ) {
 
      $gender = get_comment_meta( get_comment_ID(), 'gender', true );
      $gender = $gender ? $gender : 'undefined';
      $avatar = '<span class="gender ' . $gender . '">' . $avatar . '</span>';
 
      return $avatar;
   }
}

La variable $avatar contient le code HTML de l’avatar de l’utilisateur, une simple image par défaut. Ici on englobe l’avatar d’un élément span porteur du classe gender ainsi que d’une classe dynamique qui peut être male, female ou undefined en fonction de l’info que l’on récupère en base de données.

Et voilà, c’est tout pour cette longue astuce, pour le reste c’est à vous d’imaginer.

Option bonux 1 : éditer un champ existant

En restant dans le premier hook (comment_form_defaults) il est possible d’éditer les champs existants en les manipulants avec des expressions régulières, ou en les réécrivant :

$default['fields']['author'] = '
   <p class="comment-form-author">
      <label for="author">'. __('Name') . '</label>
      <span class="required">*</span>
      <input id="author" name="author" value="'.$commenter['comment_author'].'" placeholder="Votre nom ou pseudo" aria-required="true" size="30" type="text" />
   </p>
';

Ici je rajouter un attribut placeholder par exemple.
Inutile de changer quoi que ce soit dans le traitement des données, WordPress le prévoit déjà.
Merci à Nicolas pour la suggestion.

Option bonux 2 : redirection après un commentaire

J’ai croisé dans le cœur de WordPress le hook comment_post_redirect qui permet de choisir la page de redirection lorsqu’un utilisateur a posté un commentaire.
Par défaut cette page redirige vers le commentaire de l’utilisateur avec une ancre.
Voici comment la fonction se présente :

add_action('comment_post_redirect', 'juiz_new_comment_redirection');
if ( !function_exists('juiz_new_comment_redirection') ) {
   function juiz_new_comment_redirection( $location ) {
      // valeur par défaut donnée par WordPress
      // à vous de personnaliser $location en fonction de vos besoins
      $location = empty($_POST['redirect_to']) ? get_comment_link($comment_id) : $_POST['redirect_to'] . '#comment-' . $comment_id;
      return $location;
   }
}

Option bonux 3 : le code complet

Pour ceux qui ont peur d’avoir raté une étape :

// ajout physique d'un champ
add_filter( 'comment_form_defaults', 'juiz_manage_default_fields');
 
// $default contient tous les messages du formulaire de commentaire
// il contient également "comment_field", le textarea du message
if ( !function_exists('juiz_manage_default_fields')) {
	function juiz_manage_default_fields( $default ) {
 
		$commenter = wp_get_current_commenter();
 
		// Suppression d'un champ par défaut parmi : author, email, url
 
		//unset($default['fields']['url']);
 
		// Ajout des champs dans le tableau "fields"
 
		$default['fields']['job'] = '<p class="comment-form-job comment-form-author">
		<label for="job">'. __('Your job') . '</label>
		<span class="required">*</span>
		<input id="job" name="job" aria-required="true" size="30" type="text" value="' . esc_attr($commenter['comment_author_job']) . '" />
		</p>';
 
		$sel_female = $sel_male = '';
		if ( $commenter['comment_author_gender'] != '') ${'sel_' . $commenter['comment_author_gender']} = ' checked="checked"';
 
		$default['fields']['gender'] = '<p class="comment-form-gender">
		<span class="label_like">'. __('Your gender') . '</span>
		<label for="female">F</label> <input id="female" '. $sel_female .' name="gender" value="female" type="radio" />
		<label for="male">M</label> <input id="male" '. $sel_male .' name="gender" value="male" type="radio" />
		</p>';
 
		// On retourne le tableau des champs
 
		return $default;
	}
}
 
 
// controle des champs obligatoires à l'enregistrement
add_filter( 'preprocess_comment', 'juiz_verify_comment_data' );
if ( !function_exists('juiz_verify_comment_data') ) {
	function juiz_verify_comment_data( $commentdata ) {
 
		if ( ! isset( $_POST['job'] ) )
			wp_die( __( 'Error: please fill the required field (job).' ) );
		elseif ( isset( $_POST['job'] ) AND strlen ( $_POST['job'] ) > 45 )
			wp_die( __( 'Error: 45 maximum char. for "job" field.' ) );
 
		return $commentdata;
	}
}
 
//ajout en base de données des champs
add_action( 'comment_post', 'juiz_save_comment_data' );
if ( !function_exists('juiz_save_comment_data') ) {
	function juiz_save_comment_data( $comment_id ) {
 
		$comment_cookie_lifetime = apply_filters('comment_cookie_lifetime', 30000000);
 
		if (isset($_POST['job']) AND strlen ($_POST['job']) < 45) {
			add_comment_meta( $comment_id, 'job', esc_html( $_POST['job'] ) );
			setcookie('comment_author_job_' . COOKIEHASH, esc_html( $_POST['job'] ), time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
		}
 
		if (isset($_POST['gender']) AND in_array ( $_POST['gender'] , array('male', 'female'))) {
			add_comment_meta( $comment_id, 'gender', esc_html($_POST['gender']) );
			setcookie('comment_author_gender_' . COOKIEHASH, esc_html( $_POST['gender']), time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
		}
	}
}
 
 
// pour que get_commenter retourne nos cookies custom
add_filter('wp_get_current_commenter', 'juiz_add_custom_comment_cookies');
function juiz_add_custom_comment_cookies($cookies) {
 
	$comment_author_job = '';
	if ( isset($_COOKIE['comment_author_job_'.COOKIEHASH]) )
		$comment_author_job = $_COOKIE['comment_author_job_'.COOKIEHASH];
 
	$comment_author_gender = '';
	if ( isset($_COOKIE['comment_author_gender_'.COOKIEHASH]) )
		$comment_author_gender = $_COOKIE['comment_author_gender_'.COOKIEHASH];
 
	$cookies['comment_author_job'] = $comment_author_job;
	$cookies['comment_author_gender'] = $comment_author_gender;
 
	return $cookies;
}
 
 
// afficher l'info job dans la liste des commentaires
add_filter( 'get_comment_author_link', 'juiz_attach_custom_info_to_comments_list' );
if ( !function_exists('juiz_attach_custom_info_to_comments_list') ) {
	function juiz_attach_custom_info_to_comments_list( $author ) {
 
		$job = get_comment_meta( get_comment_ID(), 'job', true );
		if ( $job )
			$author .= ' (' . $job . ')';
 
		return $author;
	}
}
 
// afficher l'info gender graphiquement pas loin de l'avatar
add_filter ( 'get_avatar', 'juiz_attach_custom_gender_to_avatar');
if ( !function_exists('juiz_attach_custom_gender_to_avatar') ) {
	function juiz_attach_custom_gender_to_avatar( $avatar ) {
 
		$gender = get_comment_meta( get_comment_ID(), 'gender', true );
		$gender = $gender ? $gender : 'undefined';
			$avatar = '<span class="gender ' . $gender . '">' . $avatar . '</span>';
 
		return $avatar;
	}
}
 
// redirection personnalisée après un post de commentaire
add_action('comment_post_redirect', 'juiz_new_comment_redirection');
if ( !function_exists('juiz_new_comment_redirection') ) {
	function juiz_new_comment_redirection( $location ) {
		$location = empty($_POST['redirect_to']) ? get_comment_link($comment_id) : $_POST['redirect_to'] . '#comment-' . $comment_id;
		return $location;
	}
}

L’espace de commentaire et là pour vous

Présentation de l’attribut download

En gros cet attribut permet de spécifier au navigateur qu’il ne doit pas se diriger (naviguer) vers la ressource ciblée, mais la télécharger.
Cet attribut s’applique donc naturellement un élément a et peut avoir une valeur qui sera attribuée comme nom de fichier à la ressource que vous allez télécharger.

Voici un exemple d’utilisation :

<a href="http://creativejuiz.fr/images/main.jpg" download="CreativeJuiz_Background">Télécharger l'image</a>

La valeur de l’attribut download n’a, a priori, aucune restriction, mais il faut avoir en tête qu’il s’agit d’un nom de fichier et que tous les systèmes ne sont pas égaux quant au traitement de certains signes de ponctuation (mais contredites-moi si je fais erreur). Vous remarquerez que j’ai écris « CreativeJuiz_Background » en nom de fichier, et non « CreativeJuiz_Background.jpg ». En effet il est inutile de préciser l’extension du fichier si vous souhaitez conserver l’originale.

Si vous naviguez sur la dernière version de Chrome, ce lien de démo devrait vous proposer de télécharger un fichier .png : Télécharger l’image

La valeur de l’attribut download accepte également l’ajout d’une extension de fichier, il est ainsi possible de proposer au téléchargement un fichier HTML transformé en fichier TXT par exemple :

<a href="http://www.creativejuiz.fr/trytotry/css3-box-shadow-after-before/index.html" download="CreativeJuiz_DropShadow.txt">Télécharger le code (.txt)</a>

Ce qui nous donnerait le lien suivant : Télécharger le code (.txt)

Avis personnel

Cet attribut est plutôt intéressant en un sens, puisqu’il permet d’alléger le fichier .htaccess ou certains scripts en PHP.
Cependant, à l’image de l’attribut target aujourd’hui considéré comme une manière de contraindre le visiteur à naviguer d’une certaine manière, cet attribut download ne serait-il pas en train de reproduire ce schéma de contrainte en forçant un visiteur à télécharger une image (ou tout autre type de fichier) alors qu’il souhaite juste la visualiser dans son navigateur ? Il faudra voir cela à l’usage

Forcer le téléchargement d’un type de fichier

Il existe une instruction à placer dans le fichier .htaccess qui permet d’indiquer au navigateur la manière dont il doit traiter certains formats de fichier lorsque le visiteur parcourt un fichier.
La ligne de code suivante permet de traiter les PDF comme étant un type de fichier à télécharger, et non à afficher dans le navigateur :

AddType application/octet-stream .pdf

À noter que le point est optionnel, et que l’extension d’un fichier n’est pas sensible à la casse : inutile donc d’ajouter l’extension en majuscule « PDF », ça ferait doublon.

Vous pouvez traiter plusieurs types de fichiers de la même manière en rajoutant simplement les extensions de chacun des fichiers les uns derrière les autres en les séparant par un espace :

AddType application/octet-stream pdf mp3 mp4 avi

Il est possible de placer un fichier .htaccess dans un sous-dossier de votre site web pour n’impacter que les fichiers à l’intérieur de ce dosssier.

Écartons-nous un poil du sujet

Dans certains cas, le navigateur télécharge votre fichier .swf comme s’il s’agissait d’un type application/octet-stream. Pour résoudre ce problème, complétez votre .htaccess de la sorte :

AddType application/x-shockwave-flash swf 

Je vous invite à lire ce guide en anglais pour en apprendre davantage :
Adding MIME Types – htaccess-guide.com

C’est tout pour cette astuce.
N’hésitez pas à commenter si vous rencontrez des problèmes !

PS : astuce à venir sur le même sujet en HTML5

Définition

Le W3C définit cet attribut translate comme étant :

[…] un attribut à valeurs énumérées* utilisé pour spécifier si les valeurs d’attribut d’un élément et les valeurs textuelles de ses enfants doivent être traduits lorsque la page est localisée, ou si elles doivent rester inchangées.

*c’est à dire qu’il a des valeurs prévues bien précises

Je l’ai résumé dans l’intro, en somme cela vous permet de définir quelles parties de votre document sont traduisibles.

Utilisation

Cet attribut attend des valeurs précises que sont « no », « yes » ou encore une chaine vide (valeur par défaut). La chaine vide ou le « yes » ont valeur équivalente : le contenu sera traduit.
Pour définir un élément comme n’étant pas sujet à traduction, voici comment procéder.

<span translate="no" class="author">Hope</span>

Sur un document définit originellement en anglais et traduit ponctuellement en français, « Hope » ne sera ainsi pas traduit par « Espérer ». Cela permet à l’auteur de conserver son vrai pseudonyme

Si l’ancre de l’exemple avait été porteuse d’un attribut title ou alt, son contenu n’aurait également pas été traduit, d’après la définition donnée par le W3C.

Quelques exemples

Le pseudo, le nom, le prénom …

C’est le cas de l’exemple précédent : le nom ou pseudonyme d’un auteur, ou le nom d’un programme, par exemple, n’ont a priori pas à être traduits.
Dans les classiques espaces « Auteur » des blogs, il conviendrait d’utiliser systématiquement la valeur no de translate sur l’élément balisant le pseudo de l’auteur.

Article écrit par <a translate="no" class="author" href="/auteur/pierre">Pierre</a>

Ici on part du principe que notre page est en français, le prénom Pierre ne sera pas traduit par Peter lors d’une traduction du français vers l’anglais, grâce à notre intervention.

Cheat mode, transcription, ligne de commande …

Imaginions que vous lisiez des articles en anglais sur un cheat mode pour un jeu, mais que l’article vous semble trop obscure dans sa langue originelle. Hop, un coup de Google translate, et là, c’est le drame, vos codes sont aussi traduits !
Je prends l’exemple d’un code d’un jeu auquel j’ai joué de nombreuses heures (je vous laisse trouver son nom) :

You can also use this code to get a car for the game :<br>
<kbd>HOW DO YOU TURN THIS ON</kbd>

Ceci serait alors traduit par :
Vous pouvez également utiliser ce code pour obtenir une voiture pour le jeu : COMMENT vous activez cette fonction

Nous aurions pu sauver le code simplement en prévoyant le coup :

You can also use this code to get a car for the game :<br>
<kbd translate="no">HOW DO YOU TURN THIS ON</kbd>

Celui-ci n’aurait alors pas été vulgairement traduit.

Attention à l’héritage

Lorsque vous définissez un élément comme n’étant pas traduisible, ses enfants héritent de cet aspect et ne sont eux-mêmes pas traduisibles.
Pour corriger le tir il suffit de re-définir la valeur yes de translate sur les enfants.

<p translate="no">Texte qui ne doit pas être traduit à part
<span translate="yes">cette partie</span> qui peut l'être.</p>

Pour rappel, Google Chrome, qui est de plus en plus utilisé, intègre cet outil de traduction et le propose dès que vous êtes sur une page de langue étrangère (pour votre navigateur).
La traduction de contenu est donc chose courante, je le vois sur mes outils d’analyse sur ce blog, mais bien entendu tout dépend de la cible de votre site internet.

N’hésitez pas à venir me corriger si vous voyez une bêtise

Cette phrase sonne comme du déjà vu, déjà entendu, ce n’est pas la première fois que je le dis, et elle fait également écho à l’article sur le «mirage CSS3» de Raphaël Goetter.

Je ne vais pas m’étaler davantage sur cet aspect de ce 3ème volet de la passionnante saga CSS, ce n’est pas l’objet de ce billet.

Ce qu’on cherche à faire

nth-child() permet de cibler précisément un élément s’il respecte la condition entre parenthèses.
On part du principe qu’on travaille sur une liste.

Exemples :

li:nth-child(n+3) { }

permet de cibler tous les li à partir du troisième.

li:nth-child(3) { }

permet de ne cibler que le 3ème li.

Démonstration

Il est possible de reproduire ces deux sélecteurs CSS3 avec les sélecteurs CSS2.1 (compatible IE7+)

Cibler tous les éléments sauf les N premiers en CSS2

Si vous lisez régulièrement les actualités d’Alsacreations.com, vous avez probablement croisé mon article sur la sélection avancée des frères d’un élément. Cet article fait référence – entre autres choses – au sélecteur d’adjacence direct représenté par un « + ».

Ce code permet de sélectionner tous les li frères directs d’un autre li. C’est à dire tous les li sauf le premier, puisqu’il n’a pas de frère avant lui.

li + li { }

De la même manière, ce code permet de cibler tous les li sauf les deux premiers :

li + li + li { }

Ainsi de suite. On a ici reproduit notre sélecteur CSS3 li:nth-child(n+3).

Cibler le Nième élément en CSS2

Cette fois nous allons avoir besoin de la pseudo-classe first-child qui permet de cibler le premier enfant d’un élément.
C’est pratique, car on sait déjà comment cibler le premier élément :

li:first-child { }

Pour cibler le second, il faut combiner le sélecteur précédent au sélecteur d’adjacence directe pour obtenir un sélecteur qui dit « l’élément directement frère du premier » :

li:first-child + li { }

Cela permet ici de cibler le deuxième élément.

On peut également dire « l’élément directement frère de l’élément directement frère du premier »

li:first-child + li + li { }

Là on cible le troisième élément… bon, vous avez compris le truc j’imagine ?

Démonstration

N’hésitez pas si vous avez des suggestions d’amélioration, ou des remarques sur cet article.

Ce sujet fait relai à celui de Raphaël Goetter dans son article Cibler le Nieme élément en CSS2. Il est simplement abordé à ma sauce.

GeekPress

Un petit nouveau (que je connais) a ajouté son grain de sel dans ce magazine, il s’agit de Jonathan, le gérant de GeekPress.fr, un blog spécialisé dans les astuces et le développement WordPress.
Comme il est très joueur, il n’a pas proposé d’article sur le CMS, mais un dossier sur les « concurrents » de jQuery, cette bibliothèque JavaScript tant aimée des webdesigners.
Un très bon dossier que je vous invite à lire !

Mon article

Concernant l’astuce que j’ai proposé, il s’agit d’exemples supplémentaires à l’article abordé sur ce blog :
Travailler vos liens avec jQuery et CSS
sauf que dans cet article je n’aborde que des solutions CSS (2.1) qui correspondent à la fin de l’article du blog.
Pour rappel, CSS 3 est à la mode, mais par pitié, apprenez d’abord CSS 2.1, c’est pour votre bien

Voilà !
Si vous êtes lecteur du magazine et que vous avez des questions, c’est ici que ça se passe.
Si vous n’êtes pas lecteur du magazine, vous pouvez quand même poser des questions ici

Bon lundi de Pâques !

Démonstration

Le sujet du menu déroulant est très sensible. De par sa nature, il est bien souvent considéré comme peu ergonomique, inaccessible et dans certains cas il est l’illustration d’un mauvais travail sur l’arborescence d’un site. Bref, l’article ici présente une démonstration en CSS, non une étude approfondie des tenants et aboutissants d’un menu déroulant.

Un bout de HTML

Le code HTML est assez classique, il s’agit d’imbriquer des listes non-ordonnées.

<ul id="menu">
	<li><a href="#">Menu 1</a>
		<ul>
			<li><a href="#">Level 1.1</a></li>
			<li><a href="#">Level 1.2</a></li>
		</ul>
	</li><li><a href="#">Menu 2</a>
		<ul>
			<li><a href="#">Level 2.1</a></li>
			<li><a href="#">Level 2.2</a></li>
			<li><a href="#">Level 2.3</a></li>
			<li><a href="#">Level 2.4</a></li>
		</ul>
	</li><li><a href="#">Menu 3</a>
		<ul>
			<li><a href="#">Level 3.1</a></li>
			<li><a href="#">Level 3.2</a></li>
			<li><a href="#">Level 3.3</a></li>
		</ul>
	</li>
</ul>

Les chevrons fermants et ouvrants des li de premier niveau sont collés pour éviter le white-space. (pour en savoir plus : Article sur display inline-block – Creative Juiz)

Place au CSS

Je ne vais pas détailler ici la partie sur la création d’un menu horizontal. Je vous invite à lire le tutoriel « Créer un menu horizontal centré » qui reprend une partie des explications.

/* partie positionnement et déco */
#menu a {
	display:block;
	color: #fff;
	text-decoration:none;
}
#menu > li,
#menu > li li {
	position: relative;
	display:inline-block;
	width: 110px;
	padding: 6px 15px;
	background-color: #777;
	background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
#menu > li li { background: transparent none; }
#menu > li li a { color: #444; }
#menu > li li:hover { background:#eee; }
#menu > li:first-child {
	border-right: 1px solid #777;
	border-radius: 8px 0 0 8px;
}
#menu > li + li {
	border-left: 1px solid #aaa;
	border-right: 1px solid #777;
}
#menu > li:last-child {
	border-right:0;
	border-left: 1px solid #aaa;
	border-radius: 0 8px 8px 0 ;
}
#menu > li:hover {
	background-color: #999;
	background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}
/* (presque) fin de la partie positionnement/déco */
/* dans cette déclaration, on fixe le max-height */
#menu ul {
	position: absolute;
	top: 2em; left:0;
	max-height:0em;
	margin:0; padding:0;
	background-color:#ddd;
	background-image: linear-gradient(#fff,#ddd);
	overflow:hidden;
	transition: 1s max-height 0.3s;
	border-radius: 0 0 8px 8px;
}
/* ici on change la valeur de max-height au :hover */
#menu > li:hover ul {
	/* need an adaptation, lower is better, but see it large   */
	max-height:13em;
}

Concentrons nous sur l’utilisation de max-height et transition pour effectuer notre animation.
Lorsqu’on fixe, ligne 41, la valeur de max-height à 0, on lui dit clairement : ta hauteur maximale sera nulle (l’élément ne sera pas visible).
Pour que cela fonctionne, il faut coupler cette propriété à un débordement caché (ligne 45).

Ligne 46, nous prévoyons une transition sur la propriété max-height que nous allons faire varier par la suite. Cette transition se déroulera sur 1s et se déclanchera 0.3s après le survol de l’élément, et ce pour le confort de l’utilisateur. (ça évite d’avoir des sous-menus qui se déroulent dès qu’on effleure le menu)

Enfin, au survol de l’élément li, nous faisons varier la hauteur maximale du sous-menu (ligne 52).
En prévoyant large (mais pas trop), vous créerez un effet de délai avant l’animation de repliement. Ici 8em seraient suffisant, j’en prévoit 13.

Démonstration

N’hésitez pas à commenter si vous avez des zones floues
Amusez-vous bien !

L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel.
J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations.

Démonstration

Place à l’explication !

Concept

Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Ces plans vont se mouvoir dans le même sens mais à vitesses différées afin de donner l’impression que certains sont en premier plan (mouvements rapides) d’autres sont en arrières plan (mouvements plus lents).

Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre.

Schématisation

Nous utiliserons trois plans pour réaliser cet effet : un fond imagé en CSS (dernier plan), notre contenu qui se trouve naturellement dans le flot du document (second plan), et des éléments placés ci et là (premier plan) pour ajouter de la profondeur.

Le principe de l’animation étant établi, il nous faut également garder en tête que CSS ne permet pas de positionner les éléments en fonction de la position du contenu dans la page, ou en fonction de la position de la souris.
Nous allons donc utiliser la pseudo classe target afin de déterminer à quelle slide nous nous trouvons, et effectuer les animations en conséquence.

Base HTML

Voici un code allégé qui reprend le contenu du document de démonstration. (je n’ai repris que le contenu de body)

<!-- éléments cachés pour jouer avec :target -->
<span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
 
<!-- Le gros conteneur qui va glisser -->
<div id="wrap">
 
	<!-- La navigation -->
	<ul id="nav">
		<li><a href="#s1">Splash</a></li>
		<li><a href="#s2">Lorem Schnapsum</a></li>
		<li><a href="#s3">Credits</a></li>
	</ul>
 
	<!-- La slide 1 -->
	<div id="slide1">
		<div class="slide_inside">
			<!-- Le logo -->
			<h1><img src="images/logo-stop-wars.png" alt="Stop Wars"></h1>
		</div> <!-- /.slide_inside-->
	</div> <!-- /#slide1 -->
 
	<!-- La slide 2 -->
	<div id="slide2">
		<div class="slide_inside">
			<!-- Les deux éléments en 1er plan -->
			<!-- Mettez ici les images que vous voulez   -->
			<img src="images/bomb-squad-trooper.png" id="trooper" alt="">
			<img src="images/clone.png" id="clone" alt="">
 
			<h2>Star Wars Parallax</h2>
			<p>Lorem Salu bissame !</p>
		</div> <!-- /.slide_inside-->
	</div> <!-- /#slide2 -->
 
	<!-- La slide 2 -->
	<div id="slide3">
		<div class="slide_inside">
			<h2>Credits</h2>
			[…]
		</div> <!-- /.slide_inside-->
	</div> <!--  /#slide3 -->
</div>

Pour reprendre la structure de manière schématique, nous avons à peu près cela :

Nous aurions pu utiliser HTML5 sans aucun problème, le principe est le même.
Maintenant nous devons passer au CSS.

Beaucoup de styles

Dimensionnons nos conteneurs et plaçons nos images de fond. Le code suivant est commenté pour vous aider à le comprendre.

body {
	margin: 0; padding: 0; /* annulation des marges */
	overflow: hidden; /* on cache le débordement de contenu */
	color: #fff;
	background: #000;
}
 
#wrap {
	/* position du conteneur pour le préparer à bouger */
	position: relative;
	top: 0;
	/* on prépare la transition à venir */
	transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}
 
#nav {
	/* on fixe le menu en haut */
	position: fixed;
	top: 0; left: 0; right: 0;
	padding: 1em 0;
	margin: 0;
	/* on centre les liens */
	text-align: center;
	background: #000;
}
#nav li {
	/* on aligne les éléments de liste */
	display: inline;
	margin:0;
}
#nav a {
	/* on applique des marges aux liens */
	display: inline-block;
	margin: 0 3em;
	color: #eee;
	/* on applique une petite lueur */
	text-shadow: 0 0 5px #fff;
	/* on prévoit une petite transition (lueur) */
	transition: all 1s;
}

Ça c’était pour l’aspect du cadre, nous allons mettre en styles les différents slides et leur attribuer une image de fond tout en prévoyant les transitions.
Nous allons en profiter pour styler les contenus.

/* slides */
#slide1, #slide2, #slide3 {
	/* height à adapter avec media queries */
	height: 1000px;
	padding-top:100px;
	/* préparation des transitions */
	transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
}
/* attribution des images de fond */
#slide1 { background:url(images/slide1-bg.jpg) center 0 no-repeat fixed; }
#slide2 { background: url(images/slide2-bg.jpg) center 0 no-repeat fixed; }
#slide3 { background: url(images/slide3-bg.jpg) center 0 no-repeat fixed; }
 
/* Contenus des slides */
.slide_inside {
	width: 770px;
	margin: 0 auto;
	position: relative;
	background-color: rgba(0, 0, 0, .6);
	padding: 50px;
}
#slide1 .slide_inside {
	text-align: center;
	background-color: transparent;
}
#slide2 .slide_inside p {
	width: 500px;
	text-align: justify;
}
#slide3 .slide_inside {
	margin-top: 50px;
}

Attention, Webkit semble ne pas supporter la valeur 1.35 de la fonction cubic-bezier(), il conviendra de corriger le tir en utilisant la syntaxe -webkit-transition: top 1.4s cubic-bezier(.49,.22,.52,1);

Les images de fond et les contenus sont prêts.
On va maintenant positionner et déformer (transform) nos petits personnages en prévoyant également leurs transitions.

/* positionnement des personnages animés */
#trooper, #clone {
	position: absolute;
	left:-180px; top: 300px;
	/* on tourne légèrement les images */
	transform: rotate(10deg);
	/* et on prévoit une transition */
	transition: all 1.4s cubic-bezier(.49,.22,.52,1);
}
/* positionnement différé d'un des 2 personnages */
#clone {
	left: -280px;
	top: 400px;
}

Voilà, tous nos éléments sont positionnés.
Maintenant il faut revoir le positionnement de tous ces éléments en fonction de l’élément ciblé lors d’un clic, c’est là que la pseudo classe target va jouer son rôle.

Animation en fonction de la cible

Le principe va être le même pour chaque élément ciblé par notre menu de navigation.
Je vais donc expliquer le code pour le second élément ciblé (lorsque nous cliquons sur le deuxième élément de menu).

Nous allons utiliser la méthode proposée par Vincent De Oliveira dans son article « Empêcher le scroll avec l’utilisation de target » afin d’éviter qu’un saut dans la page soit effectué lorsque l’on demande à rejoindre une ancre.

/* décalage du conteneur vers le haut */
#s2:target ~ #wrap {
	top:-1000px;
}
 
/* décalage des fonds de chaque slide */
#s2:target ~ #wrap #slide1 { background-position: 50% 36%; }
#s2:target ~ #wrap #slide2 { background-position: 50% 0%; }
#s2:target ~ #wrap #slide3 { background-position: 50% -30%; }
 
/* mouvements d'un des personnages */
#s2:target ~ #wrap #trooper {
	left: -180px;
	top: -100px;
	transform: rotate(-7deg);
}
 
/* mouvements de l'autre personnage */
#s2:target ~ #wrap #clone {
	left: -350px;
	top: 50px;
	transform: rotate(0deg);
}
 
/* juste pour la déco (lueur sur le lien cliqué) */
#s2:target ~ #wrap #nav li:first-child + li a {
	text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603;
}

Pour traduire l’un des sélecteurs CSS avancés en français, on pourrait dire : « Lorsque #s2 est ciblé, je cherche un #wrap directement ou indirectement frère et je style l’élément #clone qui se trouve dedans » (interprétation du sélecteur de la ligne 19).

Le principe est le même lorsque l’on cible les autres slides.
Le plus dur pour vous maintenant, c’est de trouver quels changements appliquer, à quelle vitesse (distance/temps) et dans quelle condition.

Je vous donne le code CSS pour les deux slides restantes. (quand même !)

/* vers Slide 1 */
#s1:target ~ #wrap { top:0px; }
#s1:target ~ #wrap #nav li:first-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s1:target ~ #wrap #slide1 { background-position: 50% 0%; }
#s1:target ~ #wrap #slide2 { background-position: 50% -35%; }
#s1:target ~ #wrap #slide3 { background-position: 50% -60%; }
#s1:target ~ #wrap #trooper { left: -180px; top: 300px; transform: rotate(10deg); }
#s1:target ~ #wrap #clone { left: -280px; top: 300px; transform: rotate(10deg); }
 
/* vers Slide 3 */
#s3:target ~ #wrap { top:-2150px; }
#s3:target ~ #wrap #nav li:last-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s3:target ~ #wrap #slide1 { background-position: 50% 60%; }
#s3:target ~ #wrap #slide2 { background-position: 50% 35%; }
#s3:target ~ #wrap #slide3 { background-position: 50% 0%; }
#s3:target ~ #wrap #trooper { left:-1500px;top:-1000px; transform: rotate(-15deg); }
#s3:target ~ #wrap #clone { left:-1000px;top: -800px; transform: rotate(-15deg); }

Le code CSS complet se trouve ici : CSS de la démo

Vous aurez noté que les éléments ciblés sont nos span du tout début du code HTML. À partir de ce type de cible, nous pouvons parcourir tout le DOM afin de sélectionner l’élément à styler.

N’hésitez pas si vous avez des questions

Démonstration

Nous utilisons à nouveau le hook tiny_mce_before_init

<?php
add_filter('tiny_mce_before_init', 'juiz_custom_block_select');
if ( !function_exists('juiz_custom_block_select')) {
	function juiz_custom_block_select($settings) {
		// on retire `adress`, `h1` et `h2`
		$settings['theme_advanced_blockformats'] = 'p,pre,h3,h4,h5,h6';
		return $settings;
	}
}
?>

Il suffit de lister les éléments que vous souhaitez conserver, les autres seront temporairement désactivés.
Il vous suffira de les rajouter dans la liste pour les réactiver.

Il est possible de fusionner ce code avec celui que nous avons vu sur l’article Ajouter des styles perso dans l’éditeur TinyMCE. Cela donnerait :

<?php
// ajout du filtre pour le sélecteur de styles
add_filter( 'mce_buttons_2', 'juiz_mce_buttons_2' );
 
if ( !function_exists('juiz_mce_buttons_2')) {
	function juiz_mce_buttons_2( $buttons ) {
		array_unshift( $buttons, 'styleselect' );
 
		return $buttons;
	}
}
 
// filtre pour la gestion des blocs et styles
add_filter('tiny_mce_before_init', 'juiz_custom_blocks_and_styles_select');
if ( !function_exists('juiz_custom_blocks_and_styles_select')) {
	function juiz_custom_blocks_and_styles_select($settings) {
		// on retire `adress`, `h1` et `h2`
		$settings['theme_advanced_blockformats'] = 'p,pre,h3,h4,h5,h6';
 
		// on ajoute nos styles perso
		$style_formats = array (
			array(
				'title' => __('Italique et gras'),
				'inline' => 'span',
				'styles' => array(
					'fontStyle' => 'italic',
					'fontWeight' => 'bold'
				)
			),
			array(
				'title' => __('Bouton'),
				'selector' => 'a',
				'classes' => 'button'
			),
			array(
				'title' => __('Exergue Box'),
				'block' => 'div',
				'classes' => 'highlight',
				'wrapper' => true
			)
		);
 
		$settings['style_formats'] = json_encode( $style_formats );
 
		return $settings;
	}
}
?>

En espérant que ces astuces vous faciliterons la vie, ou celle de vos clients.