วิธีจางหายไปในวิดเจ็ตแถบด้านข้างสุดท้ายใน WordPress โดยใช้ jQuery

---

เมื่อเร็ว ๆ นี้หนึ่งในผู้ใช้ของเราถามเราเกี่ยวกับวิธีเพิ่มเอฟเฟกต์จางลงในวิดเจ็ตสุดท้ายในแถบด้านข้าง เอฟเฟกต์ jQuery ยอดนิยมนี้ใช้กับเว็บไซต์และบล็อกที่มีชื่อเสียงหลายแห่ง เมื่อผู้ใช้เลื่อนหน้าลง วิดเจ็ตสุดท้ายในแถบด้านข้างจะค่อยๆ ปรากฏขึ้นและมองเห็นได้ แอนิเมชันทำให้วิดเจ็ตดูสะดุดตาและสังเกตเห็นได้ชัดเจน ซึ่งเพิ่มอัตราการคลิกผ่านอย่างมาก ในบทความนี้ เราจะแสดงวิธีจางหายไปในวิดเจ็ตแถบด้านข้างสุดท้ายใน WordPress โดยใช้ jQuery

ด้านล่างนี้เป็นการสาธิตว่าจะมีลักษณะอย่างไร:

ในบทช่วยสอนนี้ คุณจะแก้ไขไฟล์ธีมของคุณ ขอแนะนำให้คุณสำรองข้อมูลธีมของคุณก่อนดำเนินการต่อ

ขั้นตอนที่ 1: การเพิ่ม JavaScript สำหรับเอฟเฟกต์ Fadein

ก่อนอื่นคุณต้องเพิ่มคือโค้ด jQuery ในธีม WordPress ของคุณเป็นไฟล์ JavaScript แยกต่างหาก เริ่มต้นด้วยการเปิดไฟล์เปล่าในโปรแกรมแก้ไขข้อความ เช่น 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 ที่มีแถบด้านข้างของคุณ เนื่องจากแต่ละธีมอาจใช้ div คอนเทนเนอร์แถบด้านข้างที่แตกต่างกัน คุณจึงต้องค้นหา ID คอนเทนเนอร์ที่ธีมของคุณใช้สำหรับแถบด้านข้าง

คุณสามารถค้นหาได้โดยใช้เครื่องมือตรวจสอบองค์ประกอบใน Google Chrome เพียงคลิกขวาที่แถบด้านข้างของคุณใน Google Chrome จากนั้นเลือกตรวจสอบองค์ประกอบ

ในซอร์สโค้ด คุณจะเห็น div คอนเทนเนอร์แถบด้านข้างของคุณ ตัวอย่างเช่น ธีม Twenty Twelve เริ่มต้นใช้ secondary และ Twenty Thirteen ใช้ teritary เป็น ID สำหรับคอนเทนเนอร์แถบด้านข้าง คุณต้องแทนที่ secondary ด้วย ID ของ div คอนเทนเนอร์แถบด้านข้างของคุณ

ถัดไป คุณต้องใช้ไคลเอ็นต์ FTP เพื่ออัปโหลดไฟล์นี้ไปยังโฟลเดอร์ js ภายในไดเร็กทอรีธีม WordPress ของคุณ หากไดเรกทอรีธีมของคุณไม่มีโฟลเดอร์ js คุณจะต้องสร้างมันขึ้นมาโดยคลิกขวาและเลือก 'สร้างไดเรกทอรีใหม่' ในไคลเอนต์ FTP ของคุณ

ขั้นตอนที่ 2: จัดคิว JavaScript ของคุณในธีม WordPress

เมื่อสคริปต์ jQuery ของคุณพร้อมแล้ว ก็ถึงเวลาเพิ่มสคริปต์ลงในธีมของคุณ เราจะใช้วิธีการที่เหมาะสมในการเพิ่มจาวาสคริปต์ในธีมของคุณ ดังนั้นเพียงวางโค้ดต่อไปนี้ลงในไฟล์ Functions.php ของธีมของคุณ

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

เพียงเท่านี้ คุณสามารถเพิ่มวิดเจ็ตในแถบด้านข้างที่คุณต้องการให้ปรากฏพร้อมกับเอฟเฟกต์เฟดอิน จากนั้นไปที่เว็บไซต์ของคุณเพื่อดูการทำงานจริง

ขั้นตอนที่ 3: ทำให้วิดเจ็ตสุดท้ายเหนียวหลังจากที่เอฟเฟกต์จางลง

คุณลักษณะที่ต้องการบ่อยครั้งพร้อมเอฟเฟกต์จางลงคือการทำให้วิดเจ็ตแถบด้านข้างสุดท้ายเลื่อนในขณะที่ผู้ใช้เลื่อน สิ่งนี้เรียกว่าวิดเจ็ตแบบลอยหรือวิดเจ็ตแบบติดหนึบ

หากคุณดูโค้ด jQuery ด้านบน คุณจะสังเกตเห็นว่าเราเพิ่มคลาส CSS wpbstickywidget ให้กับวิดเจ็ตหลังจากที่เอฟเฟกต์จางหายไป คุณสามารถใช้คลาส CSS นี้เพื่อทำให้วิดเจ็ตสุดท้ายของคุณติดหนึบหลังจากที่มันจางหายไป สิ่งที่คุณต้องทำคือวาง CSS นี้ลงในสไตล์ชีตของธีมของคุณ

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

คุณสามารถปรับเปลี่ยน CSS ตามความต้องการของคุณได้ คุณสามารถเปลี่ยนสีพื้นหลังหรือแบบอักษรเพื่อทำให้วิดเจ็ตโดดเด่นยิ่งขึ้นได้ หากคุณต้องการ คุณสามารถเพิ่มการเลื่อนที่ราบรื่นไปยังเอฟเฟกต์ด้านบนถัดจากวิดเจ็ตสุดท้ายของคุณ ซึ่งจะทำให้ผู้ใช้สามารถเลื่อนกลับได้อย่างรวดเร็ว

เราหวังว่าบทความนี้จะช่วยคุณเพิ่มเอฟเฟกต์จางลงในวิดเจ็ตสุดท้ายในแถบด้านข้าง WordPress ของคุณ หากต้องการความดีของ jQuery เพิ่มเติม ลองดูบทช่วยสอน jQuery ที่ดีที่สุดสำหรับ WordPress

หากคุณชอบบทความนี้ โปรดติดตามช่อง YouTube ของเราสำหรับวิดีโอบทช่วยสอน WordPress คุณสามารถหาเราได้บน Twitter และ Google+