Home > Wordpress > เวิร์ดเพรสธีม บทที่ 5_2 : เนื้อหา

เวิร์ดเพรสธีม บทที่ 5_2 : เนื้อหา

ในบทนี้ ผมจะสอนวิธีการนำเนื้อหาออกมาแสดง แล้วใช้ (Div) เพื่อแยกระหว่างหัวข้อบทความกับเนื้อหาบทความ

เริ่มกันที่ เปิดโฟลเดอร์ “tutorial” ขึ้นมา, เปิดเว็บเบราเซอร์ชี้ไปที่ http://localhost/wordpress และเปิดไฟล์ index.php ขึ้นมา

ขั้นตอนที่ 1:

พิมพ์ <?php the_content(); ?> ไว้ใต้หัวข้อบทความ

บันทึก และรีเฟรชเว็บเบราเซอร์ จะมีข้อความปรากฏขึ้นใต้หัวข้อบทความ


เกิดอะไรขึ้น?

เราใช้ฟังก์ชัน the_content() เพื่อเรียกเนื้อหาบทความมาแสดง แต่ตอนนี้ข้อความเหล่านั้นยังไม่ได้ถูกจัดรูปแบบ ยังจำไฟล์ style.css ได้อยู่ไหมครับ ต่อไปเราจะใช้มันควบคุมการแสดงผลเนื้อหา

ในบทความที่แล้ว ผมได้บอกให้คุณโพสบทความมั่ว ๆ หลาย ๆ บทความเพื่อเอาไว้ดูการแสดงผล ถ้าคุณยังไม่ได้ทำก็ขอให้ทำซะนะครับ แล้วมาดูที่หน้าเว็บเบราเซอร์ บทความที่ได้โพสไปจะต้องแสดงผลออกมาหลาย ๆ บทความดังรูป

ต่อไปให้ไปที่เว็บเบราเซอร์ คลิกที่เมนู View แล้วเลือก Page Source หรือ Source หน้าต่างที่เต็มไปด้วยโค้ดจะเด้งขึ้นมา

ถ้าคุณใช้ IE หน้าต่าง notepad จะเด้งขึ้นมา

แต่ถ้าใช้ firefox หน้าตาโค้ดมันจะออกมาเป็นดังนี้ (ดูง่ายหน่อยเพราะมีสีด้วย)

สังเกตุความแตกต่างระหว่างไฟล์ index.php และ source codes จะเห็นได้ว่า ข้อความต่าง ๆ, รูปภาพ ฯลฯ ถูกเรียกมาแสดงโดย the_content() เป็นไงล่ะครับ ถ้าสมมติว่าเราไม่ใช้เจ้าเวิร์ดเพรส เราจะต้องพิมพ์ข้อความและก็รูปภาพเหล่านั้นเอง

จุดสังเกตุอีกจุดคือ แท็กเปิดและปิด p ที่ผมได้วงกลมไว้ ในไฟล์ index.php ไม่ปรากฏแท็กนี้เลย แต่พอ view source ดูกลับมีแท็กนี้โผล่ขึ้นมา

ทำไมต้องใช้แท็ก p
ในขณะที่คุณพิมพ์บทความ ถ้าต้องการช่องว่างระหว่างย่อหน้า คุณต้องใช้แท็ก p ครอบแต่ละย่อหน้าไว้

จะใส่แท็ก p อย่างไร
คุณไม่ต้องใส่เองครับ เวิร์ดเพรสจะจัดการใส่ให้คุณเอง โดยการกดปุ่ม enter ใน text editor ของเวิร์ดเพรส

ขั้นตอนที่ 2:
ครอบ the_content() ด้วย(Div) และตั้งชื่อคลาสให้มันว่า “entry

<div class=?entry?>

</div>

ดังรูป

กดบันทึก และรีเฟรชเว็บเบราเซอร์ ถ้าคุณเปิด View>Page Source อีกครั้งคุณจะพบว่ามีแท็ก Div ชื่อว่า entry ครอบเนื้อหาของแต่ละบทความไว้

ทำไมต้องทำเช่นนี้?

  • เหตุผลข้อแรกคือ ในตอนนี้คุณจะสามารถบอกได้ว่าหัวข้อบทความสิ้นสุดตรงไหน และ เนื้อหาบทความเริ่มตรงไหน
  • เหตุผลข้อสองคือ เพื่อให้ง่ายต่อการจัดรูปแบบการแสดงผลด้วยไฟล์ style.css เพราะเราจะสามารถจัดรูปแบบเนื้อหาบทความได้โดยที่ไม่กระทบกับส่วนอื่น ๆ

id กะ class ต่างกันอย่างไร?
id ใช้สำหรับ (Div) ที่มีอยู่กล่องเดียวในหน้าหนึ่ง ๆ แต่ class จะให้ได้หลายคลาสในหน้าหนึ่ง ๆ ใน source code จะสังเกตุเห็นว่ามี id=”header” และ id=”container” อยู่เพียงอันเดียว แต่จะมี class=”entry” หลายอัน

เราจะสามารถเปลี่ยน header และ container เป็น class ได้หรือไม่?

ได้อยู่แล้วครับ จำไว้เลยว่าเราไม่สามารถใช้ id ได้หลายอันในหน้าหนึ่ง ๆ หรือไม่สามารถนำไปใช้ใหม่ได้

ขั้นตอนที่ 3:
นำ Div ที่มีคลาสชื่อ post ไปครอบหัวข้อบทความและเนื้อหาบทความ

<div class=?post?>

</div>

(คุณสามารถตั้งชื่อ class และ id เป็นอะไรก็ได้ตามที่คุณต้องการ แต่ post และ entry เป็นชื่อที่สั้นและง่ายต่อการจำ)

ในตอนนี้โค้ดของคุณจะต้องเป็นดังรูป

จัดรูปแบบให้ดูง่ายหน่อย ดังนี้

ผมใช้ tab แทนการใช้ spacebar เพื่อเยื้องแต่ละ tag ในไฟล์ index.php

บันทึกและรีเฟรชเว็บเบราเซอร์เพื่อสังเกตุความเปลี่ยนแปลง

ทำไมต้องนำ Div มาครอบหัวข้อบทความและเนื้อหาบทความอีก?
เราใส่ div ที่มีคลาสชื่อว่า post เพื่อแยกแต่ละบทความออกจากกัน

Related Articles


Share
Categories: Wordpress
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. December 8th, 2008 at 09:19 | #1

    ขอบคุนมากครับเดียวต้องลองทำดู

  2. December 8th, 2008 at 09:57 | #2

    ติดตามบทความดีๆ แบบนี้อยู่ ขอบคุณมากครับ

  3. December 12th, 2008 at 10:21 | #3

    ขอบคุณสำหรับบทความดีๆแบบนี้

  4. Frank
    March 25th, 2009 at 23:50 | #4

    เข้าใจทุกขั้นตอนเลยครับ ขอบคุณมากครับ

  5. konrasee
    May 5th, 2009 at 16:38 | #5

    อ่านแล้วเข้าใจง่ายดีครับ

  6. February 4th, 2011 at 10:29 | #6

    ขอบคุณมากครับ บทความภาษาไทยอ่านง่ายดี ตอนนี้เริ่มซับซ้อนขึ้นแล้ว

  1. No trackbacks yet.