آموزش نمایش مطالب مرتبط وردپرس بدون افزونه

[AynaZ 4,156]

افزودن مطالب مرتبط به وردپرس

 

 

برای افزودن مطالب مرتبط به سایت شما, ما از برچسب های مطالب کمک می گیریم, بعنی مطالبی که دارای برچسب های مشابه هستند را در صفحه مطالب نشان می دهیم.

 

 

 

 

 

گام اول: تصویر شاخص

 

 

برای اینکه مطالب مرتبط دارای تصویر شاخص باشند ابتدا باید با قرار دادن کد زیر در فایل فانکشن قالب خود بخش تصویر شاخص وردپرس را فعال کنیم.

 

 

 

 

add_theme_support( 'post-thumbnails'[color=#000000][font=Consolas] [/font][/color]);

 

 

 

 

همچنین می توانید با استفاده از کد زیر طول و عرض تصاویر شاخص را نیز تعیین کنید.

 

 

 

 

add_theme_support( 'post-thumbnails' );2set_post_thumbnail_size( 100, 50, true );

 

 

 

 

 

 

 

گام دوم: کد اصلی مطالب مرتبط

 

 

به طور معمول مطالب مرتبط را در آخر هر پست ( در فایل single.php ) قرار می دهند تا کاربر پس از خواندن مطلب با دیدن مطالب مشابه روی انها نیز کلیک کند. اما شما می توانید با توجه به نیازتان این کد را در مکان های دیگری از قالب وردپرس نیز قرار دهید.

 

 

 

 

[color=#000000]<div class="relatedposts">[/color]<h3>مطالب مرتبط</h3><?php$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'=>4, // تعداد مطالب مرتبط.'ignore_sticky_posts' => 1);$my_query = new wp_query( $args );while( $my_query->have_posts() ) {$my_query->the_post();?><div class="relatedthumb">	<a rel="external" href="https://go.20script.ir/index.php?url=<?php the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />	<?php the_title(); ?>	</a></div><? }}$post = $orig_post;wp_reset_query();?> [color=#000000]</div>[/color]

 

 

 

 

 

گام سوم: افزودن کد های css

 

 

حال نوبت به این رسیده است تا یک ظاهر متفاوت به بخش مطالب مرتبطی که ساخته ایم بدهیم. برای این کار کافی است تا کد های css زیر را به فایل استایل (style.css) قالب خودتون اضافه کنید.

 

 

 

 

[color=#000000].relatedposts {[/color]   font-size: 12px;   width: 640px;}.relatedposts h3 {   font-size: 20px;   margin: 0 0 5px;}.relatedthumb {   float: right;   margin: 0 1px;}.relatedthumb img {   margin: 0 0 3px;   padding: 0;}.relatedthumb a {   color: #333333;   display: block;   padding: 4px;   text-decoration: none;   width: 150px;}.relatedthumb a:hover {   background-color: #DDDDDD;   color: #000000; [color=#000000]}[/color]

 

 

 

 

 

 

 

در کد css بالا عرض تصاویر شاخص ۱۵۰px در نظر گرفته شده است. اما شما می توانید این عدد را تغییر دهید. برای تغییر عرض تصویر شاخص بجز تغییر در کد css باید عرض جدید را هم در فانکشن و هم در کد اصلی مطالب مرتبط نیز تغییر بدید.