Votre blog WordPress est-il imprimable?

Imprimer CSS

Alors que je terminais le post d'hier sur ROI des réseaux sociaux, Je voulais en envoyer un aperçu au PDG de Dotster, Clint Page. Quand j'ai imprimé en PDF, cependant, la page était en désordre!

Il y a encore beaucoup de gens qui aiment imprimer des copies d'un site Web pour les partager, les référencer plus tard ou simplement les classer avec quelques notes. J'ai décidé que je voulais rendre mon blog imprimable. C'était beaucoup plus facile que je ne le pensais.

Comment afficher votre version imprimée:

Vous aurez besoin de comprendre les bases de CSS pour accomplir cela. La partie la plus difficile consiste à utiliser la console de développement de votre navigateur pour tester l'affichage, le masquage et l'ajustement du contenu afin que vous puissiez écrire votre CSS. Dans Safari, vous devrez activer les outils de développement, cliquer avec le bouton droit sur votre page et sélectionner Inspecter le contenu. Cela vous montrera l'élément et le CSS associés.

Safari a une jolie petite option pour afficher la version imprimée de votre page dans l'inspecteur Web:

Safari - Vue d'impression dans l'inspecteur Web

Comment rendre votre blog WordPress imprimable:

Il existe plusieurs façons de spécifier votre style pour l'impression. La première consiste simplement à ajouter une section dans votre feuille de style actuelle qui est spécifique au type de support «impression».

@media print {
     header, 
     nav, 
     aside { 
         display: none; 
     }
     #primary { 
         width: 100% !important 
     }
     .hidden-print, 
     .google-auto-placed, 
     .widget_eu_cookie_law_widget { 
         display: none; 
     }
}

L'autre méthode consiste à ajouter une feuille de style spécifique à votre thème enfant qui spécifie les options d'impression. Voici comment:

  1. Téléchargez une feuille de style supplémentaire dans votre répertoire de thèmes appelée imprimer.css.
  2. Ajoutez une référence à la nouvelle feuille de style dans votre functions.php déposer. Vous voudrez vous assurer que votre fichier print.css est chargé après votre feuille de style parent et enfant afin que ses styles soient chargés en dernier. J'ai aussi placé une priorité de 100 sur ce chargement pour qu'il se charge après le plugin Voici à quoi ressemble ma référence :

function theme_enqueue_styles() {
    global $wp_version;
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
    wp_enqueue_style( 'child-style-print', get_stylesheet_directory_uri() . '/print.css', array(), $wp_version, 'print' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' , 100);

Vous pouvez désormais personnaliser le fichier print.css et modifier tous les éléments que vous souhaitez masquer ou afficher différemment. Dans mon site, par exemple, je cache toute la navigation, les en-têtes, les barres latérales et les pieds de page afin que seul le contenu que je souhaite afficher soit imprimé.

My imprimer.css le fichier ressemble à ceci. Notez que j'ai également ajouté des marges, une méthode acceptée par les navigateurs modernes:

header, 
nav, 
aside { 
    display: none; 
}
#primary { 
    width: 100% !important 
}
.hidden-print, 
.google-auto-placed, 
.widget_eu_cookie_law_widget { 
    display: none; 
}

À quoi ressemble la vue d'impression

Voici à quoi ressemble ma vue d'impression si elle est imprimée à partir de Google Chrome:

Vue d'impression WordPress

Style d'impression avancé

Il est important de noter que tous les navigateurs ne sont pas créés égaux. Vous voudrez peut-être tester chaque navigateur pour voir à quoi ressemble votre page à travers eux. Certains prennent même en charge certaines fonctionnalités de page avancées pour ajouter du contenu, définir des marges et des tailles de page, ainsi qu'un certain nombre d'autres éléments. Smashing Magazine a un très article détaillé sur ces impressions avancées options.

Voici quelques détails de mise en page que j'ai intégrés pour ajouter une mention de copyright en bas à gauche, un compteur de pages en bas à droite et le titre du document en haut à gauche de chaque page :

@page { 
    size: 5.5in 8.5in;
    margin: 0.5in; 
}
@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "©  " attr(data-date) " DK New Media, LLC. All Rights Reserved.";
    font-size: 9pt;
    color: #333;
  }

  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }

  @top-right {
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

2 Commentaires

  1. 1
  2. 2

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..