এলিমেন্টরে কাস্টম জাভাস্ক্রিপ্ট যোগ করুন: পৃষ্ঠা এবং এলিমেন্ট লেভেল 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 ক্ষেত্রের মধ্যে নয়। যাইহোক, আপনি জাভাস্ক্রিপ্ট লিখতে পারেন যা গতিশীল ডেটা দ্বারা জনবহুল পৃষ্ঠার উপাদানগুলির সাথে যোগাযোগ করে। উদাহরণস্বরূপ, আপনি একটি স্ক্রিপ্ট লিখতে পারেন যা একটি গতিশীলভাবে ভরা শিরোনাম থেকে পাঠ্য পড়ে। আপনি সেই উপাদানগুলিকে লক্ষ্য করতে সাধারণ জাভাস্ক্রিপ্ট নির্বাচক ব্যবহার করবেন।

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

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

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

এলিমেন্টরের জন্য মাস্টার অ্যাডনস গ্লাসমরফিজম এক্সটেনশন: ব্লার ভ্যালু কন্ট্রোল সহ ফ্রস্টেড গ্লাস কার্ড 20px এ সেট করা হয়েছে

গ্লাসমরফিজম

হোম ফ্রি এলিমেন্টর গ্লাসমরফিজম এক্সটেনশন: ফ্রস্টেড গ্লাস ইফেক্ট ইন ওয়ান টগল গ্লাসমরফিজম হল ফ্রস্টেড।।।
বিস্তারিত দেখুন
এলিমেন্টরের জন্য মাস্টার অ্যাডনস কন্টেইনার এক্সট্রা এক্সটেনশন: সর্বোচ্চ প্রস্থ, সর্বোচ্চ উচ্চতা, ন্যূনতম প্রস্থ এবং সর্বনিম্ন উচ্চতা নিয়ন্ত্রণ সহ 1400px সর্বোচ্চ প্রস্থে কন্টেইনার ক্যাপ করা হয়েছে

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

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

নিদর্শন

হোম 70+ ফ্রি এলিমেন্টর ব্যাকগ্রাউন্ড প্যাটার্ন প্যাটার্নস হল একটি ফ্রি মাস্টার অ্যাডঅন এক্সটেনশন যা যোগ করে।।।
বিস্তারিত দেখুন
এলিমেন্টরের জন্য মাস্টার অ্যাডঅন পোস্ট/পেজ ডুপ্লিকেটর এক্সটেনশন: ওয়ার্ডপ্রেস পেজ লিস্টে এমএ ডুপ্লিকেটর সারি লিঙ্ক একটি ল্যান্ডিং পেজ তৈরি করে - [ডুপ্লিকেটেড #128] ড্রাফ্ট

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

হোম ডুপ্লিকেট এলিমেন্টর পেজ এবং পোস্ট এক ক্লিকে পোস্ট/পেজ ডুপ্লিকেটর একটি ফ্রি মাস্টার।।।
বিস্তারিত দেখুন
এলিমেন্টরের জন্য মাস্টার অ্যাডনস রিডিং প্রোগ্রেস বার এক্সটেনশন: নীল বার 42% একটি গোপনীয়তা নীতি পৃষ্ঠার শীর্ষে পূর্ণ, সক্ষম, অবস্থান, উচ্চতা এবং রঙ সেটিংস পূরণ করুন

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

হোম ওয়ার্ডপ্রেসে একটি রিডিং প্রোগ্রেস বার যোগ করুন (এলিমেন্টর) রিডিং প্রোগ্রেস বার একটি বিনামূল্যে।।।
বিস্তারিত দেখুন