آموزش ایجاد ابزارک Fade In the Last در وردپرس با استفاده از jQuery

شاید برای شما هم سوال شده باشد که چگونه می توانید ابزارک Fade In the Last را به سایدبار قالب خود اضافه کنید. از این افکت jQuery در بسیاری از سایت ها و وبلاگ های معروف استفاده شده است. وقتیکه کاربر به پایین صفحه میرود، آخرین ابزارک موجود در سایدبار ظاهر می شود. این کار باعث می شود تا ابزارک مذکور بیشتر از هر موقع توجه کاربران را به خود جلب کرده و باعث افزایش نرخ کلیک در سایت شما شود. در این مطلب میخواهیم به شما نشان دهیم که چگونه می توانید ابزارک Fade In the Last را به سایدبار قالب خود اضافه کنید.

در زیر می توانید پیش نمایشی از نتیجه کار را ببینید:

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

گام اول: اضافه کردن جاوااسکریپت مربوط به افکت Fadein

ابتدا شما میبایست کد جی کوئری زیر را به قالب سایت وردپرس خود به عنوان فایلی مجزا اضافه کنید. کافی است فایل جدیدی در ویرایشگر سیستم خود مانند Notepad ایجاد کرده و سپس کدهای زیر را درون آن قرار داده و آنرا تحت عنوان wpb_fadein_widget.js با فرمت جاوااسکریپت ذخیره کنید.

jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/

var sidebarElement = $('div#secondary');


// Check if the sidebar exists
if ($(sidebarElement).length > 0) {

// Get the last widget in the sidebar, and its position on screen

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;

// Hide the last widget
$(lastWidget).hide();

// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {

// If the widget has been displayed, we don't need to keep doing a check.

if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;
}
}
});
}
});

مهم ترین خط کد بالا، عبارت زیر است:

var sidebarElement = $('div#secondary');

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

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

در سورس کد، آیدی div ای که سایدبار قالب را شامل می شود، مشاهده خواهید کرد.

بعد از آن شما میبایست به هاست خود مراجعه کرده و با استفاده از File Manager فایل مذکور را در پوشه قالب خود آپلود کنید. اگر پوشه قالب شما فاقد پوشه js است، قبل از آپلود فایل میبایست پوشه ای با نام js ایجاد کرده و سپس فایل مذکور را در آن آپلود کنید.

گام دوم: فراخوانی جاوااسکریپت در قالب وردپرس

حالا که اسکرپیت جی کوئری آماده است، نوبت اضافه کردن آن به قالب است. برای این کار کافی است کد زیر را به فایل functions.php قالب خود اضافه کنید:

wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

کار تمام است و شما حالا می توانید ابزارکی را که میخواهید در سایدبار قالبتان با افکت مذکور نمایش داده شود را اضافه کنید.

گام سوم: ابزارک مذکور را چسبان (sticky) کنید

معمولا کاربران دوست دارند که وقتیکه ابزارک مذکور با افکت Fadein نمایش داده شد، با اسکرول کردن صفحه توسط کاربران نیز ابزارک مذکور فیکس و چسبان باشد. اسم این کار ابزارک شناور یا ابزارک چسبان است.

اگر به کد جی کوئری که در بالا به آن اشاره شد، نگاه کرده باشید، متوجه خواهید شد که که کلاس CSS ای به نام wpbstickywidget به ابزارک بعد از ظاهر شدن اضافه می شود. شما می توانید از این کلاس CSS برای چسبان کردن ابزارک خود بعد از ظاهر شدن استفاده کنید. تمام کاری که نیاز است انجام دهید، اضافه کردن کد زیر به فایل style.css قالبتان است:

.wpbstickywidget {
position:fixed;
top:0px;
}