ข้ามไปยังเนื้อหา
ธีม

Block Theme กับ Classic Theme ใน WordPress: เปรียบเทียบกันแบบตรงไปตรงมา

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

เผยแพร่แล้ว

เปิดโฟลเดอร์ธีมของคุณดู ถ้ามีโฟลเดอร์ templates ที่ข้างในมี index.html และมี theme.json อยู่ที่ราก แสดงว่าคุณใช้ block theme แต่ถ้ามี index.php อยู่คู่กับไฟล์อย่าง header.php และ footer.php และแถบเมนูผู้ดูแลระบบแสดง Appearance ตามด้วย Customizer แสดงว่าคุณใช้ classic theme

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

แยกให้ออกใน 30 วินาที

สัญญาณClassic themeBlock theme
ไฟล์เทมเพลตหลักindex.phptemplates/index.html
ส่วนหัวและส่วนท้ายheader.php, footer.phpparts/header.html, parts/footer.html
การตั้งค่าระดับเว็บfunctions.phptheme.json (บวก functions.php ถ้าต้องการ)
เมนูผู้ดูแลระบบAppearance > CustomizerAppearance > Editor
ที่เก็บการแก้ไขไฟล์บนดิสก์ฐานข้อมูล ในรูปโพสต์ wp_template
หน้าจอวิดเจ็ตมีไม่มี

WordPress ตัดสินโดยดูว่ามี templates/index.html หรือไม่ ธีมที่มี theme.json มาให้แต่ยังใช้เทมเพลต PHP อยู่ ยังถูกนับเป็น classic theme สถานะกึ่งกลางแบบนี้พบได้บ่อยและมีชื่อเรียกของมัน ซึ่งจะพูดถึงด้านล่าง

ถ้าเข้าถึงเชลล์ได้ คำสั่งเดียวก็จบเรื่อง

wp eval 'var_dump( wp_is_block_theme() );'

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

อะไรเปลี่ยนไปสำหรับคนที่แก้เนื้อหาเว็บ

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

ใน block theme ตัว Site Editor เปิดหน้าเว็บทั้งหน้าให้แก้ได้หมด ส่วนหัว ส่วนท้าย ลูปแสดงบทความ หน้า 404 เลย์เอาต์หน้าผลการค้นหา ทั้งหมดเป็นบล็อก และคนที่ไม่เคยเห็น PHP มาก่อนก็แก้ได้ นั่นคือจุดขายจริง ๆ และมันใหญ่จริง

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

ความสูญเสียเล็ก ๆ อีกสองข้อที่เจ็บจริงเวลาใช้งาน คือ block theme ไม่มีหน้าจอวิดเจ็ต (พื้นที่วิดเจ็ตถูกแทนที่ด้วยส่วนย่อยของเทมเพลตและบล็อก) และเมนูแบบคลาสสิกถูกแทนที่ด้วยบล็อก Navigation ซึ่งเก็บรายการเมนูไว้เป็นชนิดเนื้อหาแยกต่างหาก ไม่ได้อยู่ในหน้าจอ Menus ที่คุ้นเคย

อะไรเปลี่ยนไปสำหรับนักพัฒนา

classic theme ใช้ลำดับชั้นเทมเพลตของ PHP โดย WordPress จะไล่หาไฟล์ตามสายที่รู้กันดี คือ single-{post-type}.php แล้ว single.php แล้ว singular.php แล้ว index.php จากนั้นไฟล์ของคุณก็ทำงาน เรียก get_header() วนลูปเนื้อหา แล้วพิมพ์มาร์กอัปที่คุณคุมได้ทุกตัวอักษร

<?php get_header(); ?>
<main class="site-main">
  <?php while ( have_posts() ) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>
  <?php endwhile; ?>
</main>
<?php get_footer(); ?>

block theme ใช้ชื่อตามลำดับชั้นเดียวกันแต่เปลี่ยนนามสกุลเป็น .html ทว่าเนื้อในไฟล์เป็นมาร์กอัปแบบบล็อก คือ HTML ที่มีตัวคั่นบล็อกอยู่ในคอมเมนต์ และไม่มีแท็กเทมเพลตให้ใช้

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
  <!-- wp:post-title {"level":1} /-->
  <!-- wp:post-content /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

