F8EOZ » print http://www.f8eoz.com Informatique - Electronique - Ham radio Thu, 11 May 2017 15:37:43 +0000 fr-FR hourly 1 http://wordpress.org/?v=3.5 Mon blog – Partie 12 – Créer son thème WordPress – Style Print http://www.f8eoz.com/?p=493 http://www.f8eoz.com/?p=493#comments Wed, 07 Dec 2011 11:30:02 +0000 admin http://www.f8eoz.com/?p=493 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 <link>.

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

<!--Lien vers la feuille de style pour impression-->
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />

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 .

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction

]]>
http://www.f8eoz.com/?feed=rss2&p=493 5