نحوه سفارشی کردن سبک نقل قول در قالب های وردپرس

آیا به دنبال راهی برای سفارشی کردن سبک نقل قول ها در وب سایت وردپرس خود هستید؟

نقل قول ها اغلب به یاد ماندنی ترین بخش مقاله شما هستند. آنها همچنین بیشترین اشتراک گذاری را در هر پست یا صفحه وبلاگ دارند. به همین دلیل است که روزنامه‌ها و سایت‌های رسانه اصلی سبک نقل قول خود را سفارشی می‌کنند تا آن را برجسته کنند.

در این مقاله، نحوه سفارشی سازی سبک بلوک نقل قول ها در قالب های وردپرس را به شما نشان خواهیم داد.

چرا از Blockquotes استفاده می کنیم و آنها را در وردپرس سفارشی می کنیم؟

استفاده از بلوک نقل قول ها در محتوای خود می تواند تجربه کاربری در سایت وردپرس شما را بهبود بخشد . می‌توانید از آن برای متمایز کردن بخش انتخابی متن از بقیه محتوا استفاده کنید و توجه خوانندگان خود را به خود جلب کنید.

به عنوان مثال، می‌توانید از نقل قول‌های بلوکی برای نقل قول‌های نویسندگان و تأثیرگذاران، نقل‌قول‌ها از نشریات، توصیه‌های مشتریانتان یا برجسته کردن اطلاعات ارزشمند برای کاربرانتان استفاده کنید.

یکی دیگر از مزایای استفاده از بلوک نقل قول این است که می تواند تعامل اجتماعی را افزایش دهد. اجازه دادن به کاربران برای به اشتراک گذاشتن نقل قول در توییتر یا فیس بوک می تواند به شما کمک کند فالوورهای بیشتری داشته باشید و دیده شدن مارک های خود را در رسانه های اجتماعی بهبود بخشد.

به طور پیش فرض، وردپرس یک بلوک نقل قول را در ویرایشگر محتوا ارائه می دهد. برای اضافه کردن آن، به سادگی به ویرایشگر وردپرس بروید و بلوک نقل قول را در جایی که می خواهید در محتوا اضافه کنید.

با این حال، بلوک نقل قول پیش فرض گزینه های زیادی برای سفارشی سازی ارائه نمی دهد. شما فقط می توانید اندازه متن را تغییر دهید و از سبک های پیش فرض در وردپرس انتخاب کنید.

با این اوصاف، بیایید نگاهی به نحوه سفارشی کردن سبک بلوک نقل قول ها در قالب های وردپرس بیندازیم. ما به شما نشان خواهیم داد که چگونه با استفاده از افزونه وردپرس و همچنین با استفاده از CSS سفارشی، سبک نقل قول ها را تغییر دهید.

روش 1: سفارشی کردن سبک Blockquotes با استفاده از یک افزونه

یک راه آسان برای سفارشی کردن بلوک‌ها در وب‌سایت وردپرس با استفاده از افزونه‌ای مانند Gutenberg Blocks – Ultimate Addons for Gutenberg است. این یک افزونه رایگان وردپرس است که بلوک های اضافی را در ویرایشگر محتوای وردپرس اضافه می کند، از جمله بلوک نقل قول های قابل تنظیم.

ابتدا باید افزونه Gutenberg Blocks – Ultimate Addons for Gutenberg را نصب و فعال کنید. 

پس از فعال شدن افزونه، به طور خودکار شما را از داشبورد وردپرس خود به تنظیمات » UAG می برد.

به طور پیش‌فرض، افزونه تمام بلوک‌های اضافی از جمله نقل قول‌ها را فعال می‌کند، اما می‌توانید بلوک‌های مختلف را برای وب‌سایت خود غیرفعال کنید.

پس از آن، می توانید هر پست و صفحه وبلاگ را ویرایش کنید. هنگامی که در ویرایشگر محتوای وردپرس قرار گرفتید، به سادگی یک بلوک Blockquote را در هر نقطه از محتوای خود اضافه کنید.

بعد، می توانید متن را در قسمت بلوک نقل قول وارد کنید.

در منوی سمت راست گزینه‌های مختلفی برای سفارشی‌سازی سبک نقل قول بلوک پیدا خواهید کرد.

برای مثال، می‌توانید بین ۲ طرح‌بندی، از جمله مدرن و نقل‌قول، یکی را انتخاب کنید. سپس می توانید از گزینه های مختلف برای سفارشی کردن سبک چیدمان، ضخامت حاشیه نقل قول، رنگ آن و موارد دیگر استفاده کنید.

این افزونه همچنین به شما امکان می دهد رنگ متن را در نقل قول تغییر دهید و تایپوگرافی آن را ویرایش کنید.

می‌توانید از فونت پیش‌فرض برای نقل قول‌ها استفاده کنید یا فونت دیگری را انتخاب کنید تا متن برجسته شود. به علاوه، گزینه هایی برای ویرایش اندازه فونت و ارتفاع خط وجود دارد.

