Mon blog – Partie 12 – Créer son thème WordPress – Style Print

admin — Wed, 07 Dec 2011 11:30:02 +0000

Objet
Quand un article m’intéresse ou qu’il est assez long, j’ai pour habitude de l’imprimer soit pour le conserver, soit pour le lire plus tard à tête reposée.
En l’état actuel de notre thème, essayez avec votre navigateur, de voir l’ aperçu d’un article sans l’imprimer. Ce n’est pas très beau! Votre page est encombrée de la barre de navigation, du sidebar, du footer. Même si vous n’ êtes pas un adepte de l’ impression, votre blog est surtout fait pour les autres. Il est important de proposer simplement une version imprimable de l’article. Pourquoi se priver de cette possibilité? Ceci est réalisé avec une feuille de style particulière qui sera dédiée au média print . Théoriquement, les feuilles de style pour l’impression permettent de gérer une mise en page relativement complète mais en pratique pour rester compatible avec tous les navigateurs, nous resterons simple.

Feuille de style print.css
Dans cette feuille de style, nous allons simplement mettre en noir les liens et nous débarrasser de la barre de navigation, du sidebar, du footer, du bloc de recherche, du bloc de saisie d’un commentaire, des commentaires.

Il suffit de partir de style.css . La propriété display:none sert à indiquer la non impression d’une division ou d’une classe. On supprime les parties inutiles. On redéfinit la taille des caractères, si nécessaire. Avec l’éditeur de texte ouvrir un nouveau fichier print.css. Insérer dans ce fichier les lignes suivantes:

body {
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
}

#header {
border-bottom: 1px solid #aaa;
}

a {
background:transparent;
color:black;
text-decoration:none;
}

.search {
display:none;
}

#barredenavig{
display:none;
}

#sidebar {
display:none;
}

#footer {
display:none;
}

.postmetadata, {
clear:both;
font-size:small;
}

.navigation {
display:none;
}

.alignleft {
float: left;
margin: 5px 5px 5px 0;
}

.alignright {
float: right;
margin: 5px 0 5px 5px;
}

/* COMMENTAIRES */
#commentform, #comments .reply {
display:none;
}

#comments h3 {
display:none;
}

#comments div.navigation {
display:none;
}

#comments p,  #comments ol{
display:none;
}

#comments ol{
display:none;
}

#respond{
display:none;
}

Lier la feuile de style à la page
Ceci est réalisé simplement avec la balise .

Avec l’éditeur de texte ouvrir le fichier header.php. Sous la balise du lien à la feuille de style.css, insérer dans ce fichier les lignes suivantes:

Enregistrer les fichier sous /themes/montheme.

Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Faire un aperçu de l’impression. C’est un peu mieux!

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

F8EOZ » print

Mon blog – Partie 12 – Créer son thème WordPress – Style Print