ผลกระทบสามข้อที่นักพัฒนาเจอทันที

get_header() และ get_footer() ไม่ถูกเรียกอีกเลย อะไรก็ตามที่ผูกไว้กับแอ็กชันเหล่านั้น ไม่ว่าจะในปลั๊กอินหรือธีมลูกเก่า ๆ จะเงียบไปเฉย ๆ ส่วน wp_head และ wp_footer ยังทำงานอยู่ การโหลดสคริปต์และสไตล์ส่วนใหญ่จึงรอด แต่ฮุกที่เจาะจงกับส่วนหัวจะไม่รอด

ฐานข้อมูลชนะไฟล์ของคุณ วินาทีที่ใครสักคนบันทึกเทมเพลตใน Site Editor WordPress จะเก็บเวอร์ชันนั้นเป็นโพสต์ wp_template แล้วเสิร์ฟมันแทนไฟล์ของคุณ คุณจะนั่งแก้ไฟล์ HTML ทั้งบ่ายแล้วเห็นหน้าเว็บนิ่งสนิทก็ได้ การล้างการปรับแต่งของเทมเพลตนั้นจะคืนสิทธิ์ให้เวอร์ชันไฟล์ นี่คือรายงาน “block theme ของผมพัง” ที่พบบ่อยที่สุด และมันไม่ใช่บั๊ก

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

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "brand", "color": "#1a1a1a", "name": "Brand" }
      ]
    }
  }
}

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

สังเกตว่า functions.php ไม่ได้หายไปไหน block theme ยังใช้ไฟล์นี้สำหรับโหลดสคริปต์และสไตล์ ลงทะเบียน add_image_size สร้างชนิดเนื้อหาที่กำหนดเอง และงาน PHP อื่น ๆ เพียงแต่คุณจะทำงานเทมเพลตในนั้นน้อยลงมาก

ได้อะไรจริง ๆ และเสียอะไรจริง ๆ

ย้ายไป block แล้วได้: สิทธิ์แก้ไขทั้งหน้าเว็บจากหน้าแก้ไข ความสม่ำเสมอของดีไซน์ที่ theme.json บังคับไว้ ไฟล์ที่ต้องดูแลน้อยลง และสไตล์ในหน้าแก้ไขที่ตรงกับหน้าเว็บจริงบ่อยกว่าที่ classic theme เคยทำได้มาก

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

ข้อสุดท้ายควรเน้นเป็นพิเศษ ใน classic theme คำสั่ง git log บอกคุณได้ว่าอะไรเปลี่ยนไป แต่ใน block theme หน้าตาของเว็บส่วนใหญ่ไปอยู่ในฐานข้อมูล ซึ่งเป็นที่ที่ระบบดีพลอยของคุณไม่ได้มองเลย

เมื่อไหร่ที่ classic theme ยังเป็นคำตอบที่ถูก

  • เว็บถูกขับเคลื่อนด้วยตัวสร้างหน้า Elementor, Divi, Beaver Builder และเครื่องมือคล้ายกัน เข้ามาทำหน้าที่จัดการเทมเพลตเองอยู่แล้ว การเอา block theme ไปวางไว้ข้างล่างก็แค่เพิ่มระบบเทมเพลตอีกชั้นที่ไม่ได้ทำอะไร
  • มาร์กอัปต้องเป๊ะ ไลบรารีคอมโพเนนต์ที่ทำเอง มาร์กอัปที่ต้องเข้าถึงได้อย่างเคร่งครัด หรือความต้องการด้านสคีมาที่ผิดแผกไป ผลลัพธ์ของบล็อกถูกจำกัดด้วยสิ่งที่บล็อกปล่อยออกมา และการฝืนมันแพงกว่าการเขียน PHP เอง
  • ปลั๊กอินใช้เทมเพลตหนัก ปลั๊กอินระบบสมาชิก ระบบเรียนออนไลน์ ไดเรกทอรี และส่วนขยายด้านการค้ารุ่นเก่า มักมาพร้อมไฟล์เทมเพลต PHP ให้เขียนทับ หลายตัวมีเวอร์ชันแบบบล็อกแล้ว แต่อีกหลายตัวก็ยังไม่มี
  • เว็บเสร็จแล้วและใช้งานได้ดี ธีมที่สะสมการปรับแต่งมาห้าปีไม่มีเส้นทางอัปเกรดไปเป็น block มีแต่การสร้างใหม่ คำว่า “มันเป็นวิธีที่ใหม่กว่า” ไม่ใช่เหตุผลทางธุรกิจ
  • ไม่มีใครนอกจากคุณที่จะแก้เว็บ ประโยชน์หลักของ Site Editor คือการส่งมอบสิทธิ์แก้ไขให้คนที่ไม่ใช่นักพัฒนา ถ้าไม่มีคนกลุ่มนั้นอยู่เลย คุณก็กำลังจ่ายต้นทุนเพื่อประโยชน์ที่ไม่มีใครได้ใช้

ทางสายกลางแบบลูกผสม

classic theme สามารถเพิ่ม theme.json เข้าไปเพื่อให้ได้ระบบ global styles พรีเซ็ตสีและระยะห่าง และสไตล์ในหน้าแก้ไขที่สม่ำเสมอ โดยยังเก็บเทมเพลต PHP กับ Customizer ไว้เหมือนเดิม WordPress ไม่นับว่านี่เป็น block theme และ Site Editor ก็ยังใช้ไม่ได้ แต่คุณได้ประโยชน์ด้านระบบดีไซน์เกือบทั้งหมดโดยลงแรงเพียงเศษเสี้ยว

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

FAQ

คำถาม

จะรู้ได้อย่างไรว่าธีม WordPress ของเราเป็น block theme หรือ classic theme

เปิดโฟลเดอร์ธีมดู block theme จะมีโฟลเดอร์ templates ที่ข้างในมี index.html และเกือบทุกครั้งจะมีไฟล์ theme.json อยู่ที่ราก ส่วน classic theme จะมี index.php และไฟล์เทมเพลต PHP อย่าง header.php กับ footer.php ในหน้าผู้ดูแลระบบ block theme จะแสดงเมนู Appearance แล้วตามด้วย Editor ส่วน classic theme จะแสดง Appearance แล้วตามด้วย Customizer

block theme ดีกว่า classic theme หรือเปล่า

ไม่ได้ดีกว่าเสมอไป block theme ให้คนที่ไม่ใช่นักพัฒนาคุมทุกส่วนของหน้าเว็บได้จริง และตัดโค้ด PHP ซ้ำซากออกไปเยอะ ส่วน classic theme ให้นักพัฒนาคุมมาร์กอัปได้ละเอียด และเข้ากันได้กับปลั๊กอิน ตัวสร้างหน้า และฮุกทั้งหมดที่มีมาตั้งแต่อดีต คำตอบที่ถูกขึ้นอยู่กับว่าใครจะเป็นคนแก้เว็บหลังเปิดใช้งาน

แปลง classic theme เป็น block theme ได้ไหม

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

ทำไมแก้ไฟล์เทมเพลตแล้วไม่มีผล หลังจากที่เคยแก้ผ่าน Site Editor

พอมีใครแก้เทมเพลตใน Site Editor WordPress จะบันทึกเวอร์ชันนั้นลงฐานข้อมูลเป็นโพสต์ชนิด wp_template และสำเนาในฐานข้อมูลจะชนะไฟล์บนดิสก์ การแก้ไฟล์ของคุณจะถูกเมินจนกว่าจะล้างการปรับแต่งของเทมเพลตตัวนั้นทิ้ง เรื่องนี้ทำให้นักพัฒนาเกือบทุกคนงงในครั้งแรกที่ทำ block theme

classic theme ยังใช้งานได้กับ WordPress รุ่นปัจจุบันไหม

ยังใช้ได้ classic theme ยังได้รับการรองรับเต็มรูปแบบ ไม่มีคำเตือนว่าเลิกใช้ และยังทำงานตามลำดับชั้นเทมเพลต PHP เหมือนเดิม Customizer ก็ยังโหลดให้ตามปกติ ทิศทางการพัฒนาของ WordPress หันไปทาง block theme มากขึ้น ดังนั้นฟีเจอร์ใหม่ของหน้าแก้ไขจะไปลงที่นั่นก่อน แต่ยังไม่มีแผนใดที่จะทำให้ classic theme ใช้ไม่ได้