วิธีปรับแต่งสไตล์ Blockquotes ในธีม WordPress

คุณกำลังมองหาวิธีปรับแต่งสไตล์ blockquotes บนเว็บไซต์ WordPress ของคุณหรือไม่?

คำพูดมักจะเป็นส่วนที่น่าจดจำที่สุดในบทความของคุณ นอกจากนี้ยังเป็นส่วนที่แชร์กันมากที่สุดในบล็อกโพสต์หรือเพจอีกด้วย นี่คือเหตุผลที่หนังสือพิมพ์และเว็บไซต์สื่อกระแสหลักปรับแต่งรูปแบบข้อความบล็อกเพื่อให้โดดเด่น

ในบทความนี้ เราจะแสดงวิธีปรับแต่งสไตล์ blockquotes ในธีม WordPress

เหตุใดจึงต้องใช้ Blockquotes และปรับแต่งใน WordPress?

การใช้ blockquotes ในเนื้อหาของคุณสามารถปรับปรุงประสบการณ์ผู้ใช้บนเว็บไซต์ WordPress ของคุณได้ คุณสามารถใช้เพื่อทำให้ส่วนของข้อความที่เลือกโดดเด่นจากเนื้อหาที่เหลือและดึงดูดความสนใจของผู้อ่าน

ตัวอย่างเช่น คุณสามารถใช้บล็อกโควตสำหรับคำพูดจากผู้เขียนและผู้มีอิทธิพล การอ้างอิงจากสิ่งพิมพ์ คำรับรองจากลูกค้าของคุณ หรือเน้นข้อมูลอันมีค่าให้กับผู้ใช้ของคุณ

ข้อดีอีกประการหนึ่งของการใช้ blockquotes ก็คือสามารถเพิ่มการมีส่วนร่วมทางสังคมได้ การอนุญาตให้ผู้ใช้แชร์คำพูดบน Twitter หรือ Facebook สามารถช่วยให้คุณมีผู้ติดตามเพิ่มขึ้น และปรับปรุงการมองเห็นแบรนด์ของคุณบนโซเชียลมีเดีย

ตามค่าเริ่มต้น WordPress เสนอบล็อกคำพูดในตัวแก้ไขเนื้อหา หากต้องการเพิ่ม เพียงตรงไปที่โปรแกรมแก้ไข WordPress และเพิ่มบล็อกใบเสนอราคาในตำแหน่งที่คุณต้องการในเนื้อหา

อย่างไรก็ตาม บล็อกใบเสนอราคาเริ่มต้นไม่มีตัวเลือกมากมายสำหรับการปรับแต่ง คุณสามารถเปลี่ยนขนาดของข้อความและเลือกจากรูปแบบเริ่มต้นใน WordPress เท่านั้น

ที่กล่าวว่าเรามาดูว่าคุณสามารถปรับแต่งสไตล์ blockquotes ในธีม WordPress ได้อย่างไร เราจะแสดงวิธีเปลี่ยนสไตล์ของ blockquotes โดยใช้ปลั๊กอิน WordPress และการใช้ CSS ที่กำหนดเอง

วิธีที่ 1: ปรับแต่งสไตล์ Blockquotes โดยใช้ปลั๊กอิน

วิธีง่ายๆ ในการปรับแต่ง blockquotes บนเว็บไซต์ WordPress ของคุณคือการใช้ปลั๊กอินเช่น Gutenberg Blocks - Ultimate Addons สำหรับ Gutenberg เป็นปลั๊กอิน WordPress ฟรีที่เพิ่มบล็อกเพิ่มเติมในตัวแก้ไขเนื้อหา WordPress รวมถึงบล็อกคำพูดที่ปรับแต่งได้

ขั้นแรก คุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน Gutenberg Blocks - Ultimate Addons สำหรับ Gutenberg สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำในการติดตั้งปลั๊กอิน WordPress

เมื่อปลั๊กอินทำงานแล้ว ปลั๊กอินจะนำคุณไปที่ การตั้งค่า » UAG จากแดชบอร์ด WordPress ของคุณโดยอัตโนมัติ

ตามค่าเริ่มต้น ปลั๊กอินจะเปิดใช้งานบล็อกเพิ่มเติมทั้งหมด รวมถึงบล็อกคำพูด แต่คุณสามารถเลือกที่จะปิดใช้งานบล็อกต่างๆ สำหรับเว็บไซต์ของคุณได้

หลังจากนั้น คุณสามารถแก้ไขโพสต์และเพจในบล็อกได้ เมื่อคุณอยู่ในโปรแกรมแก้ไขเนื้อหา WordPress เพียงเพิ่มบล็อก Blockquote ที่ใดก็ได้ในเนื้อหาของคุณ

จากนั้น คุณสามารถป้อนข้อความในพื้นที่ Blockquote ได้

คุณจะพบตัวเลือกต่างๆ ในการปรับแต่งสไตล์ Blockquote บนเมนูด้านขวา

ตัวอย่างเช่น คุณสามารถเลือกระหว่าง 2 เลย์เอาต์ รวมถึงสมัยใหม่และใบเสนอราคา จากนั้นคุณสามารถใช้ตัวเลือกต่างๆ เพื่อปรับแต่งสไตล์ของเค้าโครง ความหนาของเส้นขอบเครื่องหมายคำพูด สี และอื่นๆ ได้

ปลั๊กอินยังช่วยให้คุณเปลี่ยนสีของข้อความในเครื่องหมายคำพูดและแก้ไขการพิมพ์ได้

คุณสามารถใช้แบบอักษรเริ่มต้นสำหรับเครื่องหมายคำพูดหรือเลือกแบบอักษรอื่นเพื่อทำให้ข้อความโดดเด่นได้ นอกจากนี้ยังมีตัวเลือกในการแก้ไขขนาดตัวอักษรและความสูงของบรรทัดอีกด้วย

มีตัวเลือกเพิ่มเติมในการปรับแต่งสไตล์ของ blockquote ในปลั๊กอิน

สำหรับการอ้างอิงทวีต คุณสามารถป้อนชื่อ Twitter ของคุณในช่อง "ชื่อผู้ใช้" และเปลี่ยนการตั้งค่าไอคอน Twitter มีตัวเลือกให้เลือกว่าจะแสดงไอคอนทวีตและข้อความ ทั้งสองอย่าง หรือเฉพาะไอคอน ปลั๊กอินยังให้คุณเปลี่ยนสไตล์ ป้ายกำกับ และอื่นๆ อีกมากมาย

มีตัวเลือกในการปิดการใช้งานไอคอน Twitter ไม่ให้ปรากฏในบล็อกคำพูด

เมื่อคุณปรับแต่ง Blockquote ของคุณแล้ว เพียงเผยแพร่บล็อกโพสต์หรือเพจของคุณ

จากนั้นไปที่เว็บไซต์ของคุณเพื่อดูการทำงานของ Blockquote

วิธีที่ 2: เพิ่ม CSS ที่กำหนดเองเพื่อปรับแต่งสไตล์ Blockquotes

หากคุณไม่ต้องการใช้ปลั๊กอิน WordPress การเพิ่ม CSS ที่กำหนดเองเป็นอีกวิธีหนึ่งในการปรับแต่ง Blockquotes ของคุณ

คุณสามารถใช้บล็อกคำพูดเริ่มต้นในตัวแก้ไข WordPress เพื่อเพิ่มบล็อกคำพูดของคุณ หลังจากนั้น เพียงป้อนโค้ด CSS ที่กำหนดเองเพื่อเปลี่ยนสไตล์และรูปลักษณ์

หากต้องการเพิ่มโค้ด CSS ที่กำหนดเอง ก่อนอื่นคุณจะต้องไปที่ ลักษณะที่ปรากฏ » ปรับแต่ง จากแดชบอร์ด WordPress ของคุณ นี่จะเป็นการเปิดตัวปรับแต่งธีม WordPress

ในเครื่องมือปรับแต่งธีม คุณจะต้องคลิกตัวเลือก 'CSS เพิ่มเติม' ที่ให้ไว้ในเมนูด้านซ้าย

หลังจากนั้น คุณสามารถป้อนโค้ด CSS ที่กำหนดเองเพื่อเปลี่ยนรูปลักษณ์และสไตล์ของ Blockquotes ได้

ต่อไปนี้คือรูปแบบข้อความบล็อกบางส่วนที่คุณสามารถใช้บนเว็บไซต์ของคุณได้

1. CSS Blockquote แบบคลาสสิก

โดยปกติแล้ว ผู้คนจะใช้ภาพพื้นหลัง CSS เพื่อเพิ่มเครื่องหมายคำพูดขนาดใหญ่ใน blockquote ในตัวอย่างนี้ เราใช้ 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 แบบคลาสสิกพร้อมรูปภาพ

ในตัวอย่างนี้ เราได้ใช้ภาพพื้นหลังสำหรับเครื่องหมายคำพูด

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 {
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 {
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

ในตัวอย่าง CSS blockquote นี้ เราใช้ฟอนต์ Droid Serif จากไลบรารีฟอนต์เว็บของ Google คุณสามารถใช้แบบอักษรแบบกำหนดเองใดก็ได้ที่คุณต้องการ เพียงแทนที่แบบอักษรในโค้ดด้วยตระกูลแบบอักษรที่คุณต้องการใช้

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 {
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 blockquote นี้ เราได้ใช้การไล่ระดับสี CSS เพื่อปรับปรุงพื้นหลังของ blockquote

การไล่ระดับสี CSS นั้นยุ่งยากเนื่องจากความเข้ากันได้ข้ามเบราว์เซอร์ เราขอแนะนำให้ใช้เครื่องกำเนิดการไล่ระดับสี CSS เช่น CSS การไล่ระดับสี

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

หมายเหตุ: คุณจะต้องแทนที่ URL ภาพพื้นหลังในโค้ด CSS ด้วย URL ของรูปภาพที่คุณอัปโหลดไปยังเว็บไซต์ WordPress ของคุณ

<แข็งแกร่ง>9. การใช้รูปภาพหลายรูปในพื้นหลัง Blockquote

คุณสามารถใช้รูปภาพหลายรูปในพื้นหลัง blockquote ได้โดยใช้ CSS ตัวอย่างเช่น เราได้ใช้ blockquote:before องค์ประกอบหลอกเพื่อเพิ่มภาพพื้นหลังอื่นให้กับ 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";
}

หมายเหตุ: คุณจะต้องแทนที่ URL ภาพพื้นหลังในโค้ด CSS ด้วยรูปภาพที่คุณอัปโหลดไปยังเว็บไซต์ของคุณ

เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีปรับแต่งสไตล์ blockquotes ในธีม WordPress คุณสามารถดูคำแนะนำในการเลือกซอฟต์แวร์การออกแบบที่ดีที่สุดและบริการโฮสต์เว็บไซต์ฟรีที่ดีที่สุดได้

หากคุณชอบบทความนี้ โปรดติดตามวิดีโอบทแนะนำช่อง YouTube สำหรับ WordPress ของเรา คุณยังพบกับเราได้บน Twitter และ Facebook