เจาะลึกลงไปในธีมบล็อกของ Twenty Twenty-Two และ WordPress

แม้ว่าจะช้ากว่าที่วางแผนไว้เล็กน้อย แต่เราได้รับธีมเริ่มต้นของ WordPress ใหม่ ชื่อของมันคือยี่สิบยี่สิบสอง!

ธีมเริ่มต้นของ WordPress ใหม่มาพร้อมกับ WordPress 5.9 ที่กำลังจะเปิดตัว เราอยากรู้เพิ่มเติมเกี่ยวกับธีมใหม่นี้ ดังนั้นเราจึงติดตั้งและทดสอบ Twenty Twenty-Two ในสภาพแวดล้อมการพัฒนาท้องถิ่นที่ใช้ WordPress 5.9

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

Twenty Twenty-Two ได้รับการออกแบบให้เป็นธีมเริ่มต้นที่ยืดหยุ่น น้ำหนักเบา และปรับแต่งได้มากที่สุดเท่าที่เคยมีมา มีสนามเด็กเล่นที่ยอดเยี่ยมสำหรับการทดสอบบล็อก รูปแบบ และแม่แบบ

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

เราต้องบอกทันทีว่า Twenty Twenty-Two เป็นธีมบล็อกเริ่มต้นชุดแรก !

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

จากมุมมองทางเทคนิค การเขียนเกี่ยวกับ Twenty Twenty-Two นั้นไม่แตกต่างจากการเขียนเกี่ยวกับคุณสมบัติล่าสุดและทรงพลังที่สุดที่มาพร้อมกับ WordPress 5.9 มากนัก แต่ Twenty Twenty-Two ได้มอบแว่นขยายให้เราเพื่อชื่นชมคุณลักษณะการแก้ไขไซต์ใหม่และทำความเข้าใจเกี่ยวกับอนาคตของแพลตฟอร์มได้ดีขึ้น

ดังนั้นเราจะมาแนะนำธีมใหม่ให้คุณรู้จัก

อันดับแรก เราจะสำรวจขั้นตอน การแก้ไขเว็บไซต์ใหม่ ที่ผู้ใช้จะได้สัมผัสด้วย WordPress 5.9 และ Twenty Twenty-Two

หลังจากนั้น เราจะเจาะลึกถึงฟีเจอร์หลักของธีมบล็อกที่ใช้ใน Twenty Twenty-Two คุณจะได้รู้จัก Global Styles , รูปแบบบล็อก , แม่แบบ และ ส่วนประกอบแม่แบบ

แต่ยังมีอีกมากที่จะพูดเกี่ยวกับธีมบล็อกของ Twenty Twenty-Two และ WordPress ในบทโบนัส เราจะให้ภาพรวมโดยย่อเกี่ยวกับวิธีการขยายคุณสมบัติของ Twenty Twenty-Two โดยใช้ประโยชน์จากไฟล์ theme.json

นี่คือรูปลักษณ์แรกเริ่มของธีมเริ่มต้นของ WordPress! ฉันตื่นเต้นที่จะได้เป็นผู้นำร่วมกับ @jffng และเราทั้งคู่หวังว่าคุณจะมีส่วนร่วมและ/หรือเพียงแค่สนุกกับการใช้มัน! https://t.co/covjrpgFIO

– kjellr (@kjellr) 6 ตุลาคม 2564

มาเริ่มทำงานและดำดิ่งสู่ธีมเริ่มต้นของ WordPress Twenty Twenty-Two ใหม่ล่าสุดกัน

ยี่สิบยี่สิบสองนำขั้นตอนการแก้ไขเว็บไซต์ใหม่

ฟีเจอร์การแก้ไขเว็บไซต์เต็มรูปแบบหลายอย่างรวมอยู่ในแกนหลักของ WordPress 5.9 เจ้าของเว็บไซต์ที่ใช้ WordPress เวอร์ชันล่าสุดพร้อมธีมบล็อก เช่น ติดตั้ง Twenty Twenty-Two จะสามารถ:

• สร้างและแก้ไขโพสต์และหน้าโดยใช้บล็อกและรูปแบบเพิ่มเติม
• ปรับแต่งการตั้งค่าและสไตล์ที่กำหนดไว้ในไฟล์ theme.json ผ่านอินเทอร์เฟซ Global Styles
• สร้างและแก้ไขเทมเพลตสำหรับเพจและโพสต์
• สร้างและแก้ไขส่วนเทมเพลตสำหรับส่วนหัว ส่วนท้าย และพื้นที่เทมเพลตอื่นๆ

ด้วยคุณสมบัติทั้งหมดเหล่านี้ที่รวมเข้ากับแกนกลาง ผู้ร่วมให้ข้อมูลหลักของ WordPress ได้พูดคุยเกี่ยวกับวิวัฒนาการของสถาปัตยกรรมข้อมูลและออกแบบขั้นตอนการแก้ไขเว็บไซต์ใหม่ทั้งหมด

สิ่งแรกที่คุณอาจสังเกตเห็นเมื่อคุณเปิดใช้งาน Twenty Twenty-Two ก็คือ จุดเข้าสู่เครื่องมือแก้ไขเว็บไซต์ไม่อยู่ในเมนูหลักของแดชบอร์ด WordPress อีกต่อไป แต่ถูกย้ายไปใต้เมนู ลักษณะ ที่ปรากฏ

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

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

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

มาดูกันดีกว่า

ตัวเลือก ไซต์ จะเปิดเทมเพลตหน้าแรก (บทความบล็อกล่าสุดหรือโฮมเพจแบบคงที่)

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

ในการเขียนนี้ Twenty Twenty-Two มีเทมเพลต 11 แบบ

การคลิกที่ไอคอนจุดไข่ปลา ( ︙ ) ทางด้านขวาจะทำให้คุณสามารถล้างการปรับแต่งของคุณได้

ไม่เหมือนกับเทมเพลตธีม เทมเพลตที่กำหนดเองสามารถเปลี่ยนชื่อหรือลบได้เท่านั้น (แต่คุณแก้ไขเทมเพลตที่กำหนดเองได้ในเครื่องมือแก้ไขโพสต์)

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

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

คุณสามารถล้างการปรับแต่งเหล่านี้ได้โดยคลิกที่ไอคอนจุดไข่ปลา ( ︙ ) ทางด้านขวา

การแก้ไขเทมเพลตและส่วนเทมเพลต

ตัวแก้ไข มีอินเทอร์เฟซสำหรับปรับแต่งโครงสร้างของเทมเพลตและส่วนเทมเพลตของคุณ

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

รูปภาพด้านล่างแสดงเทมเพลตหน้า 404 ในตัวแก้ไข เป็นเทมเพลตที่ค่อนข้างเรียบง่าย ซึ่งมีเฉพาะส่วนหัว ย่อหน้า และช่องค้นหา อย่างไรก็ตาม มันทำให้เราเข้าใจดีว่า UI ทำงานอย่างไร

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

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

เมื่อคลิกที่พื้นที่เทมเพลตใดๆ (เช่น ส่วนหัว) คุณจะเข้าสู่ส่วนเทมเพลตที่คุณต้องการแก้ไขโดยตรง

หากคุณคลิกที่ไอคอนจุดไข่ปลาทางด้านขวา คุณจะเข้าถึง ตัวแก้ไขส่วนเทมเพลตที่แยก ได้

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

เมื่อคุณพอใจกับการเปลี่ยนแปลงแล้ว ให้บันทึกการแก้ไขและกลับไปที่เครื่องมือแก้ไขเทมเพลตหลักเพื่อตรวจสอบผลลัพธ์สุดท้าย

หากคุณต้องการเจาะลึกลงไปในสถาปัตยกรรมข้อมูลใหม่ คุณอาจต้องการตรวจสอบบทความต่อไปนี้:

• แนวคิดเกี่ยวกับการแก้ไขไซต์ IA: วิธีแสดงและเข้าถึงคุณลักษณะใหม่
• แนวคิดการแก้ไขไซต์ iA – ตอนที่ 2

หลักยี่สิบยี่สิบสอง: ภาพรวมโดยย่อของ theme.json

เพื่อให้เข้าใจอย่างถ่องแท้ว่าธีม Twenty Twenty-Two และบล็อก (เช่น Bricksy) ทำงานอย่างไร มาดูที่การกำหนดค่าชุดรูปแบบใหม่และกลไกการจัดรูปแบบตามไฟล์ theme.json

เปิดตัวด้วย WordPress 5.8 กลไกใหม่นี้ช่วยให้นักพัฒนาธีมสามารถกำหนดค่าตัวแก้ไขและเพิ่มการรองรับคุณสมบัติจากจุดกำหนดค่าส่วนกลาง

ใน Twenty Twenty-Two ไฟล์ theme.json มีโครงสร้างดังต่อไปนี้:

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

เรามาดูแต่ละส่วนกันอย่างรวดเร็ว

เวอร์ชั่น

ฟิลด์ version จะอธิบายเวอร์ชันของข้อกำหนด ซึ่งปัจจุบันคือ 2

การตั้งค่า

ส่วน settings กำหนดการตั้งค่าในระดับสากลหรือระดับบล็อก การตั้งค่าที่กำหนดที่ระดับบนสุดจะมีผลกับการบล็อกทั้งหมด แต่การบล็อกสามารถแทนที่การตั้งค่าส่วนกลางทีละรายการ ใน Twenty Twenty-Two คุณจะพบการตั้งค่าต่อไปนี้:

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

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

• คุณสมบัติที่กำหนดเอง CSS: --wp--preset--{preset-category}--{preset-slug}
• ชื่อคลาส CSS: .has-{preset-slug}-{preset-category}

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

สไตล์

ส่วน styles เป็นที่ที่ธีมกำหนดสไตล์เริ่มต้นของบล็อกและองค์ประกอบ ดูตัวอย่าง ลักษณะยี่สิบสองต่อไปนี้สำหรับบล็อกปุ่มหลัก:

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

คุณจะสังเกตเห็นคุณสมบัติที่กำหนดเอง CSS ที่ใช้ในการประกาศคุณสมบัติ

เทมเพลตที่กำหนดเอง

ส่วน customTemplates เป็นที่ที่ธีมประกาศเทมเพลตที่กำหนดเอง ต้องระบุฟิลด์ name และ title ธีมยังสามารถประกาศประเภทโพสต์ที่ใช้เทมเพลตได้โดยการตั้งค่าคุณสมบัติ postTypes

Twenty Twenty-Two มีเทมเพลตที่กำหนดเองสี่แบบ:

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

คุณจะพบไฟล์ .html ที่เกี่ยวข้องในโฟลเดอร์ block-templates

ส่วนเทมเพลต

ส่วน templateParts มีคำจำกัดความของส่วนของเทมเพลต:

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

ต้องระบุฟิลด์ name และ title ธีมยังสามารถประกาศเงื่อนไขของ area ซึ่งส่วนเทมเพลตจะแสดงผลในตัวแก้ไข

ไฟล์ .html ส่วนเทมเพลตจะอยู่ในโฟลเดอร์ ส่วนเทมเพลต

เมื่อคุณทราบข้อมูลเพิ่มเติมเกี่ยวกับ theme.json ของ Twenty Twenty-Two แล้ว เราสามารถสำรวจคุณลักษณะของธีมและอินเทอร์เฟซการแก้ไขใหม่ได้อย่างละเอียดยิ่งขึ้น

มา ดูสไตล์สากลของ Twenty Twenty-Two กัน

สไตล์สากลในยี่สิบยี่สิบสอง

หากคุณดูที่ style.css ของ Twenty Twenty-Two คุณอาจแปลกใจที่สังเกตว่ามีการประกาศ CSS จำนวนน้อยที่สุด เหตุผลก็คือ มีการประกาศสไตล์ในไฟล์ theme.json ในธีมแบบบล็อก

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

อินเทอร์เฟซ Global Styles สามารถเข้าถึงได้จากไอคอน Styles ใหม่ที่มุมบนขวาของ Editor (โปรดดู The Global Styles Interface)

การคลิกที่ไอคอนนั้นจะแสดงแถบด้านข้างของ สไตล์ ใหม่ซึ่งรวมถึงแผงแยกสามแผง:

• แผงแสดง ตัวอย่าง แสดงตัวอย่างการปรับแต่งของคุณ
• แผง Global Styles ให้การเข้าถึงกลุ่มการควบคุมเฉพาะสำหรับ Typography , Colors และ Layout
• รายการ บล็อก ที่ให้การเข้าถึงการตั้งค่าสไตล์ระดับบล็อก

จานสีของ Twenty Twenty-Two

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

ในพาเนลพาเล็ต คุณสามารถปรับแต่ง ธีม หรือ จาน สี เริ่มต้น และแม้กระทั่งสร้างจานสีแบบกำหนดเองของคุณ

คุณพบรหัสที่สร้างการควบคุมสีหรือยัง

หากไม่เป็นเช่นนั้น ให้เปิด theme.json ของ Twenty Twenty-Two ในโปรแกรมแก้ไขโค้ดที่คุณชื่นชอบ คุณจะพบการประกาศจานสีต่อไปนี้:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

ภาพด้านล่างแสดงให้เห็นว่าโค้ดด้านบนตรงกับจานสีของ Twenty Twenty-Two อย่างไร

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

และนั่นคือทั้งหมด! คุณไม่จำเป็นต้องเพิ่มโค้ด CSS ที่กำหนดเองแม้แต่บรรทัดเดียวในเครื่องมือปรับแต่งหรือสร้างธีมย่อยสำหรับสิ่งนั้น

แต่มาสำรวจสไตล์สากลของ Twenty Twenty-Two กันต่อด้วยตัวอย่างเพิ่มเติม

การตั้งค่าการพิมพ์

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

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

คุณสงสัยหรือไม่ว่ารหัสใดที่สร้างการควบคุมเหล่านี้?

เปิด theme.json ของ Twenty Twenty-Two และค้นหาส่วนการ typography คุณจะเห็นการตั้งค่าต่อไปนี้:

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

คุณอาจคาดหวังว่าจะเห็นแบบอักษรสองตระกูลและขนาดแบบอักษรห้าขนาดจากโค้ดด้านบน และคุณก็เดาถูกแล้ว

นี่คือวิธีที่โค้ดด้านบนแปลเป็นการตั้งค่า Global Styles Typography :

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

เครื่องมือเค้าโครงและลักษณะที่ปรากฏ

องค์ประกอบสุดท้ายในแถบด้านข้างของ Global Styles คือ Layout ในขณะที่เขียนนี้ จะรวมเฉพาะการควบคุม padding ภายในเท่านั้น

ใน Twenty Twenty-Two แผงเค้าโครงจะเปิดใช้งานโดยคุณสมบัติการตั้งค่า appearanceTools ที่ปรากฏ ซึ่งเป็นบูลีนที่สามารถใช้เพื่อเปิดใช้งานการตั้งค่าหลายรายการพร้อมกัน:

 { "settings": { "appearanceTools": true } }

"appearanceTools": true แทนที่บล็อกการประกาศต่อไปนี้:

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

ตกลง ตอนนี้คุณหวังว่าจะเข้าใจว่าการตั้งค่าที่ประกาศในไฟล์ theme.json ตรงกับการควบคุม Global Styles ที่สอดคล้องกันอย่างไร

ยังมีปริศนาอีกชิ้นหนึ่งที่ขาดหายไปเพื่อให้ได้ภาพที่สมบูรณ์ของธีมเริ่มต้นของ WordPress ใหม่: รูปแบบบล็อก

รูปแบบบล็อกยี่สิบสองแบบ

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

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

และ WordPress 5.9 ได้นำการปรับปรุงที่สำคัญมาสู่ระบบรูปแบบด้วย Pattern Explorer ใหม่ ซึ่งเป็นเครื่องมือที่ช่วยให้คุณสามารถเรียกดูรูปแบบในโมดอลแบบเต็มหน้าจอได้

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

Twenty Twenty-Two มีรูปแบบมากมาย (มากกว่า 65 รายการ) ในห้าหมวดหมู่

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

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

สมมติว่าคุณต้องการลบส่วนท้ายเริ่มต้นออกจากเทมเพลตดัชนีและโพสต์เดี่ยว และแทนที่ด้วยรูปแบบบล็อกอื่น Twenty Twenty-Two

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

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

ดังที่กล่าวไว้ข้างต้น การดำเนินการนี้จะเปิดตัวแก้ไขส่วนเทมเพลตแบบแยกส่วน

ตอนนี้เปิดตัวแทรกบล็อกและคลิกที่ รูปแบบ

เปิดตัวเครื่องมือ Pattern Explorer ใหม่ เลือกหมวดหมู่ ยี่สิบสองส่วนท้าย และเลือกส่วนท้ายที่คุณต้องการ

ตอนนี้เพิ่มและแก้ไขบล็อคตามความต้องการของคุณ

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

รูปภาพด้านล่างเปรียบเทียบสามเทมเพลต (ดัชนี โพสต์เดี่ยว และโพสต์เดี่ยวที่ไม่มีตัวคั่น) กับการปรับแต่งส่วนหัวและส่วนท้ายที่แตกต่างกัน:

ขยายยี่สิบยี่สิบสองด้วยธีมเด็ก

การสร้างธีมลูกสำหรับธีมบล็อกค่อนข้างแตกต่างจากการสร้างธีมย่อยสำหรับธีมคลาสสิก

แต่เมื่อคุณมีความเข้าใจที่ดีเกี่ยวกับโครงสร้างของธีมบล็อกแล้ว คุณจะไม่ยากที่จะสร้างธีมย่อยสำหรับธีม Twenty Twenty-Two หรือธีมบล็อกอื่นๆ

ลองมาดูวิธีปรับแต่งรูปลักษณ์ของเว็บไซต์ที่ใช้ Twenty Twenty-Two ของคุณกัน

1. การตั้งค่าธีมลูกสำหรับยี่สิบยี่สิบสอง

ในไดเร็กทอรี /wp-content/themes ของคุณ ให้สร้างโฟลเดอร์ใหม่และตั้งชื่อตามที่คุณต้องการ (ตามมาตรฐานการพัฒนาธีม) ในตัวอย่างนี้ เราเรียกโฟลเดอร์ธีม ลูก

ตอนนี้คุณต้องการ ไฟล์ style.css เปิดตัวแก้ไขโค้ดที่คุณชื่นชอบและสร้างสไตล์ชีตต่อไปนี้:

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

และเช่นเคย คุณสามารถแก้ไขฟิลด์ได้ตามความต้องการของคุณ

ธีมลูกของคุณพร้อมให้ดูตัวอย่างแล้ว คุณสามารถเปิดใช้งานได้ในหน้าจอผู้ดูแล ลักษณะที่ ปรากฏ > ธีม

2. การปรับแต่งการตั้งค่าส่วนกลาง

ตั้งแต่ WordPress 5.9 ธีมย่อยที่มีไฟล์ theme.json จะรับช่วงการตั้งค่าของธีมหลัก หาก theme.json ของเด็กกำหนดชุดของสไตล์ สไตล์เหล่านั้นจะนำไปใช้กับสไตล์ของผู้ปกครอง

ดังนั้นเราจึงสามารถสร้างไฟล์ theme.json ที่มีเฉพาะบล็อกการตั้งค่าและการกำหนดสไตล์แบบกำหนดเองขนาดเล็ก แทนที่จะกำหนดตัวเลือกเดิมทั้งหมดของเราใหม่

วิธีการประกาศจานสีที่กำหนดเอง

เมื่อสร้างธีมย่อยสำหรับ Twenty Twenty-Two งานที่ง่ายที่สุดคือการแทนที่จานสี สิ่งที่คุณต้องทำคือกำหนดจานสีใหม่ใน theme.json ของบุตรหลานดังที่แสดงด้านล่าง:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

บันทึกไฟล์ของคุณและกลับไปที่เครื่องมือแก้ไขไซต์ จานสีที่กำหนดไว้ข้างต้นควรแทนที่จานสีเริ่มต้นของ Twenty Twenty-Two

