یہ سب کے ساتھ ہوتا ہے۔

آپ کو اپنی پسند کی تھیم مل جاتی ہے، آپ اسے انسٹال کرتے ہیں اور اپنی سائٹ کی شکل سے لطف اندوز ہونے میں کچھ مہینے گزارتے ہیں۔ لیکن پھر، چند مہینوں کے بعد، تھیم باسی محسوس ہونے لگتا ہے۔ تھوڑا سا بورنگ۔

صرف مسئلہ یہ ہے کہ، آپ کچھ نیا تلاش کرنے میں کچھ گھنٹے نہیں گزارنا چاہتے۔ اگر آپ کے تھیم میں تھوڑا سا مسالا شامل کرنے کا کوئی طریقہ ہوتا تو اسے نمایاں کرنے کے لیے تھوڑا سا بھڑکنا۔

اس سے پہلے کہ آپ مایوسی میں ہاتھ اٹھائیں، میں آپ کو اپنا مسالا بنانے کا ایک آسان طریقہ دکھاتا ہوں۔ تھیم بہت زیادہ محنت کے بغیر، اور غیر ضروری تصاویر شامل کیے بغیر جو آپ کی سائٹ کو سست کر سکتی ہے۔

Dashicons درج کریں۔ Dashicons فونٹ آئیکون ہیں جو ورڈپریس 3.8 میں متعارف کرائے گئے تھے۔ یہ وہ شاندار اور ٹھنڈے آئیکن ہیں جو آپ اپنے ڈیش بورڈ میں لاگ ان ہونے پر دیکھتے ہیں۔ کیا یہ اچھا نہیں ہوگا اگر آپ انہیں اپنی تھیم میں بھی شامل کر سکتے ہیں؟

ٹھیک ہے، آپ کر سکتے ہیں اور میں آپ کو بتانے جا رہا ہوں کہ کیسے۔

آپ اپنی تھیم میں Dashicons کا استعمال کیسے کر سکتے ہیں نیویگیشن مینو؟

آئیے ایک سادہ مثال سے شروع کرتے ہیں۔ Dashicons پہلے سے ہی ورڈپریس میں ورژن 3.8 کے بعد سے شامل ہیں لیکن آپ کو پھر بھی ان کو شامل کرنے کی ضرورت ہے تاکہ وہ آپ کی سائٹ کے سامنے والے سرے پر مناسب طریقے سے ڈسپلے کر سکیں۔ یعنی، آپ کا تھیم۔

مرحلہ 1: اپنی تھیم ڈیشیکونز کو تیار کریں

اپنے تھیم کو Dashicons کو تیار کرنے کے لیے پہلے اپنی functions.php فائل کھولیں (جو ظاہری شکل اور جی ٹی میں پائی جاتی ہے) ایڈیٹر - پہلے سے طے شدہ طور پر یہ آپ کی موجودہ تھیم کی CSS فائل کو کھول دے گا۔ آگے بڑھیں اور تلاش کریں۔functions.php فائل پر کلک کریں اور اسے ایڈیٹر میں لوڈ کرنے کے لیے اس پر کلک کریں۔)

مرحلہ 2: اسکرپٹ کو قطار میں لگائیں

تمام طرح سے نیچے تک سکرول کریں اور ان لائنوں کو چسپاں کریں۔ آخر میں کوڈ کا:

//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

ٹھیک ہے! اب آپ کی تھیم Dashicons استعمال کرنے کے لیے تیار ہے۔

مرحلہ 3: مینو آئٹمز میں Dashicons کو شامل کرنا

آئیے آپ کے ہوم لنک کے لیے ایک Dashicon شامل کریں۔ Dashicons کی ویب سائٹ پر جائیں اور اپنی پسند کا آئیکن منتخب کریں۔

اپ ڈیٹ کریں: Dashicons اصل میں GitHub.io پر دستیاب تھے، لیکن تب سے انہیں WordPress.org پر دستیاب کر دیا گیا ہے۔

مرحلہ 4:

مطلوبہ آئیکن پر کلک کریں (اس معاملے میں میں نے ہوم آئیکن کو منتخب کیا ہے) اور پھر کاپی ایچ ٹی ایم ایل پر کلک کریں۔ یہ آپ کو مطلوبہ کوڈ کے ساتھ ایک پاپ اپ ونڈو دے گا۔

مرحلہ 5:

اپنے ورڈپریس ڈیش بورڈ پر واپس جائیں، ظاہری شکل اور جی ٹی پر کلک کریں۔ ; مینو اور کوڈ کو وہیں چسپاں کریں جہاں یہ نیویگیشن لیبل کہتا ہے۔

اگر آپ اب بھی لفظ دکھانا چاہتے ہیں تو اسے بند ہونے والے div بریکٹ کے بعد ٹائپ کریں۔

پر کلک کریں۔ اپنے ہوم پیج کو محفوظ کریں اور لوڈ کریں۔ آپ کے ہوم لنک کو اب ایک اچھا، کرکرا ڈیشیکن دکھانا چاہیے۔

آپ یہ تمام نیویگیشن مینو آئٹمز کے لیے یا صرف گھر کے لیے کر سکتے ہیں۔ صرف مماثل شبیہیں کے ساتھ اوپر کے مراحل کو دہرائیں۔ یہ آسان تھا نا؟

آپ پوسٹ میٹا میں Dashicons کا استعمال کیسے کرتے ہیں؟

آپ ایک قدم آگے بڑھ کر Dashicons کو اپنے پوسٹ میٹا میں شامل کر سکتے ہیں، یا دوسرے لفظوں میں مصنف کے سامنے Dashicons شامل کر سکتے ہیں۔ نام، تاریخ، زمرہ یا ٹیگ؛ اس پر منحصرآپ کی تھیم اور وہ معلومات جو یہ دکھاتا ہے۔

چونکہ آپ نے پہلے ہی اپنے تھیم میں Dashicons کو قطار میں لگا رکھا ہے، اب آپ کو صرف اپنی style.css فائل کو کھولنا ہے (یا کسٹم CSS ایڈیٹر کا استعمال کریں جو ہمیشہ بہتر آپشن ہوتا ہے تاکہ آپ جب آپ کی تھیم اپ ڈیٹ ہو جائے تو تبدیلیوں سے محروم نہ ہوں!)، مماثل سلیکٹر تلاش کریں اور CSS کوڈ شامل کریں۔

آئیے کہتے ہیں کہ آپ اپنے نام یا اپنے مصنف کے نام کے سامنے ایک آئیکن شامل کرنا چاہتے ہیں۔

مرحلہ 1: 7>>

پھر اس پر کلک کریں، اور اس بار Copy CSS کو منتخب کریں۔ دوبارہ، یہ آپ کو کوڈ کے ساتھ ایک پاپ اپ ونڈو دے گا جس کی آپ کو پیسٹ کرنے کی ضرورت ہے۔

مرحلہ 3:

اب اپنا style.css کھولیں۔ اور متعلقہ سلیکٹر کو تلاش کریں، اس معاملے میں - .entry-author۔ آپ نے Dashicons ویب سائٹ سے کاپی کیے ہوئے CSS کوڈ کو :پہلے اور پھر چسپاں کرنے سے، مصنف کے نام کے سامنے ایک اچھا آئیکن ہوگا۔ آپ کو یہ بھی بتانا ہوگا کہ آپ Dashicons فونٹ استعمال کر رہے ہیں۔ ترمیم شدہ کوڈ اس طرح نظر آتا ہے:

.entry-author:before { font-family: "dashicons"; content: "\f110"; }

چلو اسٹائل کا تھوڑا سا اضافہ کرتے ہیں، اور اب مکمل شدہ کوڈ اس طرح نظر آتا ہے:

.entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

آخری نتیجہ

تو کیا کیا یہ آخر میں ایسا نظر آئے گا؟

کچھ اس طرح:

ایسے بہت سے طریقے ہیں جن سے آپ Dashicons استعمال کرسکتے ہیں – اپنی تخلیقی صلاحیتوں کو پکڑنے دیں اور دیکھیں کہ آپ کیا کرسکتے ہیں۔

اس سب کو ایک ساتھ رکھنا

مذکورہ بالا مثالوں کو چھوڑ کر، آپ اپنے پسدید میں Dashicons استعمال کر سکتے ہیں تاکہ مختلفمختلف پوسٹ کی اقسام کے لیے آئیکنز، یا آپ انہیں اپنی پوسٹ کے عنوانات، ویجیٹ ٹائٹلز میں استعمال کر سکتے ہیں، یا اگر آپ ایک حسب ضرورت لینڈنگ پیج بنا رہے ہیں تو آپ اپنی سائٹ کے مختلف صفحات کے درمیان فرق کر سکتے ہیں۔

یہاں ایک بنیادی مثال ہے کہ آپ انہیں بنانے کے لیے استعمال کر سکتے ہیں: