اخیراً یکی از کاربران ما از ما در مورد چگونگی افزودن محو شدن اثر برای آخرین ابزارک در نوار کناری س askedال کرده است. از این افکت محبوب jQuery در بسیاری از وب سایت ها و وبلاگ های معروف استفاده می شود. با پیمایش کاربر به پایین صفحه ، آخرین ابزارک در نوار کناری محو شده و قابل مشاهده می شود. این انیمیشن ویجت را چشم نواز و قابل توجه می کند که میزان کلیک را به طرز چشمگیری افزایش می دهد. در این مقاله ، ما به شما نشان خواهیم داد که چگونه در آخرین ابزارک نوار کناری در وردپرس با استفاده از jQuery محو شوید.
در زیر نمایشی از شکل ظاهری آن آورده شده است:
در این آموزش ، پرونده های تم خود را اصلاح خواهید کرد. توصیه می شود از از موضوع خود پشتیبان تهیه کنید قبل از ادامه کار
مرحله 1: افزودن JavaScript برای Fadein Effect
ابتدا باید کد jQuery را به عنوان یک پرونده جاوا اسکریپت جداگانه به قالب وردپرس خود اضافه کنید. با باز کردن یک پرونده خالی در یک ویرایشگر متن مانند Notepad شروع کنید. سپس این پرونده خالی را به عنوان wpb_fadein_widget.js در دسک تاپ خود ذخیره کرده و کد زیر را درون آن جای گذاری کنید.
jQuery (سند). آماده (تابع ($) {
/ **
* پیکربندی
* ظرف نوار کناری شما به عنوان مثال کنار ، # نوار کناری و غیره
* /
var sidebarElement = $ ('div # ثانویه')؛
// وجود نوار کناری را بررسی کنید
if ($ (نوار کناریElement). طول> 0) {
// آخرین ویجت را در نوار کناری و موقعیت آن روی صفحه دریافت کنید
var widgetDisplayed = false؛
var lastWidget = $ ('. widget: last-child'، $ (sidebarElement))؛
var lastWidgetOffset = $ (lastWidget) .offset (). top -100؛
// آخرین ویجت را پنهان کنید
$ (lastWidget) .hide ()؛
// بررسی کنید که آیا پیمایش کاربر به بالای آخرین ابزارک رسیده است یا خیر
$ (سند). پیمایش (تابع () {
// اگر ویجت نمایش داده شده است ، نیازی به ادامه بررسی نداریم.
if (! widgetDisplayed) {
if ($ (این) .scrollTop ()> lastWidgetOffset) {
$ (lastWidget) .fadeIn ('slow'). addClass ('wpbstickywidget')؛
widgetDisplayed = درست است؛
}
}
})
}
})
مهمترین خط در این کد var sidebarElement = $ ('div # second')؛ است.
این شناسه div است که حاوی نوار کناری شما است. از آنجا که هر موضوع ممکن است از تقسیم بندی های مختلف کانتینر نوار کناری استفاده کند ، باید شناسه کانتینر مورد نظر خود را برای نوار کناری پیدا کنید.
با استفاده از ابزار inspect element در Google Chrome می توانید این موضوع را دریابید. کافیست روی نوار کناری خود در Google Chrome کلیک راست کرده و سپس Inspect Element را انتخاب کنید.
در کد منبع ، می توانید تقسیم ظرف نوار کناری خود را مشاهده کنید. به عنوان مثال ، موضوع پیش فرض Twenty Twelve از second استفاده می کند ، و Twenty Thirteen از terarity به عنوان ID برای محفظه نوار کناری استفاده می کند. شما باید کد کد ثانویه را با شناسه div نوار کناری خود جایگزین کنید.
در مرحله بعدی شما باید از سرویس گیرنده FTP برای بارگذاری این پرونده در پوشه js داخل فهرست قالب WordPress خود. اگر فهرست زمینه شما پوشه js ندارد ، پس باید آن را با کلیک راست و انتخاب “ایجاد فهرست جدید” در سرویس گیرنده FTP خود ایجاد کنید.
مرحله 2: جاوا اسکریپت خود را در قالب وردپرس ایجاد کنید h4>
اکنون که اسکریپت jQuery شما آماده است ، وقت آن است که آن را در طرح زمینه خود اضافه کنید. ما از روش مناسب افزودن جاوا اسکریپت در طرح زمینه خود ، بنابراین کافیست کد زیر را در پرونده functions.php طرح زمینه خود وارد کنید.
wp_enqueue_script ('stickywidget'، get_template_directory_uri (). '/js/wpb-fadein-widget.js'، array ('jquery')، '1.0.0'، true)؛
این همه ، اکنون می توانید یک ابزارک در نوار کناری خود اضافه کنید که می خواهید با افکت fadein نشان داده شود و سپس به وب سایت خود مراجعه کنید تا آن را در عمل مشاهده کنید.
مرحله 3: مهمترین عنصر مهم پس از کم رنگ شدن مهم h4>
یک ویژگی غالباً دلخواه با محو شدن این است که آخرین ابزارک نوار کناری را به عنوان پیمایش کاربر پیمایش کنید. به این ویجت شناور یا ویجت چسبنده گفته می شود.
اگر به کد jQuery بالا نگاه کنید ، متوجه خواهید شد که پس از محو شدن ، یک کلاس CSS wpbstickywidget به ویجت اضافه کردیم. می توانید از این کلاس CSS استفاده کنید تا آخرین ویجت شما پس از کمرنگ شدن چسبناک شود. تمام کاری که شما باید انجام دهید اینست که این CSS را در صفحه سبک طرح زمینه خود قرار دهید.
.wpbstickywidget {
موقعیت: ثابت
بالا: 0px؛
}
در صورت تمایل می توانید CSS را برای رفع نیازهای خود اصلاح کنید. برای برجسته تر نشان دادن ویجت می توانید رنگ پس زمینه یا قلم ها را تغییر دهید. اگر می خواهید حتی می توانید پیمایش صاف به اثر برتر در کنار آخرین ابزارک شما که به شما امکان می دهد سریع به عقب برگردند.
امیدواریم این مقاله به شما کمک کند تا محتویات کمتری را به آخرین ابزارک در نوار کناری وردپرس خود اضافه کنید. برای کسب اطلاعات بیشتر در مورد jQuery ، بهترین آموزشهای jQuery برای وردپرس.
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و Google+ .
منبع:
https://www.wpbeginner.com/wp-themes/how-to-fade-in-the-last-sidebar-widget-in-wordpress-using-jquery/.