7 octobre 2009
Adieu WP-Print, bonjour la feuille de style print.css
J’ai longtemps utilisé l’excellent plugin WordPress de Lester Chan WP-Print , qui permet de supprimer les éléments indésirables à l’impression (barre de menu, pied de page, etc…). J’avais bien lu dans différentes doc que les feuilles de style CSS permettaient d’arriver au même résultat mais je n’avais pas pris le temps d’approfondir le sujet en me disant que ça allait être long et douloureux.
En fait c’est très simple et les impressions des billets de ce blog fonctionnent maintenant sur ce principe. Voici la marche à suivre :
Tout d’abord il faut créer dans le répertoire du thème une feuille de style print.css qui sera dédiée aux impressions. Ensuite, en reprenant les sections définies dans la feuille de style principale (style.css en général sous WordPress) on définit des instructions de formatage spécifiques à l’impression. Quelques exemples :
Pour exclure le menu latéral de l’impression (#sidebar ici, ça peut aussi être #menu) :
#sidebar { display: none; } |
C’est tout! On procède de la même façon pour tous les éléments à exclure, pour le pied de page ça sera :
#footer { display: none; } |
Certains navigateurs basés sur Gecko ont du mal à imprimer les éléments flottants et les tronquent à la fin de la première page. Le remède est là (on en profite pour redéfinir les marges) :
#content { display: block; width: auto; border: 0; margin: 0 0; padding: 0; float: none !important; } |
Pour supprimer les images et couleurs de l’arrière plan :
body { background: white; } |
Pour ajouter l’URL des liens à la suite de leur libellé :
#content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; font-size: 90%; } |
On peut améliorer à loisir cette feuille de style pour faire une mise en page « papier » aussi soignée que ce qu’on peut faire sur écran. Je n’ai écouté que mon courage, et je me suis arrêté là.
La dernière chose à faire (encore un effort!) est de charger cette nouvelle feuille de style. Avec WordPress, on édite le fichier header.php du thème et on ajoute la ligne suivante dans la section <head> :
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('stylesheet_directory'); ?>;/print.css" />; |
Voici le fichier print.css que j’utilise ici. Il est très basique mais si ça peut servir…
merci pour cet article qui m’a bien aidé!