วิธีเพิ่มสไตล์ที่กำหนดเองให้กับวิดเจ็ต WordPress

คุณต้องการเพิ่มสไตล์ที่กำหนดเองให้กับวิดเจ็ต WordPress หรือไม่?

การจัดสไตล์วิดเจ็ตของคุณทำให้คุณสามารถรักษาแบรนด์ของคุณให้สอดคล้องและเน้นข้อมูลสำคัญสำหรับผู้ใช้ของคุณ

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

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

• การเพิ่มสไตล์ที่กำหนดเองให้กับวิดเจ็ต WordPress โดยใช้ Block Editor

• การเพิ่มสไตล์ที่กำหนดเองให้กับวิดเจ็ตคลาสสิกใน WordPress

• การเพิ่มสไตล์ที่กำหนดเองให้กับวิดเจ็ต WordPress โดยใช้ CSS Hero (ไม่มีโค้ด)

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

หากคุณต้องการวิธีที่ไม่ต้องเขียนโค้ดแทน CSS คุณสามารถข้ามไปที่วิธีที่ 3 ได้

มาเริ่มกันเลย.

การเพิ่มสไตล์ที่กำหนดเองให้กับวิดเจ็ต WordPress โดยใช้ Block Editor

วิดเจ็ต WordPress ตอนนี้ใช้ตัวแก้ไขบล็อกเพื่อเพิ่มวิดเจ็ตและบล็อกลงในพื้นที่และแถบด้านข้างที่พร้อมวิดเจ็ต

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

เพียงไปที่หน้า ลักษณะที่ปรากฏ » วิดเจ็ต และคลิกบนวิดเจ็ตที่คุณต้องการเพิ่มสไตล์ที่กำหนดเอง

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

อย่าลืมบันทึกการเปลี่ยนแปลงของคุณโดยคลิกที่ปุ่มอัปเดต

ตอนนี้คุณสามารถเพิ่ม CSS ที่กำหนดเองให้กับธีม WordPress ของคุณโดยกำหนดเป้าหมายไปที่คลาส CSS นั้นได้

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

หมายเหตุ: หากคุณไม่เห็น "ปรับแต่ง" ในเมนูลักษณะที่ปรากฏ โปรดดูบทความของเราเกี่ยวกับวิธีแก้ไขเครื่องมือปรับแต่งธีมที่ขาดหายไปในผู้ดูแลระบบ WordPress หรือใช้ปลั๊กอิน WPCode เพื่อเพิ่ม CSS ที่กำหนดเองของคุณ

นี่คือ CSS พื้นฐานบางส่วนที่เราใช้

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

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

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

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

การเพิ่มสไตล์ที่กำหนดเองให้กับวิดเจ็ตคลาสสิกใน WordPress

วิธีนี้เหมาะสำหรับคุณหากคุณใช้วิดเจ็ตคลาสสิกรุ่นเก่าบนเว็บไซต์ WordPress ของคุณ

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

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

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

เพียงไปที่หน้า ลักษณะที่ปรากฏ » วิดเจ็ต และคลิกที่วิดเจ็ตที่คุณต้องการเพิ่มสไตล์ที่กำหนดเอง

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

เมื่อเสร็จแล้วอย่าลืมคลิกที่ปุ่มบันทึกเพื่อจัดเก็บการตั้งค่าวิดเจ็ตของคุณ

ตอนนี้คุณสามารถเพิ่มกฎ CSS ที่กำหนดเองให้กับธีมของคุณโดยใช้คลาส CSS ที่คุณเพิ่งป้อน ตัวอย่างเช่น เราใช้ CSS ต่อไปนี้ในเว็บไซต์ทดสอบของเรา

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

นี่คือลักษณะที่ปรากฏบนเว็บไซต์ทดสอบของเรา

การใช้สไตล์ที่กำหนดเองกับวิดเจ็ต WordPress ด้วย CSS Hero

ปัญหาหนึ่งของสองวิธีข้างต้นคือคุณต้องเขียนโค้ด CSS อย่างไรก็ตาม ไม่ใช่ผู้ใช้ทุกคนที่รู้จัก CSS หรือเพียงไม่ต้องการเขียนโค้ดด้วยตนเอง

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

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

เมื่อเปิดใช้งานปลั๊กอินจะเพิ่มรายการเมนูใหม่ลงในแถบเครื่องมือผู้ดูแลระบบ WordPress ที่ด้านบน

ถัดไป คุณต้องไปที่หน้าที่คุณสามารถดูวิดเจ็ตที่คุณต้องการจัดสไตล์และคลิกที่ปุ่ม CSS Hero ที่ด้านบน

นี่จะเป็นการเปิดหน้าในอินเทอร์เฟซตัวแก้ไข CSS Hero

มันเป็นโปรแกรมแก้ไขสดที่คุณสามารถชี้และคลิกที่รายการใด ๆ บนเว็บไซต์ของคุณและเปลี่ยนสไตล์ได้

เพียงเลื่อนเมาส์ไปที่วิดเจ็ตที่คุณต้องการจัดสไตล์แล้วคลิกเพื่อเลือก

หลังจากนั้น คุณสามารถใช้เมนูทางด้านซ้ายเพื่อจัดสไตล์วิดเจ็ตตามที่คุณต้องการ

ซึ่งรวมถึงตัวเลือกการจัดรูปแบบขั้นสูง เช่น การไล่ระดับสี การพิมพ์ การเติม ขอบ และเส้นขอบ

เมื่อเสร็จแล้วอย่าลืมปุ่มบันทึกเพื่อจัดเก็บการตั้งค่าของคุณ

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

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

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