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.
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!
Commentaires
Commentaire de Greg.
Salut Maxi.
1) (non testé)
0102030405060708091011
12345678
22232425262728293031323334353637
2) Les images étant déjà insérées dans les articles, le seul moyen est de créer un script qui va aller chercher toutes les images dans tous les articles et leur ajouter les classes voulues.
3) Tout dépend de ce que tu veux faire : cocher l’option avant d’insérer l’image ? Voir 1)
Les images sont déjà dans les articles ? Voir 2)
Commentaire de Maxi.
Merci pour ta réponse.
Bon, la case à cocher est cochée par défaut, parfait :)
Pour les images déjà sur le site, j’ajouterai la class à la main, tant pis ^^
Pour ajouter l’autre class, oui, en fait, je sais même pas pourquoi j’ai posé la question, c’était évident.
Par contre, là où ça cloche, c’est que la class= »zoombox » n’est pas ajoutée au lien, j’ai bien vérifié que la case était cochée, mais la class n’est pas présente. Du coup pas de zoombox. qq chose aurait changé et ça ne fonctionne plus depuis la maj wordpress ?
Merci à toi !
Commentaire de Maxi.
Bonjour !
Alors j’ai tenté de refaire le tout de A à Z, mais voilà, la case à cocher est cochée par défaut, et la class n’est pas ajoutée aux liens des images.
Je suis à des années de coder comme tu fais pour nous sur screenfeed, impossible pour moi de « réparer ». Des idées ?
Commentaire de Greg.
Salut.
A priori, ceci devrait marcher :
01020304050607080910111213141516
18192021222324252627
293031323334353637383940414243444546474849
Commentaire de Maxi.
Merci !
Je teste tout ça et je te fais un retour rapide :)
A bientôt !
Commentaire de Maxi.
Bon, j’avais dit que je faisais un retour rapide… comme quoi j’ai une petite tête :)
Donc, en local pas de problème, ça fonctionne niquel !
En ligne, j’ai du rater un épisode ( sur un ancien template ). Je vais donc mettre en ligne le nouveau et voir ce que ça donne, enfin, quand je l’aurais terminé !
En attendant, ça fonctionne, merci beaucoup !