অ্যাক্সেস-নিয়ন্ত্রিত WordPress সাইটের জন্য একটি সার্চ মোডাল তৈরি করা

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

আপনার যদি পেইড কোর্স বা প্রাইভেট ভিডিও থাকে, তবে ডিফল্ট সার্চ ডেটা ফাঁস করে দিতে পারে। এটি লগ-আউট করা ব্যবহারকারীদের কাছে প্রাইভেট কন্টেন্টের শিরোনাম প্রদর্শন করে। এটি আপনার পে-ওয়াল (paywall) নষ্ট করে দেয়।

আমি WordPress, WooCommerce এবং LearnDash ব্যবহার করে একটি ফিটনেস সাইটের জন্য একটি কাস্টম সার্চ মোডাল তৈরি করেছি। অ্যাক্সেস রুলস মেনে চলে কীভাবে সার্চ তৈরি করতে হয়, তা এখানে দেওয়া হলো।

আর্কিটেকচার

আমি প্রতিটি কন্টেন্ট টাইপের জন্য আলাদা সার্চের পরিবর্তে একটি একক ইউনিফাইড ইনডেক্স ব্যবহার করেছি। এটি আমাকে কুয়েরি লেভেলে গেটিং (gating) প্রয়োগ করতে সাহায্য করেছে।

সার্চ রেজাল্টগুলো এই নিয়মগুলো অনুসরণ করে:

  • ব্লগ পোস্টগুলো পাবলিক।
  • অন-ডিমান্ড ভিডিওগুলো গেটেড (gated)।
  • কোর্সগুলো LearnDash-এর মাধ্যমে গেটেড।
  • স্টোর প্রোডাক্টগুলো পাবলিক।

আমি চাইল্ড থিমে একটি কাস্টম REST রুট তৈরি করেছি। সার্চটি স্থিতিশীল রাখতে আমি স্নিপেট প্লাগইন এড়িয়ে চলেছি।

মূল ইঞ্জিনিয়ারিং ডিটেইলস

• সার্ভার-সাইড গেটিং: JavaScript ব্যবহার করে কখনোই রেজাল্ট হাইড করবেন না। আপনি যদি ব্রাউজারে কোনো রেজাল্ট হাইড করেন, তবুও ডেটা নেটওয়ার্ক রেসপন্সে থেকে যায়। একজন ব্যবহারকারী এটি DevTools-এ দেখতে পারে। সাইট থেকে ডেটা বের হওয়ার আগেই আপনাকে সার্ভারে এটি ফিল্টার করতে হবে।

• ক্যাশ ম্যানেজমেন্ট: আপনি যদি আপনার সার্চ রেজাল্ট ক্যাশ করেন, তবে আপনি একজন মেম্বারের প্রাইভেট রেজাল্ট কোনো অপরিচিত ব্যক্তিকে দেখাতে পারেন। ডেটা ফাঁস রোধ করতে আপনার সার্চ REST রুটটিকে পেজ ক্যাশ থেকে বাদ দিন।

• গ্রেসফুল ডিগ্রেডেশন: Relevanssi-এর মতো থার্ড-পার্টি প্লাগইন কল করার সময় গার্ড (guards) ব্যবহার করুন। যদি প্লাগইনটি কাজ না করে, তবে সাইট ক্র্যাশ করার পরিবর্তে সার্চটি কোর WordPress সার্চে ফিরে যাওয়া উচিত।

• পারফরম্যান্স: একটি debounce ফাংশন (250ms) এবং একটি AbortController ব্যবহার করুন। এটি প্রতিটি কি-স্ট্রোকের জন্য ব্রাউজারকে নতুন রিকোয়েস্ট পাঠাতে বাধা দেয়। এটি পুরনো রিকোয়েস্টগুলোও বাতিল করে দেয় যাতে পুরনো ডেটা নতুন রেজাল্টকে ওভাররাইট না করে।

• সিকিউরিটি: innerHTML ব্যবহার করার আগে সর্বদা স্ট্রিং এস্কেপ (escape) করুন। এটি ক্ষতিকারক পোস্ট টাইটেল থেকে XSS অ্যাটাক প্রতিরোধ করে।

মোবাইল লেসন

আমি একটি পেজ বিল্ডারের সাথে সমস্যায় পড়েছিলাম যা আমার সার্চ বাটনটিকে একটি মোবাইল মেনুর ভেতরে ঢুকিয়ে দিয়েছিল। আমি অনেক CSS ফিক্স চেষ্টা করেছি, কিন্তু সেগুলো কাজ করেনি।

সমাধানটি ছিল সহজ: থিমের সাথে লড়াই করা বন্ধ করুন। বাটনটিকে মেনুর ভেতরে রাখার পরিবর্তে, আমি এটিকে হেডার-এ একটি আলাদা এলিমেন্ট হিসেবে ইনজেক্ট করেছি। যদি কোনো কম্পোনেন্ট আপনার পরিবর্তন প্রতিরোধ করে, তবে সেটির ভেতরে না রেখে তার পাশে আপনার এলিমেন্টটি রাখুন।

সেরা অনুশীলনগুলোর সারসংক্ষেপ:

  • সার্ভারে অ্যাক্সেস কন্ট্রোল প্রয়োগ করুন।
  • ক্যাশ থেকে সার্চ এন্ডপয়েন্টগুলো বাদ দিন।
  • স্মুথ UX-এর জন্য debounce এবং AbortController ব্যবহার করুন।