เริ่มต้นเขียน Theme ของ WordPress ใช้เอง ตอนที่ 1
อยู่ก็อยากเขียนบทความยาวๆสักชุดนึง (ได้ข่าวว่าชุดเก่าก็ยังไม่เสร็จ) แต่ไม่รู้จะทำอะไรดี พักนี้รับงานเวิร์ดเพรสอยู่ เอาเป็นว่าจะเขียนบทความแนะนำการสร้างธีมของ WordPress เบื้องต้นให้แล้วกันครับ เผื่อใครที่ต้องการที่จะเขียนธีมใช้เอง โดยในตอนแรก ผมจะพาไปรู้จักกับโครงสร้างไฟล์ธีมของ WordPress และการคอนฟิกธีมเบื้องต้นกันก่อนนะครับ การเขียนคำสั่งต่างๆ จะพาไปรู้จักกันในตอนถัดไป
อ้อ ก่อนอื่น ผมจะสมมุติว่าทุกท่านมีพื้นฐาน PHP, HTML, และ CSS มาอยู่แล้วนะครับ (ถึงไม่มีก็อ่านได้ครับ แต่ถ้ามี จะเข้าใจง่ายกว่า)
ไฟล์ธีมที่สำคัญของ WordPress
ระบบธีมของ WordPress เอาเข้าจริงแล้วมันคือไฟล์ php ธรรมดาๆ ที่เรียกใช้ฟังก์ชั่นต่างๆของ WordPress เราจะพูดว่า WordPress เป็นชุดคำสั่งสำเร็จรูปให้เราเอามาสร้างเป็นเว็บ ก็เห็นจะไม่ผิดนัก โดยพื้นฐานแล้ว ธีมของ WordPress มีเพียงสองไฟล์ ก็สามารถทำงานได้แล้ว นั่นคือ
- index.php
- style.css
ที่พูดมานี่เรื่องจริงนะเออ ถ้าไม่เชื่อ ลองโหลดไปดูครับ: example01.rar
เหตุผลที่มันทำงานได้คือ WordPress จะอ่านค่าต่างๆ (เช่นชื่อธีม ผู้สร้าง คำบรรยาย ฯลฯ) จากคอมเมนต์ในไฟล์ style.css และการแสดงเนื้อหา ตามหลักของ WordPress Template Hierarchy?แล้ว เนื้อหาทุกอย่างจะวิ่งมาหาไฟล์ index.php ถ้ามันไม่เจอไฟล์ธีมเฉพาะของมันครับ
โอเค เกรียนพอแล้ว (แต่มันใช้ได้จริงๆ นะ) เรามาดูไฟล์อื่นๆที่สำคัญในธีมเวิร์ดเพรสกันดูบ้างครับ นอกจากสองไฟล์ข้างบนแล้ว ก็จะมีดังนี้
functions.php
ไฟล์สำหรับเก็บฟังก์ชั่น php ต่างๆ ที่เขียนขึ้นมาเพื่อใช้กับธีมเราโดยเฉพาะ (เช่นบางคนอาจจะเขียนฟังก์ชั่นคำนวนค่าอะไรสักอย่างเอง ก็เอามาใส่ไว้ได้ในนี้ครับ และเรียกใช้งานได้ปกติ) รวมถึงเก็บบรรดา hook ต่างๆ ของธีมด้วย (เช่นบางธีมจะมีหน้า option พิเศษ หรือมี shortcode พิเศษ ซึ่งเราสามารถเขียนใส่เอาไว้ได้ในไฟล์นี้ครับ)
สำหรับเรื่อง hook เดี๋ยวผมจะเขียนให้อีกทีหลังจากที่จบบทความสร้างธีมนี้นะครับ เอาไว้ไปเจอกันตอนท้ายๆ หรือถ้าขยันพอ อาจจะได้อ่านกันในบทความเกี่ยวกับการเขียนปลั๊กอินเวิร์ดเพรสครับ
header.php
ไฟล์เก็บส่วนที่เป็น header ของเว็บทั้งหมด (ย้ำนะครับ ว่าของเว็บ ไม่ใช่ของ HTML) คือปกติเค้าจะเอาไว้ใส่โค๊ดส่วนหัวที่เหมือนๆกันทุกหน้า ตั้งแต่ <html> ลงมาจนถึงช่วงเมนูและส่วนหัวของเว็บทั้งหมด เอาไว้ในไฟล์นี้ครับ แล้วก็ใช้คำสั่งของเวิร์ดเพรสเรียกรวมเข้ามาแสดงผลทีเดียว
footer.php
ลักษณะเดียวกันกับไฟล์ header ครับ ต่างกันแค่ว่าจะเก็บส่วน footer (เช่น บางเว็บจะมีเมนูอยู่ข้างล่าง รวมไปถึงพวก copyright ยาวไปถึงโค๊ดส่วน </html> นู่นเลยครับ)
sidebar.php
แบบเดียวกับ header และ footer ครับ (อีกแล้ว) แต่เปลี่ยนมาเป็นเก็บในส่วนของ sidebar แทน อย่างเช่นหลายๆ เว็บ จะมีแถบเมนูด้านข้าง (จะสองสามสี่ห้าอันก็ว่ากันไป) เขาก็จะเอาโค๊ดในส่วนนั้นมาเก็บเอาไว้ในไฟล์นี้ครับ แล้วก็เรียกเข้ามาใช้ทีเดียวเลย ไม่ต้องเขียนโค๊ดใหม่เรื่อยๆ
comments.php
ไฟล์นี้จะเก็บ template ของคอมเมนต์ทั้งหมดครับ เช่นฟอร์มสำหรับคอมเมนต์ และส่วนที่แสดงคอมเมนต์ทั้งหมด
single.php
ไฟล์เก็บโค๊ดของหน้า post ต่างๆ
page.php
ไฟล์เก็บโค๊ดของ page ต่างๆ
archive.php
ไฟล์หน้า archive ครับ บางทีถ้าเราเข้าบางเว็บ จะเห็นมีบางหน้า ที่จะลิสต์เอาไว้ว่า ปีนี้ เดือนนี้ เขียนบทความอะไรไว้บ้าง หรือเป็น summary บทความสั้นๆ สามารถเลือกได้ว่าบทความวันไหน เดือนไหน หรือปีไหน อันนั้นคือระบบ archive ครับ มันจะมาดึง template จากไฟล์นี้
search.php
ไฟล์หน้าผลการค้นหาต่างๆในเว็บ
404.php
ไฟล์หน้าที่จะแสดง เวลาที่หาเนื้อหาบนเว็บไม่เจอ (เช่นโพสต์หรือเพจต่างๆ)
อันที่จริงแล้ว นอกจากไฟล์ functions.php, header.php, footer.php, sidebar.php, comments.php ไฟล์อื่นๆ ถ้าหาไม่เจอ มันก็จะวิ่งไปหา index.php หมดครับ ซึ่งจุดประสงค์ของไฟล์พวกนี้ หลายท่านคงจะคุ้นๆ กับตอนที่เขียนเว็บด้วย php เอง นั่นคือเอา include เข้ามา เพื่อจะได้ไม่ต้องเขียนโค๊ดซ้ำๆเรื่อยๆนั่นเองครับ
สาเหตุที่ WordPress นั้นแยกไฟล์ธีมยิบย่อยสำหรับส่วนต่างๆ (แต่ก็ fallback กลับมา index.php) นั่นเพื่อให้เราสามารถวางเลย์เอาท์ของแต่ละหน้าต่างกันได้นั่นเองครับ เช่นเราอาจจะวางหน้าแรกให้แสดงภาพตัวอย่างของโพสต์ แต่ในหน้า archive แสดงแค่ไตเติล ก็ได้
รู้จักกับ Template Hierarchy ของ WordPress
อันนี้ไม่ขออธิบายนะครับ รายละเอียดเยอะมาก เข้าไปดูภาพนี้จะเข้าใจได้ง่ายกว่า ถึงลำดับการเรียกหาไฟล์ต่างๆในระบบธีมของ WordPress (สังเกตุว่าตอนจบ ถ้าหาไม่เจอ มันก็จะวิ่งไปหา index.php ทั้งหมด)
ภาพจาก WordPress Codex
อ้อ จะมีพวกตัวเหลืองๆ นิดนึง ที่จะใช้ตั้งชื่อไปตามประเภทเนื้อหาครับ เช่น ไฟล์ single-$posttype.php จะเป็นไฟล์ single.php ของ custom post type เช่นเรามี custom post type ชื่อว่า news เราก็สามารถสร้างไฟล์ single-news.php ขึ้นมา เพื่อเป็นหน้าตาแสดงผลให้กับเนื้อหาใน custom post type ประเภท news ของเราก็ได้เช่นกันครับ
คอนฟิกค่าเบื้องต้นให้กับธีม
ปกติเมื่อเราอัพโหลดธีมของ WordPress ขึ้นไปแล้ว และเข้าไปจะเปลี่ยนธีม จะเห็นข้อมูลจำพวก ชื่อธีม คนสร้าง คำบรรยาย ฯลฯ ค่าพวกนี้จะถูกกำหนดเอาไฟล์ในคอมเมนต์ไฟล์ style.css ครับ (ไม่จำเป็นต้องใส่ก็ได้ครับ เวิร์ดเพรสก็จะดึงชื่อธีมมาจากชื่อโฟลเดอร์ให้)
ลองเปิด (หรือสร้าง) ไฟล์ style.css ขึ้นมาครับ แล้วใส่โค๊ดชุดนี้ลงไป (เดี๋ยวอธิบายให้)
/* Theme Name: My Theme Theme URI: http://jirayu.in.th/ Description: Theme สำหรับบทความชุด "เริ่มต้นเขียนธีม WordPress ใช้เอง" บนเว็บ http://jirayu.in.th Author: Jirayu Yingthawornsuk Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu Text Domain: twentyten */
อย่างที่บอกครับ มันก็เป็นคอมเมนต์ในไฟล์ CSS ธรรมดานี่แหละ ลองไปดูกันว่าค่าแต่ละอย่างนั้นคืออะไร
- Theme Name – ชื่อของธีม
- Theme URI – หน้าเว็บของธีม
- Description – คำบรรยายธีม
- Author – ผู้สร้างธีม
- Version – รุ่นของธีม
- License – ประเภทลิขสิทธิ์ของธีม
- License URI – ลิงค์ไปหน้ารายละเอียดลิขสิทธิ์/สัญญาอนุญาต
- Tags – แท็ก เอาไว้เวลาค้นหาอย่างใน WordPress Theme Repositories
- Text Domain – เอาไว้สำหรับไว้แปลธีมครับ
จริงๆข้างบนนี่ไม่ต้องระบุสักอันก็ได้ครับ (ฮา) แต่ก็ควรระบุเอาไว้บ้างก็ดีเหมือนกัน
เอาล่ะ ผมขอจบตอนแรกเอาไว้แค่นี้ก่อน ตอนต่อไป จะเริ่มพาไปรู้จักกับคำสั่งต่างๆ ของ WordPress ที่ใช้แสดงเนื้อหาครับผม อย่าลืมติดตามกันนะครับ สวัสดีครับ
ปล.ใครก็อปเนื้อหาผมอีก คราวนี้เล่นถึงศาลนะจ๊ะ ไม่ต้องไปเอาเอกสารจากกรมทรัพย์สินทางปัญญา เพราะงานเขียนจะมีลิขสิทธิ์ทันทีที่เผยแพร่จ้ะ
บทความทั้งหมดในชุดนี้
- เริ่มต้นเขียน Theme ของ WordPress ใช้เอง ตอนที่ 1 – โครงสร้างไฟล์พื้นฐานของธีม
- เริ่มต้นเขียน Theme ของ WordPress ใช้เอง ตอนที่ 2 – รู้จักกับ The Loop
- เริ่มต้นเขียน Theme ของ WordPress ใช้เอง ตอนที่ 3 – ฟังก์ชันในลูปที่ใช่บ่อย
ขอบคุณสำหรับข้อมูล ได้ความรู้เยอะเลยครับ ^^
อยากเข้าใจ @_____@