ওয়ার্ডপ্রেস 16 বছরেরও বেশি সময় ধরে আমাদের জীবনের অংশ, তবে থিম এবং প্লাগইনগুলিতে স্ক্রিপ্ট যুক্ত করার পদ্ধতি অনেক বিকাশকারীদের কাছে একটি রহস্য হিসাবে রয়ে গেছে। এই নিবন্ধে, আমরা শেষ পর্যন্ত বিভ্রান্তির অবসান ঘটিয়েছি।
যেহেতু এটি সর্বাধিক ব্যবহৃত জাভাস্ক্রিপ্ট লাইব্রেরিগুলির মধ্যে একটি, আজ আমরা আলোচনা করব কিভাবে আপনার ওয়ার্ডপ্রেস থিম বা প্লাগইনে jQuery স্ক্রিপ্ট যুক্ত করবেন।
JQuery সামঞ্জস্যতা মোড সম্পর্কে
আপনি ওয়ার্ডপ্রেসে স্ক্রিপ্টগুলি যুক্ত করা শুরু করার আগে, jQuery এর সামঞ্জস্যতা মোডটি বোঝা গুরুত্বপূর্ণ।
আপনি সম্ভবত জানেন, ওয়ার্ডপ্রেস ইতিমধ্যে অন্তর্ভুক্ত jQuery সঙ্গে আসে।
ওয়ার্ডপ্রেসে jQuery এর সংস্করণটিতে একটি " সামঞ্জস্যতা মোড যা অন্যান্য জাভাস্ক্রিপ্ট লাইব্রেরির সাথে দ্বন্দ্ব এড়ানোর একটি প্রক্রিয়া।
এই প্রতিরক্ষা ব্যবস্থার অংশটির অর্থ আপনি না করতে পারেন ব্যবহার করুন $আপনি যেমন অন্যান্য প্রকল্পে সাইন ইন করুন।
পরিবর্তে, ওয়ার্ডপ্রেসের জন্য jQuery কোড লেখার সময়, আপনার ব্যবহার করা উচিত jQuery.
এখানে কোডের একটি উদাহরণ:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
সমস্যাটি হচ্ছে, jQuery লিখে এক মিলিয়ন বার বেশি সময় নেয়, এটি পড়া আরও কঠিন করে তোলে এবং আপনার স্ক্রিপ্টটি ওজন করতে পারে।
সুসংবাদ?
কয়েকটি পরিবর্তন করে আপনি আবার আমাদের বুদ্ধিমান ছোট্ট ডলার প্রতীকটি ব্যবহার করতে পারেন।
যাইহোক, যদি আপনি হয় jQuery তে নতুন , $ চিহ্নটি jQuery () এর জন্য কেবলমাত্র একটি উপনাম, তারপরে কোনও ফাংশনের জন্য একটি উপনাম।
প্রাথমিক কাঠামোটি এরকম দেখাচ্ছে: $(selector).action()। ডলার সাইনটি jQuery সংজ্ঞায়িত করে ... "(নির্বাচক)" কোয়েরি করে বা HTML উপাদানগুলি সন্ধান করে ... এবং অবশেষে "jQuery () ক্রিয়া" উপাদানগুলিতে সম্পাদন করা হয়।
আমরা আমাদের সামঞ্জস্যতা সমস্যাটি কীভাবে কাজ করতে পারি তার পিছনে ... এখানে কিছু ব্যবহার্য বিকল্প রয়েছে:
1. jQuery স্টিলথ মোড প্রবেশ করুন
সামঞ্জস্যতা মোডের কাছাকাছি যাওয়ার প্রথম উপায়টি হল কোডটিতে লুকিয়ে থাকা।
উদাহরণস্বরূপ, আপনি যদি স্ক্রিপ্টটি ফুটারে লোড করেন তবে আপনি একটি কোড বেনামে আপনার কোডটি মোড়ানো করতে পারেন, যা jQuery মানচিত্র করবে $.
নীচের উদাহরণ হিসাবে:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
যদি আপনি শিরোনামে আপনার স্ক্রিপ্টটি যুক্ত করতে চান (যা সম্ভব হলে আপনি এড়ানো উচিত, নীচের দিকের আরও কিছু), আপনি ডকুমেন্ট-প্রস্তুত ফাংশনটিতে সমস্ত কিছু মোড়ানো করতে পারেন, পাস করে $পথ ধরে।
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. "কোনও বিরোধ" মোডটি প্রবেশ করুন Enter
JQuery বানান এড়ানোর আরেকটি সহজ উপায় হল মোডে স্যুইচ করা "বিরোধ মুক্ত" এবং একটি ভিন্ন শর্টকাট ব্যবহার করুন।
এই ক্ষেত্রে: $jডিফল্ট পরিবর্তে $.
আপনাকে যা করতে হবে তা হ'ল এটি আপনার স্ক্রিপ্টের শীর্ষে ঘোষণা করুন:var $j = jQuery.noConflict();
ঠিক আছে, এখন আপনি ওয়ার্ডপ্রেসের জন্য বৈধ jQuery কোড লেখার বিষয়ে আরও জানেন, আসুন এটি আমাদের ওয়েবসাইটে যুক্ত করি।
কীভাবে ওয়ার্ডপ্রেসে jQuery স্ক্রিপ্ট যুক্ত করা যায়
ওয়ার্ডপ্রেসে jQuery স্ক্রিপ্ট যুক্ত করার সহজ উপায়গুলির মধ্যে একটি হল 'সেটিং' নামক প্রক্রিয়া অপেক্ষার লাইন ».
একটি ক্লাসিক HTML ওয়েবসাইটের জন্য, আমরা ব্যবহার করব <link> স্ক্রিপ্ট যোগ করতে আইটেম। ওয়ার্ডপ্রেস একই কাজ শেষ করে তবে আমরা এটি অর্জনে বিশেষ ডাব্লুপি ফাংশন ব্যবহার করব।
এইভাবে, এটি আমাদের জন্য আমাদের সমস্ত নির্ভরতা পরিচালনা করে (ধন্যবাদ ডাব্লুপি!)।
আপনি যদি কোনও থিমের সাথে কাজ করছেন তবে আপনি ফাংশনটি ব্যবহার করতে পারেন wp_enqueue_script() আপনার functions.php ফাইল।
এটি দেখতে কেমন দেখাচ্ছে তা এখানে:
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
এই ফাংশন লাগে পাঁচটি যুক্তি:
- $ হ্যান্ডেল - একটি অনন্য হ্যান্ডেল যা আপনি স্ক্রিপ্টটি উল্লেখ করতে ব্যবহার করতে পারেন।
- $src – স্ক্রিপ্ট ফাইলের অবস্থান।
- s Deps - নির্ভরতার একটি অ্যারে নির্দিষ্ট করে।
- $ ver - আপনার স্ক্রিপ্টের সংস্করণ নম্বর।
- _ in_footer - স্ক্রিপ্টটি কোথায় রাখা উচিত ওয়ার্ডপ্রেসকে জানায়।
* একটি বিষয় লক্ষণীয় $in_footer এর অর্থ হ'ল ডিফল্টরূপে স্ক্রিপ্টগুলি হেডারে লোড হবে।
এটি খারাপ অনুশীলন এবং আপনার সাইটটি যথেষ্ট গতি কমিয়ে দিতে পারে। অতএব, আপনি যদি নিজের স্ক্রিপ্টটিকে পাদচরণে রাখতে চান তবে নিশ্চিত করুন যে এই প্যারামিটারটি সত্য হয়েছে।
ওয়ার্ডপ্রেস প্রশাসকের কাছে স্ক্রিপ্ট যুক্ত করা
আপনি প্রশাসকের সাথে স্ক্রিপ্টগুলিও যুক্ত করতে পারেন। ব্যবহৃত ফাংশনগুলি হুবহু একই, আপনার কেবল আলাদা হুক ব্যবহার করা দরকার।
উদাহরণস্বরূপ:
আমার_আডমিন_স্ক্রিপ্টগুলি ফাংশন করুন () {
wp_enqueue_script ('আমার-গ্রেট-স্ক্রিপ্ট', প্লাগইন_দির_উরাল (__ফাইল__)। '/js/my-great-script.js', অ্যারে ('jquery'), '1.0.0', সত্য);
}
যোগ_অ্যাকশন ('অ্যাডমিন_ইনকিউ_সস্ক্রিপ্টস', 'মাই_এডমিন_স্ক্রিপ্টস');
লগ ইন করার পরিবর্তে, wp_enqueue_scriptsআমাদের অবশ্যই ব্যবহার করা উচিত admin_enqueue_scripts.
কীভাবে ওয়ার্ডপ্রেস থেকে jQuery সাবস্ক্রাইব করবেন
তবে আপনি যদি ওয়ার্ডপ্রেস দ্বারা প্রিলোড করা সংস্করণের চেয়ে jQuery এর একটি আলাদা সংস্করণ ব্যবহার করতে চান?
আপনি এটি সারি করতে পারেন ... তবে এর অর্থ পৃষ্ঠাটিতে jQuery এর দুটি সংস্করণ থাকবে।
এটি এড়াতে, আমাদের ডাব্লুপি এর সংস্করণটি নিবন্ধভুক্ত করতে হবে।
এটি দেখতে কেমন দেখাচ্ছে তা এখানে:
// কাস্টম jQuery অন্তর্ভুক্ত
আকৃতিস্পেস_সামগ্রী_ কাস্টম_জ্যাকারি () ফাংশন {
wp_deregister_script ('jquery');
wp_enqueue_script(
'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
array(),
null,
true);
}
add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');এটি ব্যবহার করার মতোই সহজ wp_deregister_script () ঢালা নিবন্ধন মুক্ত ডাব্লুপি থেকে jQuery, তারপরে আপনি যুক্ত করতে চান jQuery স্ক্রিপ্ট সহ।
উপরের উদাহরণে, আমরা এটি ব্যবহার করেছি গুগল দ্বারা হোস্ট করা jQuery লাইব্রেরি , তবে আপনি অবশ্যই এটি আপনার নিজের স্ক্রিপ্টের URL এর সাথে প্রতিস্থাপন করবেন।
স্ক্রিপ্টগুলি সারিবদ্ধ করার আগে আপনার সংরক্ষণ করা উচিত নয়?
আপনি যদি আপনার স্ক্রিপ্টগুলি সরাসরি আপনার পৃষ্ঠাগুলিতে লোড না করে প্রয়োজনীয় হিসাবে লোড করতে চান - আপনি স্ক্রিপ্টটি আগে সংরক্ষণ করতে পারেন।
উদাহরণস্বরূপ, চালু wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
একবার এটি সম্পন্ন করার পরে, স্ক্রিপ্টগুলি যখন আপনার প্রয়োজন হবে সেগুলি সারি করতে পারেন:
| যোগ_অ্যাকশন ('wp_enqueue_scriptts', 'এনকুই_ফ্রন্ট_সক্রিপ্টস'); |
| যোগ_অ্যাকশন ('অ্যাডমিন_নেকিউ_স্ক্রিপ্টস', 'এনকুই_ব্যাক_সক্রিপ্টস'); |
অন্যান্য স্ক্রিপ্টগুলির সাথে সংঘর্ষ এড়াতে একই নামগুলি ব্যবহার করতে ভুলবেন না।
শর্তযুক্ত ট্যাগ ব্যবহার করা
যখন প্রয়োজন হয় তখনই আপনার স্ক্রিপ্টগুলি লোড করতে শর্তযুক্ত ট্যাগ ব্যবহার করুন।
এটি প্রশাসনে আরও বেশি ব্যবহৃত হয়, যেখানে আপনি কেবলমাত্র একটি নির্দিষ্ট পৃষ্ঠায় স্ক্রিপ্ট করতে চান (এবং পুরো প্রশাসনে নয়)। এটি ব্যান্ডউইথ এবং প্রক্রিয়াকরণের সময় সাশ্রয় করে যার অর্থ আপনার ওয়েবসাইটের জন্য দ্রুত লোডের সময়।
একবার দেখুন সারি স্ক্রিপ্টের ডকুমেন্টেশন আরও তথ্যের জন্য ওয়ার্ডপ্রেস কোডেক্সে।
প্লাগইনগুলি ব্যবহার করে ওয়ার্ডপ্রেসে jQuery যুক্ত করুন
WP প্লাগইন ডিরেক্টরিতে অনেক আকর্ষণীয় প্লাগইন রয়েছে যা আপনি আপনার ওয়ার্ডপ্রেস পোস্ট, পৃষ্ঠা বা থিমগুলিতে স্ক্রিপ্ট সন্নিবেশ করতে ব্যবহার করতে পারেন।
এখানে সুপরিচিত জাভাস্ক্রিপ্ট / jQuery প্লাগইনগুলির কয়েকটি উদাহরণ রয়েছে: উন্নত কাস্টম ক্ষেত্র , সাধারণ কাস্টম সিএসএস এবং জেএস , স্ক্রিপ্ট শৈলী n et সম্পদ পরিষ্কার।
আপনার নিজস্ব jQuery প্রকল্প তৈরি করুন
JQuery সম্পর্কে আরও ভাল বোঝাপড়া কেবল আপনার কাজকে আরও কার্যকর করবে। আপনার নিজস্ব ওয়েবসাইট বা ক্লায়েন্ট প্রকল্পের জন্য হোক Whether
jQuery এর সরলতার জন্য সুপরিচিত, এবং আপনি (আশাবাদী) এই নিবন্ধটিতে শিখেছেন, ওয়ার্ডপ্রেসে সরল jQuery স্ক্রিপ্টগুলি যুক্ত করার পরে পাই হিসাবে সহজেই সহজ।
হ্যাঁ, ভ্যানিলা এইচটিএমএল ব্যবহারের তুলনায় কিছুটা ওভারহেড রয়েছে তবে নির্ভরতা পরিচালন এবং স্বচ্ছতার অতিরিক্ত সুবিধাও রয়েছে।
শুধু তাই নয়, jQuery ডাব্লুপিএর ডিফল্ট সামঞ্জস্যকে বাইপাস করার মতো ছোট্ট কৌশলগুলি ব্যবহার করে নিজেকে অনেক সময়, প্রচেষ্টা এবং ফোলা কোডটি সাশ্রয় করতে চলেছে।