Une bonne utilisation des feuilles de styles

Imprimante
J’imprime parfois un article pour en conserver une trace “papier”, j’utilise souvent un “aperçu avant impression” pour sélectionner les pages souhaitées et trop souvent je constate que 50% de l’impression est occupée par des menus ou des publicités.

Quand on crée le design d’un site on prévoit souvent une zone menu, un espace publicité et parfois d’autres zones spécifiques qui permettent d’améliorer le look et l’ergonomie du site. Ces zones d’agréments utiles pour la navigation deviennent une gène lors de l’impression de l’article. Pourtant il est très simple de traiter ce problème si vous utilisez les feuilles de styles CSS.

Dans un souhait “écologique” (c’est très tendance) mais également pour avoir un texte imprimer plus “propre”, je vais vous expliquer comment adapter votre thème WP pour imprimer correctement.

Structure ecran d'un site
Structure ecran d'un site

Les modifications pour Wordpress

Wordpress, comme presque l’ensemble des moteurs de blog ou CMS, utilise les feuilles de styles pour faciliter l’adaptation de la présentation. Il est donc relativement simple d’adapter son thème si celui-ci ne prévoit pas cela. Dans mon cas l’adaptation m’a pris moins d’une heure. Je vous présente ci-dessous la liste des modifications à apporter.

  • print.css : création de la feuille de style spécifique à l’impression - C’est une version minimum je n’utilise que l’ID NoPrint que je cache à l’impression, il est possible d’enrichir cela pour modifier les marges, l ataille de la police, et bien d’autre chose.

    * #NoPrint {
    display: none;
    }

  • header.php : Ajout de la feuille de styles pour le media “imprimante”

    <link rel=”stylesheet” type=”text/css” media=”print” href=”<?php bloginfo(’template_url’); ?>/print.css” />

  • index.php, page.php, … : Modification de plusieurs pages dans le thème pour ajouter un - id=”NoPrint” - aux éléments que je ne désire pas imprimer.

Téléchargement

Je vous propose en téléchargement la dernière version du thème Rbl-Illacrimo incluant le support de l’impression.

Rbl - Illacrimo - Français

Rbl - Illacrimo - English