امروزه بسیاری از مدیران سایت ها می خواهند آخرین مطالب سایت خود را در قالب اسلایدر نمایش دهند. اسلایدرها در سایت موجب زیبایی سایت و دسترسی سریع تر به مطالب می شوند.

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

1- افزودن قابلیت “تصویر شاخص” به قالب:

در ابتدای کار، باید قالب وردپرسی خود را به ویژگی “تصویر شاخص” مجهز کنیم. برای اینکار به سراغ فایل functions.php قالب خود میرویم (در صورتی که قالب شما این فایل را ندارد، خودتان بسازید). سپس کد زیر را داخل آن قرار می دهیم:

<?php 
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 260, 220, true ); // تعیین طول و عرض تصویر
}
?>

با کد بالا قابلیت تصویر شاخص به صفحه نوشته تازه اضافه شد. اگر وجود نداشت درست بودن کد را بررسی کنید.

2- تعریف اسلایدر در فایل functions.php:

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

register_sidebar(array(
'name' => 'right',
'before_widget' => '<div class="blockr"><div class="pat1">',
'after_widget' => '</div>',
'before_title' => '<span>',
'after_title' => '</span></div><div class="iconb"><img src="/wp-content/themes/GoldMovie.ver2/images/topp.png"></div><br/><br/><br/>',
));

 

3- نمایش اسلایدر در سایت:

حال می بایست کد زیر را جایی که میخواهید اسلایدر نمایش داده شود قرار دهید:

<div class="footer_box">
<div id='holder' style='display:none;'>
<ul id="text_ads">
<?php
$my_query = new WP_Query('showposts=10&cat=0'); // 10 اسلایدر نمایش داده خواهد شد
while ($my_query->have_posts()):
$my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li class='objImgFrame' >
<a href="<?php the_permalink() ?>/" title="<?php the_title(); ?>" class="image" target="_blank"> /*  عنوان مطلب*/
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( array(212,64) );
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/no.png" />'; // عکس مطلب
}
?></a>
<a href="<?php the_permalink() ?>/" title="<?php the_title(); ?>" class="title" target="_blank"><?php the_title(); ?></a> // عنوان
 </li>
<?php endwhile; ?><?php wp_reset_query(); ?>
</ul>
<div class="srcoll_nav">
<a href"#" id="leftNav" >&nbsp; </a>
<a href"#" id="rightNav" >&nbsp; </a>
</div>
</div>
</div>

فایل را ذخیره کرده و سایت خود را بارگذاری کنید. میبینید که تصاویر بدون هیچگونه ترتیب و افکتی چیده شده اند و شبیه اسلایدر نیستند!!!!!

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

دانلود فایل های JS

در زیر کد های CSS قرار داده شده است

body {

	font: 11px tahoma;
	margin: 0;
	padding: 0;
	background: #ccc;
	color:#000;
}

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-position: outside;
}

div.footer_box {
	width:980px;
	float:right;
margin-right:50px;

	position:relative
}
ul#text_ads {
	width:980px;
	float:right;
	margin:10px -5px 10px 0;
}
.objImgFrame {
	    float: right;
    width: 228px;
    height: 200px;
    margin: 0px 15px 0px 0px;
    border-radius: 5px;
    box-shadow: 0px 0px 8px #000;
}

.objImgFrame .image {

	width:227px;
	height:146px;
	float:right;
}
.objImgFrame .image img {

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px 5px 0 0;
	width:227px;
	height:146px;
	float:right;
}.objImgFrame .image img:hover {
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
.objImgFrame .title {
	margin-top:8px;
	text-align:center;
	width:215px;
	float:right;
	color:#000;
	font-weight:bold;
}
.objImgFrame .descript {
	width:210px;
	float:right;
	margin:5px 5px 0 0;
	color:#000;
	font-weight:normal;
}
.objImgFrame a {
	transition-property:color;
	transition-duration:1s;
	-moz-transition-property:color;
	-moz-transition-duration:1s;
	-webkit-transition-property:color;
	-webkit-transition-duration:1s;
	-o-transition-property:color;
	-o-transition-duration:1s;
}

.simple_slider_hover {
	cursor:pointer;
	cursor:hand
}
.simple_slider_disabled {
	opacity : 0.2;
	filter: alpha(opacity=20);
	zoom: 1;
}
#leftNav {
	width:23px;
	height:85px;
	background:url(images/text_ads_arrow.png) no-repeat 0 0;
	position:absolute;
	top:65px;
	left:-40px;
}
#leftNav:hover {
	background-position:0 -85px;
}
#rightNav {
	width:23px;
	height:85px;
	background:url(images/text_ads_arrow.png) no-repeat -23px 0;
	position:absolute;
	top:65px;
	right:-30px;
}
#rightNav:hover {
	background-position:-23px -85px;
}

 

