คู่มือฉบับสมบูรณ์สำหรับไฟล์ WordPress theme.json

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

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

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

theme.json ใน WordPress คืออะไร?

ไฟล์ theme.json เป็นกลไกที่ทำให้คุณสามารถกำหนดค่า Block Editor ด้วยการควบคุมที่มากขึ้น มีประโยชน์สำหรับการเปลี่ยนแปลงสไตล์ทั่วทั้งไซต์ เนื่องจากคุณสามารถกำหนดสไตล์เริ่มต้นให้กับบล็อกทั้งหมด (หรือบางส่วน) ของคุณได้

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

ไฟล์ theme.json ถูกนำมาใช้พร้อมกับ Site Editor เมื่อรวมกันแล้ว theme.json เป็นหนึ่งในขั้นตอนสำคัญอันดับแรกในการจัดการสไตล์สำหรับ WordPress รุ่นต่อไปในอนาคต เป็นวิธีที่ยอดเยี่ยมในการควบคุมธีม (และไซต์) ของคุณมากขึ้น เพื่อให้คุณสามารถเปลี่ยนแปลงเมนู ส่วนหัว และส่วนท้ายของคุณได้

กล่าวโดยสรุปคือ Site Editor ช่วยให้คุณทำการเปลี่ยนแปลงสไตล์ทั่วโลกได้มากมาย ในขณะที่ theme.json เป็นกลไกที่ให้คุณกำหนดค่าตัวเลือกที่กำหนดเองสำหรับบล็อกของคุณ

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

ไฟล์ theme.json อยู่ที่ไหน

คุณสามารถค้นหาไฟล์ theme.json ได้ในรูทของไดเร็กทอรีธีมของคุณ หากคุณใช้ Site Editor และคุณได้เปิดใช้งานธีมแบบบล็อก เช่น Twenty Twenty-Three คุณจะสามารถเข้าถึงไฟล์ theme.json ได้อย่างแน่นอน

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

สิ่งที่ต้องทำก่อนแก้ไขไฟล์ theme.json

ตอนนี้คุณทราบข้อมูลเพิ่มเติมเกี่ยวกับไฟล์ theme.json แล้ว มาดูปัจจัยสำคัญบางประการที่ควรพิจารณาก่อนทำการแก้ไข

1. สำรองไซต์ของคุณ

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

การใช้ปลั๊กอินสำรองข้อมูล Jetpack VaultPress เป็นหนึ่งในวิธีที่ง่ายที่สุดในการสำรองข้อมูลไซต์ของคุณ

เครื่องมือ Jetpack นี้สร้างการสำรองข้อมูลตามเวลาจริงบนคลาวด์และจัดเก็บไว้ในเครือข่ายเซิร์ฟเวอร์ที่ปลอดภัยของ WordPress.com นอกจากนี้ กระบวนการคืนค่ายังง่ายและรวดเร็วอีกด้วย

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

2. พิจารณาใช้ไซต์การแสดงละคร

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

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

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

วิธีแก้ไขไฟล์ theme.json ของคุณ

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

ในการเริ่มต้น คุณจะต้องไปที่ไดเร็กทอรีรากของเว็บไซต์ของคุณ คุณสามารถทำได้โดยใช้ไคลเอนต์ SFTP เช่น FileZilla หรือไปที่ตัวจัดการไฟล์ของคุณ จากนั้น เพียงไปที่ ไดเร็กทอรี public_html ภายในนั้น ค้นหาโฟลเดอร์ wp-content ของคุณ

จากนั้นไปที่ ธีม และเลือกธีมที่ใช้งานอยู่สำหรับไซต์ของคุณ นี่คือที่ที่คุณจะพบ theme.json หากธีมของคุณมี

1. สร้างจานสีเริ่มต้น

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

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

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

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

หลังจากที่คุณเชื่อมต่อกับไฟล์ธีมของคุณโดยใช้ SFTP หรือตัวจัดการไฟล์แล้ว คุณจะต้องคัดลอกโค้ดต่อไปนี้และบันทึกไว้ในไดเร็กทอรีรากของธีมของคุณ:

 { “version”: 1, “settings”: { “color”: { “custom”: false, “customGradient”: false, “gradients”:[], “link”: false, “palette”:[ { “slug”: “vivadcyanblue”, “color”: “#0693E3” }, { “slug”: “vividgreencyan”, “color”: “#00D084”, }, { “slug”: “white”, “color”: “#ffffff” } ] }

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

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

สิ่งที่ยอดเยี่ยมเกี่ยวกับการสร้างจานสีแบบกำหนดเองใน theme.json ก็คือ WordPress จะเขียน CSS ที่จำเป็นทั้งหมดใหม่ด้วย ด้วยวิธีนี้ การเปลี่ยนแปลงสีใดๆ ที่ทำใน Block Editor จะมีผลที่ส่วนหน้าด้วย

2. กำหนดค่าขนาดตัวอักษรที่กำหนดเอง

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

อีกครั้ง คุณจะต้องค้นหาไดเร็กทอรีรากของธีมของคุณโดยไปที่โฟลเดอร์ ธีม ใน wp-content จากนั้นค้นหา theme.json ขนาดตัวอักษรจะถูกเพิ่มใน theme.json ภายใต้ การตั้งค่า → การพิมพ์ → fontSizes

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

ใน WordPress ขนาดฟอนต์ "เล็ก" เริ่มต้นมีค่า 13px ดังนั้นคุณจึงสามารถกำหนดค่าตามนี้ สรุปแล้ว ไฟล์ theme.json ของคุณจะมีลักษณะดังนี้เมื่อคุณเพิ่มโค้ดนี้ลงในไฟล์:

 add_theme_support( 'editor-font-sizes', array(    array(        'name' => esc_attr__( 'Small', 'themeLangDomain' ),        'size' => 12,        'slug' => 'small'    ),    array(        'name' => esc_attr__( 'Regular', 'themeLangDomain' ),        'size' => 16,        'slug' => 'regular'    ),    array(        'name' => esc_attr__( 'Large', 'themeLangDomain' ),        'size' => 36,        'slug' => 'large'    ),    array(        'name' => esc_attr__( 'Huge', 'themeLangDomain' ),        'size' => 50,        'slug' => 'huge'    ) ) );

เพียงบันทึกการเปลี่ยนแปลงเพื่ออัปเดตการตั้งค่าบล็อก WordPress ของคุณ

3. สร้างเทมเพลตและส่วนเทมเพลตที่กำหนดเอง

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

ในการเริ่มต้น ให้เปิด theme.json คุณจะต้องนึกถึงชื่อ ชื่อเรื่อง และประเภทโพสต์ แม้ว่าการตั้งค่าสุดท้ายจะเป็นตัวเลือกก็ตาม แล้ว, เพิ่มรหัสต่อไปนี้ในไฟล์:

 { “version”: 1, “customTemplates”: [ { “name”: “custom-template-example”, “title”: “The Custom Template Title”, “postTypes”: [ “page”, “post”, “my-cpt” ] } ] }

ณ จุดนี้ คุณได้สร้างเทมเพลตสำหรับเพจ โพสต์ และประเภทโพสต์ที่กำหนดเองแล้ว คุณสามารถก้าวไปอีกขั้นและสร้างเทมเพลตสำหรับธีมของคุณ

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

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

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

 { “version”: 1, “templateParts”: [ { “name: “my-template-part”, “title”: “Footer”, “area”: “footer” } ] }

จากนั้น อย่าลืมบันทึกการเปลี่ยนแปลงของคุณก่อนออกจาก theme.json

คำถามที่พบบ่อยเกี่ยวกับ theme.json ใน WordPress

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

ธีม.json เปิดตัวครั้งแรกใน WordPress เมื่อใด

ไฟล์ theme.json เปิดตัวครั้งแรกพร้อมกับการเปิดตัว WordPress 5.8 นี่คือตอนที่เปิดตัว Full Site Editing (FSE) พร้อมกับความสามารถในการใช้ธีมแบบบล็อก

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

คุณสามารถทำอะไรกับไฟล์ theme.json ได้บ้าง?

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

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

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

ข้อกำหนดเบื้องต้นในการใช้ไฟล์ theme.json คืออะไร

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

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

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

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

ใช้ไฟล์ WordPress theme.json เพื่อการออกแบบเว็บไซต์ที่มีประสิทธิภาพ

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

ไฟล์ theme.json อยู่ในไดเร็กทอรีรากของไซต์ของคุณตั้งแต่ WordPress 5.8 เป็นต้นไป คุณสามารถแก้ไขไฟล์เพื่อทำการเปลี่ยนแปลงอย่างครอบคลุม เช่น ใช้ชุดสีที่กำหนดเองกับไซต์ของคุณและลบล้างขนาดตัวอักษรเริ่มต้นของ WordPress

ก่อนที่คุณจะแก้ไขไฟล์ theme.json สิ่งสำคัญคือต้องทำการสำรองข้อมูลไซต์ของคุณ Jetpack VaultPress Backup เป็นปลั๊กอินที่ใช้งานง่ายซึ่งช่วยให้คุณสามารถกู้คืนไซต์ของคุณได้แม้ในขณะออฟไลน์ นอกจากนี้ยังสำรองไฟล์ ข้อมูล WooCommerce และฐานข้อมูลของคุณทั้งหมด!