نمایش پست های مرتبط در وردپرس
- مقالات آموزشی
- بروزرسانی شده در
دلت میخواد وبسایتت اونقدر جذاب باشه که وقتی کسی سری بهش میزنه، حس کنه تو یه کافه دنج نشسته و دلش نمیخواد بلند بشه؟ خوب، من یه راز کوچولو باهات دارم که میتونه توی این مسیر بهت کمک کنه: نمایش پست های مرتبط در وردپرس.
حالا فکر کن، کاربر داره تو سایتت چرخ میزنه، یهو با مطالبی روبهرو میشه که انگار دقیقا همون چیزیه که دلش میخواسته. این یعنی چی؟ یعنی اینکه تو داری یه تجربه خاص و منحصربهفرد بهش ارائه میدی، و این دقیقا همون چیزیه که باعث میشه بخواد بیشتر و بیشتر تو سایتت بمونه.
بذارین براتون قدم به قدم توضیح بدم چجوری میشه این کارو بکنیم بدون اینکه نیازی به افزونههای اضافی داشته باشیم:
آنچه در این مقاله میخوانید
تصویر شاخص، دلبری از نوع وردپرسی!
اولین قدم، اینه که به مطالبت یه تصویر شاخص جذاب اضافه کنی. اینجوری وقتی کاربر داره چرخ میزنه تو سایتت، چشمش به تصویر میخوره و میگه واو! برای اینکار، فایل functions.php قالبت رو باز کن و این دو خط کدو بهش اضافه کن:
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 260, 180, true );
این کد، مثل یه جادو عمل میکنه و به قالبت اجازه میده تا با تصاویر شاخص، هنرنمایی کنه.
جادوی کدنویسی، وقتی پلاگین نمیخوای!
حالا که میخوایم بخش پستهای مرتبط رو بسازیم، نیازی به پلاگین نداریم. میتونیم با کمی کدنویسی این کارو انجام بدیم. راهنماییهای منو دنبال کن:
وارد فایل single.php قالبت بشو. دنبال جایی بگرد که کد php endwhile; رو میبینی. همین که پیداش کردی، یه نفس عمیق بکش و خودتو آماده کن برای یه کم کدنویسی خلاقانه.
حالا، توی همین نقطه، یک تکه کد جادویی رو اضافه کن که مثل چراغ جادو عمل میکنه. این کد، باعث میشه پستهای مرتبط با پست فعلی، مثل ستارههایی در آسمان وبسایتت بدرخشن:
<div class="relatedposts">
<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, // تعداد پستهای مرتبط برای نمایش
'caller_get_posts'=>1
);
$my_query = new wp_query($args);
while($my_query->have_posts()) {
$my_query->the_post();
?>
<div class="relatedthumb">
<a rel="external" href="<?php the_permalink()?>"><?php the_post_thumbnail(array(260,180)); ?><br />
<?php the_title(); ?>
</a>
</div>
<?php
}
}
$post = $orig_post;
wp_reset_query();
?>
</div>
از استایل غافل نشو!
خب، حالا که جادوی کدنویسیمون تقریبا تموم شده، یه قدم دیگه باقی مونده: اینکه بخش پستهای مرتبطمون چه شکلی به نظر برسه. واسه این کار، یه دور دیگه بریم سراغ فایل style.css قالبمون و با کمی استایل دهی، جلوهای خاص به اون بدیم:
.relatedposts {
width: 100%;
overflow: hidden;
margin: 20px 0;
padding: 20px;
background-color: #f9f9f9; /* پسزمینه */
}
.relatedposts h3 {
margin-bottom: 15px;
color: #333; /* رنگ عنوان */
}
.relatedthumb {
width: 23%;
float: left;
margin: 0 1%;
box-shadow: 0 0 8px rgba(0,0,0,0.1); /* سایههای زیبا */
}
.relatedthumb img {
width: 100%;
height: auto;
}
.relatedthumb a {
text-decoration: none;
color: #000; /* رنگ لینک */
display: block;
padding: 5px;
}
.relatedthumb a:hover {
background-color: #eee; /* رنگ پسزمینه هنگام هاور */
}
این کدها مثل جادو کار میکنن و باعث میشن بخش پستهای مرتبطت خیلی شیک و پیک نمایش داده بشه. حالا دیگه کاربرات هم مثل تو، عاشق وبسایتت میشن و همیشه دلشون میخواد برگردن برای دیدن گنجینههایی که توی صفحاتش پنهان کردی.
نکتهای که واقعا مهمه اینه که تو با این کار، نه تنها باعث میشی کاربران بیشتری تو سایتت وقت بگذرونن، بلکه داری یه اکوسیستم محتوایی میسازی که هر کدوم از این پستها، به نوعی، دست به دست هم میدن تا تجربه کاربری بهتری برای بازدیدکنندگان سایتت فراهم کنن. یعنی چی؟ یعنی اینکه کاربران با دیدن مطالب مرتبط، فقط از یک پست لذت نمیبرن، بلکه میتونن دنیایی از محتواهای مشابه و جذاب رو که تو با دقت و عشق انتخاب کردی، کشف کنن.
و اینجاست که جادوی وردپرس واقعیت پیدا میکنه. چرا که تو با استفاده از این روش، نه تنها نیازی به پلاگینهای اضافی نداری، بلکه میتونی دقیقا محتوایی رو نمایش بدی که میدونی کاربرات دوست دارن و به دنبالش هستن. و این دقیقا همون چیزیه که تجربه وبگردی رو از یه فعالیت ساده، تبدیل به یک سفر هیجانانگیز میکنه.
بیا یه کم هم در مورد سئو حرف بزنیم
نباید از نظر دور داشت که این کار، به سئوی سایتت هم کمک شایانی میکنه. وقتی کاربران زمان بیشتری رو در سایتت سپری میکنن و از صفحهای به صفحهی دیگه میپرن، نشون میده که محتوای سایت براشون ارزشمنده و این دقیقا چیزیه که موتورهای جستجو دوست دارن. پس، با این کار نه تنها کاربرانت رو خوشحال میکنی، بلکه رتبهی سایتت تو نتایج جستجو هم بهبود پیدا میکنه.
پس، دوست من، میبینی که چطور با چند قدم ساده میتونی تجربهای خارقالعاده برای بازدیدکنندگان وبسایتت ایجاد کنی؟ و این همه فقط با کمی دانش وردپرس و خلاقیت ممکن میشه. حالا وقتشه که دست به کار بشی و با این روشهای ساده، وبسایتت رو به یه گنجینهی پر از محتوای پربازدید و جذاب تبدیل کنی. فراموش نکن که هر قدمی که برمیداری، از انتخاب عنوانهای گیرا گرفته تا اضافه کردن تصاویر شاخص و استفاده از کدهای جادویی برای نمایش پستهای مرتبط، همه و همه به این میانجامد که کاربران بیشتری را به سمت وبسایتت جذب کنی و اونها رو تبدیل به طرفداران دائمی محتوایت کنی.
توی این مسیر، هرچقدر هم که با دقت و علاقه پیش بری، یادت باشه که تجربه کاربری رو همیشه در اولویت قرار بدی. یه وبسایت که همه چیز توش روان و دلنشین باشه، نه تنها کاربران رو خوشحال میکنه، بلکه باعث میشه موتورهای جستجو هم ازت خوششون بیاد و رتبهبندیت رو بهتر کنن.
و اما، نکته آخر: فراموش نکن که دنیای وردپرس و سئو همیشه در حال تغییر و تحوله. پس، همیشه چشماتو باز نگه دار، دانشت رو بهروز نگه دار و از نوآوریها و ایدههای جدید استقبال کن. وبسایتت مثل یه باغ زنده است؛ هرچی بیشتر مراقبت کنی، بهتر و زیباتر رشد میکنه.
به امید دیدن وبسایتت در صدر لیست جستجوها و داشتن کاربرانی که نه تنها یک بار، بلکه بارها و بارها به سراغ محتوایت میآیند. پس، بزن به دست کار و شروع کن به ساختن یک تجربه وبگردی فوقالعاده برای آنها. موفق و پیروز باشی!
سلام وقت بخیر خسته نباشید
این کد مطالب مرتبط رو به صورت عمودی نشون میده چطوری میتونم مطالب رو به صورت افقی نشون بدم؟؟
با سلام
باید با سی اس اس بهشون استایل بدید
میشه یه css بهم بدید که عمودی شه
متاسفانه خدمات کدنویسی ارائه نمیشه
سلام من این کد ها را همونطور که گفتید زدم اما برام هیچ چیزی نمایش داده نمیشه
با سلام
مراحل توضیح داده شده در آموزش رو باید مجدد اجرا کنید. کدها و مراحل دقیقا همین هست
سلام . آیا فایل single.php همون فایلیه که در قالب هستش؟ من تو قالب اصلی دارمش اما تو قالب فرزند نه!!
بخاطر اینکه یسری شخصی سازی انجام دادم باید از قالب فرزند استفاده کنم… و اینکه داخل همون قالب اصلی هم کد php endwhile رو پیداش نکردم… در صورتیکه توی قالب های پش فرض وردپرس هستش. قالبمم انفولد هست
سلام بله میتوانید این فایل را در چایلدتم کپی کنید و استفاده کنید. البته در این قالب کدها کمی پیچیده هست و باید پوشههای زیر مجموعه را بررسی کنید.
سلام. از چه کدی برای عنوان استفاده کنم اگه مطلب مرتبطی نبود ، عنوان مطالب مرتبط هم نشون داده نشه.
باید با if شرطی کنید عنوان رو
درود . آیا کدی هس که بشه مطالب مرتبط همون دسته رو فقط بیاره؟
درود همین کد بالا اینکارو انجام میده دقیقا
سلام آقای حسینی. من این کد رو قبل از end while مربوط به حلقه فراخوانی مطلب قرار داده م. ولی متاسفانه پیام زیر رو درباره endwhile و endif میده. دلیلش چیه؟
Parse error: syntax error, unexpected ‘endwhile’ (T_ENDWHILE) in C:\xampp\htdocs\wp\wp-content\themes\golesarv\single.php on line 89
سلام حلقه while درست فراخوانی نشده
سلام. این کدی که گذاشتید، مطالب مرتبط را نشان نمیدهد بلکه آخرین مطالب ارسال شده را نشان می دهد.
سلام در صورتی که مطلبی با برچسب مشابه وجود نداشته باشد آخرین مطالب سایت را نمایش خواهد داد
سلام خسته نباشید،
من از قالب صحیفه استفاده می کنم که خودش مطالب مرتبط داره ولی می خوام عین همین که شما توی سایتتون گذاشتید استفاده کنیم یعنی استایلش همین شکلی باشه .باید چگونه اینکار رو کنم؟
سلام باید کد نویسی کنید
میشه کد استایلشو بهم بدید؟هزینه هم داشته باشه تقبل میکنم
نه متاسفانه فرصت نمیشه
کد رو مطابق دستور شما قرار دادم ولی این خطا رو داد :
Parse error: syntax error, unexpected ‘endwhile’ (T_ENDWHILE) in C:\wamp\www\7\wp-content\themes\theme7\single.php on line 222
endwhile رو ظاهرا درست تایپ نکردید
کد رو هر قالبی میزارم خطا میده ( الان این چهارمین قالبی هست که تست کردم و خطا میده )
عرض کردم. توی while قرار نگرفته
سلامشما از افزونه استفاده می کنید برای نمایش مطالب مرتبط؟اگه از کد استفاده می کنید لطفا کدشو کامل بزارید : اگه شد تو فایل txt برای دانلود بزارید.مرسی
سلام بله همین کد هست
با سلام علت اینکه نوشته های مرتبط دارای عکسهای هم اندازه نیستند چیه؟منظورم تصاویر شاخص هستش.چطوری هم اندازشون کنم؟ممنون از سایت خوبتون
سلام
با سی اس اس می تونید سایز تصاویر رو یکی کنید. به این شکل:
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}