ওয়ার্ডপ্রেস ব্লক থিমে স্টাইলিং বোতাম

ফিরে একটু সময়, গণেশ দাহল এখানে CSS-ট্রিকস-এ একটি পোস্ট লিখেছেন ওয়ার্ডপ্রেস ব্লক এবং উপাদানগুলিতে CSS বক্স শ্যাডো যুক্ত করার বিষয়ে জিজ্ঞাসা করা একটি টুইটের প্রতিক্রিয়া। সেখানে অনেক দুর্দান্ত জিনিস রয়েছে যা ওয়ার্ডপ্রেস 6.1-এ পাঠানো নতুন বৈশিষ্ট্যগুলিকে কাজে লাগায় যা ব্লক এডিটর এবং সাইট এডিটর UI এ সরাসরি জিনিসগুলিতে ছায়া প্রয়োগ করার জন্য নিয়ন্ত্রণ প্রদান করে।

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

কেন বোতাম, আপনি জিজ্ঞাসা? এটি একটি ভাল প্রশ্ন, তাই এর সাথে শুরু করা যাক।

বোতাম বিভিন্ন ধরনের

যখন আমরা ওয়ার্ডপ্রেস ব্লক এডিটরের প্রসঙ্গে বোতাম সম্পর্কে কথা বলি, তখন আমাদের দুটি ভিন্ন ধরনের মধ্যে পার্থক্য করতে হবে:

1. বোতাম ব্লকের ভিতরে চাইল্ড ব্লক
2. অন্যান্য ব্লকের ভিতরে থাকা বোতামগুলি (যেমন পোস্ট মন্তব্য ফর্ম ব্লক)

যদি আমরা এই দুটি ব্লককে একটি টেমপ্লেটে যোগ করি, তাহলে ডিফল্টরূপে তাদের চেহারা একই থাকে।

কিন্তু মার্কআপ খুব ভিন্ন:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

আমরা দেখতে পাচ্ছি, HTML ট্যাগের নাম ভিন্ন। এটি সাধারণ ক্লাস - .wp-block-button এবং .wp-element-button — যা দুটি বোতামের মধ্যে সামঞ্জস্যপূর্ণ স্টাইলিং নিশ্চিত করে।

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

সুতরাং, আমরা কিভাবে বোতাম শৈলী সংজ্ঞায়িত করব theme.json প্রকৃত CSS না লিখে? চল এটা একত্রে.

বেস শৈলী তৈরি করা

theme.json সম্পত্তি:মূল্য জোড়ায় লেখা স্কিমার একটি কাঠামোগত সেট। শীর্ষ স্তরের বৈশিষ্ট্যগুলিকে "বিভাগ" বলা হয়, এবং আমরা এর সাথে কাজ করতে যাচ্ছি styles অধ্যায়. এখানেই সমস্ত স্টাইলিং নির্দেশাবলী চলে।

আমরা বিশেষভাবে ফোকাস করব elements মধ্যে styles. এই নির্বাচক HTML উপাদানগুলিকে লক্ষ্য করে যা ব্লকগুলির মধ্যে ভাগ করা হয়৷ এটি হল মৌলিক শেল যার সাথে আমরা কাজ করছি:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

তাই আমরা কি করতে হবে একটি সংজ্ঞায়িত করা হয় button উপাদান।

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

যে button এইচটিএমএল উপাদানগুলির সাথে মিলে যায় যা সামনের প্রান্তে বোতাম উপাদানগুলি চিহ্নিত করতে ব্যবহৃত হয়। এই বোতামগুলিতে এইচটিএমএল ট্যাগ থাকে যা আমাদের দুটি বোতাম প্রকারের হতে পারে: একটি স্বতন্ত্র উপাদান (যেমন বোতাম ব্লক) বা অন্য একটি ব্লকের মধ্যে একটি উপাদান নেস্ট করা (যেমন পোস্ট মন্তব্য ব্লক)।

প্রতিটি পৃথক ব্লক স্টাইল করার পরিবর্তে, আমরা ভাগ করা শৈলী তৈরি করি। আসুন আমাদের থিমের উভয় ধরনের বোতামের জন্য ডিফল্ট ব্যাকগ্রাউন্ড এবং পাঠ্যের রঙ পরিবর্তন করি। একটি আছে color সেখানে বস্তু যে, ঘুরে, সমর্থন করে background এবং text বৈশিষ্ট্য যেখানে আমরা আমরা চাই মান সেট করি:

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

এটি উভয় ধরনের বোতামের রঙ পরিবর্তন করে:

যদি DevTools ওপেন করে এবং ওয়ার্ডপ্রেস বোতামগুলির জন্য যে সিএসএস তৈরি করে তা একবার দেখুন, আমরা দেখতে পাই যে .wp-element-button ক্লাস আমাদের সংজ্ঞায়িত শৈলী যোগ করে theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

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

ইন্টারেক্টিভ বোতাম শৈলী বাস্তবায়ন

যেহেতু এটি সিএসএস সম্পর্কিত একটি সাইট, আমি বাজি ধরতে পারি যে আপনার মধ্যে অনেকেই ইতিমধ্যেই লিঙ্ক এবং বোতামগুলির ইন্টারেক্টিভ অবস্থার সাথে পরিচিত। আমরা পারি :hover তাদের উপর মাউস কার্সার, তাদের ট্যাব :focus, তাদের তৈরি করতে তাদের উপর ক্লিক করুন :active. হেক, এমনকি একটি আছে :visited ব্যবহারকারীদের একটি ভিজ্যুয়াল ইঙ্গিত দিতে রাজ্য যে তারা আগে এটি ক্লিক করেছে।

ঐগুলি CSS সিউডো-ক্লাস এবং আমরা এগুলিকে একটি লিঙ্ক বা বোতামের মিথস্ক্রিয়া লক্ষ্য করতে ব্যবহার করি.

CSS-এ, আমরা একটি স্টাইল করতে পারি :hover এই মত রাষ্ট্র:

a:hover { /* Styles */
}

In theme.json, আমরা এই ছদ্ম-শ্রেণীর সাথে আমাদের বিদ্যমান বোতাম ঘোষণা প্রসারিত করতে যাচ্ছি।

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

এর "গঠিত" প্রকৃতি লক্ষ্য করুন। আমরা মূলত একটি রূপরেখা অনুসরণ করছি:

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

স্টাইলিং বোতামগুলি পৃথক ব্লকে নেস্ট করা হয়েছে

আসুন কল্পনা করি যে আমরা একটি ব্যতিক্রম ছাড়া সমস্ত বোতামে আমাদের বেস স্টাইল থাকতে চাই। আমরা চাই পোস্ট কমেন্ট ফর্ম ব্লকের সাবমিট বোতামটি নীল হোক। কিভাবে আমরা যে অর্জন করবে?

এই ব্লকটি বোতাম ব্লকের চেয়ে জটিল কারণ এতে আরও চলমান অংশ রয়েছে: ফর্ম, ইনপুট, নির্দেশমূলক পাঠ্য এবং বোতাম। এই ব্লকের বোতামটিকে লক্ষ্য করার জন্য, আমাদের একই ধরণের JSON কাঠামো অনুসরণ করতে হবে যা আমরা করেছি button উপাদান, কিন্তু পোস্ট মন্তব্য ফর্ম ব্লকে প্রয়োগ করা হয়েছে, যা ম্যাপ করা হয়েছে core/post-comments-form উপাদান:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

লক্ষ্য করুন যে আমরা আর কাজ করছি না elements আর পরিবর্তে, আমরা ভিতরে কাজ করছি blocks যা প্রকৃত ব্লক কনফিগার করার জন্য সংরক্ষিত। বিপরীতে, বোতামগুলিকে একটি বিশ্বব্যাপী উপাদান হিসাবে বিবেচনা করা হয় কারণ সেগুলি ব্লকগুলিতে নেস্ট করা যেতে পারে, যদিও সেগুলি একটি স্বতন্ত্র ব্লক হিসাবেও উপলব্ধ।

JSON কাঠামো উপাদানগুলির মধ্যে উপাদানগুলিকে সমর্থন করে৷ সুতরাং, যদি একটি আছে button উপাদান পোস্ট মন্তব্য ফর্ম ব্লক, আমরা এটি লক্ষ্য করতে পারেন core/post-comments-form ব্লক:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

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

ওয়ার্ডপ্রেস দ্বারা উত্পন্ন CSS এর ফলস্বরূপ আরও সুনির্দিষ্ট নির্বাচক রয়েছে:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

এবং যদি আমরা পোস্ট মন্তব্য ফর্ম বোতামের জন্য বিভিন্ন ইন্টারেক্টিভ শৈলী সংজ্ঞায়িত করতে চাই? ডিফল্ট শৈলীর জন্য আমরা যেভাবে করেছি এটি একই চুক্তি, শুধুমাত্র সেগুলিই এর ভিতরে সংজ্ঞায়িত করা হয়েছে core/post-comments-form ব্লক:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

যে বোতামগুলি ব্লকে নেই সেগুলি সম্পর্কে কী?

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

কোন চিন্তা করো না. এই সব ক্ষেত্রে, আপনি যোগ করতে হবে .wp-element-button টেমপ্লেট, ব্লক বা শর্টকোড মার্কআপে ক্লাস। ওয়ার্ডপ্রেস দ্বারা উত্পন্ন শৈলী তারপর সেই ক্ষেত্রে প্রয়োগ করা হবে।

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

মোড়ক উম্মচন

"CSS" লেখার সময় theme.json প্রথমে বিশ্রী মনে হতে পারে, আমি খুঁজে পেয়েছি যে এটি দ্বিতীয় প্রকৃতিতে পরিণত হয়। CSS-এর মতো, সীমিত সংখ্যক বৈশিষ্ট্য রয়েছে যা আপনি সঠিক নির্বাচক ব্যবহার করে বিস্তৃতভাবে বা খুব সংকীর্ণভাবে প্রয়োগ করতে পারেন।

এবং আসুন ব্যবহার করার তিনটি প্রধান সুবিধা ভুলবেন না theme.json:

1. স্টাইলগুলি ফ্রন্ট-এন্ড ভিউ এবং ব্লক এডিটর উভয়ের বোতামগুলিতে প্রয়োগ করা হয়।
2. আপনার CSS ভবিষ্যতের ওয়ার্ডপ্রেস আপডেটের সাথে সামঞ্জস্যপূর্ণ হবে।
3. জেনারেট করা শৈলীগুলি ব্লক থিম এবং ক্লাসিক থিমগুলির সাথে একইভাবে কাজ করে — আলাদা স্টাইলশীটে কিছু নকল করার প্রয়োজন নেই৷

আপনি ব্যবহার করেছেন theme.json আপনার প্রকল্পের শৈলী, আপনার অভিজ্ঞতা এবং চিন্তা শেয়ার করুন. আমি কোন মন্তব্য এবং প্রতিক্রিয়া পড়ার জন্য উন্মুখ!

• এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
• উত্স: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/