slide

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

برای ساخت اسلایدشو از جی کوئری استفاده خواهیم کرد و همین طور از پلاگین 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

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

<?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 هست و روی هر عکس ۴ ثانیه صبر میکنه(میتونین در اینجا افکتهای مختلف این پلاگین رو ببینین و در کد خودتون اعمال کنید)  تمام آپشن های پلاگین هم در این صفحه قرار دارن، برای استفاده از هرکدام هم باید با یک , جداشون کنین.

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

مطالب مشابه

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

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

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ آبان ۱۰ام, ۱۳۸۹ ۸:۱۸ ب.ظ:

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

    [پاسخ]

  2. سجاد گفت:

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

    موفق باشی.

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ آبان ۱۳ام, ۱۳۸۹ ۱۰:۵۸ ق.ظ:

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

    [پاسخ]

    سجاد پاسخ در تاريخ آبان ۱۳ام, ۱۳۸۹ ۱:۲۵ ب.ظ:

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

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

    [پاسخ]

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

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ آبان ۱۴ام, ۱۳۸۹ ۱۰:۵۷ ق.ظ:

    خب ۱۰۰۰ دلیل مختلف میتونه داشته باشه، اما اگه بخواهین بدونین مشکل از کجاست و فقط در برگه ها این مشکل رو دارین و نه در پست ها، مشکل از page.php در قالبتون هست

    [پاسخ]

  4. hamed گفت:

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ آذر ۱۵ام, ۱۳۸۹ ۹:۳۲ ب.ظ:

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

    [پاسخ]

  5. hamed گفت:

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ آذر ۱۵ام, ۱۳۸۹ ۹:۳۳ ب.ظ:

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

    [پاسخ]

  6. امير گفت:

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ دی ۱۸ام, ۱۳۸۹ ۳:۱۴ ب.ظ:

    دقت کنید که cycle پلاگین وردپرس نیست، پلاگین جی‌کوئری هست و باید توی پوشه ی تم ذخیره بشه

    [پاسخ]

    امير پاسخ در تاريخ دی ۱۸ام, ۱۳۸۹ ۷:۱۶ ب.ظ:

    کل فایل ها کنار فایل های پوسته باید ریخته بشه یا داخل یه پوشه کنار فایل ها ؟

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ دی ۱۸ام, ۱۳۸۹ ۷:۲۸ ب.ظ:

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

    امير پاسخ در تاريخ دی ۱۹ام, ۱۳۸۹ ۵:۲۳ ب.ظ:

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

    سیاوش کشمیری پاسخ در تاريخ دی ۱۹ام, ۱۳۸۹ ۱۰:۳۴ ب.ظ:

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

  7. Mahmoud گفت:

    سلام

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

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

    [پاسخ]

    blogadmin پاسخ در تاريخ بهمن ۱۷ام, ۱۳۸۹ ۵:۴۸ ب.ظ:

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

    [پاسخ]

  8. مانی گفت:

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

    [پاسخ]

    blogadmin پاسخ در تاريخ مرداد ۲۲ام, ۱۳۹۰ ۵:۲۵ ق.ظ:

    سلام، قربانت:) ایشالله، حتمن خوشحال میشم ببینمت ، در خدمتم:)

    [پاسخ]

  9. سامان گفت:

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

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

    [پاسخ]

    سیاوش کشمیری پاسخ در تاريخ بهمن ۲۴ام, ۱۳۹۰ ۷:۱۷ ب.ظ:

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

    [پاسخ]

پاسخ دادن به سجاد لغو پاسخ

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

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>