วิธีการ: โพสต์ที่เกี่ยวข้องกับรูปขนาดย่อใน WordPress โดยไม่ต้องใช้ปลั๊กอิน

คุณต้องการแสดงรายการโพสต์ที่เกี่ยวข้องบนเว็บไซต์ WordPress ของคุณและต้องการใช้โค้ดมากกว่าปลั๊กอินหรือไม่?

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

ในบทความนี้ เราจะแสดงวิธีแสดงโพสต์ที่เกี่ยวข้องกับ WordPress โดยใช้โค้ด โดยไม่ต้องใช้ปลั๊กอิน

ทำไมต้องแสดงหน้าที่เกี่ยวข้องใน WordPress?

เมื่อบล็อก WordPress ของคุณเริ่มเติบโต ผู้ใช้อาจค้นหาโพสต์อื่นในหัวข้อเดียวกันได้ยากขึ้น

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

หากคุณไม่คุ้นเคยกับโค้ด คุณจะพบว่าง่ายกว่าในการเลือกปลั๊กอินโพสต์ที่เกี่ยวข้องกับ WordPress ที่สามารถแสดงโพสต์ที่เกี่ยวข้องโดยไม่ต้องใช้โค้ด

แต่ถ้าคุณเคยสงสัยว่าคุณสามารถแสดงโพสต์ที่เกี่ยวข้องโดยไม่ต้องใช้ปลั๊กอินหรือไม่ เราจะแบ่งปันอัลกอริธึมที่แตกต่างกันสองวิธีที่คุณสามารถใช้เพื่อสร้างโพสต์ที่เกี่ยวข้องด้วยภาพขนาดย่อโดยใช้โค้ดเพียงอย่างเดียว:

หมายเหตุ: หากคุณต้องการแสดงภาพขนาดย่อของแต่ละโพสต์ที่เกี่ยวข้อง ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มรูปภาพเด่นในโพสต์เหล่านั้นก่อน

วิธีที่ 1: วิธีแสดงโพสต์ที่เกี่ยวข้องใน WordPress ด้วยแท็ก

วิธีหนึ่งที่มีประสิทธิภาพในการค้นหาเนื้อหาที่เกี่ยวข้องคือการค้นหาโพสต์อื่นๆ ที่ใช้แท็กเดียวกัน แท็กมักจะใช้เพื่อเน้นไปที่รายละเอียดเฉพาะที่มีอยู่ในโพสต์

ด้วยเหตุนี้ คุณอาจต้องการเพิ่มแท็กทั่วไปให้กับโพสต์ที่คุณต้องการเชื่อมโยงถึงกัน คุณสามารถป้อนลงในช่อง "แท็ก" ในตัวแก้ไข WordPress

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

$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>5, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
   
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
   
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
   
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();

โค้ดนี้จะค้นหาแท็กที่เกี่ยวข้องกับเพจ จากนั้นเรียกใช้แบบสอบถามฐานข้อมูลเพื่อดึงเพจที่มีแท็กที่คล้ายกัน

คุณควรวางรหัสไว้ที่ไหน? ขึ้นอยู่กับธีมของคุณ แต่ในกรณีส่วนใหญ่ คุณควรจะสามารถวางโค้ดลงในเทมเพลต single.php ของธีมของคุณได้หลังโพสต์หลักและอยู่เหนือส่วนความคิดเห็น

หากคุณใช้ธีม Twenty Twenty-One เหมือนที่เราอยู่ในไซต์สาธิตของเรา ตำแหน่งที่ดีในการวางโค้ดคือในไฟล์ template-parts/content/content-single.php หลัง ส่วนหัวและหลัง <?php the_content();

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

เคล็ดลับ: แทนที่จะแก้ไขไฟล์ธีมของคุณซึ่งอาจทำให้เว็บไซต์ของคุณเสียหาย เราขอแนะนำให้ใช้ปลั๊กอินข้อมูลโค้ด เช่น WPCode

WPCode ทำให้การเพิ่มโค้ดที่กำหนดเองใน WordPress ปลอดภัยและง่ายดาย นอกจากนี้ยังมาพร้อมกับตัวเลือก 'การแทรก' ที่ให้คุณแทรกและดำเนินการตัวอย่างในตำแหน่งเฉพาะบนเว็บไซต์ WordPress ของคุณ เช่น หลังโพสต์

สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำในการเพิ่มโค้ดที่กำหนดเองใน WordPress

วิธีที่ 2: วิธีแสดงโพสต์ที่เกี่ยวข้องใน WordPress ตามหมวดหมู่

อีกวิธีหนึ่งในการแสดงเนื้อหาที่เกี่ยวข้องคือการแสดงรายการโพสต์ที่อยู่ในหมวดหมู่เดียวกัน ข้อดีของวิธีนี้คือรายการโพสต์ที่เกี่ยวข้องแทบจะไม่มีวันเว้นว่างเลย

เช่นเดียวกับวิธีที่ 1 คุณต้องเพิ่มข้อมูลโค้ดลงในเทมเพลต single.php ของธีมของคุณ หรือในปลั๊กอินข้อมูลโค้ด เช่น WPCode สำหรับรายละเอียดเพิ่มเติม โปรดดูวิธีที่ 1 และคำแนะนำของเราเกี่ยวกับวิธีเพิ่มโค้ดที่กำหนดเองใน WordPress

$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 2, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
   
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();

ตอนนี้คุณจะเห็นรายการเนื้อหาที่เกี่ยวข้องที่ด้านล่างของแต่ละโพสต์

หากคุณต้องการเปลี่ยนสไตล์และรูปลักษณ์ของหน้าที่เกี่ยวข้อง คุณจะต้องเพิ่ม CSS ที่กำหนดเองเพื่อให้ตรงกับธีมของคุณ

เราหวังว่าบทช่วยสอนนี้จะช่วยให้คุณเรียนรู้วิธีแสดงโพสต์ที่เกี่ยวข้องพร้อมภาพขนาดย่อใน WordPress โดยไม่ต้องใช้ปลั๊กอิน คุณอาจต้องการเรียนรู้วิธีติดตามผู้เยี่ยมชมเว็บไซต์ WordPress ของคุณ หรือดูรายการเคล็ดลับ 24 ข้อของเราเพื่อเพิ่มความเร็วให้กับเว็บไซต์ของคุณ

หากคุณชอบบทความนี้ โปรดติดตามวิดีโอบทแนะนำช่อง YouTube สำหรับ WordPress ของเรา คุณยังพบกับเราได้บน Twitter และ Facebook