دانلود عکس های استفاده شده در اسلایدر

آموزش امروز هم به پایان رسید.

موفق باشید

64 دیدگاه برای “قرار دادن آخرین مطالب در اسلایدر بدون افزونه

  • حمید
    - ۶ فروردین , ۱۳۹۳

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

    • الناز
      - ۸ فروردین , ۱۳۹۳

      سلام دوست من. احتمالا کدهای مربوط به فانکشن را در جای مناسب قرار نمی دهید. دقت کنید که این کدها باید داخل قرار گیرد. در رابطه با فایل های js و css، شما در هر مسیری که آن را آپلود کنید فرقی ندارد و آن در header.php فراخوان می کنید

  • مهدی
    - ۲۱ فروردین , ۱۳۹۳

    سلام
    خسته نباشید
    ببخشید یه سوال داشتم شاید به این موضوع ربطی نداشته باشه اما شاید بتونید کمکم کنید
    یه ابزارک هست توی خود وردپرس به صورت پیش فرض که آخرین مطالب سایت رو نشون میده
    مشکل من اینجاست که اگه یه مطلب با تیتر بلند بیشتر از ۴ کلمه داشته باشم از داخل ابزارک موقع نمایش میزنه بیرون و قالبم رو زشت میکنه!!
    اگه کدی هست که بشه آخرین مطالب سایت رو بدون افزونه نشون بده و بتونه تعداد کلمات اون رو کنترل و کم و زیاد کرد ممنون میشم تو همین کامنت جواب بدید
    امیدوارو منظورم رو فهمیده باشی

    • الناز
      - ۲۱ فروردین , ۱۳۹۳

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

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

  • یوسف
    - ۲۷ اردیبهشت , ۱۳۹۳

    سلام. این کار تو رزبلاگ هم جواب میده؟

    • الناز بیک زاده
      - ۲۸ اردیبهشت , ۱۳۹۳

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

  • mahoma
    - ۲ خرداد , ۱۳۹۳

    سلام من همه ی این کار هارو انجام دادم-متاسفانه چیزی واسم نمایش داده نمیشه

    • الناز بیک زاده
      - ۲ خرداد , ۱۳۹۳

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

  • برهان
    - ۱۲ خرداد , ۱۳۹۳

    کد ها کار نمیکنه

    • الناز بیک زاده
      - ۱۲ خرداد , ۱۳۹۳

      سلام. آموزش تست شده هستش دوست من

  • mahoma
    - ۱۲ خرداد , ۱۳۹۳

    سلام یه مشکل داشتم واستون ایمیلش کردم-ممنون میشم باز کمکم کنید

    • الناز بیک زاده
      - ۱۳ خرداد , ۱۳۹۳

      سلام دوست من
      ایمیلی دریافت نکرده ام
      لطفا دوباره بفرستید

    • الناز بیک زاده
      - ۱۸ خرداد , ۱۳۹۳

      سلام دوست من. متاسفانه ایمیل دریافت نکرده ام

  • رامتین
    - ۲۰ خرداد , ۱۳۹۳

    درود
    ممنون بابت این آموزش
    فقط سوالی که دارم اینه که آیا میشه هر اسلایدر دیگه ای رو با این روش اضافه کرد؟
    برای نمونه BXSlider رو با همین کد ها توی function باید معرفی کرد؟

    • الناز بیک زاده
      - ۳۱ خرداد , ۱۳۹۳

      سلام. بله میشه

  • طراحی سایت
    - ۱۷ تیر , ۱۳۹۳

    عالی بود ممنون از مطالب بسیار خوبتون

  • علی
    - ۱۰ شهریور , ۱۳۹۳

    خیلی عالی و کاربردی بود ممنون

  • عماد
    - ۱۹ شهریور , ۱۳۹۳

    سلام الناز
    ممنون از آموزش خوبتون
    یه سوال داشتم
    با استفاده از برنامه Amazing Slider یک اسلایدر برای سایت خود ایجاد کردم که به صورت افزونه نصب میشود
    این افزونه را نصب کردم ولی نمیدونم چطور باید نمایشش بدم در قسمت ابزارک ها هم هست ولی جای دلخواهم در این قسمت وجود ندارد
    قالب ورد پرس Sahifa هستش
    بی زحمت کمکم کن تا این اسلایدر را در جایی که میخوام نمایش بدم
    در ضمن قالب صحیفه خودش یه اسلایدر داره که خوشم نمیاد ازش

    • الناز بیک زاده
      - ۲۲ شهریور , ۱۳۹۳

      سلام عماد جان. شما برای این کار ۲ راه داری. ۱ اینکه یه جای ابزارک تعریف کنید و کدشو تو جایی که میخواهی اسلایدر نمایش داده بشه بزاری. بعد از قسمت ابزارک ها، ابزارک اسلایدر را قرار بدی. ۲- اینکه کد فراخوانی اسلایدر را در جای مورد نظرت بزاری. کد های نمایش اسلایدر رو هم جایی که پیشنمایش میگیری بهت میده. این لینکو ببین
      http://amazingslider.com/how-to-create-wordpress-jquery-slider/

  • عماد
    - ۲۲ شهریور , ۱۳۹۳

    الناز عزیز از حسن توجه شما سپاسگذارم.
    مشکل من هم دقیقا همینه که نمیدونم این شورت کد را کجا باید قرار بدم.
    البته توی این زمینه بسیار مبتدی هستم.
    این اولین سایتی هست که راه انداختم. وب سایت شخصی پسرم هست
    www . parsasafari . ir لطفا ببین و نظرتو بگو. میدونم کار زیاد داره.
    فعلا یه اسلایدر با امکانات قالب صحیفه توش راه اندازی کردم. ولی هنوز باهاش کنار نیومدم. به نظرت اسلایدر تمام صفحه باشه بهتره یا به این شکل بهتره؟
    من سوال زیاد برام پیش میاد ممکنه زیاد مزاحمت بشم. پیشاپیش ببخش.

    • الناز بیک زاده
      - ۲۳ شهریور , ۱۳۹۳

      لینک زیر میتونه کمکت کنه
      http://amazingslider.com/how-to-create-wordpress-jquery-slider/

      وب سایتتو دیدم درست میگی کار زیاد داره موفق باشی

      خواهش می کنم خواشحال میشم که بتونم به سوالاتتون جواب بدم

  • عماد
    - ۲۲ شهریور , ۱۳۹۳

    بازم منم. خوبی استاد؟
    یه چند کیلو سوال دارم
    ۱. الان توی این سایت شما وقتی نظر میفرستم بالاش مینویسه نظر شما در انتظار تایید میباشد . چطور این جمله را تنظیم کنم؟ و کجا؟
    ۲. توی خبر نامه ایمیلی شما ثبت نام کردم یه پیغام زیبا و محترمانه نشون داد ولی تو سایت من مینویسه ایمیلی در راه است. کجا این جمله را عوض کنم؟

    • الناز بیک زاده
      - ۲۳ شهریور , ۱۳۹۳

      سلام عماد جان.
      در خصوص سوال ۱ معمولا این جمله در فایل فانکشن پوسته تعریف میشه.من قالب صحیفه رو چک کردم تو مسیر زیره:
      includes/wp_list_comments.php رو باز کن و جمله زیر را جستجو کن
      Your comment is awaiting moderation
      جای جمله بالا جمله مورد نظرتو قرار بده

      در خصوص سوال ۲ از کدوم افزونه استفاده می کنی؟

      • عماد
        - ۲۴ شهریور , ۱۳۹۳

        محلی را که آدرس داده بودی پیدا نکردم.

        • الناز بیک زاده
          - ۲۵ شهریور , ۱۳۹۳

          من پوسته صحیفه رو دانلود کردم و از روی اون بهت آدرس رو گفتم. از کدوم نسخه صحیفه استفاده می کنی؟ لطفا لینک جایی که پوسته رو دانلود کردی بزار واسم

  • عماد
    - ۲۴ شهریور , ۱۳۹۳

    سلام
    ممنون بابت وقتی که میگذارید
    از افزونه Subscribe2 استفاده میکنم.
    در ضمن لینکی را که فرستادی دیدم. واین شورت کد را هم بدست میاورم ولی نمیدونم کجا باید بکار ببرمش!
    هر جا میذارم ارور میده.

    • الناز بیک زاده
      - ۲۵ شهریور , ۱۳۹۳

      تو عکس زیر ۲ تا کد بهت میده:
      http://amazingslider.com/wp-content/uploads/2012/12/viewsliderplugin.png
      اولی شورت کد هستش و زمانی می تونی از این کد استفاده کنی که بخواهی اسلایدر رو تو نوشته یا برگه نشون بدی.
      کد دوم کد فراخوانی اسلایدر هستش و فقط می تونی داخل فایل های پوسته قرار بدی. اگر بخواهی تو صفحه اول نشون بدی باید تو فایل index.php بزاری. مقاله معرفی فایل ها در پوسته وردپرس جایگاه فایل ها رو بهت میگه.

  • طراحی سایت
    - ۷ مهر , ۱۳۹۳

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

  • طراحی لوگو
    - ۱۷ مهر , ۱۳۹۳

    خیلی مرسی و سپاس از زحمات و مقالات بسیار خوبتون

  • سعید
    - ۳ آبان , ۱۳۹۳

    سلام
    من آموزش بالا را انجام دادم
    فایهارا هم وصل کردم
    به css هم تسلط کامل دارم
    هیچ المان جی کویری دیگه م به صفحه وصل نیست
    ترتیب فایها را هم چک کردم
    jquery.min.js”
    jquery.simple_slider.js
    amazon_scroller.js
    text_ads.js
    وقتی دایو holder
    را دستی نمایش میدم منضورم display هست
    چون پیشفرض مخفی هست
    عکس و مطالب را میبینم
    ولی از حرکت خبری نیست
    من قالب را خودم طراحی کردم کردم
    چی کار کنم؟؟

  • سعید
    - ۳ آبان , ۱۳۹۳

    سلام درست بود
    مشکل از من بود

  • هاست
    - ۴ آبان , ۱۳۹۳

    سلام.
    مرسی مدرسه جان. واضح گفته بودین. مفید واقع شد

  • طراحی وب
    - ۴ آبان , ۱۳۹۳

    مرسی. مفید بود

  • سعید
    - ۵ آبان , ۱۳۹۳

    سلام ممنون از آموزش خیلی خوبتون
    نمونه این مثال در سایت
    http://sarebezangah.com/
    مشاهده کنید

  • سعید
    - ۷ آبان , ۱۳۹۳

    سلام
    منن نمونه کد دیگری در سایت

    http://sarebezangah.com/

    استفاده کردم
    ممنون از آموزش خودتون
    این را گفتم که کاربران شما سر در گم نشوند

  • تور کیش
    - ۱۵ آبان , ۱۳۹۳

    عالی بود مرسی

  • سيد
    - ۱۴ آذر , ۱۳۹۳

    سلام
    خسته نباشید الناز خانم
    بنده زیاد وارد نیستم؛ یک دومین و هاست خریدم از شرکت و خودش توی طراحی اولیش واسم یک اسلایدشو گذاشته که اخرین مطالب به طور خودکار توی اون اسلایدشو نمایش داده میشه؛ ولی بنده نمیخام که برای همه ی مطالبم این اتفاق بیفته و میخام خودم انتخاب کنم که کدوم مطلب داخل اسلایدشو قرار بگیره و کدام نگیره ممنون میشم اگه کمکم کنید.
    و یک چیز دیگه؛ ایا بغیر از این اسلایدشویی که خود شرکت گذاشته بنده هم میتونم یک اسلایدشوی دیگه در همون صفحه اول سایتم داشته باشم اگه میشه؛بفرمایید چطوری میشه!؟

    • الناز بیک زاده
      - ۲۲ آذر , ۱۳۹۳

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

  • طراحی سایت
    - ۱۶ آذر , ۱۳۹۳

    سایت خوبیه مرسی

  • طراحی سایت
    - ۹ فروردین , ۱۳۹۴

    مرسی خیلی کمکم کرد

  • طراحی سایت
    - ۹ خرداد , ۱۳۹۴

    سلام … ممنون از مطالب خوبتون،موفق باشید.

  • لوله فولادی
    - ۲۴ تیر , ۱۳۹۴

    با سلام و سپاس بسیار عالی بود ممنون

  • طراحی سایت
    - ۷ مرداد , ۱۳۹۴

    سایت عالی دارید ، والبته با محتوای مفید. خسته نباشید

  • دوربین مدار بسته
    - ۳ شهریور , ۱۳۹۴

    لاایک دارین واقعااااا

  • برنامه نویسی اندروید
    - ۵ مهر , ۱۳۹۴

    با سلام
    ممنون از سایت خوبتون.

  • دکوراسیون داخلی
    - ۳۰ مهر , ۱۳۹۴

    ممنون آموزش خوبی بود

  • کمد ریلی
    - ۱۱ آبان , ۱۳۹۴

    مرسی از آموزش های خوبتون

  • پمپ ایران
    - ۲۷ آبان , ۱۳۹۴

    بسیار عالی بود مرسی

  • طراحی سایت
    - ۲۲ آذر , ۱۳۹۴

    ممنون برای آموزش خوبتون
    موفق باشید

  • باربری
    - ۶ بهمن , ۱۳۹۴

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

  • طراحی سایت
    - ۱۰ بهمن , ۱۳۹۴

    سلام

    الناز جان

    ممنون از این وقی که در اختیار ما کاربرا قرار میدی و با این صبر نظرات ما را میخونی

  • طراحی سایت
    - ۲۱ بهمن , ۱۳۹۴

    ممنون

  • مهدی
    - ۱۰ فروردین , ۱۳۹۵

    سلام ممنون از آمکوزش خوبتون.
    کاش یک نمونه آماده از این مثال رو برای دانلود می گذاشتید؟
    تشکر

  • SEO site
    - ۲۳ فروردین , ۱۳۹۵

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

  • خرید گوشی آیفون
    - ۴ خرداد , ۱۳۹۵

    آموزنده بود ممنون از مطلبتون

  • زیورآلات
    - ۴ خرداد , ۱۳۹۵

    خیلی خوب بود

  • هاست
    - ۵ خرداد , ۱۳۹۵

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

  • خرید باغ
    - ۲ تیر , ۱۳۹۵

    مرسی از سایت فوق العادتون

  • حسین
    - ۱۹ مرداد , ۱۳۹۵

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

  • کانفیگ دایرکت ادمین
    - ۹ شهریور , ۱۳۹۵

    عالی بود

  • علی
    - ۲۵ شهریور , ۱۳۹۵

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

    تشکر

  • سید منوچهر
    - ۱۸ خرداد , ۱۳۹۶

    سلام.خسته نباشید.من از کد زیر توی قسمت ایندکس برای نمایش پنج پست پربازدید استفاده میکنم:
    ۱, ‘meta_key’ => ‘wpb_post_views_count’, ‘orderby’ => ‘meta_value_num’, ‘order’ => ‘DESC’ ) );
    while ( $popularpost->have_posts() ) : $popularpost->the_post();?>
    <img id="sag" src="” >

    حالا سوال من اینه.من میخوام کاری کنم که با این کد فقط یک پست نمایش داده بشه و اون پست پربازدیدترین پست نباشه.دومین پست بربازدید باشه.باید چیکار کنم؟بلدم چطور تبدیلش کنم به یک پست.باید post_per_page رو روی ۱ قرار بدم.ولی نمیدونم چطوری کاری کنم که به جای پربازدید ترین دومین پست پر بازدید رو نشون بده.ممنون میشم راهنمائیم کنید.

    • الناز
      - ۲۴ خرداد , ۱۳۹۶

      سلام دوست عزیز. این رو هم به کوءری اضافه کنید : ‘offset=1’

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --