اگر ہم براؤز کریں۔ ورڈپریس تھیم ڈائرکٹری، تھیمز کی اکثریت کور کی تصاویر کو ظاہر کرتی ہے۔ یہ مقبول مانگ میں ایک خصوصیت ہے۔ کور پیج کا رجحان یہاں تک کہ سچ ہے۔ بلاک تھیم ڈائرکٹری اسکرین شاٹس بھی.
آئیے سے درج ذیل مثال پر غور کریں۔ بیس بیس (ایک کلاسک تھیم) جس میں a کور ٹیمپلیٹ جسے واحد پوسٹ اور صفحہ دونوں میں ڈسپلے کرنے کے لیے استعمال کیا جا سکتا ہے، جہاں پوسٹ کی نمایاں تصویر اوپر دکھاتی ہے جو براؤزر کی سکرین پر پھیلی ہوتی ہے، پوسٹ ٹائٹل اور نیچے دیگر مطلوبہ میٹا ڈیٹا کے ساتھ۔ کور ٹیمپلیٹس ایسا مواد بنانے کی اجازت دیتے ہیں جو مواد کی نمائش کی روایتی رکاوٹوں سے الگ ہو۔
کور ٹیمپلیٹس بنانے کے لیے فی الحال پی ایچ پی کوڈ لکھنے کی ضرورت ہے جیسا کہ یہاں میں کیپچر کیا گیا ہے۔ Twenty Twenty پہلے سے طے شدہ تھیم کا کور ٹیمپلیٹ. اگر ہم دیکھیں template-parts/content-cover.php فائل، اس پر مشتمل ہے کوڈ مواد کی نمائش کے لیے جب cover-template استعمال کیا جاتا ہے.
اس طرح، اگر آپ پی ایچ پی کے بارے میں گہرا علم نہیں رکھتے ہیں تو اپنی مرضی کے مطابق کور پیج بنانا ممکن نہیں ہے۔ بہت سے عام ورڈپریس صارفین کے لیے پلگ ان جیسے استعمال کرنے کا واحد آپشن ہے۔ کسٹم پوسٹ کی قسم UI جیسا کہ میں بیان کیا گیا ہے۔ یہ مختصر ویڈیو.
بلاک تھیمز میں سیکشنز کا احاطہ کریں۔
چونکہ ورڈپریس 5.8، تھیم مصنفین اپنی مرضی کے مطابق ٹیمپلیٹس بنا سکتے ہیں (جیسے واحد پوسٹ، مصنف، زمرہ، اور دیگر) بلاک ایڈیٹر کور بلاک اور ان کے تھیمز میں کم سے کم یا بغیر کوڈ کے بنڈل۔
بلاک تھیم ٹیمپلیٹس میں سرفہرست بڑے کور سیکشنز کیسے بنائے جاتے ہیں اس میں غوطہ لگانے سے پہلے، آئیے مختصراً دو بلاک تھیمز کو دیکھتے ہیں۔ بیس بائیس اور وابی بذریعہ رچ ٹابر (مکمل جائزہ یہاں).
پردے کے پیچھے، ٹوئنٹی ٹوئنٹی ٹو ایک بڑے ہیڈر کو لاگو کرتا ہے بذریعہ پیٹرن کے طور پر محفوظ کردہ ایک چھپی ہوئی تصویر کو شامل کرنا میں header-dark-large حصے جبکہ Wabi تھیم میں، ایک ہی پوسٹ میں بڑے ہیڈر کے پس منظر کا رنگ لاگو کیا جاتا ہے۔ لہجے کے پس منظر کے رنگ اور 50px اونچائی والا اسپیسر بلاک (لائنز: 5-9) لہجے کے رنگوں کا انتظام کے ذریعے کیا جاتا ہے۔ assets/js/accent-colors.js فائل.
بہت سے دوسرے لوگوں نے استعمال کر کے ٹاپ کور سیکشن بنانے کا انتخاب کیا۔ کور بلاک، جس نے صارفین کو پس منظر کا رنگ تبدیل کرنے اور میڈیا لائبریری سے ایک جامد تصویر شامل کرنے یا میڈیا ڈیوائسز سے اپ لوڈ کرنے کی اجازت دی – بغیر کوئی کوڈ لکھے۔ اس نقطہ نظر کے ساتھ، سے تصاویر پوسٹ نمایاں تصویر بلاک ہر ایک پوسٹ میں دستی طور پر شامل کرنا پڑتا ہے اگر آپ چاہتے ہیں کہ پوسٹ کو ایک پوسٹ میں بیک گراؤنڈ امیج کے طور پر نمایاں کیا جائے۔
متحرک پوسٹ نمایاں تصویر کے ساتھ بلاکس کا احاطہ کریں۔
ورڈپریس 6.0 نے ایک اور ٹھنڈا دستیاب کرایا نمایاں تصویری کور بلاکس خصوصیت، جو کسی بھی پوسٹ یا صفحہ کی نمایاں تصویر کو کور بلاک میں پس منظر کی تصویر کے طور پر استعمال کرنے کی اجازت دیتی ہے۔
مندرجہ ذیل میں مختصر ویڈیو, آٹومیٹک انجینئرز ایک مثال کے ساتھ بلاکس کو کور کرنے کے لیے نمایاں تصاویر شامل کرنے پر تبادلہ خیال کرتے ہیں۔ آرچایو مرکزی خیال، موضوع:
پوسٹ فیچرڈ امیج بلاک سمیت امیج بلاک کو مزید اپنی مرضی کے مطابق بنایا جا سکتا ہے۔ duotone رنگ میں theme.json جیسا کہ اس مختصر میں بحث کی گئی ہے۔ نقطوں کو جوڑنا یوٹیوب ویڈیو (آٹومیٹک کی این میکارتھی)۔
کیس کی مثالیں استعمال کریں (وی، روشن موڈ)
اگر ہم تھمب نیل کی تصاویر کو براؤز کرتے ہیں۔ بلاک تھیم ڈائرکٹری، ہم دیکھتے ہیں کہ ان میں سے اکثریت میں بڑے کور ہیڈر والے حصے شامل ہیں۔ اگر ہم ان کی ٹیمپلیٹ فائلوں کو کھودتے ہیں، تو وہ جامد تصویری پس منظر کے ساتھ کور بلاکس کا استعمال کرتے ہیں۔
کچھ حال ہی میں تیار کردہ تھیمز متحرک پوسٹ کے نمایاں تصویری پس منظر کے ساتھ کور بلاکس کا استعمال کر رہے ہیں (مثال کے طور پر، آرکیو، وی، فراسٹ، برائٹ موڈ، وغیرہ)۔ نئی خصوصیت کا ایک مختصر جائزہ میں دستیاب ہے۔ یہ مختصر GitHub ویڈیو.
متحرک لہجے کے رنگوں کی خصوصیات کا امتزاج وابی کور اور پوسٹ فیچرڈ امیج بلاکس کے ساتھ تھیم، رچ ٹابر اپنے نئے میں اپنی تخلیقی صلاحیتوں کو مزید وسعت دیتا ہے۔ وی تھیم (مکمل جائزہ دستیاب ہے۔ یہاں) ایک پوسٹ سے متحرک کور امیجز ڈسپلے کرنے کے لیے۔
اپنی وی اعلانی پوسٹ میں، امیر تبور لکھتے ہیں۔: "پردے کے پیچھے، single.html ٹیمپلیٹ ایک کور بلاک استعمال کر رہا ہے جو پوسٹ کی نمایاں تصویر کا فائدہ اٹھاتا ہے۔ پھر پوسٹ کو تفویض کردہ رنگ سکیم کے ذریعہ duotone کا اطلاق ہوتا ہے۔ اس طرح، تقریباً کوئی بھی تصویر ٹھیک نظر آئے گی۔"
اگر آپ Wei تھیم کے ہیڈر کور بلاک کو مزید گہرائی میں کھودنا چاہتے ہیں اور سیکھنا چاہتے ہیں کہ اپنا خود کیسے بنایا جائے، تو یہ ہے مختصر ویڈیو سے فرینک کلین (WP ڈویلپمنٹ کورسز) جو قدم بہ قدم وضاحت کرتا ہے کہ اسے کیسے بنایا گیا۔
وی تھیم کی طرح، برائن گارڈنر اپنے حالیہ میں پوسٹ فیچرڈ امیج بلاک کے ساتھ کور بلاک کا بھی استعمال کرتا ہے۔ روشن موڈ اسٹینڈ آؤٹ مواد کو ظاہر کرنے کے لیے تھیم متحرک رنگ.
برائن نے WPTavern کو بتایا: "وہ تھیم کے بارے میں سب سے زیادہ پسند کرتا ہے جس طرح سے کور بلاک استعمال کیا جاتا ہے۔ واحد صفحات. یہ نمایاں تصویر کو کور بلاک میں کھینچتا ہے اور سائے اور پوری اونچائی کے اختیارات کے لیے حسب ضرورت بلاک اسٹائل بھی پیش کرتا ہے۔ مجھے ایسا لگتا ہے جیسے یہ واقعی پیش کرتا ہے جو جدید ورڈپریس کے ساتھ ممکن ہے۔
مزید تفصیل کے لیے، یہ یہاں ہے۔ ڈیمو سائٹ اور برائن کے برائٹ موڈ تھیم کا مکمل جائزہ.
بلاک ایڈیٹر کے ساتھ پیچیدہ لے آؤٹ ڈیزائن کرنا
حال ہی میں، ورڈپریس نے ایک نیا بلاک ایڈیٹر ڈیزائن کیا ہے لینڈنگ ہوم پیج اور ایک ڈاؤن صفحہ. اعلان مخلوط ردعمل کو اپنی طرف متوجہ کیا اس کے قارئین سے، بشمول سے میٹ مولنویگ (خودکار) جس نے اس طرح کے "سادہ صفحہ" کو ڈیزائن اور لانچ کرنے کے لیے لگنے والے 33 دنوں پر تبصرہ کیا۔ آپ ڈھونڈ سکتے ہیں۔ یہاں پر پردے کے پیچھے اضافی بات چیت.
جواب میں Pootlepress کے جیمی مارس لینڈ نے بنایا یہ یوٹیوب ویڈیو جہاں وہ تقریباً 20 منٹ میں تقریباً ایک جیسا ہوم پیج دوبارہ تیار کرتا ہے۔
مارس لینڈ ویڈیو پر تبصرہ کرتے ہوئے، WP Travern کی سارہ Gooding لکھتی ہیں۔: "وہ وہی ہے جسے کوئی بلاک ایڈیٹر کے ساتھ پاور صارف کے طور پر بیان کرسکتا ہے۔ وہ تیزی سے قطاروں، کالموں اور گروپوں کو ارد گرد تبدیل کر سکتا ہے، ضرورت کے مطابق پیڈنگ اور مارجن کو ایڈجسٹ کر سکتا ہے، اور ہر حصے کو ڈیزائن کے لیے متعلقہ رنگ تفویض کر سکتا ہے۔ اس وقت، یہ وہ کام نہیں ہے جو زیادہ تر اوسط ورڈپریس صارفین کر سکتے ہیں۔
اگرچہ بلاک ایڈیٹر ایک طویل سفر طے کر چکا ہے، لیکن اب بھی زیادہ تر تھیم ڈویلپرز اور عام صارفین کے لیے اس کے ساتھ پیچیدہ لے آؤٹ بنانے اور ڈیزائن کرنے کے لیے درد کے نکات بڑھ رہے ہیں۔
TT2 گوفر بلاکس میں اضافہ کرنا
اس سیکشن میں، میں آپ کو بتاؤں گا کہ میں نے میں کس طرح اضافہ کیا۔ TT2 گوفر بلاکس تھیم جس کا میں نے اپنے پچھلے مضمون میں حوالہ دیا تھا۔ تھیمز کے کور بلاکس سے متاثر ہو کر جو میں نے پہلے بیان کیا تھا، میں تھیم میں تین کور ٹیمپلیٹس (مصنف، زمرہ، اور سنگل کور) شامل کرنا چاہتا تھا۔
ویب سائٹس کو براؤز کرتے وقت، ہمیں دو قسم کے کور ہیڈرز نظر آتے ہیں۔ زیادہ تر دیکھا جانے والا ہیڈر کور بلاک میں سائٹ ہیڈر (سائٹ ٹائٹل اور ٹاپ نیویگیشن) کے ساتھ ملا ہوا کور سیکشن ہے (مثلاً ٹوئنٹی ٹوئنٹی، ٹوئنٹی ٹوئنٹی ٹو، وی، وابی، فراسٹ، برائٹ موڈ، وغیرہ)۔ ہمیں ہیڈر کور سیکشن بھی ملتا ہے جو سائٹ ہیڈر کے ساتھ ملایا نہیں جاتا ہے اور بالکل نیچے کھڑا ہوتا ہے، جیسے کہ یہ بی بی سی فیوچر ویب سائٹ TT2 گوفر بلاکس تھیم کے لیے، میں نے مؤخر الذکر کا انتخاب کیا۔
کور ہیڈر پیٹرن بنانا
سب سے پہلے، آئیے کور بلاکس کا استعمال کرتے ہوئے مصنف، سنگل، اور دیگر (کیٹیگریز، ٹیگز) ٹیمپلیٹس کے لیے کور ہیڈر پیٹرن بنائیں۔ پھر ہم انہیں نمونوں میں تبدیل کریں گے (جیسا کہ بیان کیا گیا ہے۔ یہاں پہلے) اور متعلقہ ہیڈر کور پیٹرن کو ٹیمپلیٹس میں کال کریں۔
اگر آپ بلاک ایڈیٹر کے ساتھ کام کرنے سے واقف ہیں، تو سائٹ ایڈیٹر میں کور بلاکس کا استعمال کرتے ہوئے اپنے ہیڈر سیکشن کو ڈیزائن کریں اور پھر کور ہیڈر کوڈ کو پیٹرن میں تبدیل کریں۔ تاہم، اگر آپ ایف ایس ای ایڈیٹر سے واقف نہیں ہیں، تو سب سے آسان طریقہ یہ ہے کہ اس سے پیٹرن کاپی کریں۔ پیٹرن ڈائرکٹری پوسٹ میں ضروری ترمیم کریں اور اسے پیٹرن میں تبدیل کریں۔
میرے میں پچھلا CSS-Tricks مضمونمیں نے بلاک پیٹرن بنانے اور استعمال کرنے پر تفصیل سے بات کی۔ یہاں ورک فلو کا ایک مختصر جائزہ ہے جسے میں واحد پوسٹ کور ہیڈر پیٹرن بنانے کے لیے استعمال کر رہا ہوں:
سنگل پوسٹ کور ہیڈر پیٹرن
مرحلہ 1: FSE انٹرفیس کا استعمال کرتے ہوئے، آئیے ایک نئی خالی فائل بنائیں اور بلاک ڈھانچہ بنانا شروع کریں جیسا کہ بائیں پینل پر دکھایا گیا ہے۔
متبادل طور پر، یہ سب سے پہلے ایک پوسٹ یا صفحہ میں کیا جا سکتا ہے، اور پھر مارک اپ کو کاپی اور بعد میں پیٹرن فائل میں چسپاں کریں۔
مرحلہ 2: اگلا، مندرجہ بالا مارک اپ کو ایک پیٹرن میں چھپانے کے لیے، پہلے ہمیں اس کے کوڈ مارک اپ کو کاپی کرکے ایک نئے میں چسپاں کرنا چاہیے۔ /patterns/header-single-cover.php ہمارے کوڈ ایڈیٹر میں۔ ہمیں مطلوبہ پیٹرن فائل ہیڈر مارک اپ بھی شامل کرنا چاہیے (مثال کے طور پر، عنوان، سلگ، زمرے، داخل کرنے والا، وغیرہ)۔
یہاں کا پورا کوڈ ہے۔ /patterns/header-single-cover.php فائل:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
مرحلہ 3: اس ڈیمو کے لیے، میں نے استعمال کیا ہے۔ یہ تصویر فوٹو ڈائرکٹری سے ہے۔ فلر پس منظر کی تصویر کے طور پر، اور لاگو کیا آدھی رات duotone رنگ. پوسٹ فیچرڈ امیج کو متحرک طور پر استعمال کرنے کے لیے ہمیں شامل کرنا چاہیے۔ "useFeaturedImage":true مندرجہ بالا فلر امیج لنک کو تبدیل کرکے کور بلاک میں "dimRatio":50 اس طرح کہ لائن 10 مندرجہ ذیل کی طرح نظر آنی چاہئے:
متبادل طور پر، فلر امیج کو کلک کر کے بھی تبدیل کیا جا سکتا ہے۔ بدل اور منتخب کریں نمایاں تصویر استعمال کریں۔ آپشن:
اب، ہیڈر کور پیٹرن پیٹرن انسرٹر پینل میں کہیں بھی استعمال کے لیے ٹیمپلیٹس، پوسٹس اور پیجز میں نظر آنا چاہیے۔
آرکائیو کور ہیڈرز
طرف سے حوصلہ افزائی یہ WP Tavern پوسٹ اور ایک مصنف ٹیمپلیٹ ہیڈر بنانے کے لیے قدم بہ قدم واک تھرو، میں اسی طرح کا کور ہیڈر بنانا چاہتا تھا اور TT2 گوفر تھیم میں بھی شامل کرنا چاہتا تھا۔
سب سے پہلے، آئیے آرکائیو کور ہیڈر پیٹرن کے لیے بنائیں author.html مندرجہ بالا ورک فلو کے بعد ٹیمپلیٹ بھی۔ اس صورت میں، میں اسے ایک نئے خالی صفحہ میں بنا رہا ہوں، بلاکس (جیسا کہ فہرست کے منظر میں نیچے دکھایا گیا ہے):
سرورق کے پس منظر میں، میں نے وہی تصویر استعمال کی جو واحد پوسٹ ہیڈر کور میں استعمال کی گئی تھی۔
چونکہ ہم مصنف بلاک پر ایک مختصر مصنف کی سوانح عمری ظاہر کرنا چاہتے ہیں، اس لیے صارف کے پروفائل کے صفحے پر ایک سوانح حیات کا بیان بھی شامل کیا جانا چاہیے، ورنہ سامنے کے آخر میں ایک خالی جگہ دکھائی دے گی۔
مندرجہ ذیل کا مارک اپ کوڈ ہے۔ header-author-cover، کہ ہم اگلے مرحلے میں پیٹرن استعمال کریں گے:
Published by:
مارک اپ کو a میں چھپانے کے لیے header-author-cover پیٹرن، ہمیں مطلوبہ پیٹرن فائل ہیڈر مارک اپ شامل کرنا چاہیے جیسا کہ پہلے بیان کیا گیا ہے۔ ترمیم کرکے header-author-cover.php پیٹرن، ہم ٹیگز، درجہ بندی، اور دیگر حسب ضرورت ٹیمپلیٹس کے لیے اسی طرح کے ہیڈر کور بنا سکتے ہیں۔
۔ header-category-cover.php میرے لئے پیٹرن category.html ٹیمپلیٹ GitHub پر دستیاب ہے۔.
ہیڈر کور بلاکس کے ساتھ ٹیمپلیٹس بنانا
ورڈپریس 6.0 اور حال ہی میں گٹنبرگ 13.7 توسیعی ٹیمپلیٹ بلاک ایڈیٹر میں خصوصیات پیدا کرتا ہے، اس طرح بہت سے ورڈپریس صارفین کے لیے، کوڈنگ کی گہری معلومات کے بغیر، اپنی مرضی کے مطابق ٹیمپلیٹس بنانا ممکن بناتا ہے۔
مزید تفصیلی معلومات اور استعمال کے معاملات کے لیے، یہاں a جسٹن ٹیڈلاک کی طرف سے مکمل حسب ضرورت نوٹ.
بلاک ایڈیٹر مختلف قسم کے ٹیمپلیٹس بنانے کی اجازت دیتا ہے، بشمول کور ٹیمپلیٹس۔ آئیے مختصراً جائزہ لیتے ہیں کہ کس طرح امتزاج ہے۔ کور بلاک اور پوسٹ نمایاں تصویر بلاک نئے ٹیمپلیٹ کے ساتھ UI مختلف قسم کے کور کسٹم ٹیمپلیٹس بنانا آسان بناتا ہے یہاں تک کہ بغیر یا کم کوڈنگ کی مہارت کے بھی۔
گٹنبرگ 13.7 کے ساتھ ٹیمپلیٹس بنانا بہت آسان بنا دیا گیا ہے۔ بلاک ٹیمپلیٹس کیسے بنائیں کوڈز کے ساتھ اور سائٹ ایڈیٹر میں میں بیان کیا گیا ہے۔ تھیم ہینڈ بک اور میں میرا پچھلا مضمون.
کور بلاک کے ساتھ مصنف ٹیمپلیٹ
کا سب سے اوپر (ہیڈر سیکشن) مارک اپ author.html ٹیمپلیٹ نیچے دکھایا گیا ہے (لائن 6):
...
...
...
... یہاں کے لیے سرورق ہیڈر کے اسکرین شاٹس ہیں۔ author.html اور category.html ٹیمپلیٹس:
پورے دونوں ٹیمپلیٹس کا کوڈ GitHub پر دستیاب ہے۔.
کور بلاک کے ساتھ سنگل پوسٹ
ہماری ایک پوسٹ میں کور بلاک ظاہر کرنے کے لیے، ہمیں کال کرنا ہوگی۔ header-cover-single pattern ہیڈر سیکشن کے نیچے (لائن 3):
....
....
....یہاں ایک اسکرین کیپچر ہے جو ہیڈر کور سیکشن کے ساتھ واحد پوسٹ کا سامنے کا منظر دکھا رہا ہے:
پورے single-cover.html ٹیمپلیٹ GitHub پر دستیاب ہے۔.
آپ کو ایک بنانے کے بارے میں اضافی قدم بہ قدم واک تھرو ٹیوٹوریلز مل سکتے ہیں۔ ہیرو ہیڈر پوسٹ سیکشن اور پوسٹ فیچرڈ امیج بیک گراؤنڈ کور بلاکس کا استعمال کرتے ہوئے on ڈبلیو پی ٹورن اور مکمل سائٹ ایڈیٹنگ ویب سائٹ.
آپ کے پاس یہ ہے!
مددگار وسائل
نمایاں تصویر کور بلاک
بلاگ خطوط
اگرچہ بلاک تھیمز، عام طور پر، ہیں ورڈپریس کمیونٹی کے ممبروں سے بہت سارے پش بیک حاصل کرنا، میر ے خیال سے، وہ ورڈپریس کا مستقبل ہیں۔، بھی بلاک تھیمز کے ساتھ، شوقیہ تھیم مصنفین، کوڈنگ کی گہری مہارتوں اور پی ایچ پی اور جاوا اسکرپٹ کی زبانوں میں مہارت کے بغیر، اب پیچیدہ لے آؤٹ کے ساتھ ہیرو کور سیکشن کے ساتھ تھیمز بنا سکتے ہیں جیسا کہ اس مضمون میں بیان کیا گیا ہے۔ پیٹرن اور انداز مختلف حالتوں.
ایک ابتدائی گٹنبرگ صارف کے طور پر، میں نئے تھیمنگ ٹولز جیسے کہ سے زیادہ پرجوش نہیں ہو سکتا بلاک تھیم بنائیں پلگ ان اور دیگر جو تھیم مصنفین کو بغیر کسی کوڈ لکھے بلاک ایڈیٹر UI سے براہ راست درج ذیل حاصل کرنے کی اجازت دیتے ہیں۔
- (میں) تخلیق
- (ii) تھیم فائلوں کو اوور رائٹ کریں اور ایکسپورٹ کریں۔
- (iii) خالی یا چائلڈ تھیم بنائیں، اور
- (iv) موجودہ تھیم کے انداز میں تبدیلی اور محفوظ کریں۔
مزید برآں، گٹن برگ پلگ ان کی حالیہ تکرار فعال کرنے کی اجازت دیتی ہیں۔ سیال ٹائپوگرافی اور ترتیب کی سیدھ اور صرف استعمال کرتے ہوئے دیگر اسٹائلسٹک کنٹرولز theme.json جاوا اسکرپٹ کے بغیر فائل اور سی ایس ایس قواعد کی ایک لائن۔
پڑھنے اور ذیل میں اپنے تبصرے اور خیالات کا اشتراک کرنے کے لئے آپ کا شکریہ!
