เวิร์ดเพรสธีม บทที่ 4 : Header Template
Nov 16th
ในบทที่แล้วผมได้บอกการติดตั้งธีม และ แนะนำให้รู้จัก 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 หลาย ๆ กล่อง เราจะต้องมีตัวที่บ่งชี้ได้ว่ากล่องไหนเป็นกล่องไหน หรือ เอาไว้แยกแยะแต่ละกล่องนั่นเอง
เยี่ยมมากๆครับ
มาแล้ว (^_^) หายไปนานเลย
เนื้อหาดีมากๆเลยครับ ขนาดผมไม่ค่อยรู้เรื่อง แต่พอมาอ่านแล้วเริ่มเข้าใจครับ
ขอบคุณครับ
รออ่านบทต่อไปนะครับ
Thank you for good information
ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ
ขอบคุณมากๆเลยคับ