آموزش نمایش مطالب مرتبط وردپرس بدون افزونه
بدون شک یکی از مزایای استفاده از وردپرس افزونه های (plugins) آن است. افزونه های وردپرس تقریبا هرچیزی را که شما برای گسترش سایت خود تصور می کنید را پوشش می دهند. از افزودن ویژگی های بسیار عالی گرفته تا بهینه سازی برای موتور های جستجو و ….
تعداد زیادی از افزونه های محبوب وردپرس حول محور مطالب مرتبط ساخته شده اند. از آنجایی که وردپرس چیز استانداردی برای این ویژگی در نظر نگرفته است کاربران از میان این افزونه ها یکی را برای نمایش مطالب مرتبط انتخاب می کنند.اما لازم نیست شما از هیچ افزونه ای استفاده کنید. در این آموزش به شما می گوییم که چگونه مطالب مرتبط, همراه با تصویر شاخص را بدون استفاده از هیچ افزونه ای به سادگی به وردپرس اضافه کنید.
شروع: افزودن مطالب مرتبط به وردپرس
برای افزودن مطالب مرتبط به سایت شما, ما از برچسب های مطالب کمک می گیریم, بعنی مطالبی که دارای برچسب های مشابه هستند را در صفحه مطالب نشان می دهیم.
گام اول: تصویر شاخص
برای اینکه مطالب مرتبط دارای تصویر شاخص باشند ابتدا باید با قرار دادن کد زیر در فایل فانکشن قالب خود بخش تصویر شاخص وردپرس را فعال کنیم.
add_theme_support( 'post-thumbnails' );
همچنین می توانید با استفاده از کد زیر طول و عرض تصاویر شاخص را نیز تعیین کنید.
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 100, 50, true );
گام دوم: کد اصلی مطالب مرتبط
به طور معمول مطالب مرتبط را در آخر هر پست ( در فایل single.php ) قرار می دهند تا کاربر پس از خواندن مطلب با دیدن مطالب مشابه روی انها نیز کلیک کند. اما شما می توانید با توجه به نیازتان این کد را در مکان های دیگری از قالب وردپرس نیز قرار دهید.
<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, // تعداد مطالب مرتبط. '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="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(150,100)); ?><br /> <?php the_title(); ?> </a> </div> <?php endwhile; endif; $post = $orig_post; wp_reset_query(); ?> </div>
در کد بالا قطعه کد
the_post_thumbnail(array(150,100)
اندازه تصویر شاخص مطالب شما را مشخص می کند.
گام سوم: افزودن کد های css
حال نوبت به این رسیده است تا یک ظاهر متفاوت به بخش مطالب مرتبطی که ساخته ایم بدهیم. برای این کار کافی است تا کد های css زیر را به فایل استایل (style.css) قالب خودتون اضافه کنید.
.relatedposts { 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; }
در کد css بالا عرض تصاویر شاخص ۱۵۰px در نظر گرفته شده است. اما شما می توانید این عدد را تغییر دهید. برای تغییر عرض تصویر شاخص بجز تغییر در کد css باید عرض جدید را هم در فانکشن و هم در کد اصلی مطالب مرتبط نیز تغییر بدید.
نتیجه کار
کار تمام شد حال بخش جدید مطالب مرتبط سایت شما باید چیزی شبیه به تصویر زیر شده باشد. از اینجا به بعد دیگه به سلیقه شما ربط پیدا می کنه, شما با استفاده از کدهای css می تونید شکل این بخش را تغییر بدید.
سلام سعید جان من وقتی این کد رو توی single میزارم ارور زیر رو میده
Parse error: syntax error, unexpected end of file in C:\Program Files\EasyPHP-12.1\www\wordpress\wp-content\themes\khabari\single.php on line 88
و لاین ۸۸ فایل من آخرین خط میشه که خالیه
به احتمال زیاد این مشکل به خاطر اندکدینگ فایل single.php به وجود اومده باشه. شما فایل single.php را با استفاده از نرم افزار ++notepad به صورت utf8 without BOM ذخیره کنید و ببینید که آیا مشکل حل می شه یا نه. مطمئا هم بشید که کد های گام اول این آموزش را به صورت زیر بین تگ های باز و بسته php در فانکشن قرار داده باشید.
سعید جان مشکل رو پیدا کردم خط ۳۰ کد شما مشکل داره
یه مشکل دارم میخوام وقتی که مطلب مشابهی پیدا نکرد یه متنی جایگزین بشه.
کد فعلی مشکلی نداره. برای نمایش یک اخطار زمانی که هیچ مطلب مرتبطی پیدا نشد هم باید در آخر کدی که داده شد کد های
را با کد های زیر جایگزین کنید.
سعید جان اروری که گفتم یادته؟
مشکلش خط ۳۰ کد بالا بود که باید به صورت زیر باشه
این خطا توی خط ۲۵ هم عینن تکرار شده
چون وقتی روی مطالب مرتبط کلیک میکنی کار نمیکنه.
میلاد عزیز من خودم این کد را چندین بار تست کردم و درست کار می کنه. خط ۲۵ هم هیچ خطایی نداره. در این دو بخش که می فرمایید به دو شکل زیر میشه از کدهای php استفاده کرد و مشکلی هم نباید به وجود بیاد.
من توی قالب خودم این دوتا رو تغییر دادم تا کار کرد
در هر صورت ممنون به خاطر راهنمایی
راست میگه سعید جان اون قسمت کد مشکل داره!
نباید مشکل خاصی وجود داشته باشه. شما لطف کنید اون دو تا بخش کد را به اون چیزی که گفتم عوض کنید و ببینید بازم مشکل پا برجاست یا خیر؟
الان مشکلی نیست ولی روی لوکال مشکل داشت!
مشکلی که الان هست توی قسمت ادامه مطلبه که خیلی هم مشکل بزرگیه!!!
بخش کامنت گذاری کاملا بهم ریخته و به سمت چپ منحرف شده!
چیکار کنم درست بشه؟! ممنون میشم زودتر جواب بدید،اینم عکس :
http://8pic.ir/images/12054998453328676589.jpg
میلاد جان الان که مشکلی نیست. مشکل عدم نمایش دیدگاه ها به افزونه ای که به جای دیدگاه های پیشفرض وردپرس استفاده می کنید ربط داره نه به بخش مطالب مرتبط
ببینید وقتی استایل فراخوانی میشه قسمت کامنت ها اینجوری میشه وقتی قسمت موضوعات مرتبط رو بدون استایل میذارم این مشکل وجود نداره
پس یه مشکلی توی اون استایل هست
بدون استایل هم وقتی میذارم مطالب مرتبط زیر هم نمایش داده میشن که زیاد جالب نیست
میشه لطف کنید یه استایل بهم بدید که فقط عکس مطلب رو نشون بده بصورت افقی کنار هم و دیگه عنوانشو ننویسه و همچنین این مشکل توش وجود نداشته باشه؟! واقعا ممنوتون میشم.
آقا میلاد برای اینکه عنوان نوشته ها زیرشون نوشته نشه تابع زیر را حذف کنید.
اما در مورد بخش دیدگاه ها من سایتتون را چک کردم و از این مطمئن هستم که بخش مطالب مرتبط روی اون بخش به طور مستقیم اثر خاصی نمی گذاره. وقتی که بخش مطالب مرتبط را هم برداشتم یا استایلش را غیر فعال کردم باز دیدگاه ها دیده نشدند. شما لطف کنید افزونه مربوط به بخش دیدگاه ها را غیر فعالش کنید تا دیدگاه های پیشفرض قالب بارگزاری بشند بعد چک کنید ببینید درست میشه یا نه. اگر درست شد مطمنا مشکل با خود افزونه هست. این افزونه میاد و بخش دیدگاه های سایت شما را با استفاده از iframe از سایت vicomi.com داخل سایتتون بارگزاری می کنه که استاندارد هم نیست.
اینم آدرس سایت میتونید برید ببینید دقیقا چی شده :
http://www.fullalbum1.ir
ممنون
سلام
گام اول رو کجای فانکشن وارد کنم
خط چند؟اول یا آخرش؟
ممنون
کد های گام اول را همانطور که گفتم باید در فایل functions.php وارد کنید و مهم نیست که خط چندم باشه فقط باید به این نکته توجه کنید که کد ها بین تگ باز و بسته php قرار بگیرند
من که هر کاری کردم هیچ عکسی نشون نمیده
وقتی برچسب ها ۳ تا مطلب رو (مجله این هفته) کردم بازم نشون نداد
خوب اگر کد ها را در جای خودشون درست قرار داده باشید و برای مطالب تصویر شاخص گذاشته باشید باید تصاویر شاخص نشون داده بشند.
برای من رفته ته ته قالب
من میخوام بیفته بعد از دسته ها.بعد از دسته ها یه خط خاکستری هست.من میخوام مطالب مربوط بیاد زیر خط
ممنون
خوب باید ببیند دسته بندی ها داخل کدوم فایل هستند بعد کدهای گام دوم را بعد از بخش دسته بندی ها قرار بدید.
من هر کاری کردن نتونستم
من از این قالب استفاده میکنم
http://rokesh.ir/wordpress-personal-theme-wordpress-personal-theme-iconic-one
باید کجا قرارش بدم
ممنون
اگر از قالب iconic one استفاده می کنید باید فایل content.php را باز کنید و بعد کد زیر را پیدا کنید
و کدهای گام دوم را بعد از کد بالا بین دو کد زیر قرار بدید تا مطالب مرتبط فقط در ادامه مطلب دیده شوند.
خط ۳۰ کد گام دوم مشکل داره! بررسی کنید لطفا.
با تشکر
خط ۳۰ مشکلی نداره. قبلا هم یکی از دوستان گفته بود این خط مشکل داره ولی با تست هایی که کردم متوجه شدم که مشکلی نداره [توضیحات بیشتر]
سلام
این کد چیکار میکنه؟
caller_get_posts’=>1
اگر مقدار caller_ get_ posts یک یا همان true باشه, از قرار گرفتن پست های سنجاق شده در اول لیست جلوگیری می کند. البته از وردپرس ۳.۲ به بعد ignore_sticky_posts جایگزین caller_ get_ posts شده که من هم داخل کد های موجود در این آموزش جایگزینش کردم.
با سلام و ضمن خسته نباشید … خیلی ممنونم از آموزش مفیدتون
ممنون میشم راهنمایی کنید که چطوری از کد افزونه های WP Post Views برای نمایش تعداد بازدید پست ها
و yet another related posts plugin برای نمایش پست های مشابه که در ۴ پست مشابه با تصویر شاخص باشند …
ببخشید خیلی واجبه … بخاطر فشار این ۲ افزونه الان سایتم داره از کار میوفته و هاستینگ برای کمتر فشار اومدن روی سرور ip های غیر ایرانی رو از دست دادم و این باعث شده در روز ۲ هزار بازدید رو از دست بدم … ممنونم میشم که راهنمایی کنید
برای استفاده از افزونه WP-PostViews خیلی راحت می تونید از آموزش نصب خود افزونه استفاده کنید. افزونه Yet Another Related Posts Plugin هم که خیلی واضح در مورد نحوه نصبش توضیح داده.
با سلام مجدد , و ممنونم از پاسخگویی
اگر یکبار دیگه سوالمو بخونید نوشتم »
راهنمایی کنید که چطوری از کد افزونه های WP Post Views برای نمایش تعداد بازدید پست ها
و yet another related posts plugin برای نمایش پست های مشابه که در ۴ پست مشابه با تصویر شاخص باشند …
من میخوام از کد این افزونه ها استفاده کنم وگرنه نصب ئ تنظیماتشون ساده هستش … قالب من فعلا صحیفه هستش و طبق آموزش شماکه ۲ بار انجام دادم تصاویر شاخص ثبت نشدند … من میخوام در صفحه اصلی سایت که مطالب تازه منتشر میشن و در ادامه مطلب زیر هرکدوم از پست هام مطالب مشابه اونها رو بصورت ۴ عدد با تصویر شاخص نشون داده بشن …
باز هم ممنونم از شما*
خوب داخل آموزش نصب هر دو افزونه نحوه قرار دادن کدها در قالب آموزش داده شده است. اگر می خواهید از این آموزش استفاده کنید دیگه نیازی به افزونه yet another related posts plugin ندارید چون با استفاده از این آموزش می تونید کاری را که افزونه انجام می دهد را به صورت دستی خودتون انجام بدید. مشکل نمایش ندادن تصویر شاخص هم می تونه از برابر نبودن اندازه تصویر شاخص تعریف شده در قالب و اندازه فراخوانی شده به وجود اومده باشه.
با تشکر از شما , قالب من صحیفه هستش …
طبق آموزش شما ۲ باری جلو رفتم ولی هر بار ارور میداد و قالب سایت دیگه قابل دسترس نبود …
و از چه قسمتی باید اندازه تصاویر رو درست کنم ؟ در تنظیامت رسانه وردپرس اونو به روی ۱۰۰ , ۱۵۰ تنظیم کردم … ولی باز مشکل داره …
شما باید ببیند که اندازه تصاویر شاخصی که این قالب استفاده می کنه چه اندازه ای هست, بعد از همون اندازه ها داخل کد استفاده کنید. من که سایت شما را چک کردم دو تا اندازه ۵۵×۵۵ و ۲۵۰×۱۲۵ وجود داشت که می تونید از اینها استفاده کنید.
سلام استاد شعبانی …
ببخشید اقای شعبانی من یه سوال داشتم اگه لطف کنید بهم پاسخ بدید یه دنیا ممنون میشم …
من چطوری میتونم مطالب سایت رو مثل این عکس دربیارم …
http://rozup.ir/up/thm-text/dcd.jpg
با افزونه یا بدون افزونه هم میشه یا ازطریق افزونه و بخش ابزارک ها هم میتونم بجای قرار دادن مطالب این افزونه رو بذارم ؟
ممنون موفق باشید
شما می تونید یک کوئری از دسته ای که می خواهید آخرین مطالبش را نشون بدید ایجاد کنید : نمایش نوشته های اخیر یک دسته خاص در وردپرس
سلام ممنون عالی بود
سلام خسته نباشید
خیلی خوب بود فقط تنها ایرادش از نظر من عمودی بودنشه میشه بگید چطوری میشه افقیش کرد؟
با سپاس فراوان
می تونید از کدهای css زیر استفاده کنید.
برای تغییر عرض هم می تونید عدد جلوی width را تغییر بدید.
ممنون از اینکه جواب دادین راستش رو بخواین من در زمینه کد زیاد وارد نیستم اگه میشه بگید کجای فایل style.css قرار بدم چون من کد رو در انتها و چند قسمت دیگه فایل style.css گذاشتم اما کار نکرد.
شما می تونید به جای کدهایی که در گام سوم گفته شده کدهای زیر را در انتهای فایل style.css قرار بدید.
عالی بود مرسی… به کارم اومد…
من قالب رو قبلا نصب کردم. الان فایل function.php کجای هاست قرار میگیره؟
این فایل داخل پوشه قالب هست. البته اسمش functions.php می باشد.
با سلام
من استفاده کردم ولی تو همه پستام فقط سه تا
از اولین پستا باز میشه وپستای مرتبط باز نمیشه
مشکل از چیه؟
تو همین سایتی که ادرسشو دادم
http://elahi73.ir
ببخشید مشکلی در کدها وجود داشت که اصلاح شد. لطفا دوباره امتحان کنید.
لطفا تو کد ها خصوصیت alt رو هم برای تصاویر قرار بدید من که ندیدم توشون!
تابع the_post_thumbnail به صورت خودکار این موارد را به تگ img اضافه می کنه.
سلام اگه بخوام بجای برچسب از موضوع استفاده کنم چجوریه؟
http://mihanpsd.com/
به جای
قرار بدید
و به جای tag__in هم قرار بدید category__in
درود بر شما
بنده دقیقن مراحل را طی کردم. مطالب مرتبط نمایش داده می شد اما به صورت عمودی بود و طبق راهنمایی که در دیدگاه نوشته بودید هم تغییرات را انجام دادم ولی باز هم به صورت عمودی بود. ممنون میشم راهنمایی کنید چه مشکلاتی ممکن است باشد؟
سپاس
لطفا در انجمن وردپرس مشکلی که دارید را همراه با آدرس سایتتون قرار بدید تا راهنمایی کنم.
سلام
خسته نباشی…
مطلب خیلی خوبی بود…
ولی یه سوال دارم…
میشه به جای اینکه مطالبی که تگ های مشابه با تگ های پست در حال نمایش دارن رو نشون بده بیاد مطالبی رو که با اون پست در یک دسته بندی هستن رو نشون بده؟؟؟
مثلا یک پست در دسته بندیه آموزش هست و این کد هم بیاد و مطالب دسته بندی آموزش رو نشون بده…
بله این کار قالب انجام هست, تا حدودی بخش از این کار را در آموزش نمایش مطالب مرتبط وردپرس بدون افزونه توضیح دادم.
سلام من یه سوال از خدمتتون دارم، اول از شما تشکر می کنم بابت این پست بسیار کارآمد، سوالم اینه که چکار میشه کرد که این قسمت مطالب مرتبط ریسپانسیو باشه، یعنی در زمان کوچک شدن صفحه نمایش باز هم کلا دیده بشه، الان اینطور نیست، بسیار سپاسگزارم،
کلاً برای رسپانسیو کردن باید از مقیاس های نسبی به جای مقیاس های مطلق استفاده کنید
یعنی مثلاً اگز می خوایید عرض یک عنصر div رو مشخص کنید ، به جای ۵۵۰px بزنید ۹۵%
دیگه اون دایو همیشه ۹۵% عنصری که داخلش قرار گرفته رو پر می کنه