آموزش کامل پیاده سازی یک اسلایدر دلخواه در وردپرس

- visibility ۱۰ mode_comment

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

info نکته :

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

برای این آموزش ما اسلایدر مشهور Responsive Slider رو در نظر گرفتیم که همون طور در عنوانش هم مشخصه یه اسلایدر واکنش گرا  و با اکثر مروگر های وب سازگار هست.

اضافه کردن کدهای jQuery و CSS به وردپرس

در مرحله اول باید کد های لازم رو به صفحات مورد نظر در وردپرس اضافه کنیم،ما این کد های اسلایدر رو در بخش footer سایت (اکشن wp_footer) اضافه می کنیم.فرض می کنیم کتابخانه جی کوئری قبلا اضافه شده 🙂 (یعنی اضافه اش کردین)

Responsive Slider بسیار کم حجم هستش و دارای یه فایل جی کوئری اصلی و یه فایل استایل هست.

خوب برای شروع در پوشه پوسته وردپرس خودتون یه پوشه با نام slider ایجاد کنید و فایل های responsiveslides.min.js و responsiveslides.css رو داخلش قرار بدین (پوشه اسلایدر در فایل ضمیمه وجود داره) و بعدشم یه فایل php با نام slider.php در همین پوشه slider ایجاد کنید و کد های زیر رو داخلش قرار بدین.

 

یه تابع تعریف کردیم و همون دو تا فایل که بالا گفتیم رو با توابع wp_register_style و wp_enqueue_style برای فایل های استایل و wp_register_script و wp_enqueue_script برای فایل های اسکریپت اضافه کردیم،اونم در بخش footer وردپرس (به شرطی که تابع wp_footer رو در بخش footer فراخوانی کردن باشین،البته اگرک دوست داشتین می تونید از اکشن wp_head استفاده کنید تا فایل ها در بخش header صفحه اضافه بشه)

تابع نمایش اسلایدر 

بعد از اضافه کردن فایل های لازم،حالا یه تابع می نویسیم که اسلایدر رو پوسته نمایش میده.این تابع رو باید در فایل slider.php که ساختیم وارد کنید.

قبل از قرار دادن کد های تابع باید بگم که کد های HTML برای اسلایدر دارای ساختار زیر هستن.

ما باید این ساختاری ساده رو در تابع پیاده کنیم.یه لیست ساده نا مرتب که تگ های li با یه تگ img و یه تگ p که داخلش قرار دارن تکرار شدن (نکته همین جاست)

خوب اینم از تابع نمایش اسلایدر،حالا توضیح بدیم چیکار کردیم،اول از همه تابع یه پارامتر میگیره که تعداد اسلاید هایی که میخوایم نشون بده رو باهاش مشخص کردیم،بعدشم یه آرایه برای مشخص کردن پارامتر های ورودی تابع get_posts تعریف کردیم و اون پارامترهای لازم رو براش تس کردیم (مثل نوع پست،تعداد پست (همون پارامتر count) کلید متا و نحوه مرتب سازی)،این پارامتر ها به تابع get_posts میگن از مطالبی که نوعشون post هست و دارای کلید متای slider هستن (پست متاها در وردپرس) رو به تعداد count و بر اساس تاریخ و به صورت نزولی مرتب کن و برای من بگردون (خدایی وردپرس حال میده ها ...).

آرایه رو به تابع get_posts میدیم تا ایشون مطالب مورد نظر رو اگه وجود داره برای ما برگردونه ما و داخل متغییر slider_posts قرار بده ما چک می کنیم تعداد صفر نباشه که اگه باشه تابع رو return می کنیم،یعنی هیچی نشون نمیدیم.

اما اگه تعدادی مطلب برگردوند خوب اونها رو در یه حلقه و با توجه به سختار HTML و اون بخش تکرار شونده نمایش بده.مهم ترین نکته اش دریافت تصویر اسلایدر هستش که با تابع زیر اونو دریافت و در خاصیت src تگ img قرار دادیم.

اولین پارامتر شناسه مطلب هست که با post->ID اونو دریافت کردیم و سپس کلید متا که در این جا ما slider رو انتخاب کردیم (این کلید متا در بخش زمینه های دلخواه و یا ویرایش مطلب ایجاد میشه،هر مقداری اونجا انتخاب کنیم در اینجا استفاده میشه) و پارامتر سوم هم مقدار true هستش که مشخص میکنه حتما مقدار تک رو برگردونه (اگه False باشه آرایه برمیگردونه).ما این مقدار رو echo می کنیم تا آدرس تصویر ذخیره شده به همراه مطلب رو دریافت و نشون بدیم.

اجرای اسلایدر

برای اجرای اسلایدر این تکه کد جاوا اسکریپت رو باید بعد از محل اجرای wp_footer قرار بدیم (قبل از بستن تگ body).

بریم سراغ تنظیم کد در پوسته و آپلود کردن تصاویر.

در این مرحله ما فایل slider.php رو در فایل functions.php پوسته خودمون الصاق میکنیم.

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

چک کردیم اگه تابع مورد نظر وجود داشت اونو فراخوانی کنه با پارامتر 4 که تعداد رو مشخص میکنه.

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

در مرحله نهایی کار باید تصاویر رو به مطالب وردپرس اضافه کنیم.خوب اگه مخواین مطالبتون در اسلایدر نمایش داده بشه.باید در صفحه نوشتن یا ویرایش مطالب در بخش زمینه های دلخواه گزینه جدید اضافه کنید و برای قسمت نام slider (کلید متا ) و برای مقدار هم آدرس تصویر رو انتخاب کنید (از بخش آپلود رسانه تصویر رو آپلود کنید و آدرسشو در این قسمت کپی کنید).

سعی کنید به تعدادی که در تابع مشخص کردین مطالب اسلایدری داشته باشین.

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

موفق و پیروز باشید.

comment دیدگاه کاربران
وحید صالحی

بسیار عالی دستت درد نکنه

Leyla Zarei

سلام جناب علی محمدی.. ممنون از سایت خوبتون. من اسلاید شو nivo شمارو دانلود کردم.. ولی نمیتونم طول و عرضش رو تغییر بدم.. از کجا پیداش کنم..

کیوان علی محمدی

سلام،ممنون،توی فایل style.css همون nivo یه کلاس هست با نام .slider-wrapper اونجا باید عرض کلی اسلایدر رو تعیین کنید.بعدش اسلایدر ارتفاع رو خودکار تنظیم میکنه.

m.yousefikia

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

فرشید

سلام
ممنون میشم به صورت فیلم بذارید.

MEHR

سلام من پولم کجا بوده اگه پول داشتم !!!!
سامانه پیام کوتاه میفروشم اگه بخوای بخری خیییییییییلی بهتون تخفیف میدم به شماره 10003130001000پیامک بفرست تا راهنماییت کنم وقتی پ.ل گیرم اومد اشتراک وی ای پی هم میخرم 🙁 ❗

MEHR

ایمان تیموری

عالی بود واقعان ممنون از زحمات بی دریغ شما

rockstar

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

کیوان علی محمدی

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.