21 أكتوبر، 2021

كيفية تخصيص نمط اقتباسات Blockquotes في ثيمات ووردبريس

سجل إعجابك

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

غالبًا ما تكون الاقتباسات هي الجزء الأكثر تميزًا في مقالتك. هم أيضًا الجزء الأكثر مشاركة في أي منشور أو عرض تقديمي. هذا هو السبب في تخصيص الصحف ومواقع البث الرئيسية لأسلوب blockquote الخاص بهم لجعله بارزًا. في هذه المقالة ، سوف نوضح لك كيفية تخصيص أسلوب blockquotes في ووردبريس مع عرض 9 أمثلة جميلة لأسلوب blockquotes المخصص.

يتيح لك ووردبريس إضافة اقتباسات محظورة داخل منشوراتك وصفحاتك باستخدام منطقة شريط الأدوات في قسم الكتابة.

أضف Blockquote في ووردبريس

سيضيف هذا القليل من HTML في مشاركتك يمكننا استخدامه لتخصيص التصميم. ملاحظة: نحن نستخدم وضع النص في محرر منشورات ووردبريس. يوجد أدناه مثال على HTML يجب أن تراه.

<blockquote>Ea possunt paria non esse. Pudebit te, inquam, illius tabulae, quam Cleanthes sane commode verbis depingere solebat. Urgent tamen et nihil remittunt. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Sint ista Graecorum; Cur igitur, cum de re conveniat, non malumus usitate loqui? Huius ego nunc auctoritatem sequens idem faciam.
<cite>Wise Man</cite></blockquote>

من أجل تخصيص نمط blockquotes في قالب ووردبريس الخاص بك ، سنحتاج إلى تعديل ملف style.css لموضوعك. يمكنك القيام بذلك إما بالانتقال إلى المظهر »محرر في مسؤول ووردبريس الخاص بك أو تحرير الملفات عبر FTP.

بعد ذلك ، ستحتاج إلى استخدام أحد الأنماط المقترحة أدناه وتجاوز أنماط blockquote الخاصة بك. إذا لم يكن هناك أي شيء ، فما عليك سوى إضافة هذه. أنت أيضًا مرحب بك للجمع بين الأسلوبين والتخصيص حسب رغبة قلبك.

1. Classic CSS Blockquote

عادةً ما يستخدم الأشخاص CSS background-imageلإضافة علامات اقتباس كبيرة في blockquote. في هذا المثال ، استخدمنا CSS لإضافة علامات اقتباس كبيرة.

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. Classic Blockquote مع الصورة

في هذا المثال ، استخدمنا صورة خلفية لعلامات الاقتباس.

Blockquote الكلاسيكي مع صورة لعلامات الاقتباس

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 بسيط

في هذا المثال ، أضفنا لون الخلفية والحدود اليسرى المتقطعة بدلاً من علامات الاقتباس. لا تتردد في اللعب بالألوان.

مثال بسيط على blockquote في CSS

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

يمكن جعل Blockquotes بارزة ويمكن أن تكون ملونة بالقدر الذي تريده.

مثال على الخلفية الزرقاء والخط الأبيض 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. استخدام Google Web Fonts لـ Blockquotes في CSS

في مثال blockquote CSS هذا ، استخدمنا خط Droid Serif من مكتبة خطوط الويب من Google.

استيراد خط Google Web في CSS لـ Blockquote

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. جولة Blockquote الزاوية

في هذا المثال لدينا blockquote بزوايا مستديرة واستخدمنا الظل المسقط للحدود.

زوايا مستديرة blockquote

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

في مثال blockquote CSS هذا ، استخدمنا تدرج CSS3 لتحسين خلفية blockquote. تدرجات CSS صعبة ، بسبب التوافق عبر المستعرضات. نوصي باستخدام colorlabs ، مولد التدرج CSS.

إضافة CSS Gradient كخلفية لـ Blockquote

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.

blockquote CSS مع نمط صورة الخلفية

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

9. استخدام صور متعددة في خلفية Blockquote

يمكنك استخدام صور متعددة في خلفية blockquote باستخدام css. في هذا المثال ، استخدمنا blockquote:beforeعنصرًا زائفًا لإضافة صورة خلفية أخرى إلى blockquote.

إضافة صور خلفية متعددة في blockquote باستخدام CSS

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

نأمل أن تكون قد وجدت هذه المقالة مفيدة في تعلم كيفية تخصيص أسلوب blockquotes في ووردبريس. إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق أدناه.

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..