تھوڑی دیر پہلے ، گنیش دہل نے یہاں CSS-Tricks پر ایک پوسٹ لکھی۔ ایک ٹویٹ کا جواب دیتے ہوئے جس میں ورڈپریس بلاکس اور عناصر پر سی ایس ایس باکس شیڈو شامل کرنے کے بارے میں پوچھا گیا تھا۔ وہاں بہت ساری عمدہ چیزیں ہیں جو ورڈپریس 6.1 میں بھیجی گئی نئی خصوصیات کا فائدہ اٹھاتی ہیں جو بلاک ایڈیٹر اور سائٹ ایڈیٹر UI میں براہ راست چیزوں پر شیڈو لگانے کے لیے کنٹرول فراہم کرتی ہیں۔
گنیش نے اس پوسٹ میں بٹن عناصر کو مختصراً چھوا۔ میں اسے اٹھانا چاہتا ہوں اور ورڈپریس بلاک تھیمز میں اسٹائلنگ بٹنوں کے نقطہ نظر میں گہرائی میں جانا چاہتا ہوں۔ خاص طور پر، ہم ایک تازہ کھولنے کے لئے جا رہے ہیں theme.json
فائل کریں اور اسکیما میں اسٹائلنگ بٹنوں کے مختلف طریقوں کو توڑ دیں۔
کیوں بٹن، آپ پوچھتے ہیں؟ یہ ایک اچھا سوال ہے، تو آئیے اس کے ساتھ شروع کرتے ہیں۔
بٹن کی مختلف اقسام
جب ہم ورڈپریس بلاک ایڈیٹر کے تناظر میں بٹنوں کے بارے میں بات کر رہے ہیں، تو ہمیں دو مختلف اقسام میں فرق کرنا ہوگا:
- بٹن بلاک کے اندر چائلڈ بلاکس
- بٹن جو دوسرے بلاک کے اندر اندر بنے ہوئے ہیں (مثلاً پوسٹ کمنٹس فارم بلاک)
اگر ہم ان دونوں بلاکس کو ٹیمپلیٹ میں شامل کرتے ہیں، تو ان کی شکل بطور ڈیفالٹ ایک جیسی ہوگی۔
لیکن مارک اپ بہت مختلف ہے:
<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
- جو دو بٹنوں کے درمیان مستقل اسٹائل کو یقینی بناتا ہے۔
اگر ہم CSS لکھ رہے ہوتے تو ہم ان دو کلاسوں کو نشانہ بناتے۔ لیکن جیسا کہ ہم جانتے ہیں، ورڈپریس بلاک تھیمز میں سٹائل کو منظم کرنے کا ایک مختلف طریقہ ہے، اور یہ ہے theme.json
فائل. گنیش نے بھی بہت تفصیل سے اس کا احاطہ کیا۔، اور آپ اس کے مضمون کو پڑھنا اچھا کریں گے۔
تو، ہم بٹن کے انداز کی وضاحت کیسے کرتے ہیں۔ theme.json
اصل سی ایس ایس لکھے بغیر؟ آئیں اسے مل کر کرتے ہیں.
بنیادی طرزیں بنانا
theme.json
پراپرٹی: ویلیو پیئرز میں لکھا ہوا اسکیما کا ایک منظم سیٹ ہے۔ اعلی درجے کی خصوصیات کو "سیکشنز" کہا جاتا ہے، اور ہم اس کے ساتھ کام کرنے جا رہے ہیں۔ styles
سیکشن یہ وہ جگہ ہے جہاں اسٹائل کی تمام ہدایات جاتی ہیں۔
ہم خاص طور پر پر توجہ مرکوز کریں گے elements
میں styles
. یہ سلیکٹر ایچ ٹی ایم ایل عناصر کو نشانہ بناتا ہے جو بلاکس کے درمیان مشترکہ ہوتے ہیں۔ یہ وہ بنیادی شیل ہے جس کے ساتھ ہم کام کر رہے ہیں:
// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}
تو ہمیں کیا کرنے کی ضرورت ہے a کی وضاحت کریں۔ button
عنصر
={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}
کہ button
HTML عناصر سے مماثل ہے جو سامنے والے سرے پر بٹن عناصر کو نشان زد کرنے کے لیے استعمال ہوتے ہیں۔ ان بٹنوں میں ایچ ٹی ایم ایل ٹیگز ہوتے ہیں جو کہ ہمارے دو بٹن اقسام میں سے کسی ایک میں سے ہو سکتے ہیں: ایک اسٹینڈ اکیلا جزو (یعنی بٹن بلاک) یا ایک جزو دوسرے بلاک (مثلاً پوسٹ کمنٹ بلاک) کے اندر اندر بنا ہوا ہے۔
ہر ایک بلاک کو اسٹائل کرنے کے بجائے، ہم مشترکہ اسٹائل بناتے ہیں۔ آئیے آگے بڑھیں اور اپنے تھیم میں دونوں قسم کے بٹنوں کے لیے پہلے سے طے شدہ پس منظر اور متن کا رنگ تبدیل کریں۔ وہاں ایک color
وہاں اعتراض ہے کہ، بدلے میں، حمایت کرتا ہے background
اور text
خصوصیات جہاں ہم اپنی مطلوبہ اقدار کو سیٹ کرتے ہیں:
{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}
یہ دونوں قسم کے بٹن کا رنگ تبدیل کرتا ہے:
اگر DevTools کو کھولیں اور CSS پر ایک نظر ڈالیں جو ورڈپریس بٹنوں کے لیے تیار کرتا ہے، تو ہم دیکھتے ہیں کہ .wp-element-button
کلاس ان شیلیوں کو شامل کرتا ہے جن کی ہم نے وضاحت کی ہے۔ theme.json
:
.wp-element-button { background-color: #17a2b8; color: #ffffff;
}
یہ ہمارے پہلے سے طے شدہ رنگ ہیں! اگلا، ہم صارفین کو بصری تاثرات دینا چاہتے ہیں جب وہ بٹن کے ساتھ تعامل کرتے ہیں۔
انٹرایکٹو بٹن اسٹائل کو نافذ کرنا
چونکہ یہ سی ایس ایس کے بارے میں ایک سائٹ ہے، میں شرط لگا سکتا ہوں کہ آپ میں سے بہت سے لوگ پہلے سے ہی لنکس اور بٹنوں کی انٹرایکٹو حالتوں سے واقف ہیں۔ ہم کر سکتے ہیں :hover
ان پر ماؤس کا کرسر، ان میں ٹیب کریں۔ :focus
، انہیں بنانے کے لیے ان پر کلک کریں۔ :active
. ہیک، ایک بھی ہے :visited
ریاست صارفین کو ایک بصری اشارہ دینے کے لیے کہ وہ اس پر پہلے کلک کر چکے ہیں۔
وہ ہیں سی ایس ایس سیڈو کلاسز اور ہم انہیں کسی لنک یا بٹن کے تعاملات کو نشانہ بنانے کے لیے استعمال کرتے ہیں۔.
CSS میں، ہم اسٹائل کر سکتے ہیں a :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" } } } } } }
}
اس سلیکٹر کا مطلب ہے کہ ہم نہ صرف ایک مخصوص بلاک کو نشانہ بنا رہے ہیں بلکہ ہم اس بلاک میں موجود ایک مخصوص عنصر کو نشانہ بنا رہے ہیں۔ اب ہمارے پاس بٹن اسٹائل کا ایک طے شدہ سیٹ ہے جو تھیم کے تمام بٹنوں پر لاگو ہوتا ہے، اور اسٹائل کا ایک سیٹ جو مخصوص بٹنوں پر لاگو ہوتا ہے جو پوسٹ کمنٹ فارم بلاک میں موجود ہیں۔
ورڈپریس کے ذریعہ تیار کردہ سی ایس ایس کے نتیجے میں زیادہ درست سلیکٹر ہے:
.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
:
- اسٹائلز فرنٹ اینڈ ویو اور بلاک ایڈیٹر دونوں میں بٹنوں پر لاگو ہوتے ہیں۔
- آپ کا CSS مستقبل کے ورڈپریس اپ ڈیٹس کے ساتھ مطابقت رکھتا ہے۔
- تیار کردہ طرزیں بلاک تھیمز اور کلاسک تھیمز کے ساتھ یکساں کام کرتی ہیں — الگ اسٹائل شیٹ میں کسی بھی چیز کو نقل کرنے کی ضرورت نہیں ہے۔
اگر آپ نے استعمال کیا ہے theme.json
آپ کے منصوبوں میں طرزیں، براہ کرم اپنے تجربات اور خیالات کا اشتراک کریں۔ میں کسی بھی تبصرے اور آراء کو پڑھنے کے منتظر ہوں!
- SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
- پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
- ماخذ: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/
- 1
- 10
- 11
- 7
- 9
- 98
- a
- ہمارے بارے میں
- اوپر
- حاصل
- فعال
- جوڑتا ہے
- اعلی درجے کی
- فوائد
- آگے
- تمام
- پہلے ہی
- اور
- ایک اور
- اطلاقی
- کا اطلاق کریں
- درخواست دینا
- نقطہ نظر
- مضمون
- دستیاب
- واپس
- پس منظر
- بیس
- بنیادی
- بنیادی طور پر
- کیونکہ
- ہو جاتا ہے
- اس سے پہلے
- بیٹ
- کے درمیان
- سیاہ
- بلاک
- بلاکس
- بلیو
- باکس
- توڑ
- مختصر
- موٹے طور پر
- بٹن
- کہا جاتا ہے
- مقدمات
- کچھ
- تبدیل
- تبدیلیاں
- طبقے
- کلاس
- کلاسک
- رنگ
- تبصرہ
- تبصروں
- کامن
- ہم آہنگ
- مکمل
- پیچیدہ
- جزو
- سمجھا
- متواتر
- پر مشتمل ہے
- سیاق و سباق
- اس کے برعکس
- کنٹرول
- کنٹرول
- مساوی ہے
- سکتا ہے
- احاطہ کرتا ہے
- ٹوٹنا
- تخلیق
- CSS
- اپنی مرضی کے
- نمٹنے کے
- گہرے
- پہلے سے طے شدہ
- DID
- مختلف
- براہ راست
- ممتاز
- نیچے
- ہر ایک
- ایڈیٹر
- یا تو
- عناصر
- کو یقینی بنانے کے
- وغیرہ
- بھی
- مثال کے طور پر
- رعایت
- موجودہ
- توسیع
- تجربات
- توسیع
- واقف
- خصوصیات
- آراء
- فائل
- پہلا
- توجہ مرکوز
- پر عمل کریں
- کے بعد
- فارم
- آگے
- ملا
- تازہ
- سامنے
- سامنے کے آخر میں
- مستقبل
- پیدا
- پیدا ہوتا ہے
- دے دو
- دے
- گلوبل
- Go
- جا
- اچھا
- عظیم
- ہونے
- یہاں
- اجاگر کرنا۔
- ہور
- کس طرح
- HTML
- HTTPS
- in
- دیگر میں
- اشارہ
- انفرادی
- ان پٹ
- کے بجائے
- ہدایات
- بات چیت
- انٹرایکٹو
- IT
- JSON
- جان
- کی وراست
- سطح
- لیتا ہے
- روشنی
- لمیٹڈ
- لنکس
- تھوڑا
- اب
- دیکھو
- بہت
- بنا
- مین
- بنا
- مینیجنگ
- بہت سے
- نشان
- کا مطلب ہے کہ
- شاید
- زیادہ
- منتقل
- نام
- فطرت، قدرت
- ضرورت ہے
- نئی
- نئی خصوصیات
- اگلے
- تعداد
- اعتراض
- ایک
- کھول
- رائے دی
- اختیار
- حکم
- دیگر
- خاکہ
- خود
- جوڑے
- پینل
- حصے
- پی ایچ پی
- لینے
- پلاٹا
- افلاطون ڈیٹا انٹیلی جنس
- پلیٹو ڈیٹا
- مہربانی کرکے
- رابطہ بحال کرو
- پوسٹ
- منصوبوں
- خصوصیات
- جائیداد
- فراہم
- سوال
- پڑھیں
- پڑھنا
- ریڈ
- محفوظ
- نتیجہ
- اسی
- دوسری
- سیکشن
- مقرر
- ترتیبات
- سیکنڈ اور
- مشترکہ
- شیل
- بھیج دیا
- بعد
- سائٹ
- حالات
- So
- کچھ
- مخصوص
- خاص طور پر
- اسٹینڈ
- شروع کریں
- حالت
- امریکہ
- ساخت
- منظم
- سٹائل
- جمع
- کی حمایت کرتا ہے
- TAG
- بات کر
- ہدف
- ھدف بندی
- اہداف
- سانچے
- سانچے
- ۔
- بلاک
- موضوع
- چیزیں
- تین
- کے ذریعے
- کرنے کے لئے
- مل کر
- بھی
- سب سے اوپر
- سچ
- ٹرن
- پیغامات
- اقسام
- عام طور پر
- ui
- تازہ ترین معلومات
- استعمال کی شرائط
- صارفین
- قیمت
- اقدار
- مختلف
- ورژن
- لنک
- کیا
- جس
- جبکہ
- گے
- کے اندر
- بغیر
- WordPress
- ورڈپریس بلاکس
- ورڈپریس تھیم
- کام
- کام کر
- گا
- تحریری طور پر
- لکھا
- تم
- اور
- زیفیرنیٹ