ساخت اسلایدر وردپرس بر اساس برچسب

ساخت اسلایدر وردپرس

ساخت اسلایدر وردپرس آخرین مطالب بر اساس برچسب خاص

برای پروژه ای، در صفحه اصلی، یک اسلایدر تعریف شده بود که مطالب دلخواه نویسنده رو داخل اسلایدر نمایش بده.  بعد از کمی جستجو و پرس و جو به دو انتخاب رسیدم، یکی پلاگین های غیر رایگان وردپرس مثل Slider Revolution که یک گزینه بسیار قوی و حرفه ای با امکانات زیاد و تقریبا بی دردسر با قیمت ۲۵ دلار(!) بود، و یکی هم ساخت یک اسلایدر با jQuery و کد کردن اون برای وردپرس بود. از اونجایی که پروژه شخصی بود و بوده زیادی در این فاز براش در نظر گرفته نشده بود، مورد دوم، یعنی ساخت اسلایدر با jQuery انتخاب شد. ( ساخت اسلایدر وردپرس )
در ادامه نحوه ساخت این اسلایدر رو شرح می دم.
برای شروع باید یک اسلایدر رو انتخاب می کردم، که من از بین گزینه های موجود FlexSlider رو انتخاب کردم و آموزش رو برای این اسلایدر آماده کردم. که البته می شه برای سایر اسلایدرها هم استفاده کرد.

گام اول:

اول FlexSlider رو از این آدرس دانلود کنید. بعد فایل رو از از زیپ خارج کنید.

گام دوم:

داخل پوشه پوسته (theme)، پوشه ای به نام inc وجود داره، اگر همچین پوشه ای وجود نداشت، پوشه ای با این نام بسازید. داخل پوشه inc پوشه ای به نام slider ایجاد کنید.

ساخت اسلایدر وردپرس
ساخت اسلایدر وردپرس

گام سوم:

از داخل پوشه دانلود شده Flexslider دو پوشه images و fonts و دو فایل jquery.flexslider-min.js و flexslider.css به داخل پوشه slider که بالاتر ساختید منتقل کنید و یک پوشه به نام js  بسازید و فایل jquery.flexslider-min.js رو به داخل اون منتقل کنید و یکی هم به نام  css بسازید و فایل flexslider.css رو هم به داخلش منتقل کنید.

ساخت اسلایدر وردپرس
ساخت اسلایدر وردپرس

گام چهارم:

داخل پوشه slider یک فایل به نام slider.php ایجاد کنید و کد‌های زیر رو داخل اون فایل قرار بدید و فایل رو ذخیره کنید.

داخل کد های بالا کد زیر رو پیدا کنید، و به جای عدد “۱۹۳” شماره id برچسب مورد نظرتون رو قرار بدید:

گام پنجم:

کد‌های زیر رو داخل فایل functions.php کپی کنید:

گام آخر:

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

 

ساخت اسلایدر وردپرس تمام شد!

چند تا توضیح:

۱- تعداد اسلاید‌ها و یا به عبارت بهتر تعداد پستهایی که می خواید داخل اسلایدر نمایش داده بشه رو با تغییر عدد “۵” در کد زیر تعیین کنید:

۲- کدهایی که برای این اسلایدر استفاده شده جهت نمایش عکس شاخص پست ها بر اساس برچسب مورد نطر هست شما می تونید کدها رو برای دسته ها تغییر بدید و استفاده کنید.
۳- برای اینکه ابعاد اسلایدر به هم ریخته نشه، بهتره عکس هایی رو که به عنوان عکس شاخص قرار می دید، ابعادشون یکسان و ثابت باشه. برای این کار می تونید قبل از آپلود عکس، خودتون این کار رو انجام بدید و یا از طریق خود وردپرس عکس ها رو کراپ کنید. (این مورد رو در یک پست مجزا توضیح می دم.)
۴- این اسلایدر، بر اساس اسلایدر پایه FlexSlider آماده شده، شما می تونید با مراجعه به این صفحه اسلایدر مورد نظرتون رو انتخاب کنید و کد‌های همون اسلایدر رو داخل فایل slider.php استفاده کنید.
۵- برای کاستومایز کردن اسلایدر (استفاده از ویژگی‌ها) می تونید به این صفحه مراجعه کنید و با توجه به نیازتون تغییرات لازم رو در اسلایدر بدید.

Save

Save

Save

Save

You may also like

دیدگاه بگذارید

avatar
  Subscribe  
Notify of