ওয়ার্ডপ্রেসে টেক্সট সঙ্কুচিত করার 4টি সেরা উপায়

একবার আপনি ওয়ার্ডপ্রেসে টেক্সট আড়াল করা কতটা সহজ তা দেখেন, আপনি পাঠযোগ্যতাকে প্রভাবিত করে এমন কিছু বিষয়বস্তুর সাথে আপনার সাইটে বিশৃঙ্খল হওয়ার বিষয়ে কম চিন্তা করতে পারেন।

সংকোচনযোগ্য বিষয়বস্তু একটি টগল দিয়ে বা অ্যাকর্ডিয়ন মেনু তৈরি করে যোগ করা যেতে পারে। কিছু WP থিম আপনার সাইটে যেকোন জায়গায় অ্যাকর্ডিয়ন মেনু ইনজেক্ট করার জন্য কাস্টম শর্টকোড সহ আসে।

যদি আপনার থিম সংকোচনযোগ্য বিষয়বস্তু সমর্থন না করে, তাহলে আপনি প্লাগইনগুলির সাহায্যে বা আপনার থিম ফাইলগুলি সম্পাদনা করে ম্যানুয়ালি যোগ করতে পারেন৷



এটি এমনকি বিনামূল্যের WordPress.com প্ল্যানেও কাজ করবে, কোনো স্টাইল ছাড়াই।

কিভাবে ওয়ার্ডপ্রেসে টেক্সট সঙ্কুচিত করা যায়

ওয়ার্ডপ্রেসে টেক্সট ভেঙে ফেলার জন্য 'অ্যাকর্ডিয়ন' বা 'টগল' ফাংশন সহ 'অ্যাকর্ডিয়ন' প্লাগইন বা শর্টকোড প্লাগইন ব্যবহার করুন। WordPress.com বিনামূল্যের পরিকল্পনা পাঠ্য সম্পাদকের মধ্যে <বিস্তারিত> এইচটিএমএল যোগ করে বিষয়বস্তুকে সংকোচনযোগ্য করে তুলতে পারে। স্ব-হোস্ট করা সাইটগুলিতে, একটি jQuery UI অ্যাকর্ডিয়ন লোড করতে ওয়ার্ডপ্রেস হুক ব্যবহার করার জন্য থিমগুলি কোড করা যেতে পারে।

ওয়ার্ডপ্রেসে টগল এবং অ্যাকর্ডিয়নের মধ্যে পার্থক্য

অ্যাকর্ডিয়ন এবং টগল বৈশিষ্ট্য দুটি পদ্ধতি যা ওয়ার্ডপ্রেসে পাঠ্যকে ভেঙে ফেলার জন্য কাজ করে।

টগল এবং অ্যাকর্ডিয়ন টেক্সটের মধ্যে পার্থক্য হল এই...

  • একটি অ্যাকর্ডিয়ন উপাদানের সাথে, যখন একটি বিভাগে ক্লিক করা হয়, শুধুমাত্র বিষয়বস্তুর সেই বিভাগটি লোড হয়। যখন পরবর্তী অ্যাকর্ডিয়ন উপাদানটি ক্লিক করা হয়, পূর্ববর্তী পাঠ্য বিভাগটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়।
  • টগল ফাংশনের সাহায্যে, সমস্ত সংকোচনযোগ্য বিষয়বস্তু এলাকা লোড করা যায় এবং খোলা থাকে। টগল উপাদানগুলির সাথে প্রদর্শিত সামগ্রী বাক্সগুলি স্বয়ংক্রিয়ভাবে বন্ধ হয় না৷

দীর্ঘ পৃষ্ঠাগুলিতে, অ্যাকর্ডিয়ন উপাদানটি পছন্দনীয় কারণ এটি স্ক্রিনগুলিকে এমন প্রশ্নে পূর্ণ হতে বাধা দেয় যেগুলি সম্পর্কে ব্যবহারকারীর পড়ার আগ্রহ নেই৷

তারা একটি প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী পৃষ্ঠায় শিরোনামগুলি স্ক্রোল করতে পারে, তারপর যখন তারা একটি প্রশ্নের উত্তর পেতে চায় তখন তারা শুধুমাত্র সেই নির্দিষ্ট বিষয়বস্তু বিভাগটি দেখতে ক্লিক করতে পারে৷

এই ভাবে চিন্তা করুন…

আপনি যদি 'ডেলিভারি কত?' জানতে চান, তাহলে আপনি কি চান...

ক) শিরোনাম ট্যাগগুলিতে নির্দিষ্ট প্রশ্ন সহ একক শিরোনাম বার?

বা

খ) 80টি প্রশ্ন ও উত্তরের মাধ্যমে স্ক্রোল করা হচ্ছে যতক্ষণ না আপনি যা চেয়েছিলেন তা খুঁজে পান?

