ก่อนที่จะไปสู่การสร้าง header, index, page หรือ sidebar เรามาดู HTML ตัวอย่างกันก่อน เพื่อนำไปใช้ในส่วนต่อไปของบทความ ในที่นี้ใช้เป็น XHTML 1.0 Strict (อยากใช้ HTML5 แต่ยังงงกับการใช้ tag บาง tag เช่น article กับ section ว่าใช้อย่างไรกันแน่ เลยใช้ XHTML ไปก่อน) แล้วบันทึกเป็น index.php โดยมีโครงสร้างคร่าว ๆ ดังนี้ 

<!--Begin Header (ส่วนหัว) -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="th" xml:lang="th">
<head profile="http://gmpg.org/xfn/11">
<title>My Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Blog ของผมครับ</h1>
<div id="topnav">

</div> <!--#topnav-->
</div>
<!--End Header-->

<!--Begin Content (ส่วนเนื้อหา) -->
<div id="content">
ส่วนเนื้อหา
</div>
<!--End Content-->

<!--Begin Sidebar (ส่วนเมนู) -->
<div id="nav">
ส่วนนำทางหรือเมนู
</div>
<!--End Sidebar-->

<!--Begin Footer (ส่วนล่าง) -->
</div> <!--#wrapper-->
<div id="footer">
Copyright &copy; 2011 My Blog
</div>
<!--End Footer-->

</body>
</html>

การสร้าง Header

ให้ copy ส่วนของ html ที่อยู่ระหว่าง tag <!–Begin Header (ส่วนหัว) –> และ <!–End Header–> คือในบรรทัดที่ 1 ถึงบรรทัดที่ 17 ในตัวอย่างไปใส่ไว้ใน header.php ดังนั้น header.php ในตอนนี้จะมี code ดังนี้


header.php

<!--Begin Header (ส่วนหัว) -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="th" xml:lang="th">
<head profile="http://gmpg.org/xfn/11">
<title>My Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Blog ของผมครับ</h1>
<div id="topnav">

</div> <!--#topnav-->
</div>
<!--End Header-->

ในการสร้างธีม WordPress นั้น จำเป็นต้องมีการประกาศ DOCTYPE ว่าเป็น HTML หรือ XHTML เพื่อเป็นการบอก browsers ให้ render เว็บเพจได้อย่างถูกต้อง

ในส่วนของ <head> นั้น เราจะใช้ <head> เฉย ๆ ไม่ต้องตามตัวอย่างก็ได้ (ผมใส่ตามหนังสือน่ะ) โดยในตัวอย่างจะเป็นเรื่องเกี่ยวกับการที่หน้า blog ของเรามีความสัมพันธ์เชื่อมโยงกับคนอื่น (มั๊ง) สามารถหารายละเอียดเพิ่มเติมที่ XHTML Friends Network

จากนั้นทำการแก้ไข header.php ดังนี้

<!--Begin Header (ส่วนหัว) -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="th" xml:lang="th">
<head profile="http://gmpg.org/xfn/11">
<title><?php wp_title('&laquo;', true, 'right'); ?><?php bloginfo('name'); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Blog ของผมครับ</h1>
<div id="topnav">

</div> <!--#topnav-->
</div>
<!--End Header-->

จาก code ข้างบน การแก้ไขเริ่มตั้งแต่บรรทัดที่ 5 จากของเดิมคือ

<title>My Blog</title>

ก็เปลี่ยนเป็น

<title><?php wp_title('&laquo;', true, 'right'); ?><?php bloginfo('name'); ?></title>

การเปลี่ยนข้างต้นจะแสดงชื่อ blog ของเราตามที่ตั้งค่าไว้ตอนติดตั้งครั้งแรกในส่วนของ admin ซึ่งสามารถแก้ไขได้ ถ้าเอาแบบตาม Tutorial จากเว็บอื่นบางเว็บจะใช้แค่

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

ก็แล้วแต่สะดวกครับ ลองใช้ทั้งสองแบบแล้วดูว่าเราชอบแบบไหน ข้อมูลเพิ่มเติมของ tag wp_title() สามารถดูได้ที่ wp_title()

ต่อมาในบรรทัดที่ 6 คือการบอก browser ว่าหน้าเว็บเราเป็น HTML ที่มีการเข้ารหัส (Encoding) แบบ UTF-8

ข้อควรระวังคือเวลาพิมพ์ code เหล่านี้ต้องเลือกบันทึกเป็นแบบ UTF-8 ด้วย มิฉะนั้นเวลาแสดงผลจะเป็นภาษาต่างดาว เช่นถ้าใช้ Notepad++ ต้องเลือกที่เมนู Encoding –> Encode in UTF-8 without BOM

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

เปลี่ยนเป็น

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

บรรทัดที่ 7 คือการอ้างถึง CSS ที่ใช้ในธีมของเรา โดยหลังจากที่เราสร้างไฟล์ style.css กับไฟล์ index.php (ไฟล์ template ของ code ข้างต้น) ให้เลือกธีมในส่วนของ admin ที่เป็นชื่อธีมชื่อเราได้สร้างไว้ (ชื่อเดียวกับชื่อธีมที่กำหนดใน style.css) จากเดิม

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

เปลี่ยนเป็น

<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />

ในบรรทัดที่ 8 ใช้สำหรับการจัดการกับ comment ส่วนในบรรทัดที่ 9 <?php wp_head(); ?> คือการดึงส่วนที่เหลือใน <head> เช่น Prototype, version ของ WordPress ที่เราใช้ หรือ plugin ต่าง ๆ ที่เราใช้ เป็นต้น

ในส่วนต่อมาคือส่วนของส่วนหัวของเว็บที่จะแสดงผล (ที่ผ่านมาคือการประกาศค่าใน tag <head> ยังไม่เกี่ยวกับการแสดงผลให้เห็น ต่อจากนี้คือการให้ browser แสดงผลสิ่งที่อยู่ภายใต้ tag <body>) แก้ไขไฟล์ header.php ดังนี้

<!--Begin Header (ส่วนหัว) -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="th" xml:lang="th">
<head profile="http://gmpg.org/xfn/11">
<title><?php wp_title('&laquo;', true, 'right'); ?><?php bloginfo('name'); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<div id="topnav">
<?php wp_list_pages('title_li='); ?>
</div> <!--#topnav-->
</div>
<!--End Header-->

ในบรรทัดที่ 14 ถ้าเรา view sourcecode จะเห็นเป็น

<h1><a href="http://ที่อยู่ของ site เรา/">ชื่อ blog ของเรา</a></h1>

จะเห็นว่า <?php bloginfo(); ?> จะแสดงข้อมูลต่าง ๆ ของ WordPress แล้วแต่ว่าเราผ่านค่า argument อะไรเข้าไป เช่น จากบรรทัดที่ 14 เราผ่านค่า url และ name เข้าไป ทำให้แสดงผลเป็น url และชื่อ blog ของเราที่ตั้งไว้ ดูเพิ่มเติมเกี่ยวกับ bloginfo() ได้ที่ bloginfo()

ในบรรทัดที่ 16 ส่วนนำทาง (navigation) ส่วนบนที่อยู่ในส่วนของ <div id=”topnav”></div> จะแสดงหน้า (page) ที่เราสร้างไว้ แต่ถ้าเราต้องการแสดงเป็นหมวดหมู่ (Category) ก็ใช้ code แทนดังนี้

<?php wp_list_categories(); ?>

โดยฟังก์ชั่น wp_list_categories() สามารถดูเพิ่มเติมได้ที่ wp_list_categories

จากนั้นให้ทำการบันทึก header.php ตอนต่อไปจะเป็นการสร้างไฟล์ index.php (แค่ header.php ก็เขียนตั้งหลายวัน แล้ว index.php จะกี่วันเนี่ย)

แปลจาก: WordPress 3 Site Blueprints

โดย: Heather R. Wallace