Rendre une section imprimable sur un site WordPress peut sembler un détail, mais c’est une fonctionnalité précieuse pour de nombreux utilisateurs. Imaginez un visiteur qui souhaite conserver une recette, une facture ou un article sous forme papier. Une section bien conçue, dédiée à l’impression, améliore non seulement la praticité du site, mais renforce également la satisfaction des utilisateurs.
Que vous gériez un blog, un site de commerce en ligne ou une plateforme éducative, proposer du contenu imprimable peut être un réel atout. Cela montre votre souci du détail et peut même jouer en faveur de votre référencement, car un site intuitif et utile est mieux perçu par les moteurs de recherche.
Avantages pour vos lecteurs et votre site
- Praticité pour les utilisateurs : Permettre l’impression de contenu réduit les frictions et augmente l’accessibilité.
- Professionnalisme : Une section dédiée à l’impression bien stylée montre que votre site est conçu pour répondre aux besoins variés de vos visiteurs.
- Adaptation aux besoins modernes : Bien que le numérique domine, des utilisateurs préfèrent encore des supports imprimés pour des tâches précises comme la prise de notes ou les présentations.
Dans ce tutoriel, nous explorerons différentes méthodes pour créer une section imprimable sur WordPress, de l’utilisation de CSS personnalisé à l’intégration avec des outils comme Elementor et des plugins spécialisés.
Préparation : Ce dont vous avez besoin
Avant de plonger dans la création d’une section imprimable sur WordPress, il est important de bien se préparer. Ce chapitre couvre les étapes préliminaires essentielles pour garantir une mise en œuvre fluide et efficace.
Identifier le contenu à rendre imprimable
Tout d’abord, réfléchissez à la partie du contenu que vos utilisateurs pourraient vouloir imprimer. Quelques exemples :
- Recettes de cuisine : Les visiteurs pourraient vouloir les imprimer pour les consulter hors ligne.
- Factures ou confirmations d’achat : Un must pour les sites e-commerce.
- Guides ou tutoriels : Les informations longues bénéficient souvent d’un format imprimable.
- Cartes et horaires : Pour les sites d’événements ou d’organisations locales.
Assurez-vous que le contenu sélectionné est bien structuré et qu’il reste lisible en version papier. Évitez les sections inutiles comme les menus, les publicités ou les widgets.
Choisissez le bon plugin
Bien qu’il soit possible de tout personnaliser avec du CSS, certains plugins WordPress peuvent simplifier considérablement le processus (voir ci-dessous).
Plugins recommandés pour créer des sections imprimables
Si vous souhaitez ajouter une fonctionnalité d’impression à votre site WordPress sans vous plonger dans le code, plusieurs plugins peuvent répondre à vos besoins. Ces outils simplifient la mise en œuvre tout en offrant une grande flexibilité. Voici les options les plus populaires :
Print Page Block
Print Page Block est une solution simple, gratuite et efficace pour intégrer une fonctionnalité d’impression directement dans les pages de votre site WordPress, spécialement conçu pour les utilisateurs de l’éditeur Gutenberg. Ce plugin est parfait pour les administrateurs qui recherchent une méthode minimaliste sans se plonger dans des configurations complexes ou du codage manuel.
Caractéristiques principales
- Bloc Gutenberg dédié
- Print Page Block ajoute un bloc spécifique dans l’éditeur Gutenberg, ce qui rend son utilisation intuitive.
- Aucun besoin de shortcodes ou de manipulations HTML : le bouton d’impression est inséré directement via un glisser-déposer dans la mise en page.
- Contrôle précis de l’impression
- Vous pouvez spécifier quelles sections ou éléments de la page seront imprimés.
- Le plugin s’appuie sur des règles CSS pour exclure automatiquement des sections comme les menus, les publicités ou les widgets, si vous le souhaitez.
- Personnalisation du bouton d’impression
- Modifiez facilement l’apparence du bouton via l’interface Gutenberg : couleurs, texte, style des bordures, etc.
- Ajoutez un libellé personnalisé pour guider vos utilisateurs (exemple : “Imprimer cet article”).
- Compatibilité totale avec Gutenberg
- Intégration fluide avec l’éditeur natif de WordPress.
- Aucune dépendance à des frameworks tiers ou à des thèmes spécifiques, garantissant une compatibilité universelle.
- Prise en charge multi-pages
- Idéal pour les sites qui génèrent des pages longues ou structurées en plusieurs sections.
- Permet d’imprimer une page entière ou des segments spécifiques, en fonction des besoins.
Print-O-Matic
Print-O-Matic est l’un des plugins les plus populaires pour ajouter une fonctionnalité d’impression ciblée sur WordPress. Il est particulièrement apprécié pour sa simplicité et sa flexibilité, permettant d’imprimer des sections spécifiques d’une page sans perturber le reste du contenu. Ce plugin est disponible en version gratuite, offrant déjà un large éventail de fonctionnalités, avec une option premium pour des options avancées.
Caractéristiques principales
- Ajout de boutons d’impression personnalisés : Grâce à des shortcodes simples, vous pouvez insérer un bouton d’impression n’importe où sur votre site.
- Contrôle précis du contenu imprimé : Vous pouvez cibler une section spécifique à imprimer tout en excluant des éléments inutiles, comme les menus ou publicités.
- Personnalisation avec CSS : Print-O-Matic permet d’utiliser des styles CSS personnalisés pour garantir un rendu imprimé esthétique et lisible.
- Facilité d’utilisation : Même pour les utilisateurs ayant peu d’expérience technique, ce plugin offre une configuration intuitive.
La version gratuite de Print-O-Matic offre toutes les fonctionnalités essentielles pour ajouter un bouton d’impression et gérer efficacement les sections imprimables sur votre site. Pour accéder à des options plus avancées, telles que des outils de personnalisation approfondis ou des fonctionnalités supplémentaires destinées aux développeurs, une version premium est également disponible.
Créer un bouton d’impression réutilisable sans plugin grâce à un shortcode
Si vous ne souhaitez pas utiliser de plugin pour ajouter une fonctionnalité d’impression sur votre site WordPress, il est possible de créer un shortcode personnalisé. Ce shortcode permet d’afficher un bouton ou un lien d’impression ciblant une section précise du contenu.
L’avantage de cette méthode est qu’elle est légère, réutilisable et entièrement personnalisable avec un peu de CSS et JavaScript. Une fois configuré, vous pourrez insérer ce bouton partout sur votre site sans effort, simplement en ajoutant le shortcode dans vos pages, articles ou widgets.
Créer une fonction réutilisable pour imprimer des sections
La première étape consiste à créer une fonction dans WordPress qui générera automatiquement le bouton d’impression pour vos sections ciblées. Cette fonction sera placée dans le fichier functions.php de votre thème enfant.
Le fichier functions.php est une partie essentielle de votre thème WordPress : il permet d’ajouter du code personnalisé pour étendre les fonctionnalités de votre site.
Localiser le fichier functions.php
- Avec le tableau de bord WordPress :
- Allez dans Apparence > Éditeur de fichiers des thème.
- Dans la liste des fichiers à droite, sélectionnez
functions.phpde votre thème enfant.
- Via FTP ou un gestionnaire de fichiers :
- Connectez-vous à votre serveur avec un client FTP (comme FileZilla) ou via cPanel > Gestionnaire de fichiers.
- Accédez au chemin suivant :
wp-content/themes/nom-de-votre-theme-enfant/ - Ouvrez le fichier
functions.phpavec un éditeur de texte (comme Notepad++ ou Sublime text).
Placer le code dans le fichier functions.php
Ajoutez le code à la fin du fichier functions.php, juste après la dernière ligne de code existante. Assurez-vous de ne pas supprimer ou modifier accidentellement d’autres parties du fichier.
Le code à copier-coller.
// Fonction pour imprimer une section ciblée
function bouton_impression_section($atts, $content = null) {
// Définir un identifiant unique
$id_unique = uniqid('section-imprimable-');
// Retourner la section + bouton d'impression
return '
<div id="' . $id_unique . '">' . do_shortcode($content) . '</div>
<button onclick="imprimerSection(\'' . $id_unique . '\');" class="print-button">Imprimer cette section</button>
';
}
add_shortcode('section_imprimable', 'bouton_impression_section');
Ajouter la fonction JavaScript pour gérer l’impression
La prochaine étape consiste à ajouter la fonction JavaScript pour gérer l’impression. Pour cela, rendez-vous dans Apparence > Éditeur de fichiers de thème ou utilisez votre client FTP pour localiser le fichier footer.php. Une fois le fichier ouvert, copiez et collez le code suivant à la fin du fichier :
Le code à copier-coller.
<script>
function imprimerSection(id) {
var contenu = document.getElementById(id).innerHTML; // Récupérer la section cible
var original = document.body.innerHTML;
document.body.innerHTML = contenu; // Remplacer temporairement le contenu
window.print(); // Ouvrir la boîte d'impression
document.body.innerHTML = original; // Restaurer le contenu original
}
</script>
Styliser la version imprimée avec du CSS
Pour que seule la section souhaitée apparaisse correctement lors de l’impression, il est nécessaire d’ajouter du code CSS dédié. Voici comment procéder :
Depuis le tableau de bord WordPress : allez dans Apparence > Personnaliser.
Ensuite, il faut localiser la section dédiée à l’ajout de CSS. Le nom de cette section peut varier selon le thème utilisé, mais il reste généralement explicite, comme Custom CSS/JS ou CSS additionnel.
Le code à copier-coller.
@media print {
body * {
visibility: hidden; /* Masque tout le contenu */
}
.print-button {
display: none; /* Cache le bouton d'impression */
}
[id^="section-imprimable-"], [id^="section-imprimable-"] * {
visibility: visible; /* Affiche uniquement la section cible */
}
[id^="section-imprimable-"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
Explications :
@media print: Cette règle s’applique uniquement lors de l’impression.visibility: hidden: Cache tous les éléments de la page.[id^="section-imprimable-"]: Rend uniquement la section avec un identifiant commençant parsection-imprimable-visible lors de l’impression.display: none: Cache le bouton d’impression pour éviter qu’il apparaisse sur la version papier.
Comment styliser le bouton d’impression
Pour améliorer l’apparence de votre bouton d’impression et l’intégrer harmonieusement au design de votre site WordPress, vous pouvez utiliser des styles CSS personnalisés. Voici une démarche simple et efficace pour styliser le bouton.
Depuis le tableau de bord WordPress : allez dans Apparence > Personnaliser > Custom CSS/JS ou CSS additionnel.
/* Style général du bouton d'impression */
.print-button {
background-color: #0073aa; /* Couleur de fond */
color: #ffffff; /* Couleur du texte */
border: none; /* Supprime la bordure par défaut */
padding: 10px 15px; /* Espacement intérieur */
border-radius: 5px; /* Coins arrondis */
font-size: 16px; /* Taille de la police */
cursor: pointer; /* Curseur en main pour indiquer un bouton cliquable */
text-transform: uppercase; /* Texte en majuscules */
font-weight: bold; /* Texte en gras */
transition: background-color 0.3s ease; /* Animation au survol */
}
/* Effet au survol */
.print-button:hover {
background-color: #005177; /* Changement de couleur de fond */
color: #ffffff; /* Couleur du texte reste identique */
}
/* Style pour les appareils mobiles */
@media (max-width: 768px) {
.print-button {
width: 100%; /* Bouton plein écran sur mobile */
font-size: 14px; /* Taille réduite pour mobile */
}
}
- Prévisualisez votre site pour vérifier le rendu du bouton.
- Ajustez les valeurs (couleurs, polices, tailles) pour les adapter au design global de votre site.
Comment utiliser le shortcode dans vos articles ou pages avec l'éditeur WordPress
Maintenant que votre shortcode [section_imprimable] est créé, voici comment l’insérer à l’aide de l’éditeur WordPress pour ajouter une section imprimable à vos pages ou articles.
- Ouvrez l’éditeur de votre page ou article.
- Ajoutez un bloc en cliquant sur le bouton “+” pour insérer un élément.
- Recherchez et ajoutez le bloc “Shortcode”.
Le contenu que vous souhaitez rendre imprimable doit être placé entre les balises du shortcode [section_imprimable] et [/section_imprimable].
Exemple :
[section_imprimable]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel augue sed eros condimentum dictum suscipit id enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus varius sem vitae magna lacinia bibendum. Quisque suscipit, dui sed lacinia molestie, lectus elit convallis diam, at pulvinar lectus justo et ipsum. Vestibulum tincidunt nulla purus, suscipit elementum urna congue a. Vivamus elementum enim eget enim fringilla, vitae ultrices tortor convallis. In hac habitasse platea dictumst. Quisque dapibus nulla ut urna molestie, rhoncus aliquam velit interdum.
Suspendisse varius nec neque vel accumsan. Praesent ut posuere lacus, eu euismod augue. Donec lorem mauris, mollis et ornare at, pulvinar in orci. Cras tristique ex diam. Proin ornare a ante id interdum. Etiam nunc mi, sagittis at mauris et, fringilla consequat ligula. Praesent ac ultricies nulla. Maecenas viverra pulvinar neque eget volutpat. Morbi sit amet consequat arcu. Donec ultricies id nisi a vulputate. Suspendisse vulputate nisl ut tempus pretium.
[/section_imprimable]
Comment utiliser le shortcode dans vos articles ou pages avec Elementor
Elementor est un constructeur de pages puissant et intuitif qui permet de concevoir des pages WordPress sans écrire de code. Si vous souhaitez ajouter une section imprimable sur une page ou un article conçu avec Elementor, vous pouvez utiliser le shortcode [section_imprimable]...[/section_imprimable] de manière simple et efficace.
- Ouvrez votre page avec Elementor :
- Depuis le tableau de bord WordPress, allez dans Pages > Modifier avec Elementor.
- Ajoutez un widget « Shortcode » :
- Dans le panneau de widgets d’Elementor, recherchez “Shortcode”.
- Faites glisser le widget Shortcode à l’endroit où vous souhaitez afficher le contenu imprimable.
- Dans le champ dédié au shortcode, collez les balises correspondantes et ajoutez votre contenu entre ces balises de la même manière que dans l’éditeur WordPress.
Conclusion
En suivant ces étapes, vous avez désormais une fonction réutilisable qui permet d’ajouter facilement un bouton d’impression sur votre site WordPress. Grâce au shortcode [section_imprimable], il est possible de cibler n’importe quelle section de contenu et de la rendre imprimable, tout en gardant un contrôle total sur son style et son apparence.
Cependant, si vous préférez une solution sans code ou plus rapide à mettre en place, vous pouvez opter pour des plugins spécialisés :
- Print Page Block : Ce plugin est simple d’utilisation et parfaitement intégré à l’éditeur de blocs Gutenberg, permettant d’ajouter des boutons d’impression directement via des blocs préconfigurés.
- Print-O-Matic : Idéal pour des besoins plus avancés, il offre une grande flexibilité avec des shortcodes, le ciblage de sections précises et des options de personnalisation CSS.
Ces plugins offrent une solution idéale pour ceux qui préfèrent éviter le code ou qui recherchent une méthode simple et rapide pour ajouter des boutons d’impression. Grâce à ce guide, vous pourrez mettre en place une fonctionnalité d’impression optimisée et professionnelle sur votre site WordPress.
