เริ่มต้นกับ Theme

ก่อนอื่นก็คิดชื่อ Theme ที่จะสร้างขึ้นมาใหม่ เสร็จแล้วก็สร้าง folder โดยใช้ชื่อเดียวกับชื่อ theme ที่คิดจะตั้งชื่อ โดย folder ที่จะสร้าง theme ประกอบด้วยไฟล์ต่าง ๆ ดังนี้

  • functions.php
  • header.php
  • index.php
  • single.php
  • page.php
  • sidebar.php
  • footer.php

สร้าง stylesheet โดยตั้งชื่อว่า style.css และใช้ editor เปิดเพื่อ

แก้ไขไฟล์ ดังนี้

/*
Theme Name: ชื่อ theme
Theme URI: url ของ theme
Description: อธิบาย theme ที่เราสร้าง
Author: คนสร้าง (ชื่อเราเอง)
Auhtor URL: url ของคนสร้าง
Version: เวอร์ชั่น อาจเป็น 1.0 หรืออะไรก็ได้
*/

เพิ่มโค๊ดข้างต้นในไฟล์ style.css และ save ไฟล์

แบ่งส่วนหน้า template

การแบ่งส่วนในหน้า template เป็น 4 ส่วน โดยขึ้นกับเราว่าจะแบ่งส่วนใดเป็น header, sidebar, footer หรือ content โดยอาจแบ่งได้ดังนี้

ส่วน header

<!--Begin Header-->
<!--End Header-->

ส่วน sidebar

<!--Begin Sidebar--> 
<!--End Sidebar-->

ส่วน footer

<!--Begin Footer-->
<!--End Footer-->

ส่วน content

<!--Begin Content-->
<!--End Content-->

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

การสร้างไฟล์ functions

ก่อนทำการสร้าง theme ต้องสร้างไฟล์ functions.php ก่อน เพราะไฟล์นี้ทำให้เราสามารถเพิ่ม function เพิ่มเติมใน theme ของเราได้ โดยไฟล์ functions.php นี้ทำให้เราสามารถเพิ่ม widget เข้าไปใน sidebar ของเราจากหน้า admin panel ได้เลย

เปิดไฟล์ functions.php แล้วเพิ่ม code ดังต่อไปนี้

functions.php

<?php
if (function_exists('register_sidebar'))
   register_sidebar(array(
      'before_widget'=>'',
      'after_widget'=>'',
      'before_title'=>'<h2>',
      'after_title'=>'</h2>',
   ));

ต่อมาให้เพิ่ม code ด้านล่างนี้ต่อท้ายเพื่อให้ theme ของเราสามารถเปลี่ยน background ภายในหน้า admin panel ได้โดยไม่ต้องแก้ไขที่ stylesheet ในส่วนของ Custom Background

add_custom_background();

เพิ่ม code ส่วนต่อมาคือการ feed links ในส่วนของ header ของ theme

add_theme_support('automatic-feed-links');

ตั้งแต่ WordPress 2.9 เป็นต้นมาจะมี feature ใหม่คือการใส่รูป thumbnail ซึ่งจะเป็นเมนูเพิ่มอยู่ทางด้านล่างขวา แสดงเมื่อเราอยู่ในส่วนของการ add new post โดยมี code ดังนี้

add_theme_support( 'post-thumbnails');

ตามด้วยการปิด tag ของ php

?>

เมื่อเสร็จสิ้น code ทั้งหมดของ functions.php จะเป็นดังนี้

functions.php

<?php  
if (function_exists('register_sidebar'))  
   register_sidebar(array(  
      'before_widget' => '',  
      'after_widget' => '',  
      'before_title' => '<h2>',  
      'after_title' => '</h2>',  
   ));  
add_custom_background();
add_theme_support('automatic-feed-links');
add_theme_support('post-thumbnails');	
?>

ในตอนที่ 1 จะขอจบที่การสร้างไฟล์ functions.php ก่อน ส่วนการสร้าง header, sidebar, content และ footer จะกล่าวถึงในตอนต่อไป

แปลจาก: WordPress 3 Site Blueprints

โดย: Heather R. Wallace