این افزونه همچنین به شما امکان می دهد رنگ متن را در نقل قول تغییر دهید و تایپوگرافی آن را ویرایش کنید.

می‌توانید از فونت پیش‌فرض برای نقل قول‌ها استفاده کنید یا فونت دیگری را انتخاب کنید تا متن برجسته شود. به علاوه، گزینه هایی برای ویرایش اندازه فونت و ارتفاع خط وجود دارد.

گزینه های بیشتری برای سفارشی کردن سبک نقل قول بلوک در افزونه وجود دارد.

برای نقل قول توییت‌ها، می‌توانید دسته توییتر خود را در قسمت «نام کاربری» وارد کنید و تنظیمات آیکون توییتر را تغییر دهید. گزینه هایی برای انتخاب اینکه آیا نماد توییت و متن، هر دو، یا فقط نماد نمایش داده شود وجود دارد. این افزونه همچنین به شما امکان می دهد سبک، برچسب و موارد دیگر را تغییر دهید.حتی گزینه ای برای غیرفعال کردن نمایش آیکون توییتر در نقل قول ها وجود دارد.

 

هنگامی که بلوک نقل قول خود را سفارشی کردید، به سادگی پست یا صفحه وبلاگ خود را منتشر کنید.

سپس از وب سایت خود دیدن کنید تا بلاک نقل قول را در عمل ببینید.

 

 

روش 2: CSS سفارشی را برای سفارشی کردن Blockquotes Style اضافه کنید

اگر نمی‌خواهید از یک افزونه وردپرس استفاده کنید، افزودن CSS سفارشی راه دیگری برای سفارشی کردن بلوک‌ها است.

می توانید از بلوک نقل قول پیش فرض در ویرایشگر وردپرس برای اضافه کردن نقل قول های خود استفاده کنید. پس از آن، به سادگی کد CSS سفارشی را وارد کنید تا سبک و ظاهر آن تغییر کند.

برای افزودن کد CSS سفارشی، ابتدا باید از داشبورد وردپرس خود به Appearance » Customize بروید. با این کار سفارشی‌کننده تم وردپرس باز می‌شود .

در سفارشی ساز تم، باید روی گزینه «CSS اضافی» که در منوی سمت چپ شما ارائه شده است، کلیک کنید.

پس از آن، می توانید کد CSS سفارشی را وارد کنید تا ظاهر و سبک نقل قول ها را تغییر دهید.

در اینجا چند سبک بلوک نقل قول وجود دارد که می توانید در وب سایت خود استفاده کنید.

1. CSS Blockquote کلاسیک

معمولاً افراد از تصویر پس‌زمینه CSS برای اضافه کردن گیومه‌های بزرگ در بلوک نقل قول استفاده می‌کنند. در این مثال، ما از CSS برای اضافه کردن کوتیشن های بزرگ استفاده کرده ایم.

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 {
    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 {
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 {
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. استفاده از فونت های وب گوگل برای Blockquotes در CSS

در این مثال بلوک نقل قول CSS، ما از فونت Droid Serif از کتابخانه فونت های وب گوگل استفاده کرده ایم. شما می توانید از هر فونت سفارشی که می خواهید استفاده کنید. به سادگی فونت موجود در کد را با خانواده فونتی که می خواهید استفاده کنید جایگزین کنید.

 

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. نقل قول بلوک گوشه گرد

در این مثال ما یک بلوک نقل قول با گوشه های گرد داریم و از drop shadow برای حاشیه ها استفاده کرده ایم.

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. استفاده از گرادیان به عنوان پس زمینه برای Blockquote

در این مثال بلوک نقل قول CSS، ما از گرادیان CSS برای بهبود پس‌زمینه یک بلوک نقل قول استفاده کرده‌ایم.

گرادیان های CSS به دلیل سازگاری بین مرورگرها مشکل هستند. توصیه می کنیم از یک مولد گرادیان CSS مانند 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 با الگوی پس زمینه

برای این مثال، از یک تصویر پس‌زمینه به عنوان الگوی نقل قول استفاده کرده‌ایم.

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";
}

توجه: شما باید آدرس تصویر پس‌زمینه را در کد CSS با URL تصویری که در وب‌سایت وردپرس خود آپلود کرده‌اید جایگزین کنید.

9. استفاده از تصاویر متعدد در پس زمینه Blockquote

با استفاده از CSS می توانید از چندین تصویر در پس زمینه بلوک نقل قول استفاده کنید. به عنوان مثال، ما از blockquote:beforeیک شبه عنصر برای اضافه کردن تصویر پس زمینه دیگری به بلوک نقل قول استفاده کرده ایم.

 

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";
}

 

توجه: شما باید آدرس های تصویر پس زمینه را در کد CSS با تصاویری که در وب سایت خود آپلود کرده اید جایگزین کنید.

امیدواریم این مقاله به شما کمک کرده باشد تا نحوه سفارشی کردن سبک نقل قول در قالب های وردپرس را یاد بگیرید.