بنام و یا خدای مهربان سلام خدمت تمام کاربران وب سایت سون ریپلای در خدمت شما عزیزان هستم با یکی دیگه از آموزش های وردپرس .
همان طور که میدونید برای مطالب مرتبط افزونه مطالب مرتبط همراه عکس خیلی زیاد است خوب شاید شما نخواهید که از افزونه استفاده نمایید .
خوب ما توی این آموزش از آموزش های وردپرس برای شما آموزش خواهیم که چطور بتوانید بدونه افزونه مطالب مرتبط وردپرس را نمایش بدید .
ما توی این آموزش وردپرس میخواهیم مطالب مرتبط به دو صورت آموزش بدیم
که هم بتوانیم از طریق دسته ها مطالب مرتبط را نمایش بدیم .
و هم بتوانیم از طریق برچسب های وردپرس مطالب مرتبط را نمایش بدیم.
آموزش نمایش مطالب مرتبط وردپرس بدونه افزونه به صورت فیلم
کد نمایش مطالب مرتبط
برای نمایش مطالب مرتبط اول باید تصمیم بگیرین که مطالب مرتبطتون رو بر اساس یکی بودن .
موضوعاتشون نمایش بدین یا بر اساس یکسانی تگ ها!
به ترتیب هر دو روش رو با هم بررسی میکنیم:
پشتیبانی از تصویر شاخص در پوسته وردپرس
خوب اول باید برسی کنم که آیا پوسته ما از تصویر شاخص پشتیبانی می کنه یا خیر .
برای فعال سازی تصویر شاخص وردپرس کد زیر را داخل فایل functions.php قرار میدیم.
1 |
add_theme_support( 'post-thumbnails' ); |
نمایش مطالب مرتبط بر اساس موضوع
برای نمایش مطالب مرتبط بر اساس موضوع کافیه کد زیر رو در هر مکانی از قالب که میخواین مطالب مرتبط به نمایش دربیان قرار بدین.
مثلا در فایل single.php قالب که پست ها با قالب اون لود میشن جای مناسبی برای این کد هست.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php $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'=> 4, 'caller_get_posts'=>1 ); $my_query = new wp_query( $args ); if( $my_query->have_posts() ) :?> <?php while( $my_query->have_posts() ) : $my_query->the_post();?> <a href="<?php the_permalink()?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a> <a href="<? the_permalink()?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <?php the_time('M j, Y') ?> <?php endwhile; ?> <?php endif; endif; $post = $orig_post; wp_reset_query(); ?> |
توضیح در مورد کد
کد بالا یکی از کاملاترین کدهای نمایش مطالب مرتبط بر اساس موضوعه چراکه تقریبا تمام المان های یک پست(مثل عنوان و تصویر و…) توش به کار رفته.
بذارین تا یکم مختصر کد بالا رو براتون تشریح کنم :
در ابتدا ما متغییر گلوبال post رو در orig_post ریختیم تا با متغییر
جدید کار کنیم. حالا اومدیم و آی دی دسته پست حال حاضر رو با آی دی دسته
سایر سایر مطالب چک کردیم تا اگر مطلبی با آی دی دسته یکسان وجود داره انتخاب بشه.
در مرحله بعد اومدیم نحوه نمایش رو انتخاب کردیم که طبق کد ما موارد زیر برای هر مطلب مرتبط به نمایش درمیاد :
نمایش مطالب مرتبط بر اساس برچسب ها (تگ ها)
این کد دقیقا مثلا بالاست با این تفاوت که مطالب مرتبط رو بر اساس برچسبشون نشون میده.
برای استفاده از این کد هم باید اون رو در مکانی از قالب که میخواین مطالب مرتبط به نمایش دربیان قرار بدین.
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?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'=>5, // Number of related posts that will be shown. 'caller_get_posts'=>1 ); $my_query = new wp_query( $args ); if( $my_query->have_posts() ) :?> <?php while( $my_query->have_posts() ) : $my_query->the_post(); ?> <a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a> <a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <?php the_time('M j, Y') ?> <?php endwhile; ?> <?php endif; endif; $post = $orig_post; wp_reset_query(); ?> |
عملکرد و موارد نمایش دهنده این کد هم مثل کد قبلی هست ولی مطالب مرتبط رو بر اساس یکی بودن برچسب تشخیص میده.
خوب دوستان عزیز بریم سراغ استایل related posts یکیم استایل بدیم من یک استایل شیک برای شما عزیزان آماده کردم.
کد های html را کپی کنید داخل single.php قرار بدید .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>آموزش مطالب مرتبط به صورت فیلم آموزشی </title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css'> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div class="page-header"> <h3>مطالب مرتبط</h3> <p>آموزش مطالب مرتبط به دو روش به صورت فیلم آموزشی</p> </div> <div class="wrapper"> <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>مطالب مرتبط</h4> <time><span>فوریه 10, 2018</span></time> <a class="btn btn-mini" href="#">» مشاهده</a> </div> </li> <li class="span3"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>مطالب مرتبط</h4> <time><span>فوریه 10, 2018</span></time> <a class="btn btn-mini" href="#">» مشاهده</a> </div> </li> <li class="span3"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>مطالب مرتبط</h4> <time><span>فوریه 10, 2018</span></time> <a class="btn btn-mini" href="#">» مشاهده</a> </div> </li> <li class="span3"> <div class="thumbnail"> <a href="#"><img src="http://placehold.it/360x240" alt=""></a> </div> <div class="caption"> <h4>مطالب مرتبط</h4> <time><span>فوریه 10, 2018</span></time> <a class="btn btn-mini" href="#">» مشاهده</a> </div> </li> </ul> </div><!-- /wrapper --> </div><!-- /.row --> </div><!-- /.container --> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js'></script> <script src="js/index.js"></script> </body> </html> |
خوب دوست عزیز بعد از قرار دادن کد های html مطالب مرتبط باید الان استایل دهیم کنیم برای این کار کد های زیر را کپی کنید
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
/* Global */ body { background: #3399cc; padding: 40px; direction: rtl; } img { max-width:100%; } a { -webkit-transition: all 150ms ease; -moz-transition: all 150ms ease; -ms-transition: all 150ms ease; -o-transition: all 150ms ease; transition: all 150ms ease; } a:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */ filter: alpha(opacity=50); /* IE7 */ opacity: 0.6; text-decoration: none; } /* Container */ .container-fluid { background: #FFFFFF; margin: 40px auto 10px; padding: 20px 40px ; max-width: 960px; box-shadow: 1px 1px rgba(, , , 0.1); } /* Page Header */ .page-header { background: #f9f9f9; margin: -30px -40px 40px; padding: 20px 40px; border-top: 4px solid #ccc; color: #999; text-transform: uppercase; } .page-header h3 { line-height: 0.88rem; color: #000; } /* Thumbnail Box */ .caption h4 { font-size: 1rem; color: #444; } .caption p { font-size: 0.75rem; color: #999; } .btn.btn-mini { font-size: 0.63rem; } /* Carousel Control */ .control-box { text-align: right; width: 100%; } .carousel-control{ background: #666; border: 0px; border-radius: 0px; display: inline-block; font-size: 34px; font-weight: 200; line-height: 18px; opacity: 0.5; padding: 4px 10px 0px; position: static; height: 30px; width: 15px; } /* Footer */ .footer { margin: auto; width: 100%; max-width: 960px; display: block; font-size: 0.69rem; } .footer, .footer a { color: #c9e4f7; } p.right { float: right; } /* Mobile Only */ @media (max-width: 767px) { .page-header, .control-box { text-align: center; } } @media (max-width: 479px) { .caption { word-break: break-all; } } /* ADD-ON -------------------------------------------------- */ body:after{content:"less than 320px";font-size:1rem;font-weight:bold;position:fixed;bottom:;width:100%;text-align:center;background-color:hsla(1,60%,40%,0.7);color:#fff;height:20px;padding-top:0;margin-left:0;left:0}@media only screen and (min-width:320px){body:after{content:"320 to 480px";background-color:hsla(90,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:480px){body:after{content:"480 to 768px";background-color:hsla(180,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:768px){body:after{content:"768 to 980px";background-color:hsla(270,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:980px){body:after{content:"980 to 1024px";background-color:hsla(300,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}@media only screen and (min-width:1024px){body:after{content:"1024 and up";background-color:hsla(360,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}} ::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; } ::-moz-selection { background: #ff5e99; color: #FFFFFF; } a, a:focus, a:active, a:hover, object, embed { outline: none; } :-moz-any-link:focus { outline: none; } input::-moz-focus-inner { border: ; } .btn.btn-mini { font-size: 0.63rem; display: block; background: #62c462; font-size: 16px; color: #fff; padding: 5px; } |
خوب دوست عزیز کار تمام است الان باید فقط جاگذاری کنید تمام شد رفت .
خوب دوستان عزیز این آموزش هم به پایان رسید امید وارم که این آموزش هم برای شما عزیزان مفید واقغ شده باشه .
هرگونه نظر یا انتقادی یا در خواست آموزش دارید میتوانید توی قسمت نظرات باما در میان بزارید در کمترین زمان ممکنم روی سایت قرار خواهیم داد.
هیچ دیدگاهی برای این نوشته ثبت نشده است.