theme-development

บทที่ 1 พัฒนาเทมเพลตธีมบนเวิร์ดเพลส WordPress

บทนี้เรามาเริ่มเขียน Code กันเลยเริ่มจาก เปิดหน้านี้ขึ้นมา Basic Template Click เพื่อจะได้รู้จักไฟล์เริ่มต้น แต่หล่ะไฟล์ และ เปิดหน้า WordPress Template Hierachy เพื่อเตรียมตัวไล่ Template นะครับ. มาเริ่มกันที่ ดาวน์โหลด WordPress มาก่อนเลยครับ เข้าได้ที่นี่ Download หรือ  Click ที่นี่ ต่อมาก็ทำการติดตั้ง ได้เลยนะครับ เมื่อติดตั้งเสร็จจะได้ตามรูปภาพนี้

Default WordPress
Default WordPress

อันดับแรกเข้าไปที่ โฟลเดอร์ ตามที่อยู่นี้ ~/root/wp-contents/theme/ ก็จะพบกับธีม เริ่มต้นของ เวิร์ดเพลส เอง ดังนี้

theme default
theme default

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

  1. style.css
  2. index.php

STYLE.CSS

ไฟล์นี้มีหน้าที่เป็นไฟล์ที่เอาไว้เขียน CSS ก็ได้ เราจะเขียน ธรรมดาทั้งหมดเลยที่นี่ก็ได้หรือจะเขียนที่ไฟล์อื่นแล้วเรียกเข้ามาก็ได้ แต่!!! ต้องกำหนดค่าต่างๆ พวกนี้ลงไปที่ไฟล์นี้ด้วยนะครับ

*จากตัวอย่างผมยกมาจาก Theme Twenty Seventeen นะครับ

Detail Theme
Detail Theme

จากตัวอย่าง ธีม กับ คอมเมนต์ในไฟล์ style.css จะสังเกตุว่า ข้อความพวกนั้น คือ รายละเอียดที่จะมาแสดงตรงนี้นี่เอง

  • Theme Name คือชื่อของ ธีม
  • Theme URl คือ URL ของธีมนี้
  • Author ชื่อของผู้พัฒนาธีมนี้ ( อาจจะเป็นบุคคล หรือ ทีมงาน หรือบริษัท )
  • Author URL คือ ลิงค์ที่อยู่ของผู้พัฒนา
  • Description คือรายละเอียดของธีมนี้
  • Version เอาไว้กำหนด เลขเวอร์ชั่นการพัฒนา ธีม
  • License เอาไว้กำหนดลิขสิทธ์ประเภทของธีม
  • License URI ลิงค์อธิบาย ลิขสิทธิ์ประกอบของธีม
  • Text Domain ชื่อ สลัก ของธีมเอาไว้กำหนดชื่อของธีมในการเรียกใช้ฟังก์ชั่นต่างๆ ในธีม
  • Tags ข้อความที่เกี่ยวข้องต่างๆ ของธีมนี้

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


INDEX.PHP

จาก WordPress Template Hierachy นี่เลยจะเห็นว่าเส้นสุดท้าย มันไปจบที่ index.php เสมอ เพราะฉะนั้น มันจำเป็นมาก ทุกๆ ธีมควรจะมี และถ้าไม่มี ให้เวอร์ชั่นใหม่ๆ นี้มันจะขึ้นว่าธีมนั้นๆ มีส่วนประกอบไม่ครบเลยทีเดียว เพราะฉะนั้นสร้างมาใส่ไว้เลยครับ

เมื่อสร้างเสร็จให้เข้าไปที่ Appearance -> Theme  จะพบกับธีมที่เราสร้างขึ้นมานะครับ ตามภาพนี้ จากภาพนี้จะเห็นว่าผมไม่ได้ Tag แต่ก็ยังแสดงผลได้ และยังขึ้นมาให้กดเลือก

Start theme wordpress
Start theme wordpress

แต่จะสังเกตุว่าไม่มี ภาพตัวอย่างธีมนะครับ หากต้องการใส่เพิ่ม ให้ เพิ่มไฟล์ภาพที่มีชื่อว่า “screenshot.png” คือให้ทำภาพ thumbnail ขึ้นมาแล้วตั้งชื่อว่า “screenshot.png” นั่นเองเนอะ

add screeshot
add screeshot

ถ้าพร้อมแล้วกด Activate Theme ของเรากันเลย พอกดแล้วเข้าหน้าแรกของเวปไซต์เลยนะครับ แล้วจะพบกับหน้าขาวจั๊ว ที่นี้ลองแก้ไขไฟล์ index.php ดูครับ แล้วก็ลอง รีเฟชร หน้าจอใหม่ดูก็จะพบว่ามันเข้าไปที่เรียกที่หน้า index.php เสมอ. ที่นี้เรามาเริ่มทำเป็นโครงสร้างให้กับ เว็บไซต์ของเรากันเลย

กลับไปที่ Basic Template เริ่มต้นเรามาเริ่มสร้าง Template เพิ่ม เว็บไซต์ทั่วๆไป หากเราสังเกตุหรือเคยทำมา ก็จะสังเกตุได้ว่ามันจะมีส่วนประกอบหลายๆ ส่วนด้วยกันมาเป็นเว็บไซต์ๆ หนึ่งมาดูตามภาพชัดๆเลยนะครับ

HTML5 website structure
HTML5 website structure

จากตัวอย่างในภาพนี้เป็นตัวอย่าง HTML5 ด้วยนะครับ ปัจจุบันก็ใช้กันแทบจะเป็นปกติแล้วมั้ง ถ้าใครเพิ่งเริ่มหัดใช้เลยก็ดีครับ พวก Syntax HTML5. มาต่อ ก็ให้สังเกตุว่าจะมีส่วนต่างๆ ใหญ่ๆ คือ

  1. Header หรือส่วนหัวของเว็บไซต์
  2. Sidebar หรือส่วนของ Widget, Menu, หรืออะไรก็ตามแต่
  3. Main Content หรือส่วนการแสดงเนื้อหาหลักๆ
  4. Footer หรือส่วนของ ด้านล่างเว็บไซต์

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

ผมก็จะเขียน HTML ชุดหนึ่งขึ้นมาที่ไฟล์ index.php เพื่อรวมส่วนต่างๆ ของสิ่งที่ผมกล่าวถึงไปเมื่อสักครู่นี้ เริ่มจาก สร้างไฟล์สำหรับ Javascript ขึ้นมาชื่อว่า app.js แล้วก็สร้าง HTML ขึ้นมาได้แบบนี้

index html
index html

และพอจะมองภาพออกไหมครับ ว่าจะทำอะไรต่อ ให้เราทำการแยกส่วนกันเลยครับ สร้างไฟล์ header.php, sidebar.php, footer.php ขึ้นมาได้เลย แล้วให้ทำการแยกไฟล์แต่หล่ะส่วนออกจากกัน ให้ลองทำดูก่อนนะครับ หากทำเสร็จแล้ว ค่อยมาดูต่อที่ผมทำขึ้นมา

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

ให้กลับไปดูที่ Basic Template อีก จะพบกับ ฟังก์ชั่นชื่อนี้

จากชื่อก็น่าจะพอเดาๆ ได้นะครับ ลองใส่ดูแล้วมาดูกัน

ผลลัพท์ WordPress Starter
ผลลัพท์ WordPress Starter

พอดูออกใหมครับ สี่ช่อง Code Editor ของผม ด้านซ้ายคือจะมีไฟล์ Index ที่ใช้ ฟังก์ชั่น ทั้งหมดในการรวมไฟล์ต่างๆเข้ามา อธิบายโดยละเอียดดังนี้

  • get_header(); สำหรับการเรียกไฟล์ header.php เข้ามา
  • get_footer(); สำหรับการเรียกไฟล์ footer.php เข้ามา
  • get_sidebar(); สำหรับการเรียกไฟล์ sidebar.php เข้ามา

พอมาถึงตรงนี้เราก็จะได้โครงเวปคร่าวๆ สำหรับ เวิร์ดเพลส เริ่มต้นแล้ว เดี๋ยวมาใส่ ฟังก์ชั่นเพิ่มอีกซํกนิดหนึ่ง คืออธิบายเพิ่มเติม เวิร์ดเพลส เนี่ยมันจะมีกระบวนการเรียกไฟล์ต่างๆ เข้ามาที่ตัวมัน ซึ่งมันจะเรียกว่า การ แอคชั่น, ฟิลเตอร์, ฮุค ส่วนที่ผมจะพูดถึงตอนนี้คือการ ฮุค เรียกไฟล์ พวก css, js เข้ามาใน ธีม ถ้าส่วน css ให้เรียกที่ header และ ส่วน js ให้เรียกที่ footer และก็ให้เรียกสิ่งสำคัญอีกอย่างหนึ่งของเวิร์ดเพลสมาด้วยคือ แถบดำๆ ของ แอดมิน

ถ้าใครเคยใช้ WordPress มาก่อน จะเห็นอยุ่. มาต่อกันเลย มาดูที่ฟังก์ชั่น ที่ว่านั่นคือ

ให้นำฟังก์ชั่น wp_head(); ไปไว้ก่อนปิด </head> และนำฟังก์ชั่น wp_footer(); ไปวางไว้ที่ ก่อนปิด </body>  แล้วมาดูกันต่อเลย

เพิ่มฟังก์ชั่น wp_head และ wp_footer
เพิ่มฟังก์ชั่น wp_head และ wp_footer

เมื่อเพิ่มฟังก์ชั่นที่ถูกต้องเข้าไปแล้วเราก็จะได้ แถบดำๆ เมื่อกด View Page Source ก็จะได้ Tag HTML มากมายมาเพิ่มเลย ลองดูนะครับ หากติดปัญหาอะไร สอบถามกันเข้ามาได้เลยทางคอมเม้นเฟซบุ๊กนี้ หรือ ทางทีดี เข้ามาที่เพจผมได้เลย หรือ กลุ่ม ของผมเองนะครับ เข้ามาทักทายกัน หากมีอะไรเพิ่มเติม ก็แจ้งกันเข้ามาได้นะครับ

บทต่อไป จะเป็นเรื่องเกี่ยวกับ  Template อื่นๆ ต่อ

เนื้อหาที่เกี่ยวข้อง