เวิร์ดเพรสธีม บทที่ 4 : Header Template
ในบทที่แล้วผมได้บอกการติดตั้งธีม และ แนะนำให้รู้จัก php เล็กน้อย สำหรับวันนี้เราจะต่อกันในเรื่องของ php กันอีกนิด และ เรียนรู้วิธีแสดงชื่อบล็อกของเรา
โปรดจำไว้ว่า อย่าคัดลอกโค้ดที่ผมเตรียมไว้ให้ไปใช้นะครับ ให้คุณพิมพ์เอง อย่างน้อยมันจะช่วยให้จำขึ้นใจไงล่ะครับ
ขั้นตอนที่ 1ไปที่โฟลเดอร์ธีมของคุณ ในโฟลเดอร์นั้นจะต้องมีไฟล์ index.php และ style.css
โค้ดข้างในไฟล์ index.php และ style.css จะต้องเหมือนกับ index.txtและ style.txt
ขั้นตอนที่ 2
- เปิดหน้าต่างเว็บเบราเซอร์ขึ้นมา ไปที่เว็บ wordpress ของคุณ ภาพที่ปรากฏอยู่ตรงหน้าคุณจะต้องเป็นหน้าจอว่างเปล่านะครับ เพราะว่าธีมที่เราทำไว้ครั้งที่แล้วเราไม่ได้ใส่ให้มันแสดงผลอะไรเลย
- กลับไปที่ธีมโฟลเดอร์ จากนั้นเปิดไฟล์ index.php ขึ้นมา
มาถึงขั้นตอนนี้ สิ่งที่เราเพิ่งทำเสร็จไปก็คือ เปิด โฟลเดอร์ธีม, เว็บเบราเซอร์ และ index.php ขึ้นมา
ขั้นตอนที่ 3
ไปที่ไฟล์ index.php แล้วให้พิมพ์ <?php bloginfo(’name’); ?> ไว้ระหว่างแท็ก <body> และ </body> แล้วกด save
กลับไปที่เว็บเบราเซอร์ กดปุ่มรีเฟรช หรือ F5 คุณจะเห็นชื่อบล็อก (title) แสดงขึ้นมา ในรูปข้างล่างนี้ผมได้ตั้งชื่อบล็อกไว้ว่า “Demo Theme Development”
เกิดอะไรขึ้น?
เมื่อกี้เราเพิ่มโค้ด php เข้าไปบรรทัดนึงในไฟล์ index.php โค้ดที่เพิ่มไปนั้นเป็นฟังก์ชันที่เรียกหาข้อมูลเกี่ยวกับบล็อกของเรา (bloginfo()) และในตัวอย่างนี้เราได้ระบุพารามิเตอร์ให้มันว่า ‘name’ เพื่อให้ฟังก์ชันนี้ดึงชื่อบล็อกของเรามาแสดง ชื่อของบล็อกก็มาจาก Weblog Title ในหน้า Options ที่เราได้ระบุไว้
<?php คือ เริ่มการเขียนโค้ด php
bloginfo(’name’) คือ ฟังก์ชันที่ใช้ดึงชื่อบล็อกของเรามาแสดง
; คือ สิ้นสุดการเรียกฟังก์ชัน
?> คือ สิ้นสุดส่วนของโค้ด php
ในการเพิ่มโค้ด หรือ แก้ไข ไฟล์ index.php ให้กดบันทึกและรีเฟรช เพื่อดูผลลัพธ์ที่เกิดขึ้น
ขั้นตอนที่ 4
เปลี่ยนชื่อบล็อกที่เป็นข้อความธรรมดา ให้เป็นลิงค์ ไปที่ไฟล์ index.php เพิ่ม <a href=”#”> และ </a> ครอบฟังก์ชันที่เราได้เพิ่มไปก่อนหน้านี้ เมื่อทำเสร็จจะเป็นดังนี้ <a href=”#”><?php bloginfo(’name’); ?></a>
กลับไปที่เว็บเบราเซอร์ กดรีเฟรช จะเห็นได้ว่าชื่อบล็อกกลายเป็นลิงค์ไปซะแล้ว
ตอนนี้ชื่อบล็อกกลายเป็นลิงค์ แต่มันเป็นลิงค์ที่ไม่มีจุดหมายปลายทาง กดให้ตาย ก็กลับมายังหน้าเดิม ในความเป็นจริงแล้วชื่อบล็อกควรจะลิงค์ไปที่หน้าแรกของบล็อก ทำได้โดยเพิ่มโค้ด <?php bloginfo(’url’); ?> เข้าไประหว่างเครื่องหมายคำพูดของ href ดังนี้
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>
กดบันทึกแล้วกลับไปที่เว็บเบราเซอร์และกดรีเฟรช เมื่อคลิกที่ลิงค์ มันจะพาคุณไปยังหน้าแรกของบล็อก คุณจะสังเกตุเห็นว่ามันลิงค์มายังหน้าเดิมอีก ซึ่งถูกต้องแล้วเพราะหน้าเว็บบล็อกที่เราทำ ๆ กันอยู่นี้เป็นหน้าแรก
เกิดอะไรขึ้น?
เราได้ทำให้ชื่อบล็อกกลายเป็นลิงค์ที่ชี้ไปยังหน้าแรกของบล็อก
bloginfo(’url’) คือฟังก์ชันเรียกหาข้อมูลเกี่ยวกับบล็อก โดยการระบุพารามิเตอร์เป็น ‘url’ เพื่อให้ฟังก์ชันนี้แสดงที่อยู่หน้าแรกของบล็อกออกมา
<a> คือ เปิดแท็กลิงค์ (ภาษา XHTML)
</a> คือ ปิดแท็กลิงค์ เพราะถ้าหากไม่ปิดแท็กนี้ ข้อความที่อยู่หลังจากลิงค์จะกลายเป็นลิงค์ไปหมด จำกฏข้อหนึ่ง ที่ได้กล่าวไปในบทแรกได้ไหมครับ “ปิดทุกแท็ก(tag) ที่คุณเปิดมันไว้”
href=”” คือค่าของ hypertext อะไรก็ตามที่อยู่ในเครื่องหมายฟันหนูคือค่าที่เราต้องกำหนด
ดังนั้น
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>
หมายความว่า เราสร้างลิงค์ให้ชี้ไปที่หน้าแรกของบล็อกโดยใช้ฟังก์ชัน bloginfo(’url’) เพื่อเรียกที่อยู่หน้าแรกของบล็อกมาแสดง และชื่อลิงค์เป็นชื่อบล็อกโดยใช้ฟังก์ชัน bloginfo(’name’) เพื่อเรียกชื่อบล็อกมาแสดง
นำแท็ก <h1> และ </h1> ไปครอบโค้ดข้างต้นนี้ไว้ แท็กH1 คือ รูปแบบหัวข้อหมายเลข1(heading 1) รูปแบบหัวข้อมีทั้งหมด 6 รูปแบบด้วยกัน คือ H1, H2, H3, H4, H5, H6 โดยปกติแล้ว H1 จะมีขนาดใหญ่ที่สุด และ H6 จะมีขนาดเล็กที่สุด
ณ ตอนนี้โค้ดที่ได้ เป็นดังนี้
<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
กดบันทึก แล้วกลับไปที่เบราเซอร์ และ กดปุ่มรีเฟรช
ขั้นตอนที่ 5
แสดงคำอธิบายบล็อกด้วยการเรียกใช้ฟังก์ชัน <?php bloginfo(’description’); ?> ไว้ที่ด้านล่างลิงค์ดังนี้
<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>
กดบันทึก และรีเฟรชหน้าต่างเว็บเบราเซอร์ จะเห็นได้ว่าคำอธิบายบล็อกแสดงอยู่ด้านล่างลิงค์ เราสามารถแก้ไขคำอธิบายบล็อกได้โดยไปแก้ที่ส่วนบริหารจัดการบล็อกเวิร์ดเพรส (administration area)
ขั้นตอนที่ 6
ในขั้นตอนนี้ผมจะแนะนำให้ทุกท่านรู้จักกับแท็ก DIV
พิมพ์ <div> และ </div> ครอบโค้ดทั้งหมดที่อยู่ภายใน <body> ดังนี้
<div>
<h1><a href=”?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>
</div>
กดบันทึก และรีเฟรชหน้าต่างเว็บเบราเซอร์ คุณจะพบว่าไม่มีอะไรเปลี่ยนแปลงเลย
ให้คุณคิดว่า DIV เป็นเสมือนกล่องล่องหน มีไว้เพื่อแยกชื่อบล็อกกับคำอธิบายบล็อก ออกจากโค้ดอื่น ๆ ถ้าเราไม่กำหนดรูปแบบ(style) ให้มัน มันก็จะไม่มีไรมากไปกว่าการแยกเนื้อหาออกจากกัน ในบทต่อ ๆ ไปเราจะใช้ style.css ควบคุมการแสดงผลกล่อง DIV กล่องนี้ ซึ่งเราสามารถกำหนดรูปแบบ เส้นขอบ(border), ระยะห่างจากเส้นขอบถึงเนื้อหา(padding), ระยะห่างจากขอบเว็บเบราเซอร์ถึงขอบกล่อง(margin), สีพื้นหลัง(background color), รูปพื้นหลัง(background images) และอื่น ๆ อีกมากมาย
ขั้นตอนที่ 7
เพิ่ม id=”header” ให้กับแท็ก DIV ดังนี้
<div id=”header”>
กดบันทึก ในตอนนี้ยังไม่มีการเปลี่ยนแปลงใด ๆ เกิดขึ้น เรากำหนด ID ให้กับแท็ก DIV ก็เพราะว่า หากมี DIV หลาย ๆ กล่อง เราจะต้องมีตัวที่บ่งชี้ได้ว่ากล่องไหนเป็นกล่องไหน หรือ เอาไว้แยกแยะแต่ละกล่องนั่นเอง
>-
(
chan said,
พฤศจิกายน 17, 2008 @ 2:56 pm
เยี่ยมมากๆครับ
Donkey said,
พฤศจิกายน 17, 2008 @ 3:00 pm
มาแล้ว (^_^) หายไปนานเลย
themutu said,
พฤศจิกายน 17, 2008 @ 6:32 pm
เนื้อหาดีมากๆเลยครับ ขนาดผมไม่ค่อยรู้เรื่อง แต่พอมาอ่านแล้วเริ่มเข้าใจครับ
ขอบคุณครับ
kenglife said,
พฤศจิกายน 19, 2008 @ 3:34 pm
รออ่านบทต่อไปนะครับ
ฟังเพลง said,
ธันวาคม 6, 2009 @ 5:30 pm
Thank you for good information
โหลดเพลง mp3 said,
ธันวาคม 6, 2009 @ 5:31 pm
ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