অ্যাকর্ডিয়ন উপাদানগুলি আপনার বিষয়বস্তুকে আরও স্কিমযোগ্য করে তোলে।

ওয়ার্ডপ্রেসে টেক্সট কেল্যাপ করার 4টি উপায়

1. গুটেনবার্গ এডিটরে একটি অ্যাকর্ডিয়ন ব্লক ব্যবহার করুন

যারা একটি স্ব-হোস্টেড ওয়ার্ডপ্রেস ওয়েবসাইটে নতুন 'ব্লক' বা গুটেনবার্গ এডিটর ব্যবহার করছেন, তাদের জন্য আপনার ব্লক এডিটরের সাইডবার থেকে অ্যাকর্ডিয়ন প্লাগইন যোগ করা যেতে পারে।

এটি আপনার সাইটের কার্যকারিতা বাড়ানোর জন্য প্লাগইন যোগ করার জন্য পুরানো পদ্ধতির মতো একই প্রক্রিয়া। একটি নতুন প্লাগইন যোগ করার জন্য আপনাকে আর প্লাগইন মেনুতে যেতে হবে না বলে আরও সুবিধাজনক৷

আপনার ব্লক সম্পাদক লোড করুন, একটি নতুন ব্লক যোগ করতে + আইকনে ক্লিক করুন, তারপর 'অ্যাকর্ডিয়ন' অনুসন্ধান করুন।

কোনো অ্যাকর্ডিয়ন ব্লক প্রি-ইনস্টল করা নেই। আপনাকে একটি অ্যাকর্ডিয়ন ব্লক প্লাগইন যোগ করতে হবে।

আমাদের পরীক্ষার জন্য, যোগ করা প্লাগইন ছিল ' অ্যাকর্ডিয়ন 'WPDeveloper' দ্বারা।

WP ব্লক এডিটর ড্যাশবোর্ড থেকে প্লাগইন যোগ করার ক্ষমতা ওয়ার্ডপ্রেস সংস্করণ 5.6 এ যোগ করা হয়েছে।

আপনি যদি ওয়ার্ডপ্রেসের একটি পুরানো সংস্করণ চালান তবে আপনাকে প্লাগইনটি স্ট্যান্ডার্ড উপায়ে যুক্ত করতে হবে।

বিকল্পভাবে, আপনার ওয়ার্ডপ্রেস সংস্করণটি সর্বশেষ উপলব্ধ সংস্করণে আপডেট করুন।

অ্যাকর্ডিয়ন-স্টাইলের বিষয়বস্তুর জন্য নতুন ব্লক ব্যবহার করার সুবিধা হল যে জাভাস্ক্রিপ্ট ক্যোয়ারীগুলি সক্রিয় করার জন্য প্রয়োজন শুধুমাত্র ব্লক লোড হলেই চলবে।

এটি এমন ছিল যে অ্যাকর্ডিয়ন মেনুতে ছবিগুলি লুকিয়ে রাখা সাইটের গতি বাড়াতে সাহায্য করতে পারে। এখন, ওয়ার্ডপ্রেস ডিফল্টরূপে 'অলস লোড' সক্ষম করেছে। তবুও, এটি উপস্থাপনাকে আরও ভাল করে তোলে।

প্রসারিত বিষয়বস্তু বিভাগে ছবি অন্তর্ভুক্ত করতে, তিনটি উল্লম্ব বিন্দুতে ক্লিক করুন, 'HTML হিসাবে সম্পাদনা করুন' নির্বাচন করুন এবং নিম্নলিখিত HTML স্ট্রিং ব্যবহার করে আপনার ছবির উত্স কোড যোগ করুন

<img src="http://yoursite.com/wp-content/uploads/2021/09/your-image-title.jpg" alt="give it an alternative title" width="###" height="###">

ছবির URL আপনার মিডিয়া লাইব্রেরিতে দেখানো হয়েছে।

2. শুধুমাত্র HTML এর সাথে একটি অ্যাকর্ডিয়ন বিভাগ যোগ করুন (ফ্রি WordPress.com প্ল্যানের জন্য প্রয়োজনীয়)

বিনামূল্যে WordPress.com পরিকল্পনা, একটি প্রতিবন্ধকতা আছে.

আপনি জাভাস্ক্রিপ্ট প্রশ্ন চালাতে পারবেন না, এবং আপনি ওয়ার্ডপ্রেস প্লাগইন ইনস্টল করতে পারবেন না হয় আপনি এখনও টেক্সট এডিটরের মধ্যে টেক্সট সঙ্কুচিত করতে পারেন।

আপনার পৃষ্ঠা খুলুন বা সম্পাদনা মোডে পোস্ট করুন এবং 'টেক্সট' সম্পাদক ব্যবহার করুন। ভিজ্যুয়াল এডিটর নয়।

যোগ করার কোড হল

<details>
<summary>Question 1</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>

(যতবার প্রয়োজন ততবার পুনরাবৃত্তি করুন)

এর উল্টো দিক হল আপনি এটিকে কোনো অতিরিক্ত প্লাগইন ছাড়াই যোগ করতে পারেন এবং এটি বিনামূল্যে WordPress.com অ্যাকাউন্টেও কাজ করে।

যেহেতু এটি সরল HTML, ফলাফলটি সরল পাঠ্য।

অ্যাকর্ডিয়নে স্টাইলিং উপাদান বা টগল উপাদান অন্তর্ভুক্ত করতে, একটি প্লাগইন ব্যবহার করুন বা আপনার থিম টেমপ্লেট হার্ডকোড করুন৷

প্লাগইনগুলি সহজ তাই আপনি যদি সম্পাদনা কোডের সাথে অলস হন তবে একটি প্লাগইন দিয়ে যান৷ আলটিমেট শর্টকোড প্লাগইনে একাধিক আইকন রয়েছে।

ভয়ঙ্কর জন্য, একটি কাস্টম jQuery UI অ্যাকর্ডিয়ন লোড করতে আপনার থিম হার্ডকোড করার নির্দেশাবলীর জন্য পড়া চালিয়ে যান।

3. ওয়ার্ডপ্রেস ক্লাসিক এডিটরে টেক্সট কেল্যাপ করতে প্লাগইন ব্যবহার করুন

লক্ষ লক্ষ WP ব্যবহারকারী এখনও ক্লাসিক সম্পাদকের সাথে কাজ করে। যদি আপনি তা করেন, আপনার একটি সামঞ্জস্যপূর্ণ প্লাগইন প্রয়োজন।

ব্যবহার করার জন্য সবচেয়ে সহজ প্লাগইনগুলির মধ্যে একটি হল…

PickPlugins দ্বারা Accordion

এই প্লাগইনটি ফন্ট অসাধারন লাইব্রেরির সাথে যুক্ত। ডিফল্ট তীরগুলিকে ওভাররাইড করতে Font Awesome থেকে যেকোনো আইটেমের জন্য HTML কোড আইকন যোগ করুন।

একবার ইনস্টল হয়ে গেলে, আপনার অ্যাডমিন সাইডবারে একটি নতুন মেনু যোগ করা হয়। আপনার প্রয়োজন অনুযায়ী অ্যাকর্ডিয়ন মেনু তৈরি করতে 'নতুন যোগ করুন' এ ক্লিক করুন।

এইচটিএমএল গ্রহন করে এমন আপনার সাইটের যেকোন জায়গায় সংকুচিত পাঠ্যটি প্রদর্শিত হতে পারে।

এটি HTML উইজেট ব্যবহার করে পোস্ট, পৃষ্ঠা এবং উইজেট এলাকার মধ্যে হতে পারে। উইজেট যোগ করুন, এটি একটি শিরোনাম দিন, শর্টকোড সন্নিবেশ করুন এবং অ্যাকর্ডিয়ন মেনু প্রদর্শিত হয়।

বিষয়বস্তুর প্রস্থ স্বয়ংক্রিয়ভাবে সামঞ্জস্য হয় তাই বিভিন্ন স্ক্রিনের জন্য ডিসপ্লে মাপ ঠিক করার জন্য CSS-এর সাথে কোনো গোলমাল না হয়।

অ্যাকর্ডিয়ন মেনুতে, আপনি এইচটিএমএল ব্যবহার করতে পারেন এবং ছবি সন্নিবেশ করতে পারেন।

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

অন্য কথায়, এটি আপনাকে ওয়ার্ডপ্রেস ওয়েবসাইটগুলিতে উইজেট রিয়েল এস্টেটের আরও ভাল ব্যবহার দেয়।

… সব সময় আপনার সাইডবার উইজেট এলাকা বিশৃঙ্খল এড়াতে.

4. ওয়ার্ডপ্রেস থিমগুলিতে একটি jQuery UI অ্যাকর্ডিয়ন যুক্ত করুন৷

এই প্রক্রিয়াটি কিছুটা জটিল কারণ ওয়ার্ডপ্রেস জাভাস্ক্রিপ্টকে হেডার ফাইলের মধ্যে চালানোর অনুমতি দেয় না।

পরিবর্তে, জেএস স্ক্রিপ্টগুলি ইতিমধ্যেই একটি ওয়ার্ডপ্রেস ইনস্টলেশনে ডিফল্টরূপে নিবন্ধিত হয়েছে। আপনাকে যা করতে হবে তা হল তাদের মধ্যে 'হুক'।

আপনি যদি নিজের কাস্টম থিম বা প্লাগইন তৈরি না করেন, তাহলে আপনাকে ওয়ার্ডপ্রেস হুক ব্যবহার করে ওয়ার্ডপ্রেসে টেক্সট কেল্যাপ করতে শিখতে হবে না।

তবুও, এটি কীভাবে করা হয় তা জানার জন্য ক্ষতি হবে না কারণ কিছু কাজ করা বন্ধ করে দিলে আপনি সংশোধন করতে পারেন। যেমন a পরে ওয়ার্ডপ্রেস আপডেট .

WP থিম ডেভেলপাররা ওয়ার্ডপ্রেস কোডেক্সে হুক ব্যবহার করে অনেকগুলো প্রাক-বান্ডিল লাইব্রেরিতে হুক করতে।

'jQuery UI Accordion' ফাংশনটি WP-তে সংকোচনযোগ্য পাঠ্য তৈরি করার জন্য চালানো হয়।

স্ক্রিপ্ট এবং ফাইল ওয়ার্ডপ্রেস টেক্সট ধ্বংস

প্রথমে জাভাস্ক্রিপ্ট ফাইল তৈরি করুন।

নোটপ্যাডের মতো একটি সাধারণ পাঠ্য সম্পাদক ব্যবহার করুন এবং নিম্নলিখিতটিতে পেস্ট করুন

//jQuery-ui-accordion
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});

ফাইলটিকে 'accordion.js' হিসাবে সংরক্ষণ করুন।

এই কোডটি কি করে...

কোডের শেষ লাইনটি হল সমস্ত উপাদানকে সঙ্কুচিত করা।

'সক্রিয়' স্থিতিটিকে মিথ্যাতে সেট করার অর্থ হল যে ব্যবহারকারীকে সামগ্রী বিভাগটি লোড করতে ক্লিক করতে হবে৷ এটিকে 'সত্য' তে সেট করলে আপনার অ্যাকর্ডিয়ন বিভাগে প্রথম আইটেমটি প্রি-লোড হবে।

'উচ্চতা শৈলী' এর শেষ অংশ: 'সামগ্রী' মানে কোন সর্বোচ্চ-উচ্চতা সেট নেই। এটিকে 'সামগ্রী' তে সেট করা হলে নিচের দিকে বা স্ক্রোল করার প্রয়োজন ছাড়াই ডিভ উপাদানের মধ্যে সমস্ত সামগ্রী লোড হবে৷

উপরের কোডে, #accordion হল 'div ID' এর জন্য এবং .accordion হল 'div ক্লাস' এর জন্য। এই যোগ করা সঙ্গে, আপনি যখন স্থান

<div ID="accordion"> and <div class="accordion">

… আপনার পাঠ্য সম্পাদকের মধ্যে, jQuery ট্রিগার করা হবে।

  • [# ] একটি শনাক্তকারী
  • [ ] একটি শ্রেণী

WP থিমগুলিতে কাস্টম জাভাস্ক্রিপ্ট ফাইলগুলি কীভাবে যুক্ত করবেন

আপনার cPanel-এ যান, আপনি যে থিমটিতে স্ক্রিপ্ট চালাতে চান সেটি খুলুন, তারপর 'JS' নামক ফোল্ডারটি সন্ধান করুন। এখানে যেকোন জাভাস্ক্রিপ্ট ফাইল রাখা যায়।

কিছু থিমের থিম ফাইলের মূলে ফোল্ডার থাকবে ফাইল পাথ: WP Content > Themes > Your Theme > JS।

অন্যরা থিম ফোল্ডারের মধ্যে একটি 'সম্পদ' ফোল্ডারের মতো একটি সাবফোল্ডার ব্যবহার করতে পারে। এটি ফাইলের পথ অনুসরণ করবে: WP বিষয়বস্তু > থিম > আপনার থিম > সম্পদ > JS।

সমস্ত জাভাস্ক্রিপ্ট ফাইলের ফোল্ডার হল JS। যদি আপনার থিমে একটি না থাকে তবে একটি তৈরি করুন।

আপনার থিমের জন্য JS ফোল্ডার খুলুন, 'ফাইল আপলোড করুন' এ ক্লিক করুন এবং আপনার 'accordion.js' ফাইলটি ড্রপ করুন।

JavaScript লোড করতে functions.php এডিট করুন

এই অংশটি হল ওয়ার্ডপ্রেসকে জাভাস্ক্রিপ্ট ফাইল লোড করতে বলা। বেশিরভাগ অন্যান্য প্ল্যাটফর্মে, এটি হেডার ফাইলে করা হয়। যেহেতু ওয়ার্ডপ্রেস পিএইচপি-তে চলে, তাই header.php ফাইলে