เวิร์ดเพรสธีม บทที่ 5_3: ข้อความที่เกี่ยวเนื่องกับบทความ(Postmetadata) ต่อ

วันนี้เราจะมาเรียนรู้เกี่ยวกับ ข้อความเกี่ยวเนื่องแต่ละบทความในบล็อก(postmetadata) : วันที่, ประเภท, ผู้เขียนบทความ, จำนวนคอมเม้นท์ และข้อความต่าง ๆ ที่เกี่ยวกับบทความ

ก่อนที่จะเริ่ม ให้เปิด โฟลเดอร์ธีม, เบราเซอร์ และไฟล์ index.php ในไฟล์ index.php คุณจะต้องมีโค้ดดังรูป

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

คัดลอกโค้ดจากไฟล์ postmetadata.txtไว้ใต้ <?php the_content(); ?> (หมายเหตุ: สำหรับส่วนนี้คุณสามารถคัดลอกและวางได้เลย ตอนที่ผมทำธีมเวิร์ดเพรสผมก็คัดลอกส่วนนี้มาใช้เลย ซึ่งส่วนนี้เราไม่จำเป็นต้องเข้าใจอย่างละเอียดก็ได้ เพียงแค่รู้ว่าส่วนนี้มันทำอะไรก็ได้แล้ว)
อ่านต่อ คลิกที่นี่ »

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

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

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

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

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

อ่านต่อ คลิกที่นี่ »

wordpressธีม บทที่ 5 : การวนลูป(The Loop)

การวนลูปมีความสำคัญมาก เราใช้การวนลูปเพื่อเรียกแต่ละบทความในบล็อกมาแสดง ณ ตอนนี้คุณก็ได้เรียนรู้การสร้างธีมสำหรับwordpressมาบ้างเล็กน้อย มาทบทวนกันอีกทีดีกว่าว่าเรียนอะไรไปบ้างแล้ว

เรียนอะไรมาบ้างแล้ว?

• กฏ, โครงสร้าง, ลำดับชั้นความสำคัญ ของธีมwordpress
• แต่ละหน้าของบล็อกประกอบไปด้วยอะไรบ้าง
• การติดตั้งธีม
• การเรียกใช้ชื่อบล็อกมาแสดงเป็นลิงค์ และการเรียกใช้คำอธิบายบล็อกมาแสดงและการแยกโค้ดในส่วนหัวออกจากโค้ดส่วนอื่น ๆ

เริ่มบทที่ 5 กันได้แล้ว

สิ่งที่ต้องทำก็เหมือนเดิมครับ เปิดโฟลเดอร์ธีม tutorial ขึ้นมา, เปิดเบราเซอร์ไปที่ wordpress ของคุณ, เปิดไฟล์ index.php ขึ้นมา

อ่านต่อ คลิกที่นี่ »

ในบทที่แล้วผมได้บอกการติดตั้งธีม และ แนะนำให้รู้จัก php เล็กน้อย สำหรับวันนี้เราจะต่อกันในเรื่องของ php กันอีกนิด และ เรียนรู้วิธีแสดงชื่อบล็อกของเรา

โปรดจำไว้ว่า อย่าคัดลอกโค้ดที่ผมเตรียมไว้ให้ไปใช้นะครับ ให้คุณพิมพ์เอง อย่างน้อยมันจะช่วยให้จำขึ้นใจไงล่ะครับ

ขั้นตอนที่ 1ไปที่โฟลเดอร์ธีมของคุณ ในโฟลเดอร์นั้นจะต้องมีไฟล์ index.php และ style.css

โค้ดข้างในไฟล์ index.php และ style.css จะต้องเหมือนกับ index.txtและ style.txt

ขั้นตอนที่ 2

• เปิดหน้าต่างเว็บเบราเซอร์ขึ้นมา ไปที่เว็บ wordpress ของคุณ ภาพที่ปรากฏอยู่ตรงหน้าคุณจะต้องเป็นหน้าจอว่างเปล่านะครับ เพราะว่าธีมที่เราทำไว้ครั้งที่แล้วเราไม่ได้ใส่ให้มันแสดงผลอะไรเลย
• กลับไปที่ธีมโฟลเดอร์ จากนั้นเปิดไฟล์ index.php ขึ้นมา

มาถึงขั้นตอนนี้ สิ่งที่เราเพิ่งทำเสร็จไปก็คือ เปิด โฟลเดอร์ธีม, เว็บเบราเซอร์ และ index.php ขึ้นมา
อ่านต่อ คลิกที่นี่ »

สร้าง index.php เป็นบทที่สามของชุดการสอนสร้างธีมเวิร์ดเพลส
ถึงเวลาแล้วที่จะพักเรื่องทฤษฏีไว้ แล้วมาเริ่มลงมือปฏิบัติจริงกัน ในบทนี้คุณจะได้ยุ่งกับโค้ดของเวิร์ดเพลสเล็กน้อย ตอนนี้คุณควรติดตั้งเวิร์ดเพลสไว้ในคอมพิวเตอร์คุณได้แล้วนะครับ เพราะว่าการใช้บล็อกออนไลน์จะไม่สะดวกในการลองรัน

ขั้นตอนที่ 1 : สร้างโฟลเดอร์ธีม

ไปที่โฟลเดอร์ธีมของเวิร์ดเพลส ซึ่งมันควรจะอยู่ที่ wp-content/themes และ ตั้งชื่อโฟลเดอร์ใหม่ในโฟลเดอร์ themes ว่า “tutorial”

ขั้นตอนที่ 2 : สร้างไฟล์ index.php และ style.css

เปิดโปรแกรม dreamweaver หรือ โปรแกรมจัดการตัวหนังสือ(text editor)ที่คุณชื่นชอบ

คัดลอกโค้ดต่อไปนี้ ไป paste ที่หน้าโปรแกรม text editor ของคุณ
อ่านต่อ คลิกที่นี่ »