Contenu principal
Stylish links

Ajouter des classes aux liens dans l’éditeur de WordPress

15 Nov 2011

Il y a quelques mois, Bruno Bichet nous montrait sa méthode pour créer simplement des boutons dans l’éditeur TinyMCE. Une méthode efficace 100% CSS. Ma méthode n’est pas une alternative à celle de Bruno mais un complément car le but n’est pas le même.
Pour cela, j’en passerais par deux exemples différents, visant à styler les liens pointant vers des fichiers média.

Styler automatiquement les liens vers les pdf, fichiers Excel, etc.

En CSS pur c’est faisable facilement :

1

a[href$=".pdf"] { ... }

Mais bien sûr certains navigateurs (dont je ne donnerais pas le nom…) ne connaissent pas ces sélecteurs CSS.
Et si à la place, une classe CSS était ajoutée automatiquement?
C’est parti, il faut d’abord trouver le hook adéquat, il s’agit de « media_send_to_editor », qui permet de traiter un lien avant de l’envoyer dans l’éditeur. Celui-ci ne concerne pas les images.

123456

add_filter('media_send_to_editor', 'sf_add_media_type_class', 10, 3);
function sf_add_media_type_class($html, $send_id, $attachment) {

	// Code

}

D’abord on doit vérifier la présence d’une url, ensuite on pourra retourner le lien modifié.

123456789

add_filter('media_send_to_editor', 'sf_add_media_type_class', 10, 3);
function sf_add_media_type_class($html, $send_id, $attachment) {
	if ( !empty($attachment['url']) ) {

		// Code

	}
	return $html;
}

En résumé je reprends le code d’origine de WordPress et je le modifie pour ajouter les classes nécessaires.
Le script va générer 2 classes : une classe « file_link » générique, et une autre sous la forme « file_link_pdf » selon le type de contenu.
Pour cela on défini d’abord les types de fichier que l’on veut voir apparaitre dans un array, et si l’extension correspond on ajoute la classe.
Ce qui donne au final :

0102030405060708091011121314151617

add_filter('media_send_to_editor', 'sf_add_media_type_class', 10, 3);
function sf_add_media_type_class($html, $send_id, $attachment) {
	if ( !empty($attachment['url']) ) {
		$types	= array( 'doc', 'docx', 'xls', 'xlsx', 'zip', 'ppt', 'mov', 'pdf' );
		$ext	= end(explode('.', $attachment['url']));
		$html	= $attachment['post_title'];
		$rel	= '';

		if ( strpos($attachment['url'], 'attachment_id') || get_attachment_link($send_id) == $attachment['url'] )
			$rel = ' rel="attachment wp-att-' . esc_attr($send_id) . '"';

		$class	= in_array($ext, $types) ? ' file_link_'.$ext : '';

		$html = '<a class="file_link'.$class.'">'.$html.'</a>';
	}
	return $html;
}

Et voilà, à chaque fois qu’un lien vers un pdf, un zip ou autre sera envoyé vers l’éditeur, il sera affublé de nos classes CSS, il ne vous restera qu’à faire votre style CSS :)
Action supplémentaire de l’utilisateur : zéro.

Stylish links

Ajouter une classe pour une lightbox

Dans la même veine on pourrait détecter que le lien mène vers une image afin d’ajouter une classe « thickbox » par exemple, dans le but d’utiliser une lightbox.
Là nous allons opérer différemment et proposer à l’utilisateur une case à cocher afin qu’il choisisse lui-même s’il veut utiliser une lightbox ou pas. Ça nous permettra de voir comment ajouter une case à cocher ou tout autre input dans la fenêtre media, et récupérer les données par la suite.
En gros, on utiliser une post_meta.
D’abord on utilise le hook « attachment_fields_to_edit » pour ajouter la boite à cocher. Ce hook concerne aussi bien les images que les autres types de média, il faut donc filtrer le media selon son « post_mime_type ».
Nota : dans add_filter( ) j’utilise une priorité 11 pour que notre case à cocher apparaisse après les champs déjà présents (alignement, taille de l’image). Pour la faire apparaitre avant, priorité 10.

123456789

add_filter("attachment_fields_to_edit", "thickbox_attachment_fields_to_edit", 11, 2);
function thickbox_attachment_fields_to_edit($form_fields, $post) {
	if ( substr($post->post_mime_type, 0, 5) == 'image' ) {

		// Code

	}
	return $form_fields;
}

Nous allons utiliser une post_meta appelée « _thick », nous la récupérons avec un get_post_meta( ) pour savoir si la case à cocher doit être cochée ou non, et nous créons nos label et input.
Résultat :

01020304050607080910111213

add_filter("attachment_fields_to_edit", "thickbox_attachment_fields_to_edit", 11, 2);
function thickbox_attachment_fields_to_edit($form_fields, $post) {
	if ( substr($post->post_mime_type, 0, 5) == 'image' ) {
		$thick = get_post_meta($post->ID, '_thick', true);

		$html =	 '<label style="font-weight:bold">'
				.'<input type="checkbox" name="attachments[' . $post->ID . '][thick]" value="1" '.(isset($thick) && $thick ? " checked='checked'" : "").'/> '
				.__("Open this media in the lightbox")
			.'</label>';
		$form_fields["thickbox"] = array( "label" => __("Lightbox"), "input" => "html", "html" => $html );
	}
	return $form_fields;
}

Phase 2 : l’enregistrement. Cette fois c’est le filtre « attachment_fields_to_save » qui nous intéresse pour sauver la valeur de la case à cocher.

15161718192021222324

add_filter("attachment_fields_to_save", "thickbox_attachment_fields_to_save", 10, 2);
function thickbox_attachment_fields_to_save($post, $attachment) {
	if ( substr($post['post_mime_type'], 0, 5) == 'image' ) {
		if( isset($attachment['thick']) && (int) $attachment['thick'] )
			update_post_meta($post['ID'], '_thick', (int) $attachment['thick']);
		else
			delete_post_meta($post['ID'], '_thick');
	}
	return $post;
}

Dernière étape, ajouter la classe CSS au lien. Le filtre « image_send_to_editor » nous sera utile, et ne s’applique qu’aux images justement. Comme dans le premier exemple, je récupère la fonction d’origine de WordPress et je la modifie pour ajouter la classe CSS. On devra récupérer la valeur de la case à cocher aussi avec get_post_meta( ) encore.
Nota : j’ajoute également l’attribut title au lien, car les lightbox l’utilisent souvent pour donner un titre à la fenêtre.

262728293031323334353637383940

add_filter( 'image_send_to_editor', 'thickbox_get_image_send_to_editor', 10, 8 );
function thickbox_get_image_send_to_editor($html, $id, $caption, $title, $align, $url='', $size='medium', $alt = '') {

	$html = get_image_tag($id, $alt, $title, $align, $size);
	$thick	= get_post_meta($id, '_thick', true);

	$rel	= $rel ? ' rel="attachment wp-att-' . esc_attr($id).'"' : '';
	$class	= isset($thick) && (int) $thick ? ' class="thickbox"' : '';
	$class .= isset($title) && $title ? ' title="'.esc_attr($title).'"' : '';

	if ( $url )
		$html = '<a>'.$html.'</a>';

	return $html;
}

Voilà, terminé.

See ya!