এলিমেন্টরে কাস্টম জাভাস্ক্রিপ্ট যোগ করুন: পৃষ্ঠা এবং এলিমেন্ট লেভেল JS
কাস্টম JS এক্সটেনশন, মাস্টার অ্যাডনস প্রো-এর অংশ, আপনাকে এলিমেন্টরের ভিতরে একটি জাভাস্ক্রিপ্ট ক্ষেত্র দেয়। পৃষ্ঠা সেটিংস থেকে একটি সম্পূর্ণ পৃষ্ঠায় কোড যোগ করুন, অথবা এটির উন্নত ট্যাব থেকে একটি একক উইজেট, বিভাগ বা কন্টেইনারে সংযুক্ত করুন। থিম ফাইল সম্পাদনা না করে বা এইচটিএমএল উইজেটে স্ক্রিপ্ট স্টাফিং না করে ছোট ইন্টারঅ্যাকশন, ফর্ম টুইক বা ট্র্যাকিং ইভেন্টের জন্য এটি ব্যবহার করুন।

প্রতিটি পৃষ্ঠার জন্য একটি ডেডিকেটেড কোড স্পেস
এইচটিএমএল উইজেটগুলিতে স্ক্রিপ্টগুলি স্টাফ করা বা গ্লোবাল ফাইলগুলিতে ছড়িয়ে দেওয়া বন্ধ করুন। এই এক্সটেনশনটিতে একটি ডেডিকেটেড কাস্টম JS ক্ষেত্র যোগ করা হয়েছে Page Settings > Advanced tab। আপনি এখানে যে কোনো কোড লিখছেন তা শুধুমাত্র এই নির্দিষ্ট পৃষ্ঠা বা পোস্টে চলে। এটি এক-অফ স্ক্রিপ্ট, A/B পরীক্ষা ট্র্যাকিং, বা অনন্য ইন্টারেক্টিভ উপাদানগুলি পরিচালনা করার সংগঠিত উপায়।
- ক্লিন সেপারেশন: পৃষ্ঠা-নির্দিষ্ট স্ক্রিপ্টগুলিকে আপনার সাইট-ওয়াইড কোড থেকে বিচ্ছিন্ন রাখুন। অন্য পৃষ্ঠা ভাঙ্গার ঝুঁকি নেই।
- সহজ অ্যাক্সেস: উইজেট প্যানেলের মাধ্যমে খনন না করে পৃষ্ঠা সেটিংসে অবিলম্বে আপনার কোড খুঁজুন।
- অন্তর্নির্মিত সর্বোত্তম অনুশীলন: ক্ষেত্রটি স্বয়ংক্রিয়ভাবে পরিচালনা করে
$(document).ready()আপনার জন্য, তাই আপনি সরাসরি আপনার মূল যুক্তি লিখতে পারেন।
পৃষ্ঠা-স্তর এবং উপাদান-স্তরের জাভাস্ক্রিপ্ট
পৃষ্ঠা-স্তরের কোড পৃষ্ঠা সেটিংস, অ্যাডভান্সড, কাস্টম জেএস-এ থাকে এবং শুধুমাত্র সেই পৃষ্ঠায় চলে। এলিমেন্ট-লেভেল কোড যেকোনো উইজেট, কলাম, বিভাগ বা কন্টেইনারের অ্যাডভান্সড ট্যাবে থাকে। উপাদান-স্তরের কোডে, শব্দ selector সেই উপাদানটির CSS ক্লাসের জন্য অদলবদল করা হয়েছে, তাই স্ক্রিপ্টটি শুধুমাত্র সেই উপাদানটিকে স্পর্শ করে।
- কোন <স্ক্রিপ্ট> ট্যাগ এবং কোন নথি প্রস্তুত মোড়ক নেই: কোডটি মোড়ানো আছে
jQuery(document).readyতোমার জন্য, এবং$কাজ করে। - বিষয়বস্তু লোড হওয়ার পরে, পৃষ্ঠার ফুটারে স্ক্রিপ্টগুলি মুদ্রণ করে।
- কোডটি লাইভ পৃষ্ঠায় চলে, এলিমেন্টর এডিটর প্রিভিউয়ের ভিতরে নয়, তাই সংরক্ষণ করার পরে প্রকাশিত পৃষ্ঠাটি পরীক্ষা করুন।
- শব্দ নির্বাচকের প্রতিটি উদাহরণ উপাদান-স্তরের কোডে প্রতিস্থাপিত হয়। ব্যবহার
$('selector')বরংdocument.querySelectorসেখানে।
এলিমেন্টরে কাস্টম জাভাস্ক্রিপ্ট কিভাবে যোগ করবেন
এই পদক্ষেপগুলি অনুমান করে যে মাস্টার অ্যাডনস প্রো সক্রিয় এবং আপনার ওয়ার্ডপ্রেস ভূমিকা আনফিল্টার করা HTML প্রকাশ করতে পারে, যা অ্যাডমিনিস্ট্রেটররা ডিফল্টরূপে করতে পারেন।
- আপনার ড্যাশবোর্ডে, মাস্টার অ্যাডঅন-এ যান, এক্সটেনশন ট্যাব খুলুন, কাস্টম JS চালু করুন এবং সংরক্ষণ করুন।
- Elementor দিয়ে পৃষ্ঠাটি সম্পাদনা করুন।
- পুরো পৃষ্ঠার জন্য, পৃষ্ঠা সেটিংস খুলুন, তারপরে উন্নত, তারপরে কাস্টম JS। একটি উপাদানের জন্য, এটি নির্বাচন করুন এবং এর উন্নত ট্যাব খুলুন।
- <script> ট্যাগ ছাড়াই আপনার কোড পেস্ট করুন।
- পৃষ্ঠাটি আপডেট করুন এবং লাইভ URL এ পরীক্ষা করুন।
তিনটি এলিমেন্টর কাস্টম JS উদাহরণ
এগুলোর যেকোনো একটিকে কাস্টম JS ফিল্ডে পেস্ট করুন এবং আপনার পৃষ্ঠার সাথে মেলে ক্লাসের নাম পরিবর্তন করুন।
1। স্ক্রোল করার পরে হেডারে একটি ক্লাস যোগ করুন (পৃষ্ঠা স্তর)
$(window).on('scroll', function () {
$('.site-header').toggleClass('is-scrolled', $(window).scrollTop() > 80);
});2। একটি উপাদান ক্লিক করা হলে একটি ক্লাস টগল করুন (উপাদান স্তর)
$('selector').on('click', function () {
$(this).toggleClass('is-open');
});3। একটি বোতামে ক্লিক করা হলে একটি Google Analytics ইভেন্ট পাঠান (পৃষ্ঠা স্তর)
$('.cta-button a').on('click', function () {
if (typeof gtag === 'function') {
gtag('event', 'cta_click', { location: 'pricing' });
}
});তুলনামূলকভাবে এলিমেন্টরে জাভাস্ক্রিপ্ট যোগ করার উপায়
তিনটি সাধারণ রুট আছে। স্ক্রিপ্টটি কোথায় চালানো দরকার তার উপর সঠিকটি নির্ভর করে। আপনার যদি একটি উপাদানের জন্য শৈলীর প্রয়োজন হয়, বিনামূল্যে কাস্টম CSS এক্সটেনশন একইভাবে কাজ করে।
| এইচটিএমএল উইজেট | এলিমেন্টর প্রো কাস্টম কোড | মাস্টার অ্যাডঅন কাস্টম জেএস | |
|---|---|---|---|
| পরিকল্পনা | ফ্রি এলিমেন্টর | এলিমেন্টর প্রো | মাস্টার অ্যাডনস প্রো |
| ব্যাপ্তি | উইজেটটি যে পৃষ্ঠায় বসে | সাইট-ব্যাপী, প্রদর্শন শর্ত সহ | এক পৃষ্ঠা, বা একটি উপাদান |
| যেখানে লিখবেন | ক্যানভাসে একটি উইজেটের ভিতরে | ড্যাশবোর্ডে একটি কাস্টম কোড স্ক্রীন | পৃষ্ঠা সেটিংস, বা উপাদানের উন্নত ট্যাব |
| স্ক্রিপ্ট ট্যাগ | প্রয়োজন | প্রয়োজন | প্রয়োজন নেই |
| একটি উপাদান লক্ষ্য করুন | নির্বাচক নিজেই লিখুন | নির্বাচক নিজেই লিখুন | নির্বাচক কীওয়ার্ড ব্যবহার করুন |
কাস্টম JS-এর জন্য প্রায়শই জিজ্ঞাসিত প্রশ্ন
কখন আমি এটি একটি HTML উইজেট বা আমার থিমের ফাংশন।php এর পরিবর্তে ব্যবহার করব?
একটি ক্যালকুলেটর, একটি স্ক্রোল প্রভাব বা একটি ক্লিক ইভেন্টের মতো একটি পৃষ্ঠা বা একটি উপাদানের অন্তর্গত স্ক্রিপ্টগুলির জন্য এটি ব্যবহার করুন৷ প্রতিটি পৃষ্ঠার জন্য যে কোডের প্রয়োজন, একটি সাইট-ব্যাপী বিকল্প যেমন আপনার থিম বা একটি কোড স্নিপেট প্লাগইন একটি ভাল হোম। এইচটিএমএল উইজেটও কাজ করে, কিন্তু স্ক্রিপ্টগুলি ক্যানভাস জুড়ে ছড়িয়ে ছিটিয়ে থাকে এবং পরে মিস করা সহজ।
কোডটি কি মিনিফাইড বা পারফরম্যান্সের জন্য অপ্টিমাইজ করা হয়েছে?
না। আপনি এটি লেখার সাথে সাথে কোডটি যোগ করা হয়েছে, তাই এটি সংক্ষিপ্ত এবং পরিপাটি রাখুন। মাস্টার অ্যাডনস যে পরিবর্তনটি করে তা হল সেই উপাদানটির CSS ক্লাসের জন্য উপাদান-স্তরের কোডে নির্বাচক কীওয়ার্ড অদলবদল করা।
আমি ভাঙা জাভাস্ক্রিপ্ট লিখলে কি হবে? এটা কি আমার পুরো পৃষ্ঠা ভেঙ্গে দেবে?
এটা পারে। একটি সিনট্যাক্স ত্রুটি সেই পৃষ্ঠার অন্যান্য স্ক্রিপ্টগুলিকে চালানো থেকে থামাতে পারে। প্রথমে আপনার ব্রাউজার কনসোলে কোডটি পরীক্ষা করুন এবং পৃষ্ঠাটি গুরুত্বপূর্ণ হলে এটি একটি স্টেজিং সাইটে চেষ্টা করুন৷।
আমি কি ডায়নামিক ডেটা বা এলিমেন্টরের ভেরিয়েবলের সাথে এটি ব্যবহার করতে পারি?
সরাসরি, JS ক্ষেত্রের মধ্যে নয়। যাইহোক, আপনি জাভাস্ক্রিপ্ট লিখতে পারেন যা গতিশীল ডেটা দ্বারা জনবহুল পৃষ্ঠার উপাদানগুলির সাথে যোগাযোগ করে। উদাহরণস্বরূপ, আপনি একটি স্ক্রিপ্ট লিখতে পারেন যা একটি গতিশীলভাবে ভরা শিরোনাম থেকে পাঠ্য পড়ে। আপনি সেই উপাদানগুলিকে লক্ষ্য করতে সাধারণ জাভাস্ক্রিপ্ট নির্বাচক ব্যবহার করবেন।

ট্রেন্ডিং এলিমেন্টর উইজেট এবং এক্সটেনশন
কম সময়ে অত্যাধুনিক ওয়েবসাইট তৈরি করুন।

গ্লাসমরফিজম

ধারক অতিরিক্ত

নিদর্শন

পোস্ট/পেজ ডুপ্লিকেটর


