วิธีเพิ่มตัวแปร CSS เพื่อปรับแต่งธีมลูกของ WordPress

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

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

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

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

รับธีม Genesis Framework & StudioPress ฟรี!

เมื่อคุณโฮสต์ไซต์ของคุณบน Flywheel คุณจะสามารถเข้าถึงธีม WordPress ระดับพรีเมียมกว่า 30 ธีม (รวมถึง Genesis!) ได้จากแดชบอร์ดที่สวยงามของเรา นั่นคือมูลค่ามากกว่า $2,000 ที่คุณสามารถเริ่มต้นได้ด้วยเงินเพียง $15/เดือน! เรียนรู้เพิ่มเติมที่นี่

วิธีใช้ตัวแปร CSS

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

นี่คือสิ่งที่ตัวแปร CSS ดูเหมือน:

:root {
--text-black: #232525;
}

header {
color: var(--text-black);
}

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

:root {
--white: #ffffff;
--black: #232525;
--mid-gray: #eeeeee;
--brand-red: #e50000;
}

ฟังก์ชัน var()

ตัวแปรมีการใช้งานจริงอย่างไร? มันค่อนข้างง่าย ขั้นแรก ตัวแปรจะถูกประกาศแล้วใช้ใน CSS rule-set ที่จำเป็น ขอบเขตเป็นสิ่งสำคัญที่ต้องระวัง ต้องประกาศตัวแปรภายในตัวเลือก CSS ที่อยู่ภายในขอบเขตที่ต้องการ ในหลายกรณี คุณจะต้องให้ตัวแปรพร้อมใช้งานในขอบเขตส่วนกลาง ซึ่งจะทำให้เข้าถึงได้ทุกอย่าง คุณสามารถใช้ :root หรือตัวเลือก body สำหรับขอบเขตส่วนกลาง อย่างไรก็ตาม อาจมีบางกรณีที่คุณจำเป็นต้องจำกัดขอบเขต และต้องการทำงานกับตัวแปรที่มีขอบเขตในเครื่อง

ง่ายต่อการระบุตัวแปร พวกมันมีสองขีดคั่นข้างหน้า ต้องใส่เครื่องหมายขีดคั่น (–) สองตัว

ไวยากรณ์ของ var() ค่อนข้างตรงไปตรงมา:
var(variable-name, value)

:root {
--light-gray: #eeeeee
--text-black: #434344
}

.sidebar {
--background-color: var(--light-gray);
--color: var(--text-black);
}

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

ตัวตรวจสอบเว็บ (Chrome ในกรณีนี้) ช่วยให้คุณตรวจสอบและดูว่ามีการใช้ตัวแปรใดบ้าง

ตัวอย่างต่อไปนี้ ขั้นแรกให้กำหนดคุณสมบัติที่กำหนดเองส่วนกลางที่ชื่อ --light-gray และ --text --text-black ฟังก์ชัน var() ถูกเรียกใช้ ซึ่งจะแทรกค่าของคุณสมบัติที่กำหนดเองในภายหลังในสไตล์ชีต:

:root {
--light-gray: #eeeeee;
--text-black: #434344;
}

.sidebar {
background-color: var(--light-gray);
color: var(--text-black);
}

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

:root {
--gutter: 5px;
}

section {
padding: var(--gutter);
}

@media (min-width: 600px) {
:root {
--gutter: 15px;
}
}

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

.warning {
--warning-text: #ff0000;
--gap: 20;
color: var(--warning-text);
margin-top: calc(var(--gap) * 1px);
}

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

มีอะไรต่อไป: ปลั๊กอิน

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

รักบทความนี้? ลองอย่างใดอย่างหนึ่งต่อไปนี้:

• วิธีสร้างเลย์เอาต์การ์ดโดยใช้ CSS Grid Layout
• วิธีรวมกริด Flexbox และ CSS สำหรับเลย์เอาต์ที่มีประสิทธิภาพ
• การปรับแต่งอย่างง่ายสำหรับธีมลูกปฐมกาลของคุณ