Si vous avez un blog et que vous publiez des tutoriels, des nouvelles, des recettes ou quoi que ce soit d’autre présentant un intérêt d’être sur papier, avez-vous déjà penser au fait que certains de vos lecteurs aimeraient peut-être imprimer quelques-uns de vos articles ?
Il y a encore quelques jours, si vous vouliez imprimer un article de Blog Tool Box, vous imprimiez exactement la même chose que ce que vous voyez à l’écran… C’est à dire le fond marron, les couleurs, le design complet, la colonne, le bas du blog, etc, ce qui n’est pas du tout intéressant à imprimer et impossible à relire sur papier (et consomme une cartouche d’encre couleur par article).
Je viens donc d’ajouter une feuille de style print.css destinée uniquement à l’impression et qui supprime les zones inutiles, la couleur, etc. Dorénavant, si vous imprimez un article, vous obtiendrez ceci :
Les zones inintéressantes à imprimer sont supprimées à l’aide de la propriété CSS display: none;, ici je supprime la colonne lors de l’impression :
#sidebar { display: none; }
Lorsque vous imprimez une page web, les liens hypertextes sont perdus car non visibles, mais il existe une solution en CSS qui permet d’afficher l’url complète après un lien :
#content a[href]:after { content: " (" attr(href) ")"; }
Après avoir réalisé le fichier print.css, il suffit de l’uploader dans le dossier de son thème puis d’inclure la ligne suivante dans le fichier header.php (en tête) :
<link rel="stylesheet" href="/wp-content/themes/nom_du_theme/print.css" media="print" type="text/css"/>
Vous pouvez voir un aperçu d’impression en faisant Fichier > Aperçu avant impression dans votre navigateur web.
Sympa l’affichage des liens ! Je ne savais pas du tout que cela était possible ! Je note, ça me servira.
effectivement, c’est une excellente idée (surtout pour les tutos).
Bizarre que ça soit pas implémenté d’origine dans WordPress !
Oui c’est vrai qu’il est très rare de trouver des thèmes WordPress qui intègrent aussi une feuille de style print.css, surtout que cela n’est pas très compliqué et prend quelques minutes à faire… même les deux thèmes par défaut de WordPress n’en possèdent pas :)
Merci pour cette astuce, c’est compatible avec IE 6 et avec les versions inférieurs ?
Bonne continuation.
Je suis en train de monter un blog et je trouve très intéressant l’idée d’un fichier print.css, malheureusement je voulais regarder le tiens que tu proposes de visualiser pour donner une idée, mais il n’est pas disponible :(
@Vladyk : Désolé ! Depuis cet article, j’ai recodé un nouveau thème et je n’ai pas pris le temps de refaire un fichier print.css
Mais ce n’était qu’une simple succession de display: none pour masquer des sections et de suppression de background/noir & blanc pour d’autres et pour certaines choses des changements de tailles.
Pas de problème, je devrais pouvoir m’en sortir sans ce fichier je crois ;)
En passant fort intéressant ton blog, j’y ai fait pas mal le tour depuis 2 jours pour monter mon futur blog.