เวิร์ดเพรสธีม บทที่6_1:Page-Link

มาถึงตอนนี้ผมคิดว่าคุณคงจะคุ้นเคยกับโครงสร้างของ sidebar บ้างแล้วนะครับ ในบทนี้ผมจะสอนให้คุณใส่รายการ Page-Link ไว้ใน sidebar เมื่อทำ sidebar เสร็จแล้วผมจะสอนวิธีการทำให้ sidebar ที่เราสร้างกันมา เป็น widget

นำโค้ดข้างล่างนี้ใส่ไว้บนส่วน Categories (ที่ทำไว้ในบทที่แล้ว) ดังรูป

<?php wp_list_pages(); ?>

ทีนี้ก็บันทึกไฟล์ และรีเฟรชเว็บเบราเซอร์ดูความเปลี่ยนแปลงที่เกิดขึ้น
Read more…

Related Articles

  • Share/Bookmark
Categories: Wordpress
Tags:

เวิร์ดเพรสธีม บทที่ 6:Sidebar

เคยลองดู sidebar บ้างหรือยังครับ ในตอนแรกมันอาจจะดูยุ่งยากนิดนึง แต่ถ้าเข้าใจโครงสร้างมันแล้ว คุณจะรู้สึกว่าการสร้าง sidebar และใส่รูปแบบการแสดงผลให้มันง่ายนิดเดียว! จริงๆ นะ

ก่อนที่จะไปเริ่มทำ sidebar ไฟล์ index ต้องเหมือนตามนี้นะครับ

ขั้นตอนที่ 1: นำกล่อง div ตามโค้ดข้างล่างนี้ไปไว้ระหว่างแท็กปิด container และ แท็ก</body>

<div class=”sidebar”>

</div>


Read more…

Related Articles

  • Share/Bookmark
Categories: Wordpress
Tags:

เวิร์ดเพรสธีม บทที่ 5_5:Posts Nav Link

ในส่วนล่างของเวิร์ดเพรสส่วนใหญ่จะมีลิงค์ไปยังหน้าก่อนหน้าและหน้าถัดไป เราสามารถเรียกให้ลิงค์พวกนี้มาแสดงได้โดยการใช้คำสั่ง posts_nav_link() ในตอนนี้จะมีเพียงแค่ขั้นตอนเดียวเท่านั้นครับ

ขั้นตอนที่ 1: (และมีเพียงแค่ขั้นตอนเดียว)
แทรกโค้ดด้านล่างนี้ไว้ระหว่าง <?php endwhile; ?> และ <?php else : ?>

<div class=”navigation”>
<?php posts_nav_link(); ?>
</div>

จากรูปข้างบนจะสังเกตุเห็นการย่อหน้า ซึ่งผมจะทำอย่างนี้ประจำเพื่อให้โค้ดดูมีระเบียบ อ่านง่าย
Read more…

Related Articles

  • Share/Bookmark
Categories: Wordpress
Tags:

เวิร์ดเพรสธีม บทที่ 5_4:Else, Post ID

ในหัวข้อนี้เราจะมาศึกษาการใช้ Else, post ID, and link title ถึงแม้ว่าจะไม่ใช้ก็ได้ แต่ผมแนะนำให้ใช้

ขั้นตอนที่ 1:
พิมพ์โค้ดต่อไปนี้ไว้ใต้ <?php endwhile; ?>

<?php else : ?>

<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div>

ดังภาพข้างล่างนี้ (โปรดสังเกตุการย่อหน้าเพื่อจัดระเบียบโค้ด)

save ไฟล์ดังกล่าว กดรีเฟรช คุณจะเห็นว่าไม่มีอะไรเปลี่ยนแปลงเลย ดังนั้นเรามาทบทวนเรื่องการวนลูป(บทที่ 5) กันอีกทีเพื่อให้คุณเข้าใจว่าที่พิมพ์ไปเมื่อกี้มันคืออะไร

ลูปที่เราใช้มีดังนี้
Read more…

Related Articles

  • Share/Bookmark
Categories: Wordpress
Tags: