เวิร์ดเพรสธีม บทที่ 3 : สร้าง index.php
Nov 3rd
สร้าง index.php เป็นบทที่สามของชุดการสอนสร้างธีมเวิร์ดเพลส
ถึงเวลาแล้วที่จะพักเรื่องทฤษฏีไว้ แล้วมาเริ่มลงมือปฏิบัติจริงกัน ในบทนี้คุณจะได้ยุ่งกับโค้ดของเวิร์ดเพลสเล็กน้อย ตอนนี้คุณควรติดตั้งเวิร์ดเพลสไว้ในคอมพิวเตอร์คุณได้แล้วนะครับ เพราะว่าการใช้บล็อกออนไลน์จะไม่สะดวกในการลองรัน
ขั้นตอนที่ 1 : สร้างโฟลเดอร์ธีม
ไปที่โฟลเดอร์ธีมของเวิร์ดเพลส ซึ่งมันควรจะอยู่ที่ wp-content/themes และ ตั้งชื่อโฟลเดอร์ใหม่ในโฟลเดอร์ themes ว่า “tutorial”
ขั้นตอนที่ 2 : สร้างไฟล์ index.php และ style.css
เปิดโปรแกรม dreamweaver หรือ โปรแกรมจัดการตัวหนังสือ(text editor)ที่คุณชื่นชอบ
คัดลอกโค้ดต่อไปนี้ ไป paste ที่หน้าโปรแกรม text editor ของคุณ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?> <?php //comments_popup_script(); // off by default ?> <?php wp_head(); ?> </head> <body> </body> </html>
จากนั้น save เป็นชื่อ index.php ไว้ในโฟลเดอร์ tutorial
สร้างไฟล์ขึ้นมาอีก แล้วปล่อยให้ว่างไว้ save เป็นชื่อ style.css ในโฟลเดอร์ tutorial
ในตอนนี้คุณจะมีไฟล์ที่สร้างขึ้นมา 2 ไฟล์ คือ index.php และ style.css
อธิบายความหมายของ index.php :
คลิกที่รูปข้างบนเพื่อดูรูปที่ใหญ่ขึ้น ข้างล่างนี้จะเป็นการอธิบายส่วนต่าง ๆ ที่ผมได้วงด้วยเส้นสีแดงในรูป
Doctype เป็นตัวระบุว่าคุณจะเขียนโค้ดประเภทไหนในไฟล์นี้ ในจุดนี้ Doctype ไม่ค่อยมีความสำคัญเท่าไหร่ แต่จะสำคัญกับ CSS จึงจำเป็นต้องมีไว้ครับ
<html> เป็นส่วนที่ชี้ให้เห็นว่าเริ่มหน้าเว็บแล้วนะ
<head> เป็นส่วนเริ่มต้นของส่วนหัวของหน้าเว็บ มีไว้เพื่อใส่ style sheet, javascript และ title ของเว็บ ซึ่งทุกเว็บเพจจะต้องมีส่วนหัวนี้ ถึงแม้ว่าจะมี style sheet, javascript หรือไม่ก็ตาม ส่วน </head> เป็นส่วนที่ระบุว่าสิ้นสุดส่วนหัวแล้ว
<?php bloginfo(’stylesheet_url’); ?> เป็นฟังก์ชันของภาษาphp ที่จะคืนค่ามาเป็นที่อยู่ของไฟล์ style.css เพื่อให้ธีมของเราสามารถลิงค์ไปหาไฟล์นี้ได้ และสามารถควบคุมและจัดการ การแสดงผลในหน้าเว็บได้ ถ้าโค้ดไหนถูกแท็ก <?php และ ?> ครอบไว้ แสดงว่ามันคือโค้ดภาษาphp ซึ่ง คือสิ้นสุดแท็ก
ดังนั้น
- bloginfo(’stylesheet_url’) คือ เรียกใช้ฟังก์ชันเพื่อให้ได้ที่อยู่ของไฟล์ style.css
- ; คือ สิ้นสุดการเรียกฟังก์ชัน semicolon ในภาษาพีเอชพี คือการระบุว่าจบการทำงานโค้ดหนึ่ง ๆ แล้ว
- ?> คือ สิ้นสุดส่วนของโค้ดพีเอชพี
<body> เป็นแท็กเริ่มต้นส่วนเนื้อหา บทความที่คุณกำลังอ่านอยู่นี้ก็อยู่ในส่วน <body> เช่นกัน
</html> คือสิ้นสุดส่วนเนื้อหา
ขั้นตอนที่ 3 : คัดลอกโค้ดต่อไปนี้
/*
Theme Name: Tutorial
Theme URI: http://www.divland.com
Description: This is my theme for a tutorial.
Version: 1.0
Author: Divland
Author URI: http://www.divland.com/
*/ไปไว้ในไฟล์ style.css และกดบันทึก(save) โค้ดส่วนนี้เป็นคอมเม้นสำหรับไฟล์ css ซึ่งจะถูกนำไปเป็นรายละเอียดของธีม ในหน้า design เช่น ชื่อ ธีม Tutorial รายละเอียดธีม This is my theme for a tutorial.
ขั้นตอนที่ 4 : ตรวจสอบธีม
เปิดเว็บเบราเซอร์ขึ้นมาไปที่หน้าบริหารจัดการเวิร์ดเพลส(WordPress administration area) คลิกที่ Design คุณจะเห็นว่ามี theme ที่ได้สร้างไว้ โผล่มาแล้ว แต่ว่าธีมที่เราสร้างกันนี้จะไม่มีรูปตัวอย่างเหมือนธีมอื่น ๆ เพราะเรายังไม่สร้างมันนั่นเอง
สำหรับวิธีการต่อไป อ่านต่อตอนหน้านะจ๊ะ
รอติดตามผลงานนะครับ
สุดยอดมากครับ รอติดตามอยู่นะครับ
รอติดตามค่ะ
รอติดตามครับ อยากทำเองเป็นเหมือนกัน
Wowwwww.
/
Awsome!!!!
thank you
Thank you for good information
ความรู้แบบนี้ชอบจริงๆ
บทที่ 4 อยู่ไหน ง่ะ