ایجاد اسلایدر ریسپانسیو در وردپرس با افزونه Image Slider

اسلایدر ریسپانسیو در وردپرس

سلام خدمت شما کاربران وردپرسی!
اسلایدر‌ها یکی از اصلی‌ترین عناصر مورد استفاده در هر سایتی می‌باشند که کاربرد‌های گوناگون و زیادی دارند و تقریبا در اکثر سایت‌ها با موضوعات مختلف کاربرد دارند. استفاده از اسلایدر ریسپانسیو در وردپرس برای نمایش محصولات، مطالب مهم، اطلاعیه‌ها و… می‌باشد که از این جهت در اکثر سایت‌های اینترنتی اسلایدر‌ها وجود دارند و در بخش‌‍ های مختلفی مورد استفاده قرار می‌گیرند.

اسلایدر ریسپانسیو در وردپرس

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

افزونه Image Slider

image slider-اسلایدر ریسپانسیو در وردپرس

اگر از کاربران وردپرسی باشید حتما تاکنون افزونه‌های مختلفی را برای نمایش اسلایدر در سایت مشاهده نموده‌اید و یا در سایت خود استفاده کرده‌اید اما در این مطلب قصد داریم به شما افزونه‌ای حرفه‌ای برای ایجاد اسلایدر ریسپانسیو در وردپرس را معرفی کنیم که توسط آن قادر به نمایش انواع اسلایدر در سایت وردپرسی خود خواهید بود.
افزونه
Image Slider توانسته است با +100,000 نصب خود به همراه کسب امتیاز 4/4  از 5 به یکی از برترین و محبوب‌ترین افزونه‌های ایجاد اسلایدر در وردپرس تبدیل شود.

نصب و راه اندازی افزونه

برای استفاده از این افزونه ابتدا اقدام به نصب و فعال سازی آن از طریق لینک دانلود زیر اقدام نمایید. پس از نصب افزونه در بخش منو‌های پیشخوان آیتمی به نام Huge-IT Slider نمایان می‌شود که در این بخش می‌توانید اسلایدر مورد نیاز خود را ایجاد کنید.

Hige-IT slider-اسلایدر ریسپانسیو در وردپرس

در این بخش با کلیک بر روی Add New Slider می‌توانید اطلاعات مربوط به اسلایدر مورد نیاز خود را وارد کنید. پس برای ایجاد اسلایدر وارد این بخش شوید تا تنظیمات آن را مشاهده کنید. با ورود به این بخش سه گزینه پیش‌روی شما خواهد بود.

slides-اسلایدر ریسپانسیو در وردپرس

Add Image Slide: گزینه اول مربوط به افزودن تصویر به اسلایدر می‌باشد که با انتخاب آن باید عکسی را آپلود کنید و تنظیمات مربوط به آن را اعمال نمایید.
Add Video Slide: این گزینه مربوط به افزودن ویدئو به اسلایدر می‌باشد که البته مربوط به نسخه تجاری افزونه می‌باشد و در نسخه رایگان تنها قادر به استفاده از تصاویر خواهید بود.
Add Post Slide: این گزینه نیز به شما کمک می‌کند تا بتوانید مطالب خود را در اسلایدر نمایش دهید که باز هم مربوط به نسخه تجاری افزونه می‌باشد که برای استفاده از آن باید نسخه Pro افزونه را تهیه کنید.

پس از آپلود یا انتخاب تصویر خود از رسانه وردپرس، تنظیمات مربوط به آن نمایان می‌شود که باید آنها را تکمیل نمایید.

info-اسلایدر ریسپانسیو در وردپرس

Title: در این بخش باید عنوانی برای تصویر مورد استفاده در اسلایدر ریسپانسیو در وردپرس استفاده کنید تا نمایش داده شود.
Descriptionدر این آیتم باید توضیحات مربوط به عکس مورد استفاده را وارد کنید تا در اسلایدر نمایش داده شود.
URL: اگر قصد دارید کاربران با کلیک بر روی تصویر اسلایدر به صفحه‌ای دیگر منتقل شوند کافی است لینک مورد نظر خود را در این بخش وارد نمایید.
Open in new tab: با انتخاب این گزینه کاربران با کلیک بر روی تصاویر لینک داده شده را در صفحه جدید مرورگر مشاهده خواهند نمود.

  آموزش افزودن لینک خروج کاربران به منوی وردپرس

current slider option-اسلایدر ریسپانسیو در وردپرس

Width: در این بخش باید عوض اسلایدر را تعیین کنید.
Height: در این گزینه باید ارتفاع اسلایدر را تعیین کنید.

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

Views: نحوه نمایش اسلایدر را تعیین کنید.
Effects: نوعی افکت انیمیشنی را برای نمایش تصاویر اسلایدر ریسپانسیو در وردپرس تعیین نمایید.
Pause Time: مدت زمان توقف اسلایدر بر روی تصاویر موجود در آن را تعیین کنید.
Change Speed: مدت زمان تغییر تصویر و نمایش تصویر بعدی را تعیین کنید.
Slider Position: محل نمایش اسلایدر را تعیین کنید تا در صورت استفاده از شورت کد در محلی که انتخاب کرده‌اید به نمایش درآید.
Loading Icon: آیکن بارگذاری را مشخص کنید تا در صورت دیر لود شدن تصاویر نمایش داده شود.

سایر بخش ها

Pause on Hover: با انتخاب این گزینه در صورتی که کاربر موس خود را بر روی تصویر اسلایدر نگه دارد، تصویر بعدی نمایش داده نمی‌شود و بر روی همان عکس توقف می‌کند.
Video Autoplay: این گزینه مخصوص نسخه حرفه‌ای افزونه می‌باشد که در صورت استفاده از ویدئو با تیک زدن این گزینه ویدئو به صورت خودکار پخش خواهد شد.
Random: با تیک زدن این گزینه تصاویر استفاده شده در اسلایدر به صورت تصادفی نمایش داده می‌شود و ترتیب نمایش آن برهم خواهد خورد.
Lightbox: اگر نیاز دارید از لایت باکس در اسلایدر خود استفاده کنید کافی است این گزینه را تیک بزنید.
Slide Effect: افکت و حالت نمایش اسلایدر خود را تعیین کنید.
Open/Close Effect: نحوه نمایش و پنهان شدن اسلایدر و تصاویر آن را تعیین کنید.
Arrows Style: از این بخش نوع گزینه‌های تصاویر بعدی/قبلی و دکمه بستن را انتخاب کنید.

استفاده از شورت کد

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

shortcode-اسلایدر ریسپانسیو در وردپرس

برای نمایش اسلایدر ریسپانسیو در وردپرس، ابزارک و مطالب سایت باید از شورت‌کد ارائه شده در این بخش استفاده کنید و اگر نیاز به نمایش اسلایدر در بخش‌های دیگر دارید با از کد دوم یعنی کد PHP ارائه شده توسط افزونه استفاده نمایید.

slider result-اسلایدر ریسپانسیو در وردپرس

نتیجه گیری

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

دانلود افزونه Image Slider

دانلودصفحه افزونه

آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

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

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

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 5 سال عضو همیار وردپرس

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

  2. 6 سال عضو همیار وردپرس

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

    • 10 سال عضو همیار وردپرس

      سلام
      میشه یک نمونه ارسال کنید تا منظورتون رو متوجه بشم؟

  3. 5 سال عضو همیار وردپرس

    سلام.من اسلایدرمو ایجاد کردم حالا چطور باید فعالش کنم که نمایش داده بشه؟

    • 10 سال عضو همیار وردپرس

      سلام
      شورت کد یا کد کوتاه ایجاد شده را در برگه یا قالب خود قرار دهید. اینگونه اسلایدر به نمایش درمی آید

  4. با سلام من میخوام جهت نمای تغییر اسلایدرام یکیش بالا سمت چپ و یکیش پایین راست باشه چطور میتونم این تغییر را روی یک اسلاید معمولی اجرا کنم

    • 9 سال عضو همیار وردپرس

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

    • ممنون و تشکر