এলিমেন্টরে কাস্টম জাভাস্ক্রিপ্ট যোগ করুন: পৃষ্ঠা এবং এলিমেন্ট লেভেল JS

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

প্রতিটি পৃষ্ঠার জন্য একটি ডেডিকেটেড কোড স্পেস

প্রতিটি পৃষ্ঠার জন্য একটি ডেডিকেটেড কোড স্পেস

এইচটিএমএল উইজেটগুলিতে স্ক্রিপ্টগুলি স্টাফ করা বা গ্লোবাল ফাইলগুলিতে ছড়িয়ে দেওয়া বন্ধ করুন। এই এক্সটেনশনটিতে একটি ডেডিকেটেড কাস্টম JS ক্ষেত্র যোগ করা হয়েছে Page Settings > Advanced tab। আপনি এখানে যে কোনো কোড লিখছেন তা শুধুমাত্র এই নির্দিষ্ট পৃষ্ঠা বা পোস্টে চলে। এটি এক-অফ স্ক্রিপ্ট, A/B পরীক্ষা ট্র্যাকিং, বা অনন্য ইন্টারেক্টিভ উপাদানগুলি পরিচালনা করার সংগঠিত উপায়।

  • ক্লিন সেপারেশন: পৃষ্ঠা-নির্দিষ্ট স্ক্রিপ্টগুলিকে আপনার সাইট-ওয়াইড কোড থেকে বিচ্ছিন্ন রাখুন। অন্য পৃষ্ঠা ভাঙ্গার ঝুঁকি নেই।
  • সহজ অ্যাক্সেস: উইজেট প্যানেলের মাধ্যমে খনন না করে পৃষ্ঠা সেটিংসে অবিলম্বে আপনার কোড খুঁজুন।
  • অন্তর্নির্মিত সর্বোত্তম অনুশীলন: ক্ষেত্রটি স্বয়ংক্রিয়ভাবে পরিচালনা করে $(document).ready() আপনার জন্য, তাই আপনি সরাসরি আপনার মূল যুক্তি লিখতে পারেন।

পৃষ্ঠা-স্তর এবং উপাদান-স্তরের জাভাস্ক্রিপ্ট

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

  • কোন <স্ক্রিপ্ট> ট্যাগ এবং কোন নথি প্রস্তুত মোড়ক নেই: কোডটি মোড়ানো আছে jQuery(document).ready তোমার জন্য, এবং $ কাজ করে।
  • বিষয়বস্তু লোড হওয়ার পরে, পৃষ্ঠার ফুটারে স্ক্রিপ্টগুলি মুদ্রণ করে।
  • কোডটি লাইভ পৃষ্ঠায় চলে, এলিমেন্টর এডিটর প্রিভিউয়ের ভিতরে নয়, তাই সংরক্ষণ করার পরে প্রকাশিত পৃষ্ঠাটি পরীক্ষা করুন।
  • শব্দ নির্বাচকের প্রতিটি উদাহরণ উপাদান-স্তরের কোডে প্রতিস্থাপিত হয়। ব্যবহার $('selector') বরং document.querySelector সেখানে।

এলিমেন্টরে কাস্টম জাভাস্ক্রিপ্ট কিভাবে যোগ করবেন

এই পদক্ষেপগুলি অনুমান করে যে মাস্টার অ্যাডনস প্রো সক্রিয় এবং আপনার ওয়ার্ডপ্রেস ভূমিকা আনফিল্টার করা HTML প্রকাশ করতে পারে, যা অ্যাডমিনিস্ট্রেটররা ডিফল্টরূপে করতে পারেন।

  1. আপনার ড্যাশবোর্ডে, মাস্টার অ্যাডঅন-এ যান, এক্সটেনশন ট্যাব খুলুন, কাস্টম JS চালু করুন এবং সংরক্ষণ করুন।
  2. Elementor দিয়ে পৃষ্ঠাটি সম্পাদনা করুন।
  3. পুরো পৃষ্ঠার জন্য, পৃষ্ঠা সেটিংস খুলুন, তারপরে উন্নত, তারপরে কাস্টম JS। একটি উপাদানের জন্য, এটি নির্বাচন করুন এবং এর উন্নত ট্যাব খুলুন।
  4. <script> ট্যাগ ছাড়াই আপনার কোড পেস্ট করুন।
  5. পৃষ্ঠাটি আপডেট করুন এবং লাইভ 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-এর জন্য প্রায়শই জিজ্ঞাসিত প্রশ্ন

কাস্টম JS সম্পর্কে ব্যবহারকারীদের সবচেয়ে বেশি জিজ্ঞাসিত প্রশ্নগুলি জানুন এবং এক জায়গায় উত্তরগুলি খুঁজুন৷।
কখন আমি এটি একটি HTML উইজেট বা আমার থিমের ফাংশন।php এর পরিবর্তে ব্যবহার করব?

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

না। আপনি এটি লেখার সাথে সাথে কোডটি যোগ করা হয়েছে, তাই এটি সংক্ষিপ্ত এবং পরিপাটি রাখুন। মাস্টার অ্যাডনস যে পরিবর্তনটি করে তা হল সেই উপাদানটির CSS ক্লাসের জন্য উপাদান-স্তরের কোডে নির্বাচক কীওয়ার্ড অদলবদল করা।

আমি ভাঙা জাভাস্ক্রিপ্ট লিখলে কি হবে? এটা কি আমার পুরো পৃষ্ঠা ভেঙ্গে দেবে?

এটা পারে। একটি সিনট্যাক্স ত্রুটি সেই পৃষ্ঠার অন্যান্য স্ক্রিপ্টগুলিকে চালানো থেকে থামাতে পারে। প্রথমে আপনার ব্রাউজার কনসোলে কোডটি পরীক্ষা করুন এবং পৃষ্ঠাটি গুরুত্বপূর্ণ হলে এটি একটি স্টেজিং সাইটে চেষ্টা করুন৷।

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

টেমপ্লেট ভিউয়ার
ফেসবুক
টুইটার
হোয়াটসঅ্যাপ
কপি লিঙ্ক
এখন কেন
কাস্টম জেএস সহজ সতর্কতা
কাস্টম জেএস সহজ সতর্কতা

ট্রেন্ডিং এলিমেন্টর উইজেট এবং এক্সটেনশন

কম সময়ে অত্যাধুনিক ওয়েবসাইট তৈরি করুন।

মাস্টার অ্যাডঅন দ্বারা এলিমেন্টরের জন্য গ্লাসমরফিজম উপাদান

গ্লাসমরফিজম

হোম ফ্রি এলিমেন্টর গ্লাসমরফিজম এক্সটেনশন: ফ্রস্টেড গ্লাস ইফেক্ট ইন ওয়ান টগল গ্লাসমরফিজম হল ফ্রস্টেড।।।
বিস্তারিত দেখুন
সর্বোচ্চ প্রস্থের বাইরে প্রসারিত করুন

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

হোম আপনার অত্যাশ্চর্য ডিজাইন কঠোর ধারক সীমা সীমাবদ্ধ হচ্ছে ক্লান্ত? দ্বারা কন্টেইনার অতিরিক্ত।।।
বিস্তারিত দেখুন
প্যাটার্ন এক্সটেনশন

নিদর্শন

হোম মাস্টার অ্যাডঅন প্যাটার্নগুলির সাথে ফ্ল্যাট, স্ট্যাটিক কন্টেইনারগুলিকে দৃশ্যত আকর্ষক ডিজাইনের উপাদানগুলিতে রূপান্তর করুন।।।
বিস্তারিত দেখুন
একটি একক অ্যাকশনে সঠিক প্রতিলিপি

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

হোম আপনার কর্মপ্রবাহকে স্ট্রীমলাইন করুন এবং মাস্টার অ্যাডঅন পোস্ট/পেজ ডুপ্লিকেটরের সাথে পুনরাবৃত্তিমূলক সেটআপ দূর করুন। এই...
বিস্তারিত দেখুন
অগ্রগতি বার এক্সটেনশন পড়া

রিডিং প্রোগ্রেস বার

হোম কখনও একটি দীর্ঘ নিবন্ধ পড়া শুরু এবং কত বাকি আছে আশ্চর্য? তাই করো...
বিস্তারিত দেখুন
সেপ্টেম্বর বিক্রয়

40% সবকিছু বন্ধ

প্রতিটি মাস্টার অ্যাডনস প্রো প্ল্যান, বার্ষিক এবং জীবনকাল। একটি কোড, আট দিন।

00দিন
00ঘন্টা
00মিনিট
00সেকেন্ড

সোমবার 14 সেপ্টেম্বর, 23:59 ET শেষ হয়৷

  • ব্যক্তিগত1 সাইট $129$77
  • ব্যবসা5 সাইট $199$119
  • বিকাশকারীসীমাহীন সাইটএজেন্সিগুলির জন্য সেরা $599$359

একবার পরিশোধ করুন। কোন পুনর্নবীকরণ, কখনও।

কুপন কোড MALIFE40
এখন 40% ছাড় পান
  • 30,000+ সক্রিয় ইনস্টল
  • 212টি পর্যালোচনা থেকে 4.5/5
  • 14 দিনের টাকা ফেরত