ধাপ ১: ফোল্ডার এবং ফাইল তৈরি
- ফোল্ডার তৈরি করুন:
wp-content/plugins/scroll-to-top-vanilla-jsনামে একটি ফোল্ডার তৈরি করুন।
- মেইন প্লাগিন ফাইল তৈরি করুন:
scroll-to-top-vanilla-js.phpনামে একটি ফাইল তৈরি করুন এবং নিচের কোড যুক্ত করুন:
scroll-to-top-vanilla-js/
├── scroll-to-top-vanilla-js.php
├── scroll-to-top.js
├── scroll-to-top.css
└── images/
└── scroll-to-top.png
ফোল্ডার স্ট্রাকচার বিশদ:
- scroll-to-top-vanilla-js/
- প্লাগিনের মূল ফোল্ডার।
- scroll-to-top-vanilla-js.php
- প্লাগিনের মূল PHP ফাইল যেখানে প্লাগিনের হেডার তথ্য এবং এনকিউ করা স্ক্রিপ্ট ও স্টাইল রয়েছে।
- scroll-to-top.js
- ভ্যানিলা জাভাস্ক্রিপ্ট ফাইল যা স্ক্রল টু টপ বাটনের কার্যকারিতা প্রদান করে।
- scroll-to-top.css
- CSS ফাইল যা বাটনের স্টাইলিং জন্য ব্যবহৃত হয়।
ফোল্ডারের প্রতিটি ফাইলের কোড:
scroll-to-top-vanilla-js.php:
<?php
/*
Plugin Name: Scroll to Top VanillaJS
Plugin URI: http://example.com/scroll-to-top-vanilla-js
Description: একটি বেসিক ওয়ার্ডপ্রেস প্লাগিন যা স্ক্রল টু টপ ফাংশনালিটি যোগ করে।
Version: 1.0
Author: আপনার নাম
Author URI: http://example.com
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scroll-to-top-vanilla-js
Domain Path: /languages
*/
// স্ক্রিপ্ট এবং স্টাইল এনকিউ করার ফাংশন
function scroll_to_top_enqueue_scripts() {
wp_enqueue_script('scroll-to-top-js', plugin_dir_url(__FILE__) . 'scroll-to-top.js', array(), '1.0', true);
wp_enqueue_style('scroll-to-top-css', plugin_dir_url(__FILE__) . 'scroll-to-top.css');
}
add_action('wp_enqueue_scripts', 'scroll_to_top_enqueue_scripts');
// কোড ব্লক সঠিকভাবে বন্ধ করা হচ্ছে
?>
scroll-to-top.js:
// স্ক্রল টু টপ বাটন তৈরি
document.addEventListener('DOMContentLoaded', function() {
let scrollToTopBtn = document.createElement('button');
scrollToTopBtn.id = 'scrollToTopBtn';
document.body.appendChild(scrollToTopBtn);
// স্ক্রল ইভেন্ট হ্যান্ডলার
window.onscroll = function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollToTopBtn.style.display = "block";
} else {
scrollToTopBtn.style.display = "none";
}
};
// ক্লিক ইভেন্ট হ্যান্ডলার
scrollToTopBtn.addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
scroll-to-top.css:
/* এখানে কাস্টম CSS স্টাইল যোগ করা যাবে */
#scrollToTopBtn {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
width: 50px;
height: 50px;
background-image: url('images/scroll-to-top.png');
background-size: cover;
border: none;
border-radius: 50%;
cursor: pointer;
}