آموزش ساخت اسلایدرهای حرفه ای با افزونه LayerSlider در وردپرس

افزونه LayerSlider

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

افزونه LayerSlider از فناوری های پیشرفته استفاده می کند تا بهترین تجربه کاربری ممکن را ایجاد کند. این افزونه بیش از 200 افکت انتقال اسلاید از پیش تعیین شده را در اختیار شما قرار می دهد و از ویژگی های مدرن مانند سازنده اسلایدر کشیدن و رها کردن WYSIWYG ، پیش نمایش های زمان واقعی، خط زمان، فونت های گوگل و سازنده انتقال برای انیمیشن های سفارشی پشتیبانی می کند.

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

شما می توانید هر نوع محتوایی که بخواهید شامل تصاویر، متن، HTML  های سفارشی، فیلم های YouTube و Vimeo یا محتوای چندرسانه ای خود میزبان HTML5 را به اسلایدر اضافه کنید. این افزونه سئو دوستانه است و به شما امکان می دهد تا نشانه گذاری های معنایی را با ویژگی های سفارشی بسازید که موتورهای جستجو بتوانند به راحتی آنها را ایندکس کنند.

LayerSlider دارای 18 پوسته درون ساخته است و گزینه های مختلفی دارد که با استفاده از آنها می توانید ظاهر و رفتار اسلایدرهای خود را با کوچکترین جزئیات به طور کامل تنظیم می کند.

در این مقاله از سری مقالات آموزش کامل صفر تا صد طراحی سایت، افزونه LayerSlider را مورد بررسی قرار داده و نحوه استفاده از آن را توضیح می دهیم.

آموزش افزونه LayerSlider و ساخت اسلایدرهای پیشرفته در وردپرس

از آنجا که افزونه LayerSlider به صورت رایگان عرضه نشده است، ابتدا باید آن را خریداری کنید. بعد از اینکه فایل zip شده افزونه را خریداری کردید باید آن را در سایت خود در بخش افزونه ها نصب کنید.

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

بعد از اینکه افزونه نصب شد، آن را فعال کنید. پس از فعال سازی افزونه صفحه ای مشابه شکل زیر به شما نشان داده شده و منوی جدیدی به نام WP LayerSlider به پیشخوان وردپرس اضافه می شود.

روی دکمه Let’s Get Started کلیک کنید.

صفحه ای مشابه شکل زیر نشان داده می شود.

برای ساخت اولین اسلایدر روی دکمه Add New Slider کلیک کنید.

با کلیک بر روی این دکمه، یک ناحیه متنی برای وارد کردن نام اسلایدر نمایش داده می شود. در این قسمت نام مورد نظر خود را وارد کرده و روی دکمه Add Slider کلیک کنید.

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

از آنجا که LayerSlider به شما امکان ساخت اسلایدرهای متحرک حرفه ای را می دهد، رابط کاربری سازنده اسلایدر آن در ابتدا کمی درهم به نظر می رسد.

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

تنظیمات پیشرفته

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

شما می توانید این گزینه ها را با فعال کردن دکمه Show Advanced Settings در گوشه سمت راست بالای صفحه نمایش دهید.

اضافه کردن اسلاید ها

بعد از اینکه تنظیمات مورد نظر خود را اعمال کردید، روی تب Slides در بالای صفحه کلیک کنید.

در این تب می توانید اسلایدهای مورد نظر خود برای اسلایدر را وارد کنید.

دو دکمه Click to set در این صفحه مشاهده می کنید. اولین دکمه برای تنظیم تصویر اسلاید و دومین دکمه برای تنظیم بند انگشتی است.

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

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

انواع لایه ها در افزونه LayerSlider

با کلیک بر روی دکمه Add New در تصویر فوق لیستی از لایه های موجود در افزونه LayerSlider به شما نشان داده می شود که می توانید یکی از آنها را انتخاب کرده و یک لایه جدید بسازید.

انواع لایه های موجود در افزونه LayerSlider عبارتند از:

Image: با انتخاب این گزینه می توانید لایه تصویر را نشان می دهد. شما می توانید تصویر جدیدی را بارگذاری کرده یا یکی از تصاویر موجود در کتابخانه رسانه وردپرس خود را انتخاب کنید. همچنین می توانید تصویر را از URL وارد کنید یا تصویر شاخص را از نوشته ها بیرون بکشید.

Text: این نوع لایه باید برای مطالب متنی استفاده شود. شما می توانید نقش لایه را با زیر کنترل ها انتخاب کنید. توجه داشته باشید که محتوای خود را درون یک المان HTML قرار ندهید ، زیرا این کار به طور خودکار بر اساس انتخاب شما انجام می شود. شما نباید از هیچ کد HTML ، به استثنای <br> ، <b> ، <strong> ، <i> ، <u> و سایر المان های فرمت بندی متن درون خطی عمومی در این قسمت استفاده کنید.

HTML: برای استفاده از محتوای HTML سفارشی یا کد کوتاه وردپرس باید این نوع لایه را انتخاب کنید. توجه داشته باشید که محتوای لایه به طور خودکار در یک عنصر <div> قرار می گیرد، بنابراین نیازی به قرار دادن المان در یک تگ HTML نیست. شما می توانید چندین نقش المان را زیر نوع Text به جای استفاده از HTML غیر ضروری استفاده کنید.

Video/audio: این نوع لایه برای محتوای چندرسانه ای در نظر گرفته شده است. اگر می خواهید ویدیو / صوت را ازYouTube ،Vimeo  یا HTML5 جاسازی کنید ، این لایه را انتخاب کنید.

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

با انتخاب هر نوع لایه تنظیمات مربوط به آن نمایش داده می شود.

شما می توانید انتقال لایه ها را به صورت جداگانه تنظیم کنید.

برای اضافه کردن یک اسلاید دیگر، روی دکمه Add New در بالای صفحه زیر تب slides کلیک کنید.

پس از اینکه تغییرات مورد نظر خود را اعمال کردید، روی دکمه Save Changes کلیک کنید تا تغییرات ذخیره شود.

شما می توانید شورت کد اسلایدر ساخته شده را از قسمت LayerSlider WP » All Sliders در پیشخوان وردپرس جایی که می توانید تمام اسلایدرهای ساخته شده را مشاهده کنید، به دست آورید.

پیش فرض های اسلاید

وقتی با اسلایدها و لایه ها کار می کنید، ممکن است متوجه شوید که برخی گزینه ها می توانند مقادیر را از سلسله مراتب بالاتر به ارث ببرند. لایه ها می توانند مقادیر را از اسلایدها به ارث ببرند، و به همین ترتیب، اسلایدها می توانند گزینه های عرض اسلایدر را به ارث ببرند.

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

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

مدیریت اسلایدها در افزونه LayerSlider

افزونه LayerSlider این امکان را به شما می دهد که اسلایدها را مدیریت کنید. برای این کار کافی است موس را بر روی اسلاید مورد نظر خود قرار دهید.

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

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

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

پنهان کردن اسلایدها: به همان روشی که در بالا ذکر شد، روی آیکون مثلث کلیک کرده و این بار گزینه Hide را انتخاب کنید. پنهان کردن اسلاید به این معنی است که بازدید کنندگان شما نمی توانند آن را ببینند ، اما شما هنوز هم می توانید به آن دسترسی پیدا کنید. این ویژگی بخصوص هنگامی که می خواهید اسلایدهای نیمه تمام را پنهان کنید یا نمونه های قدیمی تر را بدون پاک کردن آنها نگه دارید، مفید است. هیچ راهی برای نمایش این اسلایدها در فرانت اند وجود ندارد، حتی اگر از کد نویسی سفارشی استفاده کنید.

حذف کردن اسلایدها: برای حذف کردن یک اسلاید، روی آیکون مثلث شکل کلیک کرده و گزینه Remove را انتخاب کنید.

تنظیم افکت های انتقال اسلایدها

LayerSliderبیش از 200 انتقال اسلاید 2D/3D  از پیش تعریف شده را ارائه می دهد. با استفاده از سازنده انتقال افزونه LayerSlider می توانید هر نوع افکت انتقالی که می خواهید را بسازید. برای این کار در قسمت Slide Options روی دکمه Select Transition کلیک کنید.

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

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

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

مرورگرهای مدرن وب برای عملکرد صحیح به انتقال 3D نیاز دارند. اگر یک انتقال سه بعدی را انتخاب کنید، LayerSlider  آنها را بالاتر از 2D در اولویت قرار می دهد. این افزونه هر زمان که یک دستگاه بازدید کننده قادر به نمایش انتقال های خاصی نباشد ، از سطوح دیگری استفاده می کند. به طور کلی ، انتقال 2D در تمام مرورگرهای اصلی وب پشتیبانی می شود.

لینک دادن به اسلایدها

لینک دادن به یک اسلاید باعث می شود کل سطح آن اسلاید قابل کلیک کردن باشد. همچنین می توانید لینک دهی را روی لایه ها اعمال کنید. به عنوان مثال به یک دکمه لینک بدهید.

برای لینک دادن به اسلایدها در قسمت Slide Options روی دکمه Show More Options کلیک کنید. باکسی مشابه شکل زیر باز می شود.

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

اگر می خواهید به منابع وردپرس مانند یک نوشته، برگه یا پیوست در سایت خود لینک دهید، روی دکمه insert … کلیک کنید و از گزینه Choose Page or Post استفاده کنید. به این ترتیب URL ها به صورت خودکار تولید می شوند و حتی اگر پیوندهای یکتا را تغییر دهید، به مکان مناسب اشاره می کنند. این کار روشی برای استفاده از افزونه های محلی سازی مانند افزونه WPML است که در آن URL ها باید مطابق با زبان انتخاب شده تغییر کنند.

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

تنها یک عمل در این قسمت وجود دارد که ممکن است توضیحاتی لازم داشته باشد و آن Switch to a certain slide است به این صورت که به یک اسلاید خاص سوئیچ شود.

شما می توانید با وارد کردن یک هشتگ (#) و به دنبال آن شماره اسلایدی که می خواهید به آن پرش کنید، به این هدف دست پیدا کنید. به عنوان مثال ، اگر می خواهید به اسلاید سوم پرش کنید ، باید #3 را وارد فیلد لینک دهی کنید.

Deeplink

deeplink یک نام مستعار اسلاید است که می توانید در URL های دارای هشتگ خود از آن استفاده کنید تا LayerSlider هنگام ورود بازدید کنندگان به صفحه با اسلاید مربوطه شروع شود. به عنوان مثال : domain.com/page/#welcome

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

پیش نمایش اسلایدر در افزونه LayerSlider

منطقه پیش نمایش دارای بسیاری از ویژگی های پنهان است که می تواند به طور چشمگیری بهره وری شما را بهبود بخشد.

نوار ابزار منطقه پیش نمایش

بزرگ نمایی: اگر نوار لغزنده بزرگ نمایی را تغییر دهید می توانید اندازه اسلایدر را به اندازه مورد نیاز خود تغییر دهید. این ویژگی می تواند هنگامی که مشغول کار با اسلایدر های بزرگتر در صفحه های کوچکتر هستید، بسیار مفید باشد.

Auto-FIT: میزان بزرگنمایی را به طور خودکار تنظیم می کند تا مطمئن شوید کل اسلایدر بدون اسکرول کردن قابل مشاهده است. این ویژگی مقیاس اسلایدر های شما را روی صفحه های بزرگتر بالا نمی برد اما می توانید میزان زوم را به دلخواه خود تنظیم کنید.

Align Layers: با استفاده از این قسمت می توانید لایه (های) خود را در مرکز اسلایدر یا در اطراف و گوشه ها قرار دهید.

Undo/Redo: اگر می خواهید تغییرات ناخواسته/غیر عمدی را خنثی سازی کنید، از این قسمت استفاده کنید.

Slide Preview: شما می توانید پیش نمایشی از کل اسلایدر بصورت زنده داشته باشید. LayerSlider از ابتدا شروع می کند و اسلاید فعلی را ادامه می دهد. اما شما با استفاده از نشانگرها می توانید به اسلایدهای دیگر نیز حرکت کنید.

Layer Preview: از طریق این قسمت می توانید به صورت مداوم از لایه انتخاب شده پیش نمایش زنده داشته باشید. شما می توانید بدون ترک یا شروع مجدد جلسه پیش نمایش، محتوای لایه و تنظیمات را تغییر دهید.

Device View: شما می توانید هر لایه را بصورت جداگانه کنترل کنید که آیا در یک دستگاه خاص به درستی نمایش داده می شود یا خیر. این ویژگی برای ساخت طرح بندی های مختلف از همان اسلایدر در صفحه های کوچکتر با پنهان کردن و نمایش دادن لایه های مختلف به صورت پویا مفید است. کافی است روی دستگاه مورد نظر خود برای پیش نمایش کلیک کنید.

پشتیبانی از دستگاه های مختلف

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

جاسازی کردن فیلم ها

LayerSlider از یوتیوب،Vimeo  و ویدیو/صوت HTLM5 خود میزبان پشتیبانی می کند. بسیاری از ویژگی ها مانند تنظیم پخش خودکار، پیش نمایش تصویر، میزان صدا و سایر کنترل ها در این افزونه یکپارچه سازی شده است. همچنین مکث و از سرگیری نمایش اسلایدها به طور خودکار انجام می شود.

فقط کافی است نوع لایه Video / Audio را برای جاسازی مطالب چندرسانه ای انتخاب کنید.

برای فیلم های YouTube و Vimeo باید کد جاسازی شده را از وب سایت آنها کپی کرده و در قسمت متن بچسبانید. در غیر این صورت بر روی دکمه Choose Media  کلیک کنید تا ویدئو یا صوت خود میزبان HTML5 اضافه شود.

برای استفاده از ویدیو / صوت خود میزبان HTML5، باید از قالب های رسانه ای پشتیبانی شده استفاده کنید. توصیه می شود از MP3 یا AAC در MP4 برای صدا استفاده کنید و از VP8 + Vorbis در WebM یا H.264 + MP3 / AAC در MP4 برای ویدئو استفاده کنید. فرمت های پشتیبانی شده ممکن است بین مرورگرها متفاوت باشند، اما در صورت لزوم می توانید با نگه داشتن کلید Ctrl / Cmd و انتخاب چندین آیتم از کتابخانه رسانه وردپرس خود ، چندین فرمت را ارائه دهید.

در حال حاضر افزونه LayerSlider از سایر پخش کننده های رسانه پشتیبانی نمی کند زیرا API های جداگانه خود را برای کنترل پخش رسانه دارند. با این حال ، کاربران با تجربه توسعه وب می توانند از LayerSlider API برای شناسایی رویدادهای اسلایدر استفاده کرده و کد های سفارشی را برای کنترل پخش کننده های رسانه های شخص ثالث اجرا کنند.

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

اطمینان حاصل کنید که شورت کد های وردپرس یا دیگر محتوهای تعاملی (مانند جاسازی نقشه های Google ، اسکریپت های سفارشی و غیره) را به یک لایه HTML اضافه کنید.

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

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

توجه داشته باشید که در ویرایشگر گوتنبرگ وردپرس باید از بلوک کد کوتاه برای وارد کردن شورت کدها استفاده کنید.

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.