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

برای ساخت اسلایدشو از جی کوئری استفاده خواهیم کرد و همین طور از پلاگین jQuery Cycle Plugin که یکی از کاربردی ترین پلاگین های جی کوئری هست…

برای اینکه ما از جی کوئری و پلاگین jQuery Cycle در قالب استفاده کنیم باید کارهای زیر رو انجام بدیم:

جی کوئری رو از لینک زیر دانلود کنیم:

http://docs.jquery.com/Downloading_jQuery

پیشنهاد من اینه که نسخه Minified رو دانلود کنید که یک min. قبل از js. داره و حجم کمتری نسبت به نسخه اصلی داره

و پلاگین Cycle رو هم  از لینک زیر دریافت کنید:

http://malsup.com/jquery/cycle/download.html

دو فایل جاوا اسکریپتی که دانلود کردیم رو داخل پوشه ی قالب مورد نظرمون ذخیره میکنیم . (میتونیم فایلها رو در فولدری با نام اختیاری در پوشه ی قالب ذخیره کنیم )

بعد نوبت میرسه به لود کردن این دو فایل در قالب، فایل header.php رو باز میکنیم و کدهای زیر رو در اون مینویسیم:

<script src="<?php bloginfo('template_directory'); ?>/jquery.min.js"></script>

<script src="<?php bloginfo('template_directory'); ?>/jquery.cycle.all.min.js "></script>

نکته ۱: این کدها باید جایی بالاتر از تگ <head> قرار بگیرن.

نکته ۲: اگر فایلهای جاوااسکریپت رو در فولدری در زیر مجموعه ی فولدر قالب ذخیره کردین توجه داشته باشین که آدرس درستی به فایلها بدین، برای مثال اگر فایلها رو در فولدر js ذخیره کردین آدرس فایل جی کوئری ما به صورت زیر خواهد بود:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>

خب تا اینجای کار رو که اکثر دوستانی که با تم ها سر و کار دارن حتمن بلد بودن و اگر هم نبودن انقدر ها سخت نبود که نفهمن، هرچند بقیه ی پست هم آنچنان پیچیده نخواهد بود 🙂

حالا فایل متنی زیر رو دانلود کنید و با فرمت php در فولدر قالب ذخیره کنید، یعنی فایلی با نام slideshow.php در فولدر قالب مورد نظر خواهیم داشت.

wp_slideshow (1408 دانلود ها)

برای اینکه اسلاید شو رو در قسمتی که دوست داریم در قالب قرار بدیم، به قسمت مورد نظر سایتمون رفته و کد زیر رو وارد میکنیم:

<?php include(TEMPLATEPATH.'/slideshow.php')?>

کد بالا وارد فولدر قالب شده و slideshow.php رو در قسمتی که کد نوشته شده ایمپورت یا همان include  میکند.

نکته: نه تنها بهتره که الزامی هم هست که کد بالا رو داخل یک تگ با یک کلاس یا آی دی مشخص قرار بدین تا بتونین بهتر استایلش کنین، هرچند  میتونین از آی دی slideshow هم برای استایل قسمت مورد نظرتون استفاده کنید.

برای اینکه به پلاگین جی‌کوئی Cycle بفهمونیم که اسلایدشوی ما کدام قسمت صفحه مون هست باید آی دی تگ اسلاید شوی خودمون رو بهش بفهمونیم، برای اینکار میتونین از مثال های بسیار ساده و پرشمار سایت خود پلاگین در اینجا هم کمک بگیرید!

برای اینکار در جایی بالاتر از تگ هدر، که معمولن در فایل header.php قرار داره کد زیر رو وارد میکنیم:

 

<script>

jQuery(document).ready(function(){
jQuery(‘#slideshow’).cycle({

fx: ‘fade’,

timeout:4000
});
});

</script>

 

 

ما  در اینجا تگی با آی دی slideshow رو هدف قرار دادیم و افکت مورد نظرمون هم fade هست و روی هر عکس ۴ ثانیه صبر میکنه(میتونین در اینجا افکتهای مختلف این پلاگین رو ببینین و در کد خودتون اعمال کنید)  تمام آپشن های پلاگین هم در این صفحه قرار دارن، برای استفاده از هرکدام هم باید با یک , جداشون کنین.

درباره این نویسنده

مطالب مشابه

