ওয়ার্ডপ্রেস সর্বত্র টেমপ্লেট ব্যবহার করে এবং জাভাস্ক্রিপ্ট এর ব্যতিক্রম নয়। এই পোস্টে, আমরা এইচটিএমএল টেমপ্লেট তৈরি করার জন্য ওয়ার্ডপ্রেসের মধ্যে নির্মিত ক্ষমতা সম্পর্কে কথা বলব, যা তারপর JS-এ ব্যবহার করা যেতে পারে। এই টেমপ্লেটগুলি তৈরি এবং ব্যবহার করা খুব সহজ, ঠিক ওয়ার্ডপ্রেসের অন্যান্য অনেক জিনিসের মতো।
জাভাস্ক্রিপ্টে টেমপ্লেট তৈরি করার অনেক উপায় রয়েছে, এমনকি তাদের জন্য গোঁফ নামে একটি পৃথক স্পেসিফিকেশন রয়েছে। এটি জাভাস্ক্রিপ্ট সহ অনেক ভাষায় প্রয়োগ করা হয়। উদাহরণস্বরূপ, হ্যান্ডেলবার লাইব্রেরি এই স্পেসিফিকেশনটি ব্যবহার করে এবং এমনকি এটিকে কিছুটা প্রসারিত করে। অথবা জনপ্রিয় আন্ডারস্কোর মিনি-লাইব্রেরি।
সংস্করণ 3.5 থেকে, WordPress এর মূল অংশে JS-এর জন্য ইতিমধ্যে একটি সুবিধাজনক টেমপ্লেট ইঞ্জিন রয়েছে। উদাহরণস্বরূপ, মিডিয়া লোডারের জন্য ব্লক তৈরি করার সময় এটি অ্যাডমিন প্যানেলে ব্যবহার করা হয়। উপরে উল্লিখিত আন্ডারস্কোর লাইব্রেরির উপর ভিত্তি করে, গোঁফের স্পেসিফিকেশনের সাথে আরও সামঞ্জস্যপূর্ণ হওয়ার জন্য সিনট্যাক্সটি সামান্য পুনর্নির্মাণ করা হয়েছে।
ওয়ার্ডপ্রেসে টেমপ্লেট তৈরি করার জন্য একটি পদ্ধতি আছে wp.template
wp.template(id)HTML কোড থেকে একটি টেমপ্লেট অবজেক্ট তৈরি করে। JS-এ ব্যবহারের জন্য রেডিমেড HTML কোড পেতে, আপনাকে তৈরি করা অবজেক্টে টেমপ্লেট পূরণ করতে ডেটা পাস করতে হবে।
রিটার্নসফাংশন। টেমপ্লেট ইন্টারপোলেশনের জন্য ডেটা পাস করার জন্য একটি ফাংশন।
var টেমপ্লেট ব্যবহার করা = wp.template(id); var HTML = টেমপ্লেট(ডেটা); আইডি(লাইন)
HTML উপাদানের ID যাতে টেমপ্লেটের HTML কোড থাকে। এইচটিএমএল এলিমেন্টের অবশ্যই এখানে tmpl- উপসর্গের সাথে নির্দিষ্ট আইডি অ্যাট্রিবিউট থাকতে হবে।
উদাহরণস্বরূপ, আপনি যদি এখানে foo উল্লেখ করেন, তাহলে HTML উপাদানটির অবশ্যই id id="tmpl-foo" থাকতে হবে। ডেটা(বস্তু)
JS ডেটা অবজেক্ট যা টেমপ্লেট পূরণ করতে ব্যবহার করা হবে। উদাহরণস্বরূপ: ( পাঠ্য: "হ্যালো")।- প্যাটার্ন ফিলিং (ইন্টারপোলেশন)
- (((data.unescaped))) - অপরিষ্কার ডেটা।
- ((data.escaped)) - সাফ করা ডেটা।
ডেটা উপসর্গ।
টেমপ্লেটের ডেটা হল উৎস ডেটা অবজেক্ট। টেমপ্লেটে ডেটা কী ব্যবহার করতে হবে।
wp_send_json_success() এবং wp_send_json_error() ফাংশন দ্বারা প্রত্যাবর্তিত ডাটা স্ট্রাকচারের সাথে মেলানোর জন্য, wp.template একটি ডাটা ভেরিয়েবলে সমস্ত প্রাপ্ত ডেটা মুড়ে দেয়। অতএব, টেমপ্লেটের প্রতিটি প্যারামিটারের আগে আপনাকে ডেটা নির্দিষ্ট করতে হবে। , অন্যথায় আমরা ত্রুটি পেতে হবে: (সম্পত্তি) সংজ্ঞায়িত করা হয় না।
সঠিক (((data.name)))
ভুল (((নাম)))এটা সহজভাবে আউটপুট হবে.
আসুন escapedValue (data.escapedValue)) ভেরিয়েবলের মান প্রদর্শন করি।
যদি ডেটাতে মার্কআপ থাকে, তা ছাড়াই প্রিন্ট করুন:
(((data.unescapedValue)))যখন আপনি কিছু যুক্তি সঞ্চালন প্রয়োজন.
শুধুমাত্র data.trueValue = সত্য হলেই প্রিন্ট করা হবে।
একটি টেমপ্লেট তৈরি এবং তৈরি করা একটি টেমপ্লেট তৈরি করাDOM ট্রিতে টেমপ্লেটটি কোনোভাবেই উপস্থিত না হয় তা নিশ্চিত করার জন্য, এটি একটি স্ক্রিপ্ট ট্যাগে টাইপ ইঙ্গিত type="text/html" দিয়ে তৈরি করা প্রথাগত।
হ্যালো (((data.name)))
আইডি অ্যাট্রিবিউটটি অবশ্যই tmpl- দিয়ে শুরু করতে হবে, এই উপসর্গের পরে যেকোন কিছু wp.template("my-template") ফাংশনে ব্যবহার করা হবে।
একটি স্ক্রিপ্ট ট্যাগে একটি টেমপ্লেট তৈরি করা একটি হ্যাক যা জন্য দুর্দান্ত html তৈরি করাএকটি উপাদান যা ব্রাউজার দ্বারা কোন ভাবেই ব্যবহৃত হয় না। যখন ব্রাউজারে বোধগম্য একটি প্রকার নির্দিষ্ট করা হয়, তখন এটি কেবল html ট্যাগটিকে উপেক্ষা করে, যা আমাদের প্রয়োজন।
টেমপ্লেটটি অন্য যেকোন HTML উপাদানেও তৈরি করা যেতে পারে (উদাহরণস্বরূপ, মধ্যে , যা তারপর লুকানো যেতে পারে), আপনাকে শুধুমাত্র আইডি অ্যাট্রিবিউট নির্দিষ্ট করতে হবে।
এছাড়াও তৈরি করার জন্য টেমপ্লেট আছে বিশেষ এইচটিএমএলট্যাগ, তবে এটি IE তে সমর্থিত নয়। কিন্তু সামগ্রিকভাবে এটি বেশ প্রাসঙ্গিক।
টেমপ্লেট প্রজন্মwp.template() একটি ফাংশন প্রদান করে, তাই ফলাফলটি পাস করার চেষ্টা করবেন না html উপাদানবা কনসোলে ফলাফল প্রিন্ট করুন। সাধারণত, wp.template() এর ফলাফল একটি ভেরিয়েবলে পাস করা হয় এবং তারপর সেই ভেরিয়েবলটিকে একটি ফাংশন হিসাবে ব্যবহার করা হয় এবং টেমপ্লেটটি পূরণ করা উচিত এমন ডেটা পাস করে।
উদাহরণ (উপরে দেখানো টেমপ্লেট)
// JS var টেমপ্লেট = wp.template("my-template"), data = ( নাম: "Victor"); jQuery(."my-element").html(টেমপ্লেট(ডেটা));
ফলস্বরূপ, আমরা HTML এ পাই:
হ্যালো ভিক্টর
একটি টেমপ্লেট ব্যবহার করে AJAX মন্তব্য করার একটি উদাহরণএকটি টেমপ্লেট তৈরি করুন এবং থিমের functions.php ফাইলে স্ক্রিপ্টটি অন্তর্ভুক্ত করুন:
অপারেশন
