ตั้งค่าและใช้งานธีม Blocksy ของ WordPress: Companion, ส่วนหัว, หน้าบล็อก

บทความนี้เป็นฉบับปรับให้เหมาะกับท้องถิ่นจากต้นฉบับภาษาญี่ปุ่น อ่านต้นฉบับภาษาญี่ปุ่น

Blocksy เป็นธีม WordPress ที่ใช้งานได้ฟรีและมีฟีเจอร์ครบครัน การตั้งค่าส่วนใหญ่ทำได้ผ่าน "รูปแบบ (Appearance) → ปรับแต่ง (Customize)" (Customizer) พร้อมดูตัวอย่างไปด้วย และสร้างส่วนหัวและส่วนท้ายได้ด้วยการลากและวาง บทความนี้อธิบายตามลำดับการตั้งค่า ตั้งแต่การติดตั้งธีมและปลั๊กอินเสริม "Blocksy Companion" สีและฟอนต์ที่ควรตัดสินใจก่อน วิธีสร้างส่วนหัว การตั้งค่าการแสดงผลของหน้ารายการบล็อกและหน้าเรื่อง ไปจนถึงการเตรียม child theme

ทำความเข้าใจองค์ประกอบของ Blocksy

Blocksy ประกอบด้วย 3 ส่วนต่อไปนี้

• Blocksy (ตัวธีม): รับได้ฟรีจาก WordPress.org มีการตั้งค่าดีไซน์ใน Customizer และตัวสร้างส่วนหัวและส่วนท้าย
• Blocksy Companion (ปลั๊กอินฟรี): รับผิดชอบการนำเข้า Starter Site (ข้อมูลเดโม) และการเพิ่มส่วนขยาย
• Blocksy Pro (แบบเสียเงิน): เพิ่มองค์ประกอบส่วนหัวเพิ่มเติม การแสดงผลตามเงื่อนไข และฟีเจอร์เลย์เอาต์ที่ละเอียดขึ้น

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

นอกจากนี้ Blocksy มีโครงสร้างแบบใกล้เคียงธีมคลาสสิก และรองรับ block editor ด้วย ตำแหน่งการใช้งานต่างจากธีมแบบบล็อกที่ประกอบทั้งไซต์ด้วย Site Editor ("รูปแบบ → ตัวแก้ไข (Editor)") จึงจำไว้ว่า "ดีไซน์โดยรวมใช้ Customizer ส่วนเนื้อหาของเรื่องและหน้าใช้ block editor" ก็จะไม่สับสน

การติดตั้งและการเปิดใช้ Companion

1. ที่ "รูปแบบ (Appearance) → ธีม (Themes) → เพิ่มธีมใหม่" ค้นหา "Blocksy" แล้วติดตั้งและเปิดใช้งาน
2. จากคำแนะนำที่แสดงหลังเปิดใช้งาน หรือจากแดชบอร์ดของ Blocksy ที่เพิ่มเข้ามาในหน้าผู้ดูแล ให้ติดตั้งและเปิดใช้งาน Blocksy Companion

หากใช้ WP-CLI ติดตั้งได้ดังนี้

wp theme install blocksy --activate
wp plugin install blocksy-companion --activate

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

จะใช้ Starter Site หรือไม่

เมื่อติดตั้ง Companion แล้ว จะนำเข้า "Starter Site" จากแดชบอร์ดของ Blocksy ได้ เพราะจะได้หน้าที่ออกแบบไว้แล้ว การตั้งค่า Customizer และปลั๊กอินที่จำเป็นมาพร้อมกัน จึงเหมาะกับไซต์ใหม่ที่อยากเห็นภาพรวมของผลงานสำเร็จรูปได้เร็ว

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

การตั้งค่าโดยรวมที่ควรตัดสินใจก่อน

เมื่อเปิด "รูปแบบ (Appearance) → ปรับแต่ง (Customize)" จะเห็นรายการตั้งค่าของ Blocksy ชื่อรายการมักถูกแปลเป็นภาษาท้องถิ่นแล้ว แต่การเรียกอาจเปลี่ยนไปตามเวอร์ชัน สิ่งแรกที่ควรแตะคือ 2 อย่างต่อไปนี้ที่มีผลกับทั้งไซต์

สี (Color palette)

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

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

ฟอนต์ (Typography)

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

หากโหลดฟอนต์ภาษาญี่ปุ่นผ่านเว็บฟอนต์ ไฟล์จะมีขนาดใหญ่และอาจกระทบความเร็วในการแสดงผล หากจะใช้ ให้จำกัดจำนวนน้ำหนักตัวอักษร และตรวจผลกระทบต่อความเร็วด้วยเครื่องมืออย่าง PageSpeed Insights

สร้างส่วนหัว

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

จุดที่มักสะดุดคือ ส่วนหัวสำหรับคอมพิวเตอร์กับสำหรับสมาร์ตโฟนถูกตั้งค่าแยกกัน เมื่อสลับการแสดงผลของตัวสร้างเป็นสมาร์ตโฟน จะเห็นการจัดวางอีกแบบหนึ่ง บนสมาร์ตโฟน โครงสร้างพื้นฐานคือวางเมนูไว้ใน "off-canvas" ที่เปิดจากไอคอนแฮมเบอร์เกอร์ (trigger) หากตั้งค่าเฉพาะสำหรับคอมพิวเตอร์แล้วเผยแพร่ อาจเกิดเหตุการณ์อย่างเมนูไม่ขึ้นบนสมาร์ตโฟน จึงต้องตรวจสอบทั้งสองการแสดงผล

เมื่อคลิกองค์ประกอบ การตั้งค่าขององค์ประกอบนั้น (ขนาดตัวอักษร สี ระยะขอบ เป็นต้น) จะแสดงทางด้านซ้าย ส่วนรายการที่จะแสดงในเมนูให้สร้างที่ "รูปแบบ (Appearance) → เมนู (Menus)" แล้วกำหนดให้กับองค์ประกอบเมนูของส่วนหัว

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

การแสดงผลของหน้ารายการบล็อกและหน้าเรื่อง

Customizer มีรายการตั้งค่าตามชนิดของหน้า เช่น รายการเรื่อง (บล็อก) เรื่องเดี่ยว และหน้า

• รายการเรื่อง: รูปแบบการเรียง เช่น แบบการ์ดหรือแบบรายการ จำนวนคอลัมน์ต่อแถว สัดส่วนของรูปภาพเด่น ความยาวของข้อความตัดตอน และข้อมูลของเรื่องที่แสดง (วันที่เผยแพร่ หมวดหมู่ เป็นต้น)
• เรื่องเดี่ยว: ความกว้างของพื้นที่เนื้อหา การมีแถบด้านข้างและตำแหน่ง วิธีแสดงส่วนชื่อเรื่อง และการแสดงเรื่องที่เกี่ยวข้องและข้อมูลผู้เขียน
• หน้า: เช่นเดียวกับเรื่องเดี่ยว ตั้งความกว้างและการมีแถบด้านข้าง

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

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

เตรียม child theme

หากแก้ไขไฟล์ของธีมโดยตรง การเปลี่ยนแปลงจะหายเมื่อธีมอัปเดต หากแค่เพิ่ม CSS เล็กน้อย ใช้ "CSS เพิ่มเติม (Additional CSS)" ใน Customizer ก็พอ เมื่อต้องปรับแต่ง PHP หรือเขียนทับเทมเพลต ให้สร้าง child theme

เว็บไซต์ทางการของ Blocksy แจกแม่แบบของ child theme หากสร้างเอง ให้วาง style.css ต่อไปนี้ไว้ที่ wp-content/themes/blocksy-child/

/*
Theme Name: Blocksy Child
Template: blocksy
*/

แล้วโหลดสไตล์ของ child theme ด้วย functions.php ในโฟลเดอร์เดียวกัน

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'blocksy-child-style',
		get_stylesheet_uri(),
		array(),
		wp_get_theme()->get( 'Version' )
	);
}, 20 );

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

ข้อควรระวังเรื่องการอัปเดตและการดูแล

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

สรุป

• เริ่มใช้ Blocksy ด้วยตัวธีมคู่กับ Blocksy Companion แล้วค่อยพิจารณา Pro เมื่อรู้ว่าขาดฟีเจอร์ใด
• ใช้ Starter Site บนไซต์ใหม่หรือสภาพแวดล้อม staging และบนไซต์เดิมให้ระวังการเขียนทับการตั้งค่า
• กำหนดภาพรวมด้วยพาเลตต์สีสำหรับสี และ Typography สำหรับตัวอักษร โปรดระวังว่าฟอนต์ละตินไม่มีผลกับภาษาญี่ปุ่น
• ตัวสร้างส่วนหัวแยกกันระหว่างคอมพิวเตอร์กับสมาร์ตโฟน ให้ตรวจทั้งสองการแสดงผล และหากจะแตะ PHP ให้ใช้ child theme

• วิธีสร้างส่วนท้ายแบบกำหนดเองด้วย Blocksy
• วิธีเปลี่ยนธีม WordPress อย่างปลอดภัย

มีคำถามเกี่ยวกับ WordPress ไหม ผู้เผยแพร่เว็บไซต์นี้อยู่ที่ญี่ปุ่นและตอบเป็นภาษาญี่ปุ่น ติดต่อ (ภาษาญี่ปุ่น)