ওয়ার্ডপ্রেস

কিভাবে টুলসেট ব্লক দিয়ে ডায়নামিক ওয়ার্ডপ্রেস ইমেজ গ্যালারী এবং স্লাইডার তৈরি করবেন

নতুন ওয়ার্ডপ্রেস ব্লক এডিটরে ইমেজ নিয়ে কাজ করার জন্য আরও নমনীয় উপায় খুঁজছেন?

এই পোস্টে, আমরা আপনাকে দেখাব কিভাবে আপনি ব্লক এডিটরে আপনার নিজস্ব স্ট্যাটিক বা গতিশীল ইমেজ স্লাইডার এবং গ্যালারী তৈরি করতে টুলসেট ব্লক ব্যবহার করতে পারেন।

আপনি যদি টুলসেটের সাথে পরিচিত না হন তবে এটি এমন একটি সরঞ্জামের স্যুট যা আপনাকে কাস্টম সামগ্রী এবং গতিশীল ওয়ার্ডপ্রেস সাইটগুলির সাথে কাজ করতে সহায়তা করে৷

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

WP মেয়র পাঠকরা টুলসেট কেনার সময় একচেটিয়া 20% ছাড় পেতে পারেন।

নীচে, আমরা টুলসেট ব্লকের একটি নির্দিষ্ট অংশে ফোকাস করতে যাচ্ছি - ছবি।

এটি কীভাবে কাজ করে এবং কীভাবে এটি আপনাকে আরও ভাল ওয়ার্ডপ্রেস সাইট তৈরি করতে সহায়তা করতে পারে তা জানতে পড়তে থাকুন।

কিভাবে টুলসেট ব্লক ওয়ার্ডপ্রেস ইমেজ সাহায্য করে?

টুলসেট ব্লক আপনাকে নেটিভ ওয়ার্ডপ্রেস ব্লক এডিটর ব্যবহার করে আপনার ওয়ার্ডপ্রেস সাইটের বিষয়বস্তু প্রদর্শন করতে সাহায্য করে – কোন কোডের প্রয়োজন নেই।

আমরা আগে এখানে টুলসেট ব্লক সম্পর্কে লিখেছিলাম।

আপনি হয়তো বলছেন, "কলিন, ব্লক এডিটর ইতিমধ্যেই আপনাকে বিষয়বস্তু প্রদর্শন করতে দেয় - এটাই পুরো পয়েন্ট!"।

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

যদিও আমি একটু দূরে সরে যাচ্ছি, কারণ এই পোস্টটি ছবি সম্পর্কে।

টুলসেট ব্লক v. 1.3 এর সাথে, আপনি দুটি চিত্র-কেন্দ্রিক ব্লকে অ্যাক্সেস পাবেন:

  • দরদালান - গ্রিড, রাজমিস্ত্রি, বা কোলাজ গ্যালারী তৈরি করুন।
  • চিত্র স্লাইডার - বিভিন্ন লেআউট, ক্যাপশন এবং আরও অনেক কিছু সহ স্লাইডার এবং ক্যারোজেল তৈরি করুন।

এই দুটি ব্লকই আপনাকে আপনার গ্যালারী/স্লাইডারগুলির শৈলী এবং বিন্যাস নিয়ন্ত্রণ করার জন্য প্রচুর বিকল্প সহ একটি স্ট্যাটিক সেট থেকে গ্যালারি বা স্লাইডার তৈরি করতে দেয়।

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

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

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

কুল, ডান? আমি আপনাকে দেখাব কিভাবে এটি কাজ করে পরবর্তী বিভাগে।

স্ট্যাটিক কন্টেন্ট সহ টুলসেট ইমেজ ব্লক কিভাবে ব্যবহার করবেন

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

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

তারপরে, পরবর্তী বিভাগে, আমি আপনাকে দেখাব কিভাবে এটি আপনার গ্যালারি এবং স্লাইডারগুলিকে গতিশীলভাবে পপুলেট করতে কাজ করে।

গ্যালারী ব্লক

আপনি যখন নতুন ঢোকাবেন দরদালান ব্লক, আপনি তিনটি ভিন্ন লেআউট থেকে চয়ন করতে সক্ষম হবেন:

  1. গ্রিড
  2. রাজমিস্ত্রির কাজ
  3. কোলাজ
গ্যালারি লেআউট

একবার আপনি আপনার লেআউট বেছে নিলে, আপনি এর দ্বারা চিত্রগুলি যোগ করতে সক্ষম হবেন:

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

আমি পরবর্তী বিভাগের জন্য গতিশীল সামগ্রী সংরক্ষণ করব, তাই এই উদাহরণের জন্য কিছু নতুন ছবি আপলোড করা যাক:

চিত্র উত্স

এবং ভয়েলা - আপনি একটি গ্যালারি পেয়েছেন. তারপর আপনি কনফিগার করতে ডানদিকে ব্লক সাইডবার ব্যবহার করতে পারেন:

  • আপনার লেআউটের শৈলী, যেমন একটি গ্রিড বা রাজমিস্ত্রির গ্যালারিতে কতগুলি কলাম ব্যবহার করতে হবে।
  • প্রতিটি ছবির জন্য ক্যাপশন.
  • একটি লাইটবক্সে ছবি খুলবেন কি না।
রাজমিস্ত্রির গ্যালারির উদাহরণ

গ্রিড এবং রাজমিস্ত্রির বিন্যাসগুলি মোটামুটি স্ব-ব্যাখ্যামূলক, কিন্তু কোলাজ বিন্যাসে একটি ঝরঝরে বৈশিষ্ট্য রয়েছে যা আপনাকে আগে থেকে তৈরি কোলাজ বিন্যাস থেকে বেছে নিতে বা আপনার নিজের ডিজাইন করতে দেয়:

কোলাজ লেআউট

আপনি যদি নিজের লেআউট ডিজাইন করেন, আপনি প্রতিটি গ্যালারি আইটেমের আকার এবং স্থান নির্ধারণ করতে একটি গ্রিড সিস্টেম ব্যবহার করতে পারেন, যা সত্যিই দুর্দান্ত:

কাস্টম কোলাজ
সফটওয়্যার: স্নিপেস্ট

ইমেজ স্লাইডার ব্লক

ইমেজ স্লাইডার ব্লক গ্যালারি ব্লকের মতোই কাজ করে। 

আপনি যখন একটি নতুন ইমেজ স্লাইডার তৈরি করবেন, তখন আপনি একই তিনটি উৎস থেকে বেছে নিতে পারবেন:

  • আপলোড
  • মিডিয়া লাইব্রেরি
  • ডাইনামিক সোর্স

তারপরে, আপনি পাশের বিকল্পগুলি ব্যবহার করতে পারেন:

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

এখন যেহেতু আপনি বেসিকগুলি জানেন, আসুন এই দুটি উইজেটের আরও উন্নত ব্যবহারে প্রবেশ করি এবং আমি আপনাকে দেখাব কিভাবে আপনি আপনার গ্যালারি এবং স্লাইডারগুলিকে গতিশীলভাবে পপুলেট করতে পারেন৷

কিভাবে ডায়নামিক কন্টেন্ট সহ টুলসেট ইমেজ ব্লক ব্যবহার করবেন

যদিও নতুন টুলসেট ব্লকগুলি স্ট্যাটিক ইমেজের জন্য উপযোগী, সেখানে ইতিমধ্যেই প্রচুর ব্লক রয়েছে যা আপনাকে স্ট্যাটিক গ্যালারী এবং ছবি তৈরি করতে সাহায্য করতে পারে।

যেখানে নতুন টুলসেট ইমেজ ব্লকগুলি সত্যিই শক্তিশালী (এবং অনন্য) হয় যখন এটি গতিশীল বিষয়বস্তুর ক্ষেত্রে আসে।

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

তাই… কিভাবে এই অনুশীলনে কাজ করতে পারে?

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

যখন আমি একটি নতুন "হাউস" তৈরি করি তখন নিয়মিত পুনরাবৃত্তি করা চিত্র ক্ষেত্রটি কেমন দেখায় তার একটি উদাহরণ এখানে দেওয়া হল:

কাস্টম ক্ষেত্রের উদাহরণ
সফটওয়্যার: স্নিপেস্ট

এখন, আমি আপনাকে দেখাব কিভাবে গতিশীলভাবে সেই ছবিগুলিকে গ্যালারি বা স্লাইডারে টানতে হয়।

দরদালান

যখন আপনি একটি গ্যালারি ব্লক যোগ করেন, তখনও আপনি আপনার নিজস্ব লেআউট চয়ন করতে এবং আমি আপনাকে আগে দেখানো অন্যান্য সেটিংস ব্যবহার করতে সক্ষম হবেন৷

শুধুমাত্র এখন, আপনি যখন ইমেজ যোগ করার জন্য প্রম্পট দেখতে পাবেন, আপনি বেছে নেবেন ডাইনামিক সোর্স:

গতিশীল উত্স

তারপরে, আপনি আপনার উত্স হিসাবে পুনরাবৃত্তি করা চিত্রের কাস্টম ক্ষেত্রটি চয়ন করতে সক্ষম হবেন:

কাস্টম ক্ষেত্র নির্বাচন করুন

একবার আপনি সেই উত্সটি নির্বাচন করলে, আপনি আপনার গ্যালারির একটি পূর্বরূপ দেখতে পাবেন কাস্টম ক্ষেত্রের ছবিগুলি ব্যবহার করে যা আমি আপনাকে আগে দেখিয়েছি:

গতিশীল গ্যালারি

আপনি যদি সেই কাস্টম ক্ষেত্র থেকে ছবি যোগ করতে বা সরাতে চান, সেই পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে আপনার গ্যালারিতে প্রযোজ্য হবে।

চিত্র স্লাইডার

আপনি আপনার ইমেজ স্লাইডারের জন্য ঠিক একই পদ্ধতি ব্যবহার করতে পারেন।

যখন আপনি একটি নতুন ইমেজ স্লাইডার ব্লক যোগ করেন, আপনি চয়ন করতে পারেন ডাইনামিক সোর্স আপনার চিত্রগুলির জন্য এবং তারপরে আপনার পুনরাবৃত্তি করা চিত্র ক্ষেত্রটি নির্বাচন করুন ঠিক যেমনটি আমি আপনাকে গ্যালারি ব্লক দিয়ে দেখিয়েছি:

ডায়নামিক স্লাইডার

টুলসেট চেষ্টা করুন

আমরা টুলসেটের পিছনে দলের সাথে কাজ করেছি, পৃষ্ঠা নির্মাতা যা আপনাকে কোডিং ছাড়াই ওয়ার্ডপ্রেস সাইটগুলি তৈরি করতে দেয়, আপনাকে একচেটিয়া 20% ছাড় দিতে।

20% ডিসকাউন্ট

আপনি অন্যান্য পোস্ট/পৃষ্ঠাগুলিতেও ডায়নামিক সামগ্রী ব্যবহার করতে পারেন

আপনি বর্তমানে যে পোস্টের সাথে কাজ করছেন তার জন্য গতিশীলভাবে চিত্র সন্নিবেশ করা ছাড়াও, আপনি আপনার সাইটের অন্য কোথাও একটি গ্যালারি বা স্লাইডারকে গতিশীলভাবে পপুলেট করতে পারেন৷

উদাহরণ স্বরূপ, ধরা যাক আপনি একটি ব্লগ পোস্ট লিখছেন যেখানে আপনি এমন একটি বাড়ির ছবি তুলে ধরতে চান যা আপনি হাউসের কাস্টম পোস্টের ধরনে যোগ করেছেন।

শুরু করার জন্য, আপনি ব্লগ পোস্টে একটি নতুন গ্যালারি বা ইমেজ স্লাইডার ব্লক যোগ করবেন এবং বেছে নিন ডাইনামিক সোর্স ঠিক আগের মত।

শুধুমাত্র এখন, মধ্যে পোস্ট উত্স ড্রপ-ডাউন, আপনি নির্বাচন করুন অন্যান্য পোস্ট. তারপরে, আপনি যে পোস্টটি অনুসন্ধান করতে চান সেই ছবিগুলি রয়েছে তা অনুসন্ধান করতে পারেন৷ এই উদাহরণে, এটি "123 WP মেয়র St"-এর জন্য "হাউস" তালিকা:

অন্য পোস্ট চয়ন করুন

তারপর, আপনি যে ক্ষেত্রটি অনুসন্ধান করতে চান তা নির্বাচন করতে পারেন। এবং একবার আপনি এটি সম্পন্ন করার পরে, আপনি আগের মতই আপনার গতিশীলভাবে জনবহুল গ্যালারি দেখতে পাবেন:

অন্য পোস্ট থেকে গতিশীল গ্যালারি

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

এটি ইমেজ স্লাইডার ব্লকের জন্য একই কাজ করে।

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

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

আজই টুলসেট ব্লক ব্যবহার করা শুরু করুন

টুলসেট আপনাকে কাস্টম কোডের উপর নির্ভর না করে কাস্টম, গতিশীল ওয়ার্ডপ্রেস সাইট তৈরি করার ক্ষমতা দেয়।

টুলসেট ব্লকের সাথে, আপনি সরাসরি ওয়ার্ডপ্রেস ব্লক এডিটর থেকে আপনার গতিশীল সামগ্রী নিয়ে কাজ করতে পারেন।

এই পোস্টে, আমরা হাইলাইট করেছি কিভাবে টুলসেট ব্লক আপনাকে নতুন গ্যালারি এবং ইমেজ স্লাইডার ব্লক ব্যবহার করে ছবিগুলির সাথে কাজ করতে সাহায্য করতে পারে।

সেটিংস এবং শৈলী বিকল্পগুলির পরিপ্রেক্ষিতে, ব্লকগুলি ইতিমধ্যেই নমনীয় এবং অন্যান্য গ্যালারি এবং স্লাইডার প্লাগইনগুলির সাথে প্রতিযোগিতামূলক৷

যাইহোক, যা সত্যিই টুলসেট ব্লকগুলিকে আলাদা করে তা হল আপনার গ্যালারি এবং স্লাইডারগুলিকে গতিশীলভাবে পপুলেট করার ক্ষমতা।

আপনি টুলসেট ব্যবহার করে পুনরাবৃত্তিমূলক চিত্র ক্ষেত্র তৈরি করতে পারেন এবং তারপরে আপনার ওয়ার্ডপ্রেস সাইটের যেকোন জায়গায় গ্যালারি এবং স্লাইডারগুলি তৈরি করতে সেই চিত্র ক্ষেত্রগুলি ব্যবহার করতে পারেন, যার মধ্যে আপনি টুলসেট দিয়ে তৈরি করা টেমপ্লেটগুলি সহ।

আপনি যদি টুলসেট কী করতে পারে তার কিছু উদাহরণ দেখতে চান এবং এটি কীভাবে কাজ করে তা শিখতে চান, টুলসেট ডকুমেন্টেশন এবং রেফারেন্স সাইটগুলি দেখুন।

এবং আপনি যদি নিজেই টুলসেট চেষ্টা করতে চান তবে শুরু করার জন্য নীচের লিঙ্কটি দেখুন।

টুলসেট পান

সম্পরকিত প্রবন্ধ

0 মন্তব্য
ইনলাইন প্রতিক্রিয়া
সমস্ত মন্তব্য দেখুন
শীর্ষ বোতামে ফিরে যান