[Web] สร้างธีม WordPress ตอนที่ 1 [โครงสร้างและไฟล์พื้นฐานของระบบ]

สร้างธีม  WordPress ตอนที่  1 [โครงสร้างและไฟล์พื้นฐานของระบบ]

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

  • index.php / home.php / front-page.php
  • footer.php
  • header.php
  • function.php
  • style.css

การแสดงผลบน WordPress

  • index.php
  • home.php

index.php โดยปกติแล้วการแสดงผลบนเว็บนั่นระบบจะมองหาไฟล์ชื่อว่า index.php ไม่ว่าเราจะเขียนไหนก็ตามหากไม่มี index.php เว็บก็จะไม่แสดงผลให้เราดู และ WordPress เองก็มี index.php ที่ไว้แสดงผลโพสล่าสุดของระบบเรานั่นเอง แต่เราสามารถที่จะให้ระบบนั่นไม่แสดงผลโพสที่ index.php ก็ได้เขาเรียกกันว่า static page เราสามารถเลือกตั่งค่าได้ว่าจะให้หน้าในเป็น static page

home.php มีหน้าที่เหมือน index.php เลยครับ แต่ไม่จำเป็นต้องมีก็ได้แต่ถ้าในระบบเรามีตัวนี้จะทำงานเป็น static page ได้ครับ แต่ถ้าระบบหาไฟล์ home.php ไม่เจอก็จะไปเรียก index.php มาทำงานในแสดงผลโพสต่างๆ แทนครับ


การแสดงผลของ header และ footer

  • footer.php
  • header.php

footer.php ไฟล์นี้ไว้ทำ footer เว็บเราครับ เราก็จะเรียกไปใช้ใน index หรือพวกไฟล์ต่างๆ ครับ ไว้ทำพวก credit, copy right ของเว็บเราทั่วไปครับไม่ได้มีอะไรเกี่ยวข้องกับระบบการแสดงผล ถ้าไม่มีระบบก็ไม่แสดงผลออกมาเท่านั่งเองครับ

header.php ไฟล์นี่เอาไว้เก็บส่วนโค้ดของ <head></head> รวมถึงเมนูในเว็บครับ เขาจะเอาไว้ในส่วนนี้กัน ถ้าเราไม่ใส่ไปเว็บเราก็จะไม่แสดงเมนูและก็ไม่มีพวก head หรือ mate tags ครับ


 

การเขียน CSS บน WordPress 

  • style.css

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


 

การเรียกใช้ไฟล์ต่างๆ ในระบบรวมถึงการเขียนฟังก์ชันขึ้นมาใช้งานเอง

  • function.php

function.php การดึงไฟล์ css หรือ javascript หรือฟังก์ชันที่เราเขียนขึ้นมาเองจำเป็นต้องมีไฟล์ function.php วางไว้ที่ root folder ของธีมครับ ระบบจะทำการเข้าไปดึงเอาโค้ดที่เขียนทั่งหมดออกมาทำงานครับ

ลองดูภาพสรุปของโครงสร้าง WordPress กันนะครับ ตามลิ้งนี้เลยครับ  click จะเห็นนะครับว่าในทุกๆ ไฟล์ของระบบสุดท้ายจะวิ่งไปหา index.php ทั่งหมดเลยครับ ดังนั่นถ้าเขียนผิดจากที่ WordPress ว่าเอาไว้ระบบก็จะทำงานผิดทันทีครับ

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

Facebook Comments