ในที่สุด WordPress ก็คืนความสามารถในการเพิ่ม CSS ที่กำหนดเองให้กับเว็บไซต์ของคุณด้วยการเปิดตัว WordPress 6.2! ในบทความช่วยเหลือนี้ ฉันแสดงวิธีเพิ่ม CSS ที่กำหนดเองอย่างรวดเร็วไปยังเว็บไซต์ใดๆ โดยใช้ WordPress เวอร์ชันล่าสุด ซึ่งเป็นแพลตฟอร์ม CMS แบบโอเพ่นซอร์สและฟรีและนักออกแบบเว็บไซต์

วิธีนี้ยังใช้ได้กับเวอร์ชันใหม่กว่า รวมถึง WordPress 6.3 และ 6.4

สารบัญ

ขั้นตอนที่ 1: ไปที่เครื่องมือแก้ไขไซต์

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

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

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

WordPress ประยุกต์: วิธีสร้างหลักสูตรเว็บไซต์ที่มีประสิทธิภาพโดย Davies Media Design

ขั้นตอนที่ 2: เข้าถึงเมนู "สไตล์"

ภายในเมนูด้านบน คลิกที่ไอคอน "สไตล์" (ไอคอนเป็นวงกลมครึ่งวงกลมสีดำครึ่งวงกลมสีขาว) เพื่อเปิดแถบด้านข้างสไตล์ขึ้นมา

ขั้นตอนที่ 3: เข้าถึง “CSS เพิ่มเติม”

คลิกที่เมนู “สไตล์การดำเนินการ” ที่ด้านบนสุดของแถบด้านข้าง (ไอคอนสามจุดเล็กๆ – ลูกศรสีแดงในภาพด้านบน)

คลิกตัวเลือก “Additional CSS” จากเมนูแบบเลื่อนลง (ลูกศรสีแดง)

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

เมื่อคุณเพิ่ม CSS ที่กำหนดเองแล้ว (ลูกศรสีเขียว) ให้คลิกปุ่ม "บันทึก" ในเมนูด้านบนสุดเพื่อบันทึกการเปลี่ยนแปลงของคุณ (ลูกศรสีแดง)

แค่นั้นแหละ! ตอนนี้คุณทราบตำแหน่งที่จะเพิ่ม CSS แบบกำหนดเองในไซต์ WordPress ของคุณใน WordPress 6.2 ต้องการที่จะเชี่ยวชาญ WordPress? ตรวจสอบของฉัน WordPress Masterclass บน Udemy!

ออกจากเวอร์ชันมือถือ