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 la mise en page « écran », mais là pour le coup ça peut vraiment devenir long et douloureux!
La dernière chose à faire est de charger cette nouvelle feuille de style. 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" />
A titre d’exemple voici la feuille de style utilisée sur ce site : print.css
Jeu de briques
Snake
Pacman
Bubble
LES COMMENTAIRES (1)
posté le 10 mars à 15:33
en effet, mais c'est sans compter l'affichage des URL en bas de page. À quand le print.js qui parse les ? :)