TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে ওয়ার্ডপ্রেসে প্রতিক্রিয়াশীল টেবিল তৈরি করবেন?

8

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

ওয়ার্ডপ্রেস সাইটে রেসপন্সিভ টেবিল তৈরির জন্য অনেক ফ্রি এবং পেইড প্লাগইন রয়েছে। আমাদের প্রিয় প্লাগইন হল টেবিলপ্রেস এবং আমরা ব্যাখ্যা করবো কিভাবে টেবিলপ্রেস প্লাগইন দিয়ে ওয়ার্ডপ্রেসে রেসপনসিভ টেবিল তৈরি করা যায়।

টেবিলপ্রেস কেন?

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

টেবিল প্রেস এবং অ্যাড-অন ইনস্টল করা

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

  • TablePress প্রতিক্রিয়াশীল এক্সটেনশন পৃষ্ঠায় যান ।
  • রেসপন্সিভ টেবিল এক্সটেনশন জিপ ফাইলটি ডাউনলোড করুন
  • উল্লিখিত হিসাবে, বিকাশকারী এই এক্সটেনশনের জন্য অনুদান হিসাবে $ 9 অনুরোধ করে। যদি আপনি প্লাগইনটি আপনার সাইটে প্রাথমিক সম্পদ হিসাবে ব্যবহার করার পরিকল্পনা করেন তবে আমরা $ 9 দান করার দৃ strongly়ভাবে সুপারিশ করি।
  • আপনার ওয়ার্ডপ্রেস অ্যাডমিন প্যানেলে ফিরে যান এবং "প্লাগইন> নতুন যোগ করুন" বিভাগে যান।
  • "আপলোড প্লাগইন" বোতামে ক্লিক করুন। "ফাইল নির্বাচন করুন" বোতামে ক্লিক করুন এবং "টেবিলপ্রেস- প্রতিক্রিয়াশীল- tables.zip" ফাইলটি নির্বাচন করুন যা আপনি আগে ডাউনলোড করেছেন।
  • অবশেষে, আপনার সাইটে এক্সটেনশন ইনস্টল শুরু করতে "এখন ইনস্টল করুন" বোতামে ক্লিক করুন।
  • সফল ইনস্টলেশনের পরে এক্সটেনশনটি সক্রিয় করুন।

কিভাবে ওয়ার্ডপ্রেসে প্রতিক্রিয়াশীল টেবিল তৈরি করবেন?

আপনি প্রতিক্রিয়াশীল টেবিল এক্সটেনশন ইনস্টল করার চেষ্টা করার আগে প্রথমে টেবিলপ্রেস প্লাগইনটি ইনস্টল এবং সক্রিয় করতে ভুলবেন না।

একটি টেবিল তৈরি করা

টেবিলপ্রেস একটি টেবিল তৈরির বিভিন্ন উপায় প্রদান করে; আপনি কিভাবে টেবিলপ্রেস দিয়ে একটি টেবিল তৈরি করবেন সে সম্পর্কে আমাদের আগের নিবন্ধে প্লাগইন বৈশিষ্ট্যটি উল্লেখ করতে পারেন । নিচে টেবিলপ্রেসে একটি টেবিল তৈরির ধাপের সারসংক্ষেপ দেওয়া হল:

  • "সরঞ্জাম> টেবল প্রেস> নতুন যোগ করুন" মেনুতে যান এবং একটি টেবিল তৈরি শুরু করুন এবং বিকল্পগুলি কাস্টমাইজ করুন।
  • বিকল্পভাবে, "আমদানি" ট্যাবে যান এবং বাহ্যিক ডেটা উত্স থেকে একটি টেবিল আমদানি করুন। উদাহরণস্বরূপ, আপনি কেবল টেবিল তৈরি করতে আপনার এক্সেল শীট ডেটা আপলোড করতে পারেন।

কিভাবে ওয়ার্ডপ্রেসে প্রতিক্রিয়াশীল টেবিল তৈরি করবেন?

আপনার টেবিল তৈরির পরে, আপনার পরিবর্তনগুলি সংরক্ষণ করুন এবং টেবিল আইডি শর্টকোডটি নোট করুন ।

টেবিল শর্টকোড োকানো

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

টেবিলপ্রেস টেবিলে টেবিল আইডি শর্টকোড থাকবে ফরম্যাট টেবিল আইডি = xxx / ভিতরে বর্গাকার বন্ধনী । একটি শর্টকোড ব্লক যোগ করুন এবং আপনার টেবিল আইডি শর্টকোড সন্নিবেশ করান যেমনটি আপনি আগে উল্লেখ করেছেন।

টেবিলগুলি প্রতিক্রিয়াশীল করা

টেবিলপ্রেস প্রতিক্রিয়াশীল টেবিল তৈরির তিনটি ভিন্ন উপায় প্রদান করে।

  • স্ক্রল করুন
  • উল্টানো
  • সংকোচন

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

প্রতিক্রিয়াশীল স্ক্রোল টেবিল

যখন টেবিলে অনেক কলাম থাকে তখন আপনার টেবিলকে প্রতিক্রিয়াশীল করার জন্য এটি সর্বোত্তম বিকল্প। এটি কেবল একটি অনুভূমিক স্ক্রোল বার যুক্ত করবে যাতে ব্যবহারকারীরা সোয়াইপ করে স্ক্রিনের বাইরে বিষয়বস্তু দেখতে পারেন। একটি প্রতিক্রিয়াশীল স্ক্রোল টেবিল কেমন হবে তার একটি উদাহরণ এখানে দেওয়া হল।

প্রতিক্রিয়াশীল সঙ্কুচিত টেবিল

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

প্রতিক্রিয়াশীল ফ্লিপ টেবিল

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

নাম বিষয় 1 বিষয় 2 বিষয় 3 বিষয় 4 বিষয় 5 বিষয় 6 বিষয় 7 বিষয় 8 বিষয় 9 বিষয় 10 বিষয় 11 বিষয় 12 বিষয় 13
জন 50 60 70 45 68 98 78 54 21 23 43 76 87
পল 89 65 45 12 32 56 78 89 চৌদ্দ 56 98 56 45
ডেভিড 98 84 65 89 12 45 98 65 32 12 45 43 75
রালফ 65 56 23 45 78 54 65 21 35 64 .০ 78 34
ক্রাউস 15 56 48 98 65 45 78 23 56 45 87 56 98
পিটার 45 89 98 ৫১ 65 65 67 43 23 76 45 34 87
বিং 67 54 89 76 .০ 56 76 80 98 56 98 76 54

সম্পর্কিত: প্রতিক্রিয়াশীল ফ্লিপবুক ওয়ার্ডপ্রেস প্লাগইন পর্যালোচনা

নির্দিষ্ট ডিভাইসে ফ্লিপ রেসপন্সিভ টেবিল সক্ষম করা

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

যাইহোক, যখন আপনার অনেকগুলি কলামের সাথে বড় টেবিল থাকে, তখন আপনার ডেস্কটপ বা ট্যাবলেটগুলিতেও প্রতিক্রিয়াশীল টেবিল থাকতে হতে পারে। প্লাগইন এক্সটেনশন প্রতিক্রিয়াশীল টেবিলের জন্য একটি ব্রেকিং পয়েন্ট যোগ করে এই কাজটিকে সহজ করে তোলে। কোন ব্রেকপয়েন্ট যোগ না করেই স্ক্রোল এবং কোল্যাপ মোড সকল ডিভাইসে কাজ করবে। ফ্লিপ মোডের জন্য, বিভিন্ন ডিভাইসে টেবিলকে প্রতিক্রিয়াশীল করতে নীচের মত শর্টকোড পরিবর্তন করুন। (বর্গাকার বন্ধনীর মধ্যে শর্টকোডগুলি সংযুক্ত করা নিশ্চিত করুন [])

  • টেবিল id = 123 responisve = flip responsive_breakpoint = desktop /
  • টেবিল আইডি = 123 রেসপন্সিভ = ফ্লিপ রেসপনসিভ_ব্রেকপয়েন্ট = ট্যাবলেট
  • টেবিল আইডি = 123 রেসপন্সিভ = ফ্লিপ রেসপনসিভ_ব্রেকপয়েন্ট = মোবাইল /
  • টেবিল আইডি = 123 রেসপনিসভ = ফ্লিপ রেসপনসিভ_ব্রেকপয়েন্ট = সব

এখানে ব্রেকপয়েন্টগুলির জন্য সঠিক মাত্রা রয়েছে:

  • ডেস্কটপ – 1200px এর চেয়ে ছোট প্রস্থের ডিভাইস
  • ট্যাবলেট – 980px এর চেয়ে ছোট প্রস্থের ডিভাইস
  • ফোন – 768px এর চেয়ে ছোট প্রস্থের ডিভাইস
  • সমস্ত – ডিভাইসের মাত্রা নির্বিশেষে সমস্ত ডিভাইসে প্রতিক্রিয়াশীলতা যুক্ত করুন।

পৃষ্ঠার গতিতে সতর্কতা

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

রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত