نحوه ایجاد یک اسلایدر پویا در وردپرس

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

محتوای پویا چیست؟

محتوای پویا محتوایی است که در یک صفحه وب بسته به داده‌های وب‌سایت یا رفتار کاربر تغییر می‌کند.

برعکس محتوای پویا، محتوای ثابت است. با محتوای ثابت، آن صفحه وب بدون توجه به کاربر یا زمان، دقیقاً یکسان باقی می‌ماند.

یک مثال خوب از جایی که تمایل به یافتن محتوای ثابت دارید، در صفحات فرود است که معمولاً همان عنوان، توضیحات و فراخوان اقدام را بدون توجه به اینکه چه کسی روی آن کلیک می‌کند نمایش می‌دهد.

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

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

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

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

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

بهترین راه حل این است که یک الگویی برای نمایش پست های سفارشی خود ایجاد کنید در این قالب، می توانید محتوای پویا برای عنوان پست، تصاویر، قیمت و موارد دیگر اضافه کنید. به این معنی که اکنون وقتی روی هر پست تور مختلف کلیک می کنید، محتوا تغییر می کند. به عنوان مثال، یک پست تور در مورد Semuc Champey حاوی محتوایی در مورد Semuc Champey است در حالی که یک پست تور در مورد دره پادشاهان…خوب شما این ایده را دریافت می کنید.

چه نوع لغزنده پویا وجود دارد؟

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

1. لغزنده تصویر پویا

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

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

ساده ترین راه برای انجام این کار، ایجاد یک نوار لغزنده تصویر پویا است. در حالی که یک نوار لغزنده تصویر ثابت همان تصاویر را نمایش می‌دهد، چه روی «مرکز تناسب اندام مرکز شهر» یا «تعادل بدنسازی» کلیک کنید، یک نوار لغزنده تصویر پویا تصاویری را که به هر یک از آن پست‌ها در قسمت پشتی اضافه کرده‌اید نشان می‌دهد.

2. لغزنده محتوای پست پویا

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

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

ممکن است از خود بپرسید که چرا این محتوا باید پویا باشد؟ هر اسلاید روی نوار لغزنده ما را به عنوان یک صفحه در نظر بگیرید. همانطور که «صفحه» هر نوار لغزنده را ورق می‌زنید، می‌خواهید محتوا برای نمایش اطلاعات مربوط به یک باشگاه متفاوت تغییر کند.

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

بهترین افزونه ها برای ایجاد لغزنده پویا کدامند؟

تعدادی پلاگین لغزنده عالی وجود دارد که تضمین می‌کند می‌توانید هر دو نوع لغزنده پویا را بدون در نظر گرفتن توانایی کدنویسی خود وارد کنید.

1. مجموعه ابزار

اولین پلاگین یکی از همه کاره ترین منابع موجود برای ساخت وب سایت های سفارشی، Toolset است.

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

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

2. انقلاب لغزنده

Slider Revolution یک افزونه عالی است اگر می‌خواهید تا حد امکان گزینه‌های زیادی را برای سفارشی کردن اسلایدرهای خود داشته باشید. یکی از این گزینه‌ها، لغزنده‌های پویا هستند.

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

Slider Revolution بیش از 200 قالب ارائه می‌دهد تا بتوانید فوراً وب‌سایت‌هایی حاوی لغزنده بسازید.

3. Smart Slider 3

Smart Slider 3 به شما امکان می دهد لغزنده های پویا را با محتوای تولید شده از منابع متعددی از جمله پست ها و صفحات وردپرس، محصولات WooCommerce و کانال های رسانه های اجتماعی از جمله فیس بوک ایجاد کنید.

با نسخه حرفه ای Smart Slider 3 می توانید نمونه های لغزنده از پیش تعریف شده خود را وارد کنید و همچنین می توانید از 20 منبع در وردپرس ترسیم کنید.

نحوه ایجاد یک لغزنده تصویر پویا

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

برای یک آموزش ویدیویی گام به گام دقیق، می‌توانید راهنمای اسلایدرهای پویا برای الگوها.

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

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

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

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

در زیر می‌توانید ببینید که چگونه می‌توانید یک نوع پست سفارشی با Toolset ایجاد کنید و به سادگی به نام آن اضافه کنید.

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

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

با Toolset، می توانید فیلدهای سفارشی تکراری ایجاد کنید که چندین داده را ذخیره می کند. در این صورت، ما قادر خواهیم بود چندین تصویر را ذخیره کرده و همه آنها را در نوار لغزنده تصویر پویا نمایش دهیم.

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

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

2. افزودن رسانه به پست ها

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

برای آپلود تصاویر، به سادگی روی دکمه “+” کلیک کنید.

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

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

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

برای شروع، بلوک لغزنده تصویر Toolset را در قالب قرار می دهم. از آنجایی که ما قبلاً تصاویر خود را در گالری عکس Gym آپلود کرده‌ایم، می‌توانیم منابع دینامیک را انتخاب کرده و فیلد سفارشی را انتخاب کنیم که می‌خواهیم تصاویر را از آن بکشیم.

نوار لغزنده شما تصاویری را که آپلود می کنید در فیلد سفارشی نمایش می دهد.

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

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

نحوه ایجاد اسلایدر با محتوای پست پویا

علاوه بر تصاویر، می توانید چندین فیلد را نیز به نوار لغزنده اضافه کنید (از جمله فیلدهای سفارشی مانند قیمت، رتبه بندی، دکمه، گزیده و غیره). مجموعه ابزار همچنین یک ویدیوی کامل گام به گام برای ایجاد اسلایدرهای سفارشی ارائه می دهد.

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

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

2. منابع دینامیک را به اسلایدر

اضافه کنید

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

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

همچنین باید نوع پستی که منبع محتوای شما خواهد بود را انتخاب کنید.

شما اکنون نمای خود را ایجاد کرده اید. تعدادی ویرایش وجود دارد که می توانید در نوار کناری سمت راست اسلایدر خود انجام دهید. ابتدا باید بلوک View را از گزینه Block navigation در بالا سمت چپ انتخاب کنید.

با ساختاری که برای نوار لغزنده تنظیم شده است، می توانید یک بلوک ظرف را برای افزودن محتوا وارد کنید. به عنوان مثال، می‌توانید پس‌زمینه، تصاویر، متن، قیمت‌ها، نظرات را اضافه کنید – تقریباً هر چیزی که یک فیلد سفارشی برای آن اضافه کرده‌اید. هنگام درج عناصر، به سادگی منابع پویا را انتخاب کنید و فیلد سفارشی خود را بر اساس آن انتخاب کنید، سپس مطابق با نیازهای خود (تغییر رنگ، فونت، مکان، و غیره) آن را سفارشی کنید.

3. از اسلایدر

خود استفاده کنید

اکنون می‌توانیم نوار لغزنده را ذخیره کرده و آن را در قسمت جلویی بررسی کنیم. بر اساس آنچه اضافه کرده اید، باید یک نوار لغزنده محتوای پویا خیره کننده ببینید.

درست مانند اسلایدرهای تصویر پویا، در مورد اسلایدرهای محتوای پویا، اکثر اسلایدرهای وردپرس دارای گزینه های مشابهی هستند. Toolset یک جعبه انتخاب منبع محتوای پویا را ارائه می‌کند، Slider Revolution شامل ماژول‌های محتوای پویا داخلی و غیره است. در بیشتر موارد باید ماژول محتوای انتخابی خود را وارد کنید تا محتوای پویا را به لغزنده‌های خود اضافه کنید.

از امروز شروع به ساخت لغزنده پویا خود کنید!

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