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

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

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

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

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

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

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

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

รับ Genesis Framework & StudioPress Themes ฟรี!

ลูกค้า WP Engine สามารถเข้าถึงชุดธีม WordPress พรีเมียมที่เป็นมาตรฐานในทุกแผน! คุณสามารถเริ่มสร้างไซต์ต่อไปได้ในราคาเพียง $20/เดือน! เรียนรู้เพิ่มเติมที่นี่

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

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

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

นี่คือลักษณะของตัวแปร CSS :

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

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

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

ฟังก์ชัน var()

ตัวแปรถูกนำไปใช้จริงอย่างไร? มันค่อนข้างง่าย ขั้นแรก ตัวแปรจะถูกประกาศ แล้วจึงนำไปใช้ในชุดกฎ CSS ที่จำเป็น

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

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

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

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

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

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

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

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

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

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

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

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

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

ขับเคลื่อนอิสระในการสร้างสรรค์ด้วย WP Engine

WP Engine ขับเคลื่อนอิสระในการสร้างบน WordPress ผลิตภัณฑ์ของบริษัทซึ่งเร็วที่สุดในบรรดาผู้ให้บริการ WordPress ทั้งหมด ขับเคลื่อนประสบการณ์ดิจิทัล 1.5 ล้านครั้ง ไซต์ชั้นนำกว่า 200,000 ไซต์ในโลกใช้ WP Engine เพื่อขับเคลื่อนประสบการณ์ดิจิทัลมากกว่าใครใน WordPress ค้นหาข้อมูลเพิ่มเติมของเราที่ wpengine.com หรือพูดคุยกับตัวแทนวันนี้!