Szukasz sposobu na dostosowanie stylu blockquotes w motywach WordPress?
Cytaty często są najbardziej zapadającą w pamięć częścią twojego artykułu. Są one również najczęściej udostępnianą częścią każdego wpisu na blogu lub stronie. Właśnie dlatego gazety i witryny mediów głównego nurtu dostosowują własny styl cytatów blokowych, aby je wyróżnić.
W tym artykule pokażemy, jak łatwo dostosować styl blockquotes w motywach WordPress.
Dlaczego warto używać i dostosowywać styl blockquotes w WordPress?
Używanie cytatów blokowych w twojej treści może poprawić wrażenia użytkownika na twojej witrynie internetowej WordPress. Możesz ich użyć, aby wybrana sekcja tekstu wyróżniała się na tle pozostałej treści i przyciągała uwagę twoich czytelników.
Na przykład, możesz używać cytatów blokowych do cytowania autorów i influencerów, cytatów z publikacji, referencji od twoich klientów lub podkreślać cenne informacje dla odwiedzających twojego bloga WordPress.
Kolejną zaletą korzystania z cytatów blokowych jest to, że mogą one zwiększyć zaangażowanie w mediach społecznościowych. Umożliwienie użytkownikom udostępnienia cytatu na Twitterze lub Facebooku może pomóc ci zdobyć więcej obserwujących i poprawić widoczność twojej marki w mediach społecznościowych.
Domyślnie WordPress oferuje blok cytatu w edytorze treści. Aby go dodać, wystarczy przejść do edytora WordPress i wstawić blok cytatu w wybranym miejscu w treści.
Jednak domyślny blok cytatów nie oferuje wielu opcji konfiguratora. Można jedynie zmienić rozmiar tekstu i wybrać jeden z domyślnych stylów WordPress.
To powiedziawszy, przyjrzyjmy się, jak można dostosować styl blockquotes w motywach WordPress. Pokażemy ci, jak zmienić styl blockquotes za pomocą wtyczki WordPress, a także za pomocą własnego CSS:
Metoda 1: Dostosuj styl Blockquotes za pomocą wtyczki
Łatwym sposobem na dostosowanie cytatów blokowych na twojej witrynie internetowej WordPress jest użycie wtyczki takiej jak Spectra – WordPress Gutenberg Blocks. Jest to darmowa wtyczka WordPress, która dodaje dodatkowe bloki w edytorze treści WordPress, w tym konfigurowalne cytaty blokowe.
Więcej informacji można znaleźć w naszej szczegółowej recenzji Spectra.
Najpierw musisz zainstalować i włączyć wtyczkę Spectra – WordPress Gutenberg Blocks. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu przejdź na stronę Spectra ” Blocks z panelu bocznego administratora WordPress.
Tutaj widać, że wtyczka domyślnie włącza wszystkie dodatkowe bloki, w tym blok Blockquote.
Z tego miejsca można wyłączać wszystkie niepotrzebne bloki, przełączając przełącznik obok tych opcji.
Następnie otwórz twoją stronę lub wpis w edytorze bloków.
Następnie kliknij przycisk „+” w lewym górnym rogu ekranu, aby dodać blok Blockquote w dowolnym miejscu twojej treści.
Następnie możesz wpisz tekst w obszarze Blockquote.
Gdy już to zrobisz, możesz skonfigurować układ Blockquote w panelu po prawej stronie.
Z tego miejsca można wybrać opcję „Obramowanie” dla prostego układu i opcję „Cytat”, jeśli chcesz dodać cudzysłów, wybrać wyrównanie tekstu i nie tylko.
Możesz także dodać obrazek autora, aby jeszcze bardziej wystylizować twój blok Blockquote.
Następnie przejdź do karty „Styl” w panelu bloków, aby zmienić rozmiar ikonki cytatu, rozmiar tła i inne.
Na tej karcie możesz również zmienić kolor cytatu, typografię, kolor autora i odstępy w twoim bloku.
Na koniec kliknij przycisk „Opublikuj” lub „Aktualizuj” u góry, aby zapisać twoje ustawienia.
Teraz możesz przejść na twój blog WordPress, aby zobaczyć blok Blockquote w działaniu.
Metoda 2: Dodaj własny CSS, aby dostosować styl cytatów blokowych za pomocą WPCode
Jeśli nie chcesz korzystać z wtyczki WordPress, to dodanie własnego CSS jest kolejnym sposobem na dostosowanie twojego blockquote.
Najprostszym sposobem na dodanie własnego kodu CSS do twojej witryny internetowej jest wtyczka WPCode, która jest najlepszą wtyczką fragmentów kodu na rynku.
Najpierw należy zainstalować i włączyć wtyczkę WPCode. Aby uzyskać szczegółowe instrukcje, warto zapoznać się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.
Uwaga: WPCode ma również darmową wersję. Jednak do odblokowania opcji „Fragment kodu CSS” potrzebny jest plan premium wtyczki.
Po włączaniu, przejdź na stronę Code Snippets ” + Add Snippet z panelu bocznego administratora WordPress.
Następnie kliknij przycisk „Use Snippet” pod opcją „Add Your Custom Code (New Snippet)”.
Spowoduje to przejście do strony „Create Custom Snippet”, gdzie można rozpocząć od wpisania rodzaju nazwy dla twojego fragmentu kodu.
Następnie wybierz „Fragment kodu CSS” jako rodzaj kodu z rozwijanego menu w prawym rogu ekranu.
Następnie możesz wpisz dowolny z poniższych fragmentów kodu CSS w polu „Podgląd kodu”, aby zmienić wygląd i styl cytatu blokowego.
Należy pamiętać, że te ustawienia zmienią wygląd domyślnego bloku „Cytuj” w WordPress.
Oto kilka stylów blockquote, których możesz użyć na swojej witrynie internetowej.
1. Klasyczny cytat blokowy CSS
Zazwyczaj ludzie używają CSS background-image do dodawania dużych cudzysłowów w cytatach blokowych. W tym przykładzie użyliśmy CSS do dodania dużych cudzysłowów.
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. Klasyczny cytat blokowy z obrazkiem
W tym przykładzie użyliśmy obrazka tła dla cudzysłowów.
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. Prosty cytat blokowy
W tym przykładzie dodaliśmy kolor tła i przerywane lewe obramowanie zamiast cudzysłowów blokowych. Zachęcamy do zabawy z kolorami.
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. Biały, niebieski i pomarańczowy Blockquote
Cytaty blokowe mogą się wyróżniać i mogą być tak kolorowe, jak tylko chcesz.
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. Korzystanie z Google Web Fonts dla Blockquotes w CSS
W tym przykładzie blockquote CSS użyliśmy kroju pisma Droid Serif z biblioteki czcionek internetowych Google.
Możesz użyć dowolnej własnej czcionki. Wystarczy zastąpić czcionkę w kodzie rodziną pisma, której chcesz użyć.
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. Okrągły narożnik Blockquote
W tym przykładzie mamy cytat blokowy z zaokrąglonymi rogami i użyliśmy cienia do obramowania.
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. Używanie gradientu jako tła dla cytatu blokowego
W tym przykładzie CSS blockquote użyliśmy gradientu CSS, aby wzmocnić tło blockquote.
Gradienty CSS są trudne ze względu na zgodność z różnymi przeglądarkami. Zalecamy użycie generatora gradientów CSS, takiego jak 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. Cytat blokowy z wzorcem tła
W tym przykładzie użyliśmy obrazka tła jako wzorca dla 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";
}
Uwaga: Musisz zastąpić adres URL obrazka tła w kodzie CSS adresem URL obrazka, który wgrałeś na swoją witrynę internetową WordPress.
9. Używanie wielu obrazków w tle cytatu blokowego
Możesz użyć wielu obrazków w tle blockquote za pomocą CSS. Na przykład, użyliśmy blockquote:before pseudoelementu, aby dodać kolejny obrazek tła do 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";
}
Uwaga: Musisz zastąpić adresy URL obrazków tła w kodzie CSS obrazkami, które umieściłeś na swojej witrynie internetowej.
Dodaj kod i zapisz swój fragment kodu
Po wybraniu stylu blockquote i dodaniu jego kodu CSS w polu „Podgląd kodu”, przewiń w dół do sekcji „Wybieranie”.
W tym miejscu należy wybrać tryb „Automatyczne wstawienie”, aby kod automatycznie zmieniał wygląd bloku cytatu po włączaniu.
Na koniec przewiń z powrotem do góry strony, aby przełączyć przełącznik „Nieaktywny” na „Aktywny”.
Następnie kliknij przycisk „Zapisz fragment kodu”, aby zapisać twoje ustawienia.
Możesz teraz wstawić blok cytatu do strony lub wpisu WordPress.
Następnie możesz przejść na twoją witrynę WordPress, aby zobaczyć stylizowany blok cytatu.
Bonus: Wyświetlaj losowe cytaty na panelu bocznym WordPressa
Jeśli chcesz, możesz również wyświetlać cytaty od zadowolonych klientów na twoim panelu bocznym WordPress. Zmotywuje to użytkowników do odwiedzenia twojej witryny, co może skończyć się dokonaniem zakupu lub zapisaniem się do newslettera.
Aby wyświetlać losowe cytaty, należy zainstalować i włączyć wtyczkę Quotes and Tips. Aby uzyskać szczegółowe informacje, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.
Po włączaniu przejdź na stronę Cytaty ” Utwórz nowy, gdzie możesz wpisać cytat pozostawiony przez klienta w edytorze tekstu. Następnie kliknij przycisk „Opublikuj”.
Gdy to zrobisz, przejdź do strony Cytaty ” Ustawienia z kokpitu WordPress i skopiuj krótki kod w sekcji „Cytaty i porady”.
Następnie możesz wkleić ten krótki kod na panelu bocznym lub w dowolnym obszarze widżetów według twoich upodobań.
Gdy to zrobisz, odwiedzający będą teraz widzieć losowe cytaty klientów na twoim panelu bocznym WordPress.
Szczegółowe instrukcje można znaleźć w naszym poradniku na temat wyświetlania losowych cytatów w panelu bocznym WordPress.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dostosować styl blockquotes w motywach WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat wyboru najlepszego oprogramowania do projektowania i najlepszych darmowych usług hostingu witryn internetowych.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Syams Qomar says
How to make it responsive?
WPBeginner Support says
It would depend on your theme but the blockquotes should be responsive by default.
Administrator
JULIE says
Hi
This is great, but how do you make it mobile responsive?
thanks
Julie
WPBeginner Support says
The quotes should be relatively responsive without any changes
Administrator
Sachin Nayi says
is there any way to add social media share button at each blockquote?
WPBeginner Support says
Unless I hear otherwise, our previous plugin we recommended for that is no longer available and we have not found an alternative.
Administrator
Rubnawaz Quraishi says
Can we use blockquotes with author image?
Vishwas says
Thanks a ton, man! You’re a saviour.
Aakash Waghmare says
Very thank’s Sir. You are always give me a right information. Thanks a lot Sir.
Per Thomsen says
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
David Riewe says
Makes sense but does not work with the tesseract theme.
Catherine says
Hi,
I love this. I used example #5, it looks great on desktop but cuts off on mobile. Any suggestions?
steve says
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?
WPBeginner Support says
Since WordPress 4.4, WordPress started automatically embedding URLs from other WordPress sites. Here is how to turn off post oEmbed feature on your site.
Administrator
Barb Keck says
How do you add a closing quote?
Giampaolo says
Thank’s very helpful.
Sameer Panda says
Very helpful. I used the left border one. Thanks for sharing.
Chuka says
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 says
Hey CHUKA, it’s working perfect on mobile too.
Helmut Schütz says
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
Kelli says
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.
Leah says
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.
Carolina says
This is great however it is not working for me at all – where am I supposed to put the codes?
Prabin Parajuli says
Inside your child theme’s style.css
Jessica says
#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
Scarlet says
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?
Akash KB says
Is it possible to use 2 types of blockquotes on a single blog?
gWorldz says
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;*/ }
Eleanore says
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 says
You can add in your Website CSS.
Mostly theme structure:
Go to admin > Appearance > Customize > Additional CSS
Chris says
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.
Adrian Robertson says
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.
Abdul Samad says
Thanks Man For This Article
Preston Ehrler says
I don’t have the coding capability to execute these. Is there a plugin that will do the same job?
Leonard Grossman says
Question: blockquote in WP defaults to italics Is there a way to turn that off?
Thanks,
Len
Editorial Staff says
It doesn’t default to italics. It is probably a styling thing in your theme.
Administrator
Leonard Grossman says
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
Kanan says
It is not working in thesis 2.0? any suggestion?
Editorial Staff says
See what thesis is using for their blockquote styles.
Administrator
Khürt Williams says
“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.
Khürt Williams says
„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.
Ambika Choudhary Mahajan says
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.
Jack says
Thanks so much for this.
Akhil Gupta says
Thanks for this beautiful Article, now i have many ideas to customize blockquotes.
Sue Surdam says
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 says
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
Reid Peterson says
Many thanks for these tips! I mixed tips 4 and 6 and had a really nice result!
Andre Costa says
Thank you for these tips. I have used blockquotes in the past, and it is wonderful to find out about the different possibilities.