Tip WordPress w3c strict : Remplacer les target=’_blank’

Publié par Gui dans Tips, Wordpress

Si vous êtes comme moi et que vous faites tout pour que votre site soit conforme aux règles imposées par le W3C, vous devriez vous confronter à un problème : le target=’_blank’ !

En effet, WordPress de par son éditeur TinyMCE, dans la saisie d’articles, ajoutera automatiquement un attribut target=’_blank’ dès lors que vous paramétrer votre lien pour s’ouvrir dans une nouvelle fenêtre.

Solution

Ce qui est bien avec WordPress, c’est qu’il est facile d’ajouter un filtre sur le contenu d’un article avant que celui-ci ne soit transmis au navigateur.

Côté PHP

Pour cela, il suffit d’ajouter dans le fichier functions.php de votre thème, le bout de code suivant :

function rel_external($content)
{
	$regexp = '/\<a[^\>]*(target="_([\w]*)")[^\>]*\>([^<]|<[^a])*\<\/a>/smU';
	if( preg_match_all($regexp, $content, $matches) ){
		for ($m=0;$m<count($matches[0]);$m++) {
			if ($matches[2][$m] == 'blank')
			{
				$temp = str_replace($matches[1][$m], 'rel="external"', $matches[0][$m]);
				$content = str_replace($matches[0][$m], $temp, $content);
			}
			else if ($matches[2][$m] == 'self')
			{
				$temp = str_replace(' ' . $matches[1][$m], '', $matches[0][$m]);
				$content = str_replace($matches[0][$m], $temp, $content);
			}
		}
	}
	$regexp = '/\<a[^\>]*(rel="([\w]*)")[^\>]*\>([^<]|<[^a])*\<\/a>/smU';
	if( preg_match_all($regexp, $content, $matches) ){
		for ($m=0;$m<count($matches[0]);$m++) {
			$regex2 = '/rel="([^"]+)"/';
			if( preg_match_all($regex2, $matches[0][$m], $matches2) ){
				$rel = "";
				for ($o=0, $lenO = count($matches2[0]);$o<$lenO;$o++) {
					$rel .= $matches2[1][$o];
					if($o != $lenO-1)
						$rel .= " ";
				}
				$temp = str_replace(' ' . $matches2[0][0], ' rel="'.$rel.'"', $matches[0][$m]);

				for ($n=1, $lenN = count($matches2[0]);$n<$lenN;$n++) {
					$temp = str_replace(' ' . $matches2[0][$n], '', $temp);
				}
				$content = str_replace($matches[0][$m], $temp, $content);
			}
		}
	}
	return $content;
}

Et de dire à WordPress (toujours dans ce même fichier) de prendre en compte le filtre, avec la méthode suivante et le tour est joué !

add_filter('the_content', 'rel_external');

Explications

La fonction s’occupe de trouver dans le contenu de l’article les mots clés target=’_blank’ via une expression régulière, dans le but de le remplacer par l’attribut rel=’external’. Elle vérifie également si un attribut ‘rel’ existe déjà, auquel cas elle ajoute le terme external à l’attribut.

Côté Javascript

Ensuite, il suffit d’attacher une fonction Javascript aux liens qui ont cet attribut rel=’external’.

Exemple ici avec jQuery :

$("a[rel~='external']").click(function(){
	window.open(this.href, '_blank');
	return false;
})

Et voilà !

A vous de jouer !

Il ne vous reste plus qu’à intégrer ceci dans votre blog WordPress et vous êtes en route vers une page 100% w3c strict.

Si vous voulez voir ce script en action, regardez le code source de cette page et vérifiez la validité en cliquant sur le lien tout en bas valide w3c strict !

Merci à Benjamin Tardy pour l’aide sur la fonction !

6 commentaires

  1. Sébastien Angot-Wirz

    Très bon article qui va en ravir plus d’un je suis sûr (moi le premier). Voici une petite amélioration cependant qui permettra de gérer les guillemets doubles ainsi que les simples (target=’_blank’)

    Il faudrait juste remplacer la première expression régulière
    $regexp = ‘/\<a>]*(target="_([\w]*)")[^\&gt;]*\&gt;([^&lt;]|&lt;[^a])*\/smU';

    par celle ci:
    ‘/\</a><a>]*(target=["\’]_([\w]*)["\’])[^\&gt;]*\&gt;([^&lt;]|&lt;[^a])*\/smU’

    Et le tour est joué!

  2. Musculation

    Merci beaucoup à vous deux pour ces infos. Je vais de ce pas faire les modifications sur mon blog afin qu’il soit valide w3c strict

  3. Musculation

    Ce code : $(« a[rel~=’external’] »).click(function(){
    window.open(this.href, ‘_blank’);
    return false;
    })

    il faut le rajouter ou ??

  4. Norrv

    Ultra vieux article mais bon si quelqu’un qui traîne (comme moi) j’ai un soucis pas loin du thème de cet article. Sur mon site wordpress brutalement les _blank ne s’ouvrent plus dans une nouvelle fenêtre ?! Comme vous pouvez le voir dans la source http://www.bons-plans-malins.com les liens sont toujours avévident l’attribut _blank ! Mais rien à faire… sil quelqu’un a une piste … je suis preneur . Merci

    • Sébastien

      J’ai remarqué que le target _blank fonctionne, ça ouvre bien une nouvelle fenêtre… qui se referme aussitôt!
      À mon avis le problème vient d’ailleurs, peut-être la façon de faire la page de redirection?

Laisser une réponse à Gui


Post shadow