Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Les citations sont 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 pour qu’elle se démarque.

Nous avons ajouté des styles de guillemets pour mettre en valeur les citations précieuses et les conseils d’experts sur notre site. Ce choix s’est avéré efficace pour capter l’attention du lecteur et mettre l’accent sur les éléments clés à retenir.

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

Customize blockquotes style in WordPress themes

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.

Default quote block in WordPress

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.

En savoir plus, vous pouvez consulter notre avis détaillé sur le Spectra.

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.

Activate the Blockquotes block

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.

Add Blockquotes block

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.

Change the blockquotes layout

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.

Customize blockquotes style

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.

Blockquotes preview

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.

Note : WPCode dispose également d’une version gratuite. Cependant, vous aurez besoin de l’offre premium de l’extension pour déverrouiller l’option ‘CSS Snippet’.

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) ».

Add new snippet

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.

Choose CSS snippet for blockquotes code snippet

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.

Classic CSS blockquote
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.

Classic CSS blockquote with image
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.

Simple blockquote with dashed border
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.

Blue and orange blockquote
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 with Google font
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 with rounded corners
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 using gradient colors
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 with image
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 with multiple images
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é.

Choose an insertion method

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.

Save the blockquotes snippet

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é.

Blockquotes preview in WPCode

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 ».

A quote from an OptinMonster customer

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.

The WordPress quotes shortcode

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.

A random quote in the WordPress sidebar

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 retirer les CSS inutilisés dans WordPress et notre tutoriel sur l’ajout d’animations CSS dans WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

48 commentairesLaisser une réponse

  1. Syams Qomar

    How to make it responsive?

    • WPBeginner Support

      It would depend on your theme but the blockquotes should be responsive by default.

      Administrateur

  2. JULIE

    Hi

    This is great, but how do you make it mobile responsive?

    thanks
    Julie

    • WPBeginner Support

      The quotes should be relatively responsive without any changes

      Administrateur

  3. Sachin Nayi

    is there any way to add social media share button at each blockquote?

    • WPBeginner Support

      Unless I hear otherwise, our previous plugin we recommended for that is no longer available and we have not found an alternative.

      Administrateur

  4. Rubnawaz Quraishi

    Can we use blockquotes with author image?

  5. Vishwas

    Thanks a ton, man! You’re a saviour.

  6. Aakash Waghmare

    Very thank’s Sir. You are always give me a right information. Thanks a lot Sir.

  7. Per Thomsen

    Fantastic article, thanks for sharing.
    I’ve been trying to use the classic CSS style but i can’t seem to get the  » to come up at the start of the quote. Would you have any suggestions for what it might be?

    Thanks

  8. David Riewe

    Makes sense but does not work with the tesseract theme.

  9. Catherine

    Hi,

    I love this. I used example #5, it looks great on desktop but cuts off on mobile. Any suggestions?

  10. steve

    The problem that I have is:

    I had a list of links (URLs) on a page, that weren’t displayed as links (were not clickable), but after an WP update, a lot of them, gut not all, are suddenly displayed as blockquotes (so they are clickable). As I don’t want to have clickable links on that page – how can I reverse this effect?

  11. Barb Keck

    How do you add a closing quote?

  12. Giampaolo

    Thank’s very helpful.

  13. Sameer Panda

    Very helpful. I used the left border one. Thanks for sharing.

  14. Chuka

    These blockquote styles are not responsive, works perfectly on desktop but they get cut off on mobile, any idea on what to do to make it responsive?

    • Sameer Panda

      Hey CHUKA, it’s working perfect on mobile too.

    • Helmut Schütz

      I used the Round Corner Blockquote, but only lines 1 and 2 to 8, to put it into my Leeway Child theme – and it works on all devices responsively. You merely must omit line 2 with the absolute width!

      But can anyone help me to make it possible to adjust the width of the box according to the width of the text? Sometimes I quote poems with only some words in one line, and if I center them, there is too much place around them on the PC monitor. But I don’t want to insert absolut width-value because normally I want to habe the blockquote full width from left to right.

      Best regards, Helmut

  15. Kelli

    This is really helpful!

    My only question is how can I get rid of the «  » at the beginning of the quote? I plugged in the code for #5 and it looks great, but everytime I type something inside it I am stuck with a quotation mark at the beginning.

  16. Leah

    A million blessing for a thousand ages to you and yours. (Seriously, this post was THAT helpful!)
    Thanks for making it simple, easy to understand and implement. :-)

  17. Carolina

    This is great however it is not working for me at all – where am I supposed to put the codes?

    • Prabin Parajuli

      Inside your child theme’s style.css

  18. Jessica

    #8 does exactly what I need it to do…except it repeats the image if my quote gets too long. Is there a way to turn off the repeat? I’ve already tried putting ‘background-repeat: no repeat;’ right under the background url, but to no avail.

    Thank you so much! I’ve bookmarked your site and can tell it’s going to be SO helpful :)

  19. Scarlet

    With #4, if I wanted to add quotation marks to that, how would I go about doing it? And if I wanted the box to have rounded edges instead of square, how would I go about doing that as well?

    • gWorldz

      Yes, you could use more than 1 style for your blockquotes by adding css classes to your blockquotes using the html editor.

      Example:
      <blockquote class= »my-style-1″>QUOTE</blockquote>
      <blockquote class= »my-style-2″>QUOTE</blockquote>

      Then in the css above (or your own) add .my-style-1 to one and .my-style-2 to another right behind blockquote (no space) in the css.

      Example:

      blockquote.my-style-1 { /*Properties: Values;*/ }
      blockquote.my-style-1:before{ /*Properties: Values;*/ }blockquote.my-style-1 cite:before { /*Properties: Values;*/ }

      blockquote.my-style-2 { /*Properties: Values;*/ }
      blockquote.my-style-2:before{ /*Properties: Values;*/ }blockquote.my-style-2 cite:before { /*Properties: Values;*/ }

  20. Eleanore

    How exactly do you use these codes to make a block quote? Where do you insert your text inwhich you wish to be in a block? Does this only work for posts or can you use it in a page in an article on a page?

    • Anant Vijay Soni

      You can add in your Website CSS.

      Mostly theme structure:
      Go to admin > Appearance > Customize > Additional CSS

  21. Chris

    I tried the first example in the live css editor in Headway 3.6. It showed the text 201C instead of the quotation marks. It was also centered over the entire quote instead of the top left. And there was a light gray left border that I couldn’t get rid of.

  22. Adrian Robertson

    Time and again when looking for how to implement something, invariably I end up at this site (and must admit to looking for Syed’s picture in the Google results, so I know I am getting to the right place) .

    Your tutorials are fantastic.

  23. Abdul Samad

    Thanks Man For This Article

  24. Preston Ehrler

    I don’t have the coding capability to execute these. Is there a plugin that will do the same job?

  25. Leonard Grossman

    Question: blockquote in WP defaults to italics Is there a way to turn that off?

    Thanks,

    Len

    • Editorial Staff

      It doesn’t default to italics. It is probably a styling thing in your theme.

      Administrateur

      • Leonard Grossman

        Look at all the examples in this article. In each the text within the blockquotes appears in italics. That is what I am taking about. How can I use blockquotes without the resulting italics.
        Thanks.

        Len

  26. Kanan

    It is not working in thesis 2.0? any suggestion?

  27. Khürt Williams

    “This will add a little HTML in your post that we can use to customize the styling. Note: we are using the text mode in WordPress post editor. Below is an example of the HTML that you should see.”

    Your statement seems to indicate that the b- quote button add the <cite> tag. It does not.

  28. Khürt Williams

    « This will add a little HTML in your post that we can use to customize the styling. Note: we are using the text mode in WordPress post editor. Below is an example of the HTML that you should see. »

    Your statement seems to indicate that the b- quote button add the tag. It does not.

  29. Ambika Choudhary Mahajan

    Absolutely brilliant!!
    Thanks a ton for sharing. I’d been wanting to do something like that with the blockquotes on my blog. But didnt know how to go about it!
    Now, I do. :)

  30. Akhil Gupta

    Thanks for this beautiful Article, now i have many ideas to customize blockquotes.

  31. Sue Surdam

    Great collection of block quote effects! With so many plugins around, it is easy to forget what a few lines of css can do to create magic.

    • Zimbrul

      Absolutely agree with your statement. And doing so you can learn by doing it.
      Thanks WP Beginner for the article, it goes into my Instapaper

  32. Reid Peterson

    Many thanks for these tips! I mixed tips 4 and 6 and had a really nice result!

  33. Andre Costa

    Thank you for these tips. I have used blockquotes in the past, and it is wonderful to find out about the different possibilities.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.