39 Responses to ساخت اسلاید شو برای وردپرس

  1. یزدان پرست گفت:

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

    • سیاوش کشمیری گفت:

      سلام جناب یزدان پرست گرامی، خیلی باید دقت کنین که همه ی کار ها درست انجام شده باشه، اول چک کنین که حتمن فایلهای جی کوئری درست وارد شده باشند و همین طور مطمئن باشید که مطالبتون دارای تصویر شاخص (در وردپرس فارسی از این نام برای تصاویر بندانگشتی استفاده میشه) باشه، و همینطور دقت کنید که در include کردن فایل slideshow.php اشتباهی رخ نداده باشه، اگه همه چیز به نظرتون درست بود، و مشکل پا برجا، میتونین قالب رو بعد از ادیت برام بفرستین تا ببینم مشکل از کجاست، ممنون:)

  2. مهدی گفت:

    بسیار عالی .
    آموزش بسیار کاربردی و دقیقی بود .

    امیدوارم در اینده این سایت به یکی از قدرتمند ترین سایت های اموزشی در مورد وردپرس تبدیل بشه.

    با تشکر مهدی.

  3. سجاد گفت:

    دستت در نکنه دوست عزیز، واقعا عالی بود.
    اگه میتونی کد مثالی که خودت گذاشتی رو هم بزار استفاده کنیم.اونی که توضیحات کوتاه سمت چپش هست.

    موفق باشی.

    • سیاوش کشمیری گفت:

      از تابع the_excerpt() استفاده کردم، فقط کافیه یه تگdiv بسازید و این تابع رو هم درش استفاده کنید و تگ div رو هم دقت کنید که باید داخل لوپ اسلاید شو باشه، یعنی جایی که تصویر بندانگشتی قرار داره

      • سجاد گفت:

        منظورت این کده:

        من زیاد با کد نویسی آشنا نیستم.همین کد کافیه؟ جای دقیقی که باید بزارم کجاست، یعنی لوپ اسلاید شو کجاست؟
        اگه زحمتی نیست یه توضیح کامل بزار.
        ممنون.

  4. محمدرضا گفت:

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

  5. hamed گفت:

    سلام آقای کشمیری
    مطلب بسیار عالی بود استفاده کردم. میخواستم خواهش کنم ساخت اسلاید شو با افزونه frontpage-slideshow هم آموزش بدید. نیاز خیلی اساسی بهش دارم.سپاس

  6. hamed گفت:

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

    • سیاوش کشمیری گفت:

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

  7. امير گفت:

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

        • سیاوش کشمیری گفت:

          نوشتم که، توضیح کامل دادم، بالای دو نکته قرمز میتونین ببینین که چطوری لینک دادم، پایینش هم توضیح دادم که میتونین توی پوشه داخل فولدر تم فایلهارو بذارین و بهشون لینک بدین

          • امير گفت:

            ممنون بابت پاسخت
            کل فایل های جاوا اسکریپت پلاگین cycle رو باید include کنیم ؟
            ضمناً میشه آموزشسازگار کردن قالب با مرورگر های مختلف رو هم تو سایت قرار بدی ؟
            ممنون از لطفت

          • سیاوش کشمیری گفت:

            min.js بهتر از همه است، فرقی با هم ندارن، یکیشون کافیه / آموزش خاصی نمیشه نوشت برای سازگاری طرح با مرورگر های مختلف، کاملن تجربیه و در هر موردی تقریبن متفاوت

  8. Mahmoud گفت:

    سلام

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

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

    • blogadmin گفت:

      تنها کاری که به ذهنم میرسه اینه که از آر اس اس استفاده بشه، راه دیگه اش که اصلن پیشنهاد نمیکنم استفاده از iframe هست، بستگی به کارتون داره

  9. مانی گفت:

    آقا سلام؛
    من نمی‌دونستم توی کار طراحی وب هستی… ارادت دارم بهت شدید ها!
    منم تقریباً توی همون حوالی پرسه می‌زنم. فرصت بشه یه گپی با هم بزنیم.

  10. سامان گفت:

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

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

    • سیاوش کشمیری گفت:

      سلام، من نفهمیدم اول درست کار کرد بعد روی وردپرس خراب شد؟ اگه اینطوره ممکنه مشکلی با یکی از پلاگین هایی که نصب هست داشته باشه، به جای تمام علامت های $ کلمه ی jQuery رو جایگزین کنین شاید مشکل حل بشه ، برای تنظیمات دیگر اسلایدشو کافیه به این لینک برین http://malsup.com/jquery/cycle/ و مثالهایی که هست همراه با کد مربوطش ببینید، موفق باشید:)

دیدگاهتان را بنویسید

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