Additioanl CSS

5 ขั้นตอนเปลี่ยนสไตล์ในเว็บ WordPress ด้วย Additional CSS ใน Customizer

เนื่องจากมีหลายคนที่ใช้ธีมฟรีซึ่งมักจะมีปัญหาว่าจะทำการแก้ไขสไตล์ให้เป็นไปตามที่ตัวเองต้องการไม่ได้ แต่ธีมที่ใช้นั้นไม่ได้ให้ส่วนการปรับแต่งส่วนนั้นๆ มา ยกตัวอย่างเช่น สีของแถบเมนูด้านบน สีแถบด้านล่าง อยากแก้แต่แก้ไม่ได้ บทความนี้จึงจะแนะนำถึงวิธีการเปลี่ยนสไตล์ในเว็บ WordPress ของเรา ด้วยการใช้ Additional CSS ที่อยู่ในเมนูปรับแต่ง (Customizer) ครับ เรามาดูกันว่าจะทำได้อย่างไรกันครับ

ขั้นตอนการเปลี่ยนสไตล์

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

ขั้นตอนที่ 1 ให้ดูที่เบราเซอร์ของเราครับ โดยให้ไปที่ปุ่มจุด 3 จุด ด้านขวามือของเบราเซอร์ Chrome แล้วไปที่เมนู เครื่องมือเพิ่มเติม > เครื่องมือพัฒนาซอฟท์แวร์

Developer Tools
Developer Tools

ขั้นตอนที่ 2 ไปที่เครื่องหมายลูกศร แล้วจิ้มจุดที่ต้องการเปลี่ยนสี หลังจากจิ้มส่วนที่ต้องการแล้ว เราจะเห็นว่าจุดที่เราต้องการนั้นใช้โค้ดอะไรอยู่ ให้เราดูที่สไตล์ด้านขวามือ ในที่นี้คือ .site-header.siteinner

ดูโค้ดที่ต้องการแก้ไข
ดูโค้ดที่ต้องการแก้ไข

ขั้นตอนที่ 3 ทำการทดสอบว่าจุดนี้เปลี่ยนสีได้หรือไม่ ให้ทำการทดสอบด้วยการใส่ CSS ที่เราต้องการลงไป เลยทดสอบใส่คำว่า background-color: blue เพื่อเปลี่ยนสี พบว่าเปลี่ยนสีได้ ณ จุดนี้

เราสามารถเลือกสีที่เราต้องการได้ด้วยรหัสสี Hex Color โดยดูที่สีที่เราชอบ ด้านล่างจะมีรหัสสี เช่น สีดำ รหัสสีคือ #000000 เป็นต้น

ขั้นตอนที่ 4 ทำการก๊อบปี้ท้้งหมดไปไว้ที่ Appearance > Customizer > Additional CSS

ปรับสีที่ Customizer
ปรับสีที่ Customizer

หมายเหตุ เราสามารถใส่เครื่องหมาย !important เพื่อใช้บังคับ เพราะบางครั้งมันไม่สามารถแก้ได้

ขั้นตอนที่ 5 ทำการบันทึก เพียงเท่านี้เราก็สามารถแก้สไตล์ได้ตามต้องการแล้วครับ

แก้ไขสำเร็จ
แก้ไขสำเร็จ

การแก้ไขสไตล์ลักษณะนี้ ส่วนใหญ่จะแก้ในเรื่องที่ไม่ค่อยยาก เช่น ปรับขนาดฟอนต์ (Fonts) แก้ไขสี (Color) เพิ่มหรือปรับแต่งกรอบ (Border) ปรับขนาดพื้นที่ (Area) แต่ถ้าหากไม่สามารถปรับได้ เราอาจจะต้องทำการใช้ Child Theme เพื่อดำเนินการแก้ไขต่อไปครับ

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

ปรึกษาด้านเว็บไซต์
ปรึกษาด้านเว็บไซต์

บทความนี้มีประโยชน์สำหรับคุณหรือไม่?

ให้คะแนนบทความนี้

คะแนนเฉลี่ย / 5. จำนวนโหวต:

As you found this post useful...

Follow us on social media!

avatar

นายปิ๊ก


ผู้ก่อตั้งเว็บไซต์ Themevilles.com เป็นอาจารย์สอน WordPress และ WooCommerce ในเว็บคอร์สออนไลน์ Skilllane และรับทำเว็บไซต์ ทำการตลาดออนไลน์ เช่น SEO, Facebook และ LINE

Leave a Reply


Shares
สมัครสมาชิกเพื่อรับข้อมูลข่าวสาร
Get the latest content first.
Read about Privacy Policy.