[Web] สร้างธีม WordPress ตอนที่ 2 [การติดตั่งธีมและการเรียกข้อมูลของเว็บมาแสดง]

[Web] สร้างธีม WordPress ตอนที่ 2 [การติดตั่งธีมและการเรียกข้อมูลของเว็บมาแสดง]

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

หลังจากติดตั่งแล้วก็จะได้ไฟล์ออกมาแบบนี้ครับ ให้เราเข้าไปสร้างโฟรเดอร์ธีมของเราใน “wp-content/themes” เราก็จะได้ที่เก็บธีมของเราแล้วครับ โดยผมสร้างชื่อว่า” wp_theme”

Screen Shot 2559-02-18 at 12.45.50


 

Register theme ให้ WordPress มองเห็นโฟรเดอร์ของเรา

ให้เราสร้าง style.css ขึ้นมาครับ เหมือนที่ผมเคยพูดไปในตอนที่แล้วเพื่อเก็บสไตล์ของเว็บเราทั่งหมด และก็สร้าง index.php ขึ้นมาตามนี้ครับ

style.css ตรงนี้ก็จะประกาศตามที่ WordPress กำหนดไว้ครับ เวลาทำธีมขายบน themeforest ก็จะมีการตรวจสอบตรงนี้ด้วย ต้องทำตาม official ว่าไว้นะครับ

index.php ตรงนี้ก็เหมือนกันครับต้องมีการประกาศหัวของไฟล์ด้วยเช่นกันให้เป็นไปตามนี้ครับ ผมก็ลอกมาจาก official เลย

Note: เราสามารถอ่านเพิ่มเติมที่ได้ที่ codex เว็บ official ของ WordPress เลยครับ

พอเรามีสองไฟล์นี้ก็ลองเข้าไปที่เว็บของเราแล้วก็เลือกไปที่เมนู Appearance > Themes ก็จะเห็นว่าตอนนี้ธีมเราขึ้นมาอยู่ในระบบแล้ว จากนั่นลองกดใช้ดูครับ แล้วลองดูผลที่ได้ เราจะเห็นว่างๆ เพราะว่า index.php เรายังไม่มีการแสดงผลอะไร หรือจะลองใส่อะไรใน index ดูครับ เราจะเห็นว่ามันก็จะแสดงผลให้เราเหมือนกัน แบบตัวอย่างผมพิมพ์ “Hello, World!” เข้าไป

Screen Shot 2559-02-18 at 13.09.55


 

แสดงผลโพสต่างๆ ที่อยู่บนเว็บไซต์ ด้วย the_loop

อย่างที่ผมเคยบอกไว้ตอนที่ 1 ว่าไฟล์ index.php ของ WordPress นั่นตาม ที่เว็บ official ว่าไว้คือการไว้แสดงโพสต่างๆ ตรงนี้ผมก็จะสอนการนำเอาข้อมูลมาแสดงผลให้กันด้วยฟังก์ชันของ WordPress ที่เรียกว่า the_loop อ่านต่อที่นี้

อธิบายการทำงาน:

  • have_post() เป็นฟังก์ชันที่ไว้เรียกโพสขึ้นมาโชว์ครับ
  • while (have_post() : the_post() ) เป็นการเอาโพสแต่ละอันที่เรามีอยู่ในระบบคล้ายๆ forEach
  • the_permalink เอาไว้เรียกลิ้งของโพสนั่นๆ ออกมาครับ ไว้ไปดูรายละเอียดนั่นเอง
  • the_title ไว้แสดงชื่อของโพสนั่นๆ ครับ
  • the_content ไว้แสดงเหมือนหาของโพสนั่นๆ ครับ

ลองเซฟแล้วลองเปิดที่เว็บเราดูครับ ผลที่ได้คือ Tadaaaaaaa!!! ออกมาแล้วครับ ธีมแรกของเรา

Screen Shot 2559-02-18 at 18.12.44


ใส่ Header และ Footer ให้กับเว็บ ด้วย get_header(); และ get_footer();

หลังจากที่ได้เนื้อหามาแสดงแล้วลองมาใส่ head, footer กัน ตามนี้เลยครับ

