Share
L'ajout d'une feuille de style d'impression sur votre site Wordpress est un choix judicieux. L’environnement vous remerciera d’appliquer cet article à votre site Web. C'est une fonctionnalité si simple à mettre en œuvre et la plupart des gens l'ignorent. Je vais vous montrer à quel point il est facile d’ajouter une simple feuille de style d’impression à votre site Wordpress. Je vais vous donner immédiatement une bonne base que vous pouvez utiliser sur votre site et vous montrer quelques astuces pour que vous puissiez passer au niveau supérieur..
Vous devrez mettre à jour le fichier header.php de votre thème pour lui faire savoir que la feuille de style que nous mettrons à jour sera également utilisée pour l'impression. Ouvrez header.php, recherchez:
Nous devons mettre à jour l'attribut média pour inclure l'impression. L’écran indique au navigateur "C’est la feuille de style que vous devez utiliser pour savoir comment afficher les éléments dans le navigateur". Nous devons lui dire "Vous pouvez également utiliser cette feuille de style lorsque l'utilisateur est en train d'imprimer". Alors maintenant, il ressemble à:
Ensuite, ouvrez votre feuille de style, style.css. A la fin du document, ajoutez:
@import "print.css";
Il est essentiel que le code se trouve au bas de la feuille de style pour vous assurer que vos styles d'écran n'héritent pas des styles que nous utilisons pour l'impression et que les styles d'impression ne seront pas remplacés par les styles de votre site. Ensuite, créez un fichier dans le même répertoire sous le nom print.css. C'est là que nous allons ajouter tout notre style pour l'impression.
Vous trouverez ci-dessous une version modifiée du style d’impression du thème par défaut "TwentyTen" de Wordpress. De nombreux sites Web partagent ces mêmes éléments, il n'est donc pas nécessaire de réinventer la roue pour en développer un. Ce que je vais faire, c'est décomposer les éléments clés afin que vous sachiez pourquoi ils ont été inclus et quels styles vous devriez rechercher pour les ajouter à vos propres éléments personnalisés..
@media print body background: #fff none! important; couleur: # 000; #wrapper clear: both! important; display: block! important; float: aucun! important; position: relative! importante; #header border-bottom: 2pt solid # 000; rembourrage en bas: 18 pt; #colophon border-top: 2pt solid # 000; # site-title, # site-description float: none; hauteur de ligne: 1.4em; marge: 0; rembourrage: 0; # site-title font-size: 13pt; .entry-content font-size: 14pt; hauteur de ligne: 1.6em; .entry-title font-size: 21pt; #access, #branding img, #respond, .comment-edit-link, .edit-link, .navigation, .page-link, .widget-area display: none! important; #container, #header, #footer margin: 0; largeur: 100%; #content, .one-column #content margin: 24pt 0 0; largeur: 100%; .wp-caption p font-size: 11pt; # site-info, # site-generator float: none; largeur: auto; #colophon width: auto; img # wpstats display: none; # générateur de site a margin: 0; rembourrage: 0; # entry-author-info border: 1px solid # e7e7e7; #main display: inline; .home .sticky border: none;
Tout d’abord, vous remarquerez comment tous vos styles d’impression sont placés à l’intérieur:
@media print
Tous les objets correspondant à la fonctionnalité d'impression sont mis en forme entre ces crochets. Si vous ajoutez un style, assurez-vous qu’il se trouve entre ces crochets. Si c'est à l'extérieur, CSS n'en saura rien et supposera que cela fait partie du média d'écran.
body background: #fff none! important; couleur: # 000;
C'est l'un des éléments clés pour créer un style d'impression. En règle générale, tout ce qui est facile à imprimer ne devrait pas avoir de fond, et tous les coloris devraient être en noir et blanc.
#wrapper clear: both! important; display: block! important; float: aucun! important; position: relative! importante;
Ce sont des styles de base qui veillent à ce que tout apparaisse les uns sur les autres. Si vous la désactivez, tous les éléments de #wrapper seront inclus dans l'élément précédent, et tout ce qui suivra tombera après l'emballage, afin que les éléments ne soient pas placés côte à côte. Il ne devrait pas y avoir de flottant et la position devrait rester relative. Cela permettra de s’assurer que le contenu se lit de gauche à droite et qu’aucun objet ne se chevauchera; ce sera un document fluide.
#header border-bottom: 2pt solid # 000; rembourrage en bas: 18 pt;
Vous remarquerez quelques propriétés qui stylisent l'élément dans la feuille de style d'impression. Ce sont absolument acceptables. Bien souvent, la couleur sépare les éléments d'un dessin. Puisque tout est en noir et blanc, c'est difficile à faire. Donc, des choses comme ajouter une bordure noire au bas d'un élément et ajouter un peu d'espace en dessous aideront à les séparer clairement.
.entry-content taille de la police: 14 pt; hauteur de ligne: 1.6em; .entry-title font-size: 21pt;
C'est une bonne idée de considérer la taille du texte que vous imprimez. La taille que vous voyez à l'écran par rapport à ce que les yeux sont capables de lire est très différente. Considérez une taille de police plus petite, 14 points suffisent, à mon avis. Je peux même envisager de devenir plus petit que cela. Avoir une hauteur de ligne qui facilite le flux de contenu est également très utile. Veillez à laisser un peu d'espace entre vos lignes pour que le texte imprimé ne soit pas illisible. De plus, donner aux titres une taille de police plus grande aidera à les distinguer du contenu..
#access, #branding img, #respond, .comment-edit-link, .edit-link, .navigation, .page-link, .widget-area display: none! important;
Ce sera l'un de vos attributs d'élément les plus utilisés. 'display: none' va masquer complètement l'élément. La page imprimée traitera celle-ci comme si elle n’était même pas au début. Ainsi, si vous masquez toutes vos images, elles ne montreront pas d’espace vide à leur emplacement habituel. l'élément sera complètement retiré de la mise en page et le prochain contenu disponible sera rendu. J'utilise beaucoup cela pour les éléments inutiles à inclure dans mon impression, comme les images, la navigation et les barres latérales.
#container, #header, #footer margin: 0; largeur: 100%;
Cet élément veille à ce que tous vos éléments recouvrant le contenu de la page aient une largeur de 100%, de sorte qu'ils occupent toute la marge disponible du document imprimé. Parfois, les concepteurs définissent une largeur de 900 pixels ou une largeur équivalente, ce qui ne permet qu'une impression dans une zone de 900 pixels..
#content, .one-column #content margin: 24pt 0 0; largeur: 100%;
Dans la feuille de style d'écran, ce serait la partie gauche du contenu. Il aurait une barre latérale à sa droite. Vous remarquerez maintenant qu’il n’a plus de largeur limitée à cet espace, il utilisera toute la marge disponible sur le document imprimé. Il a une largeur de 100% et la barre latérale ne pourra plus être ajustée à côté. En fait, la barre latérale devrait avoir un affichage: aucun quelque part dans la feuille de style d'impression. Il y a aussi un attribut de marge qui le séparera du contenu qui l'entoure afin qu'il se démarque.
img # wpstats display: none;
C'est un excellent exemple de masquage d'images portant l'ID "wpstats". Vous pouvez créer votre propre classe appelée hideInPrint à ajouter aux images que vous souhaitez supprimer lors de l'impression. Le code pour cela ressemblerait à ceci:
img.hideInPrint display: none;
Cet article n’est qu’une base - vous pouvez évidemment y ajouter vos propres styles de marque afin de créer un style d’impression personnalisé. Nous vous avons montré ici les éléments à garder à l’esprit lors de l’implémentation d’une feuille de style d’impression dans votre propre projet. Le reste du style sera à vous dans votre propre projet! Connaître la pensée derrière "pourquoi" certains attributs ont été utilisés, vous aidera à comprendre ce dont votre projet aura besoin.
Accentsconagua