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

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

بدون شک یکی از مزایای استفاده از وردپرس افزونه های (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 می تونید شکل این بخش را تغییر بدید.

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

دیدگاه کاربران

  1. میلاد

    سلام سعید جان من وقتی این کد رو توی 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
      //کد های اینجا قرار گیرند
      ?>
      
      • میلاد

        سعید جان مشکل رو پیدا کردم خط ۳۰ کد شما مشکل داره

        <? }
        

        یه مشکل دارم میخوام وقتی که مطلب مشابهی پیدا نکرد یه متنی جایگزین بشه.

        • سعید شعبانی

          کد فعلی مشکلی نداره. برای نمایش یک اخطار زمانی که هیچ مطلب مرتبطی پیدا نشد هم باید در آخر کدی که داده شد کد های

          <? }
          	}
          	$post = $orig_post;
          	wp_reset_query();
          	?>
          </div>
          

          را با کد های زیر جایگزین کنید.

          <?php
            }
            echo '</ul>';
          }else{
          echo 'این پست فاقد مطالب مرتبط میباشد';
          }
          ?>
          	<? 	
          	$post = $orig_post;
          	wp_reset_query();
          	?>
          </div>
          
          • میلاد

            سعید جان اروری که گفتم یادته؟
            مشکلش خط ۳۰ کد بالا بود که باید به صورت زیر باشه

            <?php }
            

            این خطا توی خط ۲۵ هم عینن تکرار شده

            <? the_permalink()?>
            

            چون وقتی روی مطالب مرتبط کلیک میکنی کار نمیکنه.

  2. راست میگه سعید جان اون قسمت کد مشکل داره!

    • سعید شعبانی

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

      • الان مشکلی نیست ولی روی لوکال مشکل داشت!
        مشکلی که الان هست توی قسمت ادامه مطلبه که خیلی هم مشکل بزرگیه!!!
        بخش کامنت گذاری کاملا بهم ریخته و به سمت چپ منحرف شده!
        چیکار کنم درست بشه؟! ممنون میشم زودتر جواب بدید،اینم عکس :
        http://8pic.ir/images/12054998453328676589.jpg

        • سعید شعبانی

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

          • ببینید وقتی استایل فراخوانی میشه قسمت کامنت ها اینجوری میشه وقتی قسمت موضوعات مرتبط رو بدون استایل میذارم این مشکل وجود نداره
            پس یه مشکلی توی اون استایل هست
            بدون استایل هم وقتی میذارم مطالب مرتبط زیر هم نمایش داده میشن که زیاد جالب نیست
            میشه لطف کنید یه استایل بهم بدید که فقط عکس مطلب رو نشون بده بصورت افقی کنار هم و دیگه عنوانشو ننویسه و همچنین این مشکل توش وجود نداشته باشه؟! واقعا ممنوتون میشم.

            • سعید شعبانی

              آقا میلاد برای اینکه عنوان نوشته ها زیرشون نوشته نشه تابع زیر را حذف کنید.

              <?php the_title(); ?>
              

              اما در مورد بخش دیدگاه ها من سایتتون را چک کردم و از این مطمئن هستم که بخش مطالب مرتبط روی اون بخش به طور مستقیم اثر خاصی نمی گذاره. وقتی که بخش مطالب مرتبط را هم برداشتم یا استایلش را غیر فعال کردم باز دیدگاه ها دیده نشدند. شما لطف کنید افزونه مربوط به بخش دیدگاه ها را غیر فعالش کنید تا دیدگاه های پیشفرض قالب بارگزاری بشند بعد چک کنید ببینید درست میشه یا نه. اگر درست شد مطمنا مشکل با خود افزونه هست. این افزونه میاد و بخش دیدگاه های سایت شما را با استفاده از iframe از سایت vicomi.com داخل سایتتون بارگزاری می کنه که استاندارد هم نیست.

      • اینم آدرس سایت میتونید برید ببینید دقیقا چی شده :
        http://www.fullalbum1.ir
        ممنون

  3. amir h

    سلام
    گام اول رو کجای فانکشن وارد کنم
    خط چند؟اول یا آخرش؟
    ممنون

  4. amir h

    من که هر کاری کردم هیچ عکسی نشون نمیده
    وقتی برچسب ها ۳ تا مطلب رو (مجله این هفته) کردم بازم نشون نداد

  5. amir h

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

  6. خط ۳۰ کد گام دوم مشکل داره! بررسی کنید لطفا.
    با تشکر

  7. سلام
    این کد چیکار میکنه؟

    caller_get_posts’=>1

    • سعید شعبانی

      اگر مقدار caller_ get_ posts یک یا همان true باشه, از قرار گرفتن پست های سنجاق شده در اول لیست جلوگیری می کند. البته از وردپرس ۳.۲ به بعد ignore_sticky_posts جایگزین caller_ get_ posts شده که من هم داخل کد های موجود در این آموزش جایگزینش کردم.

  8. با سلام و ضمن خسته نباشید … خیلی ممنونم از آموزش مفیدتون
    ممنون میشم راهنمایی کنید که چطوری از کد افزونه های WP Post Views برای نمایش تعداد بازدید پست ها
    و yet another related posts plugin برای نمایش پست های مشابه که در ۴ پست مشابه با تصویر شاخص باشند …
    ببخشید خیلی واجبه … بخاطر فشار این ۲ افزونه الان سایتم داره از کار میوفته و هاستینگ برای کمتر فشار اومدن روی سرور ip های غیر ایرانی رو از دست دادم و این باعث شده در روز ۲ هزار بازدید رو از دست بدم … ممنونم میشم که راهنمایی کنید

  9. با سلام مجدد , و ممنونم از پاسخگویی
    اگر یکبار دیگه سوالمو بخونید نوشتم »
    راهنمایی کنید که چطوری از کد افزونه های WP Post Views برای نمایش تعداد بازدید پست ها
    و yet another related posts plugin برای نمایش پست های مشابه که در ۴ پست مشابه با تصویر شاخص باشند …
    من میخوام از کد این افزونه ها استفاده کنم وگرنه نصب ئ تنظیماتشون ساده هستش … قالب من فعلا صحیفه هستش و طبق آموزش شماکه ۲ بار انجام دادم تصاویر شاخص ثبت نشدند … من میخوام در صفحه اصلی سایت که مطالب تازه منتشر میشن و در ادامه مطلب زیر هرکدوم از پست هام مطالب مشابه اونها رو بصورت ۴ عدد با تصویر شاخص نشون داده بشن …
    باز هم ممنونم از شما*

    • سعید شعبانی

      خوب داخل آموزش نصب هر دو افزونه نحوه قرار دادن کدها در قالب آموزش داده شده است. اگر می خواهید از این آموزش استفاده کنید دیگه نیازی به افزونه yet another related posts plugin ندارید چون با استفاده از این آموزش می تونید کاری را که افزونه انجام می دهد را به صورت دستی خودتون انجام بدید. مشکل نمایش ندادن تصویر شاخص هم می تونه از برابر نبودن اندازه تصویر شاخص تعریف شده در قالب و اندازه فراخوانی شده به وجود اومده باشه.

  10. با تشکر از شما , قالب من صحیفه هستش …
    طبق آموزش شما ۲ باری جلو رفتم ولی هر بار ارور میداد و قالب سایت دیگه قابل دسترس نبود …
    و از چه قسمتی باید اندازه تصاویر رو درست کنم ؟ در تنظیامت رسانه وردپرس اونو به روی ۱۰۰ , ۱۵۰ تنظیم کردم … ولی باز مشکل داره …

    • سعید شعبانی

      شما باید ببیند که اندازه تصاویر شاخصی که این قالب استفاده می کنه چه اندازه ای هست, بعد از همون اندازه ها داخل کد استفاده کنید. من که سایت شما را چک کردم دو تا اندازه ۵۵×۵۵ و ۲۵۰×۱۲۵ وجود داشت که می تونید از اینها استفاده کنید.

  11. سالار

    سلام استاد شعبانی …
    ببخشید اقای شعبانی من یه سوال داشتم اگه لطف کنید بهم پاسخ بدید یه دنیا ممنون میشم …
    من چطوری میتونم مطالب سایت رو مثل این عکس دربیارم …
    http://rozup.ir/up/thm-text/dcd.jpg

    با افزونه یا بدون افزونه هم میشه یا ازطریق افزونه و بخش ابزارک ها هم میتونم بجای قرار دادن مطالب این افزونه رو بذارم ؟

    ممنون موفق باشید

  12. رضا

    سلام خسته نباشید
    خیلی خوب بود فقط تنها ایرادش از نظر من عمودی بودنشه میشه بگید چطوری میشه افقیش کرد؟
    با سپاس فراوان

  13. رضا

    ممنون از اینکه جواب دادین راستش رو بخواین من در زمینه کد زیاد وارد نیستم اگه میشه بگید کجای فایل style.css قرار بدم چون من کد رو در انتها و چند قسمت دیگه فایل style.css گذاشتم اما کار نکرد.

    • سعید شعبانی

      شما می تونید به جای کدهایی که در گام سوم گفته شده کدهای زیر را در انتهای فایل style.css قرار بدید.

      .relatedposts {
          font-size: 12px;
          width: 200px;
      }
      .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;
      }
      
  14. عالی بود مرسی… به کارم اومد…

  15. من قالب رو قبلا نصب کردم. الان فایل function.php کجای هاست قرار میگیره؟

  16. با سلام
    من استفاده کردم ولی تو همه پستام فقط سه تا
    از اولین پستا باز میشه وپستای مرتبط باز نمیشه
    مشکل از چیه؟
    تو همین سایتی که ادرسشو دادم
    http://elahi73.ir

  17. لطفا تو کد ها خصوصیت alt رو هم برای تصاویر قرار بدید من که ندیدم توشون!

  18. سلام اگه بخوام بجای برچسب از موضوع استفاده کنم چجوریه؟
    http://mihanpsd.com/

  19. bohorz

    درود بر شما
    بنده دقیقن مراحل را طی کردم. مطالب مرتبط نمایش داده می شد اما به صورت عمودی بود و طبق راهنمایی که در دیدگاه نوشته بودید هم تغییرات را انجام دادم ولی باز هم به صورت عمودی بود. ممنون میشم راهنمایی کنید چه مشکلاتی ممکن است باشد؟
    سپاس

  20. rshaak

    سلام
    خسته نباشی…
    مطلب خیلی خوبی بود…
    ولی یه سوال دارم…
    میشه به جای اینکه مطالبی که تگ های مشابه با تگ های پست در حال نمایش دارن رو نشون بده بیاد مطالبی رو که با اون پست در یک دسته بندی هستن رو نشون بده؟؟؟
    مثلا یک پست در دسته بندیه آموزش هست و این کد هم بیاد و مطالب دسته بندی آموزش رو نشون بده…

  21. مورشا

    سلام من یه سوال از خدمتتون دارم، اول از شما تشکر می کنم بابت این پست بسیار کارآمد، سوالم اینه که چکار میشه کرد که این قسمت مطالب مرتبط ریسپانسیو باشه، یعنی در زمان کوچک شدن صفحه نمایش باز هم کلا دیده بشه، الان اینطور نیست، بسیار سپاسگزارم،

    • کلاً برای رسپانسیو کردن باید از مقیاس های نسبی به جای مقیاس های مطلق استفاده کنید
      یعنی مثلاً اگز می خوایید عرض یک عنصر div رو مشخص کنید ، به جای ۵۵۰px بزنید ۹۵%
      دیگه اون دایو همیشه ۹۵% عنصری که داخلش قرار گرفته رو پر می کنه

کاربر گرامی برای ارسال دیدگاه اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.