WordPress dispose d’une fonctionnalité plutôt pratique : les intégrations automatiques de contenu (embeds). Pour résumer son fonctionnement, on colle l’URL d’un contenu spécifique dans l’éditeur et WordPress va afficher ce contenu directement dans votre article.
C’est par exemple le système utilisé pour intégrer des tweets.
L’embed de Twitter ne me plait pas trop par contre, un format m’est imposé, et il ne colle pas forcément au design de mon site. Bref, on peut trouver plusieurs raisons de vouloir modifier cet embed : design, sécurité, accessibilité, performance, tracking des visiteurs.
Et il est possible de le modifier… Mais il y a un MAIS (un gros). L’embed en lui-même n’est qu’une balise <blockquote>, un script JavaScript vient ensuite la remplacer par une iframe. Il faut donc en premier lieu se débarrasser de ce script, ce qui veut dire « Au revoir les boutons de retweet et favoris, l’avatar, etc ».
Bref, voici ce que je vous propose :
- La dernière ligne, contenant le nom de l’auteur, ne contient aucun marquage, nous allons ajouter une balise
<cite>(et un<p>aussi). - Il y a aussi un
—: on le vire, pour y mettre ce qu’on veut via CSS plus tard. - La balise
<blockquote>contient un attribut width : on le vire. - La date, avec le lien vers le tweet, est en anglais : on la traduit.
- On supprime la balise
<script>.
010203040506070809101112131415161718192021222324252627282930313233343536373839404142434445
// !Twitter embed: remove the width attribute, add `<p>` tags, change the date in the good language.
add_filter( 'oembed_dataparse', 'sf_improve_twitter_embed', 10, 3 );
function sf_improve_twitter_embed( $return, $data, $url ) {
if ( strpos( $url, 'twitter.com' ) !== false ) {
$locale = get_locale();
// Si vous voulez respecter les guidelines de Twitter, il faut supprimer la ligne suivante (voir en fin d'article).
$return = str_replace( "\n" . '<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>', '', $return );
$return = str_replace_once( '</p>— ', '</p><p><cite>', $return, true );
$return = str_replace_once( '</a></blockquote>', '</a></cite></p></blockquote>', $return, true );
if ( ! empty( $data->width ) ) {
$return = str_replace_once( '" width="' . $data->width . '"', '"', $return );
}
if ( $locale && $locale !== 'en_US' && preg_match_all( '@<a href="' . $url . '">((?:(?!</a>).)*)</a>@', $return, $matches, PREG_SET_ORDER ) ) {
$match = end( $matches );
$link = str_replace( $match[1], date_i18n( __( 'F j, Y' ), strtotime( $match[1] ) ), $match[0] );
$return = str_replace( $match[0], $link, $return );
}
}
return $return;
}
if ( ! function_exists( 'str_replace_once' ) ) :
function str_replace_once( $search, $replace, $subject, $rev = false ) {
if ( ! $rev ) {
if ( false !== ( $pos = strpos( $subject, $search ) ) ) {
return substr_replace( $subject, $replace, $pos, strlen( $search ) );
}
}
else {
if ( false !== ( $pos = strpos( strrev( $subject ), strrev( $search ) ) ) ) {
return strrev( substr_replace( strrev( $subject ), strrev( $replace ), $pos, strlen( $search ) ) );
}
}
return $subject;
}
endif;Côté CSS, c’est à vous de voir. Voici en exemple ce que j’utilise ici (copié/collé sauvage) :
001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103
/* !Blockquote */
blockquote {
position: relative;
max-width: 100%;
height: auto;
padding: .5em 0 .5em 1em;
border: 0;
margin: 0 0 1.5em 3em;
font-style: italic;
font-size: inherit;
line-height: inherit;
quotes: none;
}
blockquote:before {
content: "\e60f";
float: left;
margin: .1em 0 0 -1.5em;
opacity: .3;
display: inline-block;
width: 1em;
height: 1em;
font-size: 1.1429em;
line-height: 1.05;
font-family: 'mashicon'; /* Utilisez votre propre police. */
font-weight: 400;
font-size: 1.6em;
font-style: normal;
font-variant: normal;
line-height: .4;
vertical-align: bottom;
text-transform: none;
text-decoration: none;
text-align: center;
text-indent: -.01em;
word-wrap: normal;
-epub-hyphens: manual;
hyphens: manual;
speak: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
blockquote:after {
content: none;
}
blockquote p {
margin: 0;
}
blockquote p + p {
margin-top: 1.5em;
}
/* !Cite */
cite {
position: relative;
font-style: italic;
quotes: "\201C" "\201D" "\2018" "\2019";
}
cite:before,
cite:after {
font-weight: bold;
font-size: 1.6em;
line-height: .4;
vertical-align: bottom;
}
cite:before { content: open-quote; margin-right: .2em; }
cite:after { content: close-quote; margin: 0 .1em; }
blockquote cite {
display: block;
text-align: right;
margin: 1em 3em 0 0;
font-size: .875em;
font-style: italic;
}
blockquote p cite {
margin-top: -.571em;
}
blockquote cite:before {
content: '\2014 ';
font-weight: normal;
line-height: 1;
vertical-align: middle;
}
blockquote cite:after {
content: none;
}
/* !Tweets */
.twitter-tweet {
clear: both;
padding: .5em 1em .5em 3em;
border-left: solid 4px #55acee;
margin-left: 0;
background: #fff;
box-shadow: 0 3px 6px rgba(0,0,0,.1);
}
.twitter-tweet:before {
content: "\e617";
text-indent: .02em;
line-height: 1.1;
opacity: .8;
color: #55acee;
} Résultat :
@BoiteAWeb je sais plus où j'ai lu ça: "Wordpress est un remote shell en PHP, avec comme easter egg dans le code, un blog"
Geoffroy Couprie (@gcouprie) 27 juillet 2012
Dernier point. Les embeds sont mis en cache automatiquement, vous aurez donc besoin de ceci pour supprimer ce cache et voir apparaitre les modification :
010203040506070809101112
if ( ! function_exists( 'sf_delete_oembed_caches' ) ) :
function sf_delete_oembed_caches( $post_ID = 0 ) {
global $wp_embed, $wpdb;
if ( $post_ID ) {
$wp_embed->delete_oembed_caches( $post_ID );
}
else {
$wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key LIKE '_oembed_%'" );
}
}
endif;Nota : même sans enlever le script JavaScript, ces modifications amélioreront l’affichage du tweet pour les lecteurs sans JS et dans les flux RSS.
See ya!
EDIT : on me fait remarquer que Twitter impose des guidelines quant à l’affichage des tweets, donc faites comme vous voulez :°
Commentaires
Commentaire de TweetPress de France @ TweetPress.fr.
Tant que les display requirements de Twitter sont respectés on fait ce que l’on veut. Ici ce n’est pas bon, on a pas les boutons d’action notamment, en la matière la recommendation est d’utiliser les webintents qui s’occuperont de gérer toutes seules la connexion de l’utilisateur pour retweeter, mettre en favori ou répondre.
Commentaire de Grégory Viguier.
Hey :)
Je suis d’accord, il y a tout de même un cas où on ne peut pas : lorsque le visiteur a désactivé javascript. Dans ce cas on retrouve le blockquote brut fourni par Twitter et qui ne contient aucun bouton d’action. Je sais, c’est tiré par les cheveux ;) Perso ça ne me gênerait pas d’avoir ces boutons s’ils sont fournis en HTML.
J’ai trouvé ça sur les Web Intents. Là on aurait en effet les boutons d’action en HTML, mais c’est la même histoire, il faut leur satanée balise script hélas :(
Commentaire de TweetPress de France @ TweetPress.fr.
Tu n’as pas besoin du script il faut juste le bouton d’action et les urls, les icônes peuvent être rajoutées sous forme de police d’icônes ou via des images en bg.
J’ai fait ça dans un plugin j’ai repris leur police.
Commentaire de Grégory Viguier.
Okay, merci pour les précisions, je regarderais tout ça à l’occasion :)