Comment personnaliser le style des guillemets dans les thèmes WordPress

Vous cherchez un moyen de personnaliser le style des guillemets dans les thèmes WordPress ?

Les citations constituent souvent la partie la plus mémorable de votre article. Elles sont également la partie la plus partagée d’une publication ou d’une page de blog. C’est pourquoi les journaux et les sites de médias grand public personnalisent leur style de citation en bloc afin de se démarquer.

Dans cet article, nous allons vous afficher comment personnaliser facilement le style des blockquotes dans les thèmes WordPress.

Pourquoi utiliser et personnaliser le style des guillemets dans WordPress ?

L’utilisation de guillemets dans votre contenu peut améliorer l’expérience utilisateur sur votre site WordPress. Vous pouvez les utiliser pour qu’une section de texte sélectionnée se démarque du reste du contenu et attire l’attention de vos lecteurs.

Par exemple, vous pouvez utiliser des guillemets pour des citations d’auteurs/autrices et d’influenceurs, des citations de publications, des témoignages de vos clients/clientes, ou mettre en avant des informations précieuses pour les internautes de votre blog WordPress.

Un autre avantage de l’utilisation des guillemets est qu’ils peuvent accroître l’engagement social. En permettant aux utilisateurs de partager une citation sur Twitter ou Facebook, vous pouvez vous aider à obtenir plus d’abonnés et à améliorer la visibilité de votre marque sur les réseaux sociaux.

Par défaut, WordPress propose un bloc Citation dans l’éditeur de contenu. Pour l’ajouter, il suffit de se rendre dans l’éditeur WordPress et d’insérer le bloc Citation à l’endroit voulu dans le contenu.

Cependant, le bloc de citation par défaut n’offre pas beaucoup d’options de personnalisation. Vous pouvez uniquement modifier la taille du texte et choisir parmi les styles par défaut de WordPress.

Cela dit, voyons comment personnaliser le style des blockquotes dans les thèmes WordPress. Nous allons vous afficher comment modifier le style des blockquotes à l’aide d’une extension WordPress et également à l’aide d’un CSS personnalisé :

Méthode 1 : Personnaliser le style des guillemets à l’aide d’une extension

Un moyen facile de personnaliser les blockquotes sur votre site WordPress est d’utiliser une extension comme Spectra – WordPress Gutenberg Blocks. C’est une extension WordPress gratuite qui ajoute des blocs supplémentaires dans l’éditeur de contenu de WordPress, y compris des blockquotes personnalisables.

Tout d’abord, vous devrez installer et activer l’extension Spectra – WordPress Gutenberg Blocks. Pour plus de détails, veuillez consulter notre guide étape par étape sur l’installation d’un plugin WordPress.

Une fois activée, visitez la page Spectra  » Blocks dans la colonne latérale de l’administrateur WordPress.

Consultez cette page, vous verrez que l’extension a activé tous les blocs supplémentaires, y compris le bloc Blockquote par défaut.

À partir de là, vous pouvez désactiver tous les blocs inutiles en permutant le commutateur situé à côté de ces options.

Ensuite, ouvrez une page ou une publication de votre choix dans l’éditeur de blocs.

Ensuite, cliquez sur le bouton  » +  » dans le coin supérieur gauche de l’écran pour ajouter le bloc Blockquote n’importe où dans votre contenu.

Vous pouvez ensuite saisir le texte dans la zone de guillemets.

Une fois que vous avez fait cela, vous pouvez configurer la mise en page de Blockquote à partir du panneau de droite.

À partir de là, vous pouvez choisir l’option « Bordure » pour une mise en page simple et l’option « Citation » si vous souhaitez ajouter des guillemets, sélectionner l’alignement du texte, etc.

Vous pouvez également ajouter une image de l’auteur/autrice pour donner plus de style à votre bloc Blockquote.

Ensuite, passez à l’onglet « Style » dans le panneau du bloc pour modifier la taille de l’icône de la citation, la taille de l’arrière-plan, etc.

Vous pouvez également modifier la couleur des citations, la typographie, la couleur de l’auteur/autrice et l’espacement de votre bloc à partir de cet onglet.

Enfin, cliquez sur le bouton « Publier » ou « Mettre à jour » en haut de la page pour stocker vos réglages.

Vous pouvez maintenant vous rendre sur votre blog WordPress pour voir le bloc Blockquote en action.

Méthode 2 : Ajouter un CSS personnalisé pour personnaliser le style des guillemets à l’aide de WPCode

Si vous ne souhaitez pas utiliser une extension WordPress, l’ajout d’un CSS personnalisé est un autre moyen de personnaliser votre blockquote.

Le moyen le plus simple d’ajouter du code CSS personnalisé à votre site est le plugin WPCode, qui est la meilleure extension d’extraits de code du marché.

Tout d’abord, vous devez installer et activer l’extension WPCode. Pour des instructions détaillées, vous pouvez consulter notre guide du débutant sur l’installation d’une extension WordPress.

Une fois activé, visitez la page Code Snippets  » + Add Snippet  » depuis la colonne latérale de l’administration de WordPress.

Cliquez ensuite sur le bouton « Utiliser l’extrait » sous l’option « Ajouter votre code personnalisé (nouvel extrait) ».

Vous accédez alors à la page « Créer un extrait personnalisé », où vous pouvez commencer par saisir un nom pour votre extrait de code.

Ensuite, sélectionnez « extrait CSS » comme type de code dans le menu déroulant situé dans le coin droit de l’écran.

Ensuite, vous pouvez saisir l’un des extraits de code CSS personnalisés suivants dans le champ « Prévisualisation du code » pour modifier l’aspect et le style de l’apostrophe.

Gardez à l’esprit que ces Réglages modifieront l’apparence du bloc « Citation » par défaut dans WordPress.

Voici quelques styles de guillemets que vous pouvez utiliser sur votre site.

1. Blockquote CSS classique

Habituellement, les gens utilisent CSS background-image pour ajouter des guillemets de grande taille dans les guillemets. Dans cet exemple, nous avons utilisé CSS pour ajouter de grands guillemets.

blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 450px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	background:#ececec;
}

blockquote:before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "\2014 \2009";
}

2. Blockquote classique avec image

Dans cet exemple, nous avons utilisé une image d’arrière-plan pour les guillemets.

blockquote {
	font: 16px italic Georgia, serif;
	width:450px;
	padding-left: 70px;
	padding-top: 18px;
	padding-bottom: 18px;
	padding-right: 10px;
	background-color: #dadada;
	border-top: 1px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin: 5px;
	background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
	background-position: middle left;
	background-repeat: no-repeat;
	text-indent: 23px;
} 

blockquote cite {
	color: #a1a1a1;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "\2014 \2009";
}

3. Blockquote simple

Dans cet exemple, nous avons ajouté une couleur d’arrière-plan et une bordure gauche en pointillés à la place des guillemets. N’hésitez pas à jouer avec les couleurs.

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

4. Blockquote blanc, bleu et orange

Les guillemets peuvent être mis en valeur, et ils peuvent être aussi colorés que vous le souhaitez.

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

5. Utilisation des polices Google Web Fonts pour les guillemets en CSS

Dans cet exemple CSS de blockquote, nous avons utilisé la police Droid Serif de la bibliothèque de polices web de Google.

Vous pouvez utiliser n’importe quelle police personnalisée. Remplacez simplement la police dans le code par la famille de polices que vous souhaitez utiliser.

blockquote {
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
}
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

6. Bloc de citation à angle droit

Dans cet exemple, nous avons une citation en bloc avec des coins arrondis, et nous avons utilisé l’Ombre portée pour les bordures.

blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

7. Utilisation d’un dégradé comme arrière-plan d’un bloc-citation

Dans cet exemple de blockquote CSS, nous avons utilisé le dégradé CSS pour améliorer l’arrière-plan d’un blockquote.

Les dégradés CSS sont délicats en raison de la compatibilité entre les navigateurs. Nous recommandons d’utiliser un générateur de dégradés CSS, comme CSS Gradient.

blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

8. Blockquote avec composition arrière-plan

Pour cet exemple, nous avons utilisé une image d’arrière-plan comme composition pour le blockquote.

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

Note : Vous devrez remplacer l’URL de l’image d’arrière-plan dans le code CSS par l’URL de l’image que vous avez téléversée sur votre site WordPress.

9. Utilisation de plusieurs images dans l’arrière-plan d’un bloc-texte

Vous pouvez utiliser plusieurs images dans l’arrière-plan de la note de bas de page à l’aide de CSS. Par exemple, nous avons utilisé le pseudo-élément blockquote :before pour ajouter une autre image d’arrière-plan au blockquote.

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "\2014 \2009";
}

Note : Vous devrez remplacer les URL des images d’arrière-plan dans le code CSS par les images que vous avez téléversées sur votre site.

Ajoutez le code et enregistrez votre extrait

Une fois que vous avez choisi un style de guillemet et ajouté son code CSS dans la boîte « Prévisualisation du code », défilez vers le bas jusqu’à la section « Insertion ».

Sélectionnez ensuite le mode « Insertion automatique » pour que le code modifie automatiquement l’apparence du bloc de citation lorsqu’il est activé.

Enfin, défilez vers le haut de la page pour permuter le commutateur « Inactif » en « Actif ».

Cliquez ensuite sur le bouton « Enregistrer l’extrait » pour stocker vos réglages.

Vous pouvez désormais insérer un bloc de citation dans une page ou une publication WordPress.

Ensuite, vous pouvez visiter votre site WordPress pour voir votre bloc de citation stylisé.

Bonus : Afficher des citations aléatoires dans la colonne latérale de WordPress

Si vous le souhaitez, vous pouvez également afficher des citations de clients/clientes personnalisés dans votre colonne latérale WordPress. Cela motivera les utilisateurs/utilisatrices à explorer votre site, et ils finiront peut-être par faire un achat ou s’inscrire à votre newsletter.

Pour afficher des citations aléatoires, vous devez installer et activer l’extension Citations et Astuces. Pour plus de détails, consultez notre guide du débutant sur l’installation d’une extension WordPress.

Une fois activée, visitez la page  » Outil de personnalisation «  où vous pouvez saisir le devis laissé par le client/cliente dans l’éditeur/éditrices de texte. Cliquez ensuite sur le bouton « Publier ».

Une fois que vous avez fait cela, dirigez-vous vers la page  » Citations  » Réglages depuis le tableau de bord de WordPress et copiez le code court dans la section  » Citations et Astuces « .

Vous pouvez ensuite coller ce code court dans la colonne latérale ou dans n’importe quelle zone de widget de votre choix.

Dès lors, les internautes verront des citations aléatoires de clients/clientes dans votre colonne latérale WordPress.

Pour des instructions détaillées, vous pouvez consulter notre tutoriel sur la façon d’afficher des citations aléatoires dans la colonne latérale de WordPress.

Nous espérons que cet article vous a aidé à apprendre comment personnaliser le style des guillemets dans les thèmes WordPress. Vous pouvez également consulter notre guide sur la façon de choisir le meilleur logiciel de conception et les meilleurs services d’hébergement de sites gratuits.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.