ওয়ার্ডপ্রেস ব্লগ পোস্টের পোস্ট কনটেন্ট এর ভিতরে ঝামেলাহীন ভাবে রিলেটেড বা রিসেন্ট পোস্ট দেখানোর উপায়

আসসালামুয়ালাইকুম বন্ধুরা,আশাকরি ভালোই আছেন। আলহামদুলিল্লাহ আমিও ভালোই আছি। ব্যস্ততার কারনে Trickbd প্রতিদিনি ভিজিট করার হলেও কয়েকদিন নতুন পোস্ট করতে পারিনি। সব ব্যস্ততা কাটিয়ে আবার আপনাদের মাঝে উপস্তিত হলাম নতুন একটি পোস্ট নিয়ে। তো চলুন শুরু করা যাক।

বন্ধুরা আজকের আলোচনা ও কাজের বিষয় হচ্ছে,

কি ভাবে ওয়ার্ডপ্রেস ব্লগ সাইট এর পোস্ট কনটেন্ট বা পোস্ট বডির ভিতরে ডায়নামিক ভাবে Recent Post show করাবেন।

বিষয়টা আরেকটু ক্লিয়ার করা উচিত বলে আমি মনে করতেছি।
ধরুন আপনি একটা পোস্ট লিখতেছেন,আপনার ওয়ার্ডপ্রেস ব্লগ সাইটে পোস্ট করার জন্য। এখন সেই পোস্টে ইন্টার্নাল 🔗 লিঙ্কিং করার সময় বার বার পোস্ট খুঁজে খুঁজে ক্যাটাগরি অনুযায়ী লিংক করতে হচ্ছে, এতে করে আপনার অনেক পরিশ্রম হচ্ছে এবং সময় ও নষ্ট হচ্ছে। কিন্তু এতো ঝামেলা ছাড়াই যদি ছোট একটা কোডের মাধ্যমে খুব সহজেই নির্দিষ্ট একটা ক্যাটাগরির অন্তর্ভুক্ত এক বা একাধিক পোস্ট ,সুন্দর এবং ক্লিন ডিজাইন সহ শো করাতে বা এ্যাড করতে পারেন তাহলে কেমন হয়? অবশ্যই আমি মনে করে এক্ষেত্রে সময় ও শ্রম দুটোই বেঁচে যায়।

আমার আগের করা পোস্ট, ব্লগার এর জন্য দেখতে পারেন:-দেখে নিন কি ভাবে ব্লগার এর ব্লগ পোস্টের ভিতরে Recent Post লিস্ট শো করাবেন প্রিমিয়াম ডিজাইন সহ

এতটুকু চিন্তা করেই আমি আপনাদের জন্য একটি প্লাগিন বানিয়েছি।
যেটার শর্টকোড পোস্ট কনটেন্ট এর যেখানে বসাবেন সেখান খুব সুন্দর ভাবে একটা পোস্ট লিস্ট দেখাবে। যেটির নাম দিয়েছি BN24 Read Also প্লাগইন।

BN24 Read Also একটি উচ্চমানের ওয়ার্ডপ্রেস প্লাগইন, যা আপনার ব্লগ পোস্টের নিচে স্বয়ংক্রিয়ভাবে রিলেটেড পোস্ট দেখায়। এটি পাঠকদের আগ্রহ বাড়ায় এবং ওয়েবসাইটে পোস্ট ভিউ সংখ্যা বৃদ্ধি করে।

মূল বৈশিষ্ট্য

সহজ শর্টকোড ব্যবহার

আপনার পোস্ট এডিটরে গিয়ে শুধু [read-more] শর্টকোডটি যোগ করুন। বাকি কাজ প্লাগইন নিজেই করে দেবে, এটি স্বয়ংক্রিয়ভাবে একটি আকর্ষণীয় ও আধুনিক “Read Also” সেকশনে রূপান্তরিত হবে।

রেস্পন্সিভ ডিজাইন

মোবাইল, ট্যাবলেট বা ডেস্কটপ—সব ডিভাইসে এই প্লাগইনের ডিজাইন পুরোপুরি মানিয়ে যায়। মোবাইলে থাম্বনেইলগুলো রেসপনসিভ ভাবে ছোট হয়ে যায় (৭০x৭০ থেকে ৫৬x৫৬ পিক্সেল), তবে ব্যবহারকারীর অভিজ্ঞতা একদম অক্ষত থাকে।

আকর্ষণীয় পোস্ট লেআউট

প্রতিটি পোস্ট একটি সুন্দর ও সুবিন্যস্ত লেআউটে দেখানো হয়:
বাম পাশে: ছোট বর্গাকার থাম্বনেইল (lazy লোডিং সহ, যা পৃষ্ঠা লোডের সময় কমায়)
ডান পাশে: ক্লিক করা যায় এমন শিরোনাম (২ লাইনের পর ডটস দেখায়, জায়গা সাশ্রয়ের জন্য)নিচে: গুরুত্বপূর্ণ তথ্য, যেমন প্রকাশের তারিখ, বিভাগ, মন্তব্যের সংখ্যা

স্মার্ট ফিল্টার ব্যবস্থা

প্লাগইনটি বুদ্ধিমানভাবে রিলেটেড পোস্ট বেছে নেয়:
বর্তমান পোস্ট স্বয়ংক্রিয়ভাবে বাদ যায়, যাতে পাঠক একই পোস্ট বারবার না দেখে ।যেসব পোস্টে ইতিমধ্যে [read-more] শোর্টকোডে লোড হয়ে আছে, সেগুলোও বাদ দেওয়া হয়, যাতে একই কন্টেন্ট বারবার না দেখায়

বিভাগ ফিল্টারিং

আপনি চাইলে শুধু নির্দিষ্ট বিভাগের পোস্ট দেখাতে পারেন:
শর্টকোডে cat=”tips” অ্যাট্রিবিউট যোগ করে ।অথবা অ্যাডমিন প্যানেল থেকে ডিফল্ট বিভাগ ফিল্টার সেট করে

প্রিমিয়াম বৈশিষ্ট্য

সম্পূর্ণ কাস্টমাইজযোগ্য অ্যাডমিন প্যানেল

একটি ব্যবহারকারী-বান্ধব সেটিংস প্যানেল থেকে আপনি নিম্নলিখিত বিষয় গুলো
কাস্টমাইজ করতে পারবেন:
কতগুলো পোস্ট দেখাবে (৪ থেকে ৬টির মধ্যে যেকোনো সংখ্যা)থিম বাছাই—তিনটি প্রিমিয়াম ডিজাইনের মধ্যে যেকোনো একটিবিভাগ ফিল্টার সেট করার অপশন ।
টগল অপশন: তারিখ দেখানো/লুকানো, সংক্ষিপ্ত বিবরণ দেখানো/লুকানো, বিভাগ দেখানো/লুকানো, মন্তব্যের সংখ্যা দেখানো/লুকানো ,সংক্ষিপ্ত বিবরণের শব্দ সংখ্যা নিয়ন্ত্রণবক্সের জন্য কাস্টম শিরোনাম (ডিফল্ট “Read Also” থেকে পরিবর্তন করা যায়)শর্টকোডযুক্ত পোস্ট বাদ দেওয়ার অপশন (যাতে উচ্চমানের রিলেটেড পোস্ট দেখায়)

তিনটি প্রিমিয়াম ডিজাইন থিম

আপনার সাইটের ডিজাইনের সাথে মানানসই তিনটি ভিন্ন স্টাইল:

আধুনিক থিম

হালকা শ্যাডো, গোলাকার থাম্বনেইল, মসৃণ হোভার ইফেক্ট—আধুনিক ওয়ার্ডপ্রেস সাইটের জন্য উপযুক্ত।

সরল থিম

পরিষ্কার ও সাধারণ ডিজাইন, কোনো ব্যাকগ্রাউন্ড রং নেই, ড্যাশড লাইন বিভাজক—মিনিমালিস্ট ডিজাইন পছন্দকারীদের জন্য আদর্শ।

কার্ড থিম

গ্রেডিয়েন্ট কার্ড, বিভাগ ব্যাজ ও সূক্ষ্ম হোভার ইফেক্ট—যেসব সাইটে বেশি ভিজুয়াল আকর্ষণ প্রয়োজন, তাদের জন্য উপযুক্ত।

এসইও এবং পারফরম্যান্স অপ্টিমাইজেশন

শুধু সুন্দর নয়, এটি এসইও এবং সাইট স্পীড এর জন্যও অপ্টিমাইজ করা:
✓✓Schema.org মার্কআপ (প্রতিটি পোস্টের জন্য Article microdata)—গুগলকে আপনার কন্টেন্ট বুঝতে সাহায্য করে।
✓✓লেসি-লোডিং থাম্বনেইল (loading=”lazy”)—পৃষ্ঠা লোডের সময় কমায় ।
✓✓সিমান্টিক HTML5 মার্কআপ—প্রবেশযোগ্যতা এবং এসইও বাড়ায় ।
✓✓কোনো বাহ্যিক CSS ফ্রেমওয়ার্ক ব্যবহার করা হয় না (pure CSS)—হালকা ও দ্রুত
✓✓ন্যূনতম JavaScript (শুধু প্রবেশযোগ্যতা ও ঐচ্ছিক অ্যানিমেশনের জন্য)