สีจะแสดงตามลำดับบนจานสี และชื่อของสีควรเป็นไปตามแนวทางปฏิบัติที่ดีที่สุดและข้อตกลงการตั้งชื่อที่กล่าวถึงใน Github

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับตัวเลือกสี theme.json ได้ในภาพรวมเชิงลึกโดย Carolina Nymark

วิธีการประกาศฟิลเตอร์ Duotone แบบกำหนดเอง

คุณยังสามารถแทนที่สีดูโอโทนเริ่มต้นด้วยชุดฟิลเตอร์ที่คุณกำหนดเองได้

ในการทำเช่นนั้น เพียงเพิ่มโค้ดต่อไปนี้ในการตั้งค่า theme.json ของบุตรหลานในระดับเดียวกับคุณสมบัติ palette :

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

บันทึกไฟล์ของคุณและตรวจสอบผลลัพธ์ในตัวแก้ไขบล็อก คุณควรเห็นตัวกรองดูโอโทนเดียวเท่านั้น

3. การปรับแต่งสไตล์บล็อก

ดังที่เราได้กล่าวไว้ก่อนหน้านี้ ด้วย WordPress 5.9 คุณสามารถปรับแต่งการตั้งค่าและสไตล์ของ theme.json จากอินเทอร์เฟซ Global Styles ได้แล้ว

สามารถปรับแต่งสไตล์บล็อกจากอินเทอร์เฟซ Global Styles ได้ก็ต่อเมื่อบล็อกนั้นประกาศการสนับสนุนสำหรับการทำงานเฉพาะ ในไฟล์ block.json ที่เกี่ยวข้อง แต่คุณสามารถลบล้างการตั้งค่าการบล็อกเริ่มต้นได้ใน theme.json ของธีมลูก

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

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

ในตัวอย่างข้างต้น เราได้เปลี่ยนตระกูลฟอนต์ สีพื้นหลัง และค่าการเติมสำหรับ core/post-title รวมถึงระยะขอบด้านบนและด้านล่างสำหรับ core/group

ภาพด้านล่างแสดงผลตามที่ปรากฏในเว็บไซต์สาธารณะ:

และนั่นคือทั้งหมดสำหรับการทบทวน!

เราจะไม่เจาะลึกลงไปในธีมย่อยในตอนนี้ เนื่องจากจะเกินขอบเขตของโพสต์นี้ ในระหว่างนี้ คุณจะพบตัวอย่างเพิ่มเติมของธีมย่อย Twenty Twenty-Two ใน Github

สรุป

ในขณะที่พิจารณาอย่างใกล้ชิดถึงธีมเริ่มต้นของ WordPress ใหม่ Twenty Twenty-Two และคุณสมบัติของมัน (ซึ่งทำให้เป็นธีมเริ่มต้นที่ยืดหยุ่นที่สุดเท่าที่เคยมีมา) เราได้เปิดตัวสถาปัตยกรรมข้อมูลใหม่ที่นำมาใช้กับ WordPress 5.9 เรายังได้แอบดูอินเทอร์เฟซ Global Styles ใหม่อีกด้วย

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

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

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

• บล็อกธีม : ธีมที่ออกแบบมาสำหรับ FSE
• ธีมสากล : ธีมที่ใช้งานได้กับทั้งเครื่องมือปรับแต่งและตัวแก้ไขไซต์
• ธีมไฮบริด : ธีมคลาสสิกที่รองรับฟีเจอร์ FSE เช่น theme.json
• ธีมคลาสสิก : ธีมที่มีเทมเพลต PHP, functions.php เป็นต้น

ดังนั้น อย่าเพิ่งกลัวในตอนนี้ ยังมีวิธีแก้ปัญหามากมายให้เลือกหากคุณยังไม่พร้อมที่จะเปลี่ยนไปใช้ธีมแบบบล็อก

และตอนนี้ก็ขึ้นอยู่กับคุณแล้ว! คุณพร้อมที่จะก้าวกระโดดครั้งใหญ่และเริ่มใช้ธีมบล็อกแล้วหรือยัง? แบ่งปันความคิดของคุณกับเราในความคิดเห็นด้านล่าง