เราใส่ get_header() ไว้บนสุดตามที่เห็นเลยนนะครับ และก็เหมือนกันกับ get_footer() ไว้ล่างสุดแล้วลองดูผลที่ได้ แบบที่เห็นก็จะมีส่วนของเมนู WordPress (Admin bar) เพิ่มขึ้นมาให้เรากดไปที่หน้า admin ด้วย

Screen Shot 2559-02-18 at 18.12.24


Custom header , footer ของเราเอง

ให้สร้างไฟล์ชื่อ header.php ขึ้นมาครับ แล้วใส่โค้ดลงไปตามนี้ครับ

และสร้างไฟล์ชื่อ footer.php และโค้ดก็ตามนี้ครับ

อธิบายการทำงาน:

  • wp_head() เป็นฟังก์ชันดึงเอา template ต่างๆ พวก tags / plugin หรือฟังก์ชันต่างๆ และ CSS ของธีมเราเข้ามาครับ
  • wp_footer() เอาไว้ดึงพวก script ต่างๆ ที่เราเรียกใช้เข้ามาเหมือนกันส่วนมากก็จะเป็นไฟล์ javascript

ที่เหลือเราก็เขียน HTML ลงไปได้เลยใครจะใส่อะไรเข้าไปก็ได้ จะทำ viewport หรือเช็ค cross-browser หรืออะไรก็แล้วแต่เราจะไปเล่นกับมันเลยครับ

Note: จะเห็นแท็ก HTML มันไม่ต่อกันนะครับ มันจะเปิดไว้ที่ header จากนั่นก้ไปปิดที่ footer อีกที่เป็นรูปแบบการเขียนของ WordPress ครับผม


ใส่สไตล์ให้กับเว็บด้วย CSS

เปิดไฟล์ style.css เรามาเลยครับ แล้วก็ใส่โค้ดไปตามนี้ครับ

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


 

Register script ให้ทำงานกับธีม

สร้างไฟล์ชื่อ functions.php ให้เป็นตามนี้นะครับ อย่าตกหล่นเดียวมันไม่ทำงาน แล้วก็อบโค้ดตามนี้ครับ

อธิบายการทำงาน:

  • สร้างฟังก์ชั่นชื่อ setup_script
  • wp_enqueue_style เป็นฟังก์ชันของ WordPress ที่ให้เราเอา CSS เข้ามาใส่เว็บครับ
  • add_action เป็นการใส่ฟังก์ชันที่ไว้ยัดเอาสิ่งต่างๆ ที่เราเขียนลงไปให้ระบบทำงานครับ หรือเรียกว่าการ Hook ครับ โดยเราจะต้องเรียกชื่อของ ฟังก์ชันที่เราจะ hook ให้ถูกตามที่ WordPress มีให้เราใช้ ตัวอย่างคือ ฟังก์ชันที่ใช้ในการรัน script ชื่อ wp_enqueue_scripts และเราก็ใส่ชื่อฟังก์ชันของเราลงไปครับ

ลองเปิดเว็บเราอีกทีครับจะเห็นว่า CSS เราทำงานแล้ว แต่!! เดี๋ยวก่อนผมได้ทำการเรียก Bootstrap ลงไปด้วยในเว็บให้ไปโหลดมาจากเว็บแล้วสร้างโฟรเดอร์ชื่อ inc/css แล้วเอาไฟล์ลงไปวางนะครับ

Note: inc ปกติเป็นโฟรเดอร์ที่ตั่งมาเพื่อเก็บไฟล์ของ CSS, JS หรือไฟล์ต่างๆ ที่เราเขียนขึ้นมาในธีมครับ ปกติเขาจะตั่งว่า inc ลองดูธีมอื่นๆ เขาจะวางสิ่งที่เขาเขียนไว้ในนั่นครับ เกือบจะกลายเป็นมารตฐานคนทำธีมไปแล้วครับ เวลาจะแกะโค้ดเรามักจะมองหา inc ก่อนเลย


เมื่อเราโหลด Bootstrap มาลงแล้วก็ลองดูผลที่ได้ครับ

Screen Shot 2559-02-18 at 18.27.18

จบแล้วครับการติดตั่งธีมของเรา ตอนหน้าผมจะมาสอนการทำเมนูของเว็บเรานะครับ

Facebook Comments