মোবাইল-বান্ধব রেস্পন্সিভ ডিজাইন

মোবাইল ফার্স্ট ডিজাইন দর্শনের ভিত্তিতে তৈরি:
Grid/Flex ভিত্তিক লেআউট—সব স্ক্রিন সাইজে পুরোপুরি মানিয়ে যায়।
থাম্বনেইল মোবাইলে সুন্দরভাবে ছোট হয় (বড় স্ক্রিনে ৭০x৭০, মোবাইলে ৫৬x৫৬)শিরোনাম ২ লাইনের পর ডটস দেখায়—ছোট স্ক্রিনে জায়গার সঠিক ব্যবহার।

অতিরিক্ত সুবিধা

গতিশীল শর্টকোড অ্যাট্রিবিউট

প্রতিটি পোস্টে আলাদা সেটিংস ব্যবহার করতে শর্টকোডে অ্যাট্রিবিউট যোগ করুন:
[read-more count=”5″ theme=”card” cat=”news” show_excerpt=”true” show_category=”true”]

ফলব্যাক স্টেট

যদি কোনো সম্পর্কিত পোস্ট না পাওয়া যায়, তবে একটি সুন্দর মেসেজ দেখাবে: “No related posts found”—পাঠকরা বিভ্রান্ত হবে না।

প্রবেশযোগ্যতা বৈশিষ্ট্য

সব ব্যবহারকারী, এমনকি যারা স্ক্রিন রিডার ব্যবহার করেন, তাদের জন্য উপযোগী:
কীবোর্ড ফোকাস আউটলাইন—কীবোর্ড নেভিগেশন সম্ভবARIA রোলস—স্ক্রিন রিডার ব্যবহারকারীদের কন্টেন্ট বুঝতে সাহায্য করে

কাস্টমাইজযোগ্য রং

CSS ভেরিয়েবল দিয়ে রং পরিবর্তন করা যায়:
–bn24-title – শিরোনামের রং–bn24-meta – মেটা তথ্যের রং–bn24-bg – ব্যাকগ্রাউন্ড রং

অ্যাডমিন প্যানেলে লাইভ প্রিভিউ

সেটিংস পরিবর্তনের সাথে সাথে AJAX-এর মাধ্যমে লাইভ প্রিভিউ দেখায়, যাতে আপনি তাৎক্ষণিকভাবে বুঝতে পারেন কোন পরিবর্তন কী প্রভাব ফেলছে।

কীভাবে ব্যবহার করবেন

ইনস্টল ও সেটআপ

১. প্রথমে এখান থেকে প্লাগিনটি ডাওনলোড করে নিন,তারপর প্লাগইনটি ওয়ার্ডপ্রেস প্লাগইন ডিরেক্টরিতে আপলোড করুন এবং সক্রিয় করুন।
২. ওয়ার্ডপ্রেস অ্যাডমিন প্যানেলে Settings > BN24 Read Also-এ যান।
৩. আপনার পছন্দমতো সেটিংস কনফিগার করুন এবং সেভ করুন।
প্রয়োজনে স্ক্রীনশট দেখুন।

তারপর

তারপর

তারপর সব আপনার পছন্দ মতো সেটাপ করে save change এ ক্লিক করে সেটিংস save করুন।

ব্যবহারের পদ্ধতি

৪. পোস্ট এডিটরে গিয়ে কন্টেন্টের যেখানে সম্পর্কিত পোস্ট দেখাতে চান, সেখানে [read-more] শর্টকোড যোগ করুন।
নিচের ছবির মতো

৫. বা শর্টকোডে অ্যাট্রিবিউট যোগ করে নির্দিষ্ট সেটিংস ব্যবহার করুন: [read-more count=”5″ theme=”card” cat=”news”]

কাস্টমাইজেশন

৬. আরও কাস্টমাইজেশনের জন্য CSS ভেরিয়েবল ব্যবহার করে রং পরিবর্তন করুন:
:root { –bn24-title: #your-color; –bn24-meta: #your-color; –bn24-bg: #your-color; }
তো বন্ধুরা আশাকরি সব কিছু ঠিকঠাক মতো বুঝেছেন। তবুও যদি কোথাও বুঝতে সমস্যা হয় অবশ্যই কমেন্ট করে জানবেন।

আজকের মতো এখানেই শেষ করতেছি আবার নতুন কোনো পোস্টে দেখা হবে insha’Allah। ততক্ষণ ভালো থাকুন ,সুস্থ থাকুন। ভালোবাসার trickbd এর সাথেই থাকুন ধন্যবাদ।