ปุ่มจัดแต่งทรงผมใน WordPress Block Themes

ครู่หนึ่งกลับมา Ganesh Dahal เขียนโพสต์ที่นี่บน CSS-Tricks ตอบกลับทวีตที่ถามเกี่ยวกับการเพิ่ม CSS box shadows บนบล็อกและองค์ประกอบ WordPress มีสิ่งที่ยอดเยี่ยมมากมายในนั้นที่ใช้ประโยชน์จากคุณสมบัติใหม่ที่จัดส่งใน WordPress 6.1 ที่ให้การควบคุมสำหรับการใช้เงากับสิ่งต่าง ๆ โดยตรงใน Block Editor และ UI ของ Site Editor

พระพิฆเนศแตะองค์ประกอบปุ่มสั้นๆ ในโพสต์นั้น ฉันต้องการรับสิ่งนั้นและเจาะลึกแนวทางสำหรับปุ่มสไตล์ในธีมบล็อก WordPress โดยเฉพาะเราจะเปิดใหม่ theme.json ไฟล์และแยกย่อยแนวทางต่างๆ เพื่อจัดรูปแบบปุ่มในสคีมา

ทำไมต้องปุ่มคุณถาม? นั่นเป็นคำถามที่ดี เรามาเริ่มกันเลยดีกว่า

ปุ่มประเภทต่างๆ

เมื่อเรากำลังพูดถึงปุ่มในบริบทของ WordPress Block Editor เราต้องแยกความแตกต่างระหว่างสองประเภท:

1. ลูกบล็อกภายในบล็อกปุ่ม
2. ปุ่มที่ซ้อนอยู่ภายในบล็อกอื่นๆ (เช่น บล็อกแบบฟอร์มความคิดเห็นของโพสต์)

หากเราเพิ่มบล็อกทั้งสองนี้ลงในเทมเพลต บล็อกเหล่านั้นจะมีลักษณะเหมือนกันตามค่าเริ่มต้น

แต่มาร์กอัปนั้นแตกต่างกันมาก:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

อย่างที่เราเห็น ชื่อแท็ก HTML นั้นแตกต่างกัน เป็นชั้นเรียนทั่วไป — .wp-block-button และ .wp-element-button — ช่วยให้มั่นใจได้ถึงสไตล์ที่สอดคล้องกันระหว่างปุ่มทั้งสองปุ่ม

หากเรากำลังเขียน CSS เราจะกำหนดเป้าหมายสองคลาสนี้ แต่อย่างที่เราทราบกันดีว่าธีมบล็อกของ WordPress มีวิธีการจัดการสไตล์ที่แตกต่างออกไป และนั่นก็คือผ่าน theme.json ไฟล์ พระพิฆเนศยังกล่าวถึงเรื่องนี้อย่างละเอียดและคุณควรอ่านบทความของเขา

แล้วเราจะกำหนดรูปแบบปุ่มได้อย่างไรใน theme.json โดยไม่ต้องเขียน CSS จริงหรือ ขอทำมันด้วยกัน.

การสร้างสไตล์พื้นฐาน

theme.json เป็นชุดโครงสร้างของสคีมาที่เขียนด้วยคุณสมบัติ:คู่ค่า คุณสมบัติระดับบนสุดเรียกว่า "ส่วน" และเราจะทำงานร่วมกับ styles ส่วน. นี่คือที่มาของคำแนะนำในการจัดแต่งทรงผมทั้งหมด

เราจะเน้นเป็นพิเศษเกี่ยวกับ elements ใน styles. ตัวเลือกนี้กำหนดเป้าหมายองค์ประกอบ HTML ที่ใช้ร่วมกันระหว่างบล็อก นี่คือเชลล์พื้นฐานที่เรากำลังทำงานด้วย:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

สิ่งที่เราต้องทำคือกำหนด a button ธาตุ.

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

ที่ button สอดคล้องกับองค์ประกอบ HTML ที่ใช้ในการทำเครื่องหมายองค์ประกอบปุ่มในส่วนหน้า ปุ่มเหล่านี้มีแท็ก HTML ที่อาจเป็นปุ่มประเภทใดประเภทหนึ่งจากสองประเภทของเรา: คอมโพเนนต์แบบสแตนด์อโลน (เช่น บล็อกปุ่ม) หรือคอมโพเนนต์ที่ซ้อนอยู่ภายในบล็อกอื่น (เช่น บล็อกโพสต์ความคิดเห็น)

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

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

สิ่งนี้จะเปลี่ยนสีของปุ่มทั้งสองประเภท:

หากถอดรหัสเปิด DevTools และดู CSS ที่ WordPress สร้างสำหรับปุ่ม เราจะเห็นว่า .wp-element-button class เพิ่มสไตล์ที่เรากำหนดไว้ theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

นี่คือสีเริ่มต้นของเรา! ต่อไป เราต้องการให้ข้อเสนอแนะทางภาพแก่ผู้ใช้เมื่อพวกเขาโต้ตอบกับปุ่ม

การใช้รูปแบบปุ่มแบบโต้ตอบ

เนื่องจากนี่เป็นไซต์เกี่ยวกับ CSS ฉันพนันได้เลยว่าพวกคุณหลายคนคุ้นเคยกับสถานะของลิงก์และปุ่มโต้ตอบแล้ว เราสามารถ :hover เคอร์เซอร์ของเมาส์เหนือพวกเขา แท็บเข้าไป :focusคลิกที่พวกเขาเพื่อสร้าง :active. เฮ็คมีแม้กระทั่ง :visited ระบุเพื่อให้ผู้ใช้เห็นภาพว่าพวกเขาเคยคลิกสิ่งนี้มาก่อน

นั่นคือ CSS หลอกคลาส และ เราใช้มันเพื่อกำหนดเป้าหมายการโต้ตอบของลิงก์หรือปุ่ม.

ใน CSS เราอาจจัดรูปแบบ a :hover สถานะเช่นนี้:

a:hover { /* Styles */
}

In theme.jsonเราจะขยายการประกาศปุ่มที่มีอยู่ของเราด้วยคลาสหลอกเหล่านี้

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

สังเกตลักษณะ "โครงสร้าง" ของสิ่งนี้ โดยพื้นฐานแล้วเรากำลังติดตามโครงร่าง:

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

ปุ่มจัดแต่งทรงผมซ้อนกันในแต่ละบล็อก

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

บล็อกนี้ซับซ้อนกว่าบล็อกปุ่มเพราะมีส่วนที่เคลื่อนไหวมากกว่า: แบบฟอร์ม อินพุต ข้อความแนะนำ และปุ่ม ในการกำหนดเป้าหมายปุ่มในบล็อกนี้ เราต้องปฏิบัติตามโครงสร้าง JSON แบบเดียวกับที่เราทำกับ button องค์ประกอบ แต่นำไปใช้กับบล็อกแบบฟอร์มความคิดเห็นโพสต์ ซึ่งแมปกับ core/post-comments-form ธาตุ:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

โปรดทราบว่าเราไม่ได้ทำงานอีกต่อไป elements อีกต่อไป. เรากำลังทำงานข้างในแทน blocks ซึ่งสงวนไว้สำหรับการกำหนดค่าบล็อกจริง ในทางตรงกันข้าม ปุ่มถือเป็นองค์ประกอบส่วนกลางเนื่องจากสามารถซ้อนกันเป็นบล็อกได้ แม้ว่าจะมีให้ใช้งานเป็นบล็อกแบบสแตนด์อโลนเช่นกัน

โครงสร้าง JSON รองรับองค์ประกอบภายในองค์ประกอบ ดังนั้นถ้ามี button องค์ประกอบในบล็อกแบบฟอร์มแสดงความคิดเห็น เราสามารถกำหนดเป้าหมายได้ใน core/post-comments-form บล็อก:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

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

CSS ที่สร้างโดย WordPress มีตัวเลือกที่แม่นยำยิ่งขึ้นเป็นผล:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

แล้วถ้าเราต้องการกำหนดรูปแบบการโต้ตอบที่แตกต่างกันสำหรับปุ่มแบบฟอร์มแสดงความคิดเห็น เป็นข้อตกลงแบบเดียวกับที่เราทำกับรูปแบบเริ่มต้น เฉพาะรูปแบบที่กำหนดไว้ภายใน core/post-comments-form บล็อก:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

แล้วปุ่มที่ไม่ได้อยู่ในบล็อคล่ะ?

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

ไม่ต้องห่วง. ในทุกกรณี คุณจะเพิ่ม .wp-element-button คลาสในเทมเพลต บล็อก หรือมาร์กอัปรหัสย่อ สไตล์ที่สร้างโดย WordPress จะถูกนำไปใช้ในกรณีเหล่านั้น

และอาจมีบางสถานการณ์ที่คุณไม่สามารถควบคุมมาร์กอัปได้ ตัวอย่างเช่น ปลั๊กอินบล็อกบางตัวอาจมีความคิดเห็นมากเกินไปและใช้สไตล์ของตัวเองได้อย่างอิสระ ที่นั่นคุณสามารถไปที่ตัวเลือก "ขั้นสูง" ในแผงการตั้งค่าของบล็อกและใช้คลาสที่นั่น:

ตัดขึ้น

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

และอย่าลืมข้อดีหลักสามประการของการใช้งาน theme.json:

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

หากคุณเคยใช้ theme.json สไตล์ในโครงการของคุณ โปรดแบ่งปันประสบการณ์และความคิดของคุณ ฉันหวังว่าจะได้อ่านความคิดเห็นและข้อเสนอแนะ!

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
• ที่มา: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/