اسٹائل سوئچر
حسبِ فرمائش آج کی تحریر میں ہم اپنے بلاگ کے قاری کو اپنی مرضی کا فونٹ منتخب کرنے کی سہولت دینے کا طریقہ جانیں گے۔ فونٹ سوئچر والی تھیم میں عموما سائڈ بار پر اپنی مرضی کا فونٹ منتخب کرنے کی سہولت موجود ہوتی ہے۔
ہم اس کام کا بنیادی اور آسان سا طریقہ سمجھیں گے۔ بعد میں آپ اپنی مرضی سے اس کے ساتھ مزید چھیڑ چھاڑ کرسکتے ہیں۔ اس کام کے لیے آپ کو ورڈپریس تھیم کے بنیادی ڈھانچے سے تھوڑی بہت آگاہی ضرور ہونی چاہیے۔
پہلا کام:
اسٹائل سوئچ ڈاٹ جے ایس کی فائل یہاں سے اتار کر اپنی تھیم کے فولڈر میں کاپی کرلیں۔
دوسرا کام:
اپنی تھیم کی سی ایس ایس فائل کھولیں اور جہاں جہاں تحریری متن کی فونٹ فیملی بیان ہوئی ہے، اسے ہٹاکر صرف body کے سلیکٹر میں ایک فونٹ فیملی بیان کریں۔ یوں یہ فونٹ فیملی پورے بلاگ پر اپلائی ہوجائے گی۔ میں ورڈ پریس کی ڈیفالٹ تھیم کے ساتھ کھیل کررہا ہوں۔ فرض کریں کہ ہم اپنی تھیم کا ڈیفالٹ فونٹ علوی نستعلیق رکھنا چاہ رہے ہیں تو فونٹ فیملی اور فونٹ سائز یوں ہوگا:
1 2 3 4 5 6 7 8 | body { font-size: 17px; font-family: 'Alvi Lahori Nastaleeq', 'Alvi Nastaleeq', Tahoma, 'Lucida Grande', Verdana, Arial, Sans-Serif; background: #d5d6d7 url('images/kubrickbgcolor.jpg'); color: #333; text-align: center; direction: rtl; } |
واضح رہے کہ میں نے فونٹ فیملی اور فونٹ سائز کے علاوہ باڈی سلیکٹر کی دوسری ویلیوز اور ان کی پراپرٹیز کو نہیں چھیڑا ہے۔
تیسرا کام:
اب ایک اور سی ایس ایس فائل بنائیں جس میں صرف اور صرف body کا سلیکٹر اور اس کی پراپرٹیز شامل کریں (style.css کا باقی کوڈ شامل کرنے کی ضرورت نہیں) اور اس کی فونٹ فیملی میں پہلی ترجیح کسی دوسرے فونٹ یا نفیس ویب نسخ کو دیں۔ مثلا:
1 2 3 4 5 6 7 8 | body { font-size: 15px; font-family: 'Nafees Web Naskh', Tahoma, 'Lucida Grande', Verdana, Arial, Sans-Serif; background: #d5d6d7 url('images/kubrickbgcolor.jpg'); color: #333; text-align: center; direction: rtl; } |
اس فائل میں، میں نے صرف فونٹ فیملی اور فونٹ سائز کو بدلا ہے۔ اب اسے کسی بھی نام سے محفوظ کرلیں جیسے
style-nafeesnaskh.css
اسی طرح دوسرے فونٹس (اردو نسخ ایشیا ٹائپ، تاہوما وغیرہ) کی اسٹائل شیٹس بھی بنالیں اور ان میں ان فونٹس کے حساب سے ہی فونٹ سائز رکھیں۔میں نے ایسی تین مزید فائلز بنائی ہیں۔ نفیس ویب نسخ، اردو نسخ ایشیا ٹائپ اور تاہوما کی۔ یوں ہمارے پاس سی ایس ایس فائلز کی تعداد چار ہوگئی۔
1 2 3 4 | style.css style-nafeesnaskh.css style-urdunaskh.css style-tahoma.css |
چوتھا کام:
اپنی تھیم میں header.php کی فائل کھول کر اس میں یہ کوڈ تلاش کریں:
1 | <?php wp_head(); ?> |
اس سے اگلی لائن میں یہ کوڈ پیسٹ کر دیں:
1 2 3 4 | <link rel="alternate stylesheet" type="text/css" media="screen" title="theme1" href="<?php bloginfo('stylesheet_directory'); ?>/style-nafeeswebnaskh.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="theme2" href="<?php bloginfo('stylesheet_directory'); ?>/style-urdunaskh.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="theme3" href="<?php bloginfo('stylesheet_directory'); ?>/style-tahoma.css" /> <script src="<?php bloginfo('stylesheet_directory'); ?>/styleswitch.js" type="text/javascript"></script> |
پہلے اس فائل کو اتار کر کوڈ دیکھیں۔ اگر آپ اس کوڈ کو سمجھنا چاہیں تو بہ آسانی سمجھ سکتے ہیں۔ پہلی سطر میں ہم نے بتایا کہ theme1 ہمارے پاس اسٹائل شیٹ کی ڈائریکٹری میں رکھی ہے اور نام ہے style-nafeesnaskh.css۔دوسری سطر میں theme2 کا بتایا گیا ہے کہ یہ style-urdunaskh.css ہے۔ تیسری سطر میں theme3 کو style-tahoma.css کہا گیا ہے۔ اور آخری سطر میں styleswitch.js فائل کی موجودگی کا بتایا گیا ہے جسے ہم نے سب سے پہلے مرحلے میں تھیم فولڈر میں کاپی کیا تھا۔ یوں یہ چوتھا مرحلہ بھی اختتام پذیر ہوا۔
پانچواں کام:
کیوں جی؟ تھک گئے کیا؟ اجی یہ کام ہی کچھ اوکھا ہے۔۔۔ چلیں اب یہاں تک آگئے ہیں تو یہ مرحلہ بھی جان لیں اور یقین رکھیں کہ یہ آخری مرحلہ ہے اور اس کے بعد آپ کو اب تک کی گئی محنت کا پھل مل جائے گا۔
کرنا یہ ہے کہ اب سائیڈ بار میں جہاں آپ نے تھیم فونٹ سوئچر شامل کرنا ہے، وہ سائیڈ بار کی فائل کھولیں اور یہ کوڈ شامل کریں:
1 2 3 4 5 6 7 8 9 10 11 | <li><h2>فونٹ منتخب کریں</h2> <li dir="ltr"> <form id="switchform"> <select name="switchcontrol" style="font-family:'Trebuchet MS','Lucida Grande', Verdana, Arial, Sans-Serif; width:170px" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)"> <option value="Alvi Nastaleeq" selected="selected">Alvi Nastaleeq</option> <option value="theme1">Nafees Web Naskh</option> <option value="theme2"> Urdu Naskh Asiatype </option> <option value="theme3">Tahoma</option> </select> </form> </li> |
اس کوڈ کو سمجھنا بھی کوئی مشکل کام نہیں ہے۔ سوئچ کنٹرول کا بتاکر پہلے ڈیفالٹ فونٹ کا رکھا گیا ہے جو کہ علوی نستعلیق ہے۔ اگلی سطور میں تھیم1، تھیم2، اور تھیم3 کا نام دیا گیا ہے۔ بس اس فائل کو محفوظ کریں اور اپنا بلاگ دیکھیں۔ فونٹ سوئچر جیسے آپشن سے آپ کا بلاگ مالامال ہوچکا ہوگا۔ 
کسی قسم کی مشکل میں آپ بلا جھجک یہاں سوال کرسکتے ہیں۔
ایسے ٹیوٹوریلز میں کچھ سکرین شاٹس شامل کرنا بہتر رہتا ہے۔
برموقع پوسٹ لگائی ہے میں آج اس پر کام کرنے کا ارادہ کئے ہوئے تھا چلو اب وقت بچ جائے گا اور کام آسان ہوجائےگا
چوتھا کام۔۔۔۔۔۔۔۔۔۔ اس میں کوڈ نظر نہیں آرہا وہ کہاں ہے؟
پانچواں کام
میں کل اسکا آپریشن کرنے نا اردہ رکھتا ہوں
بہت شکریہ عمار،
بڑے دنوں سے اس پوسٹ کا انتظار تھا مجھے
نبیل بھیا! میں تو اسی میں ہی مر گیا۔ کہیں پڑھا بھی نہیں تھا اس بارے میں۔ اپنا دماغ لڑاکر جیسے تیسے سب کچھ سمجھا ہے اور ویسا ہی آگے بڑھا دیا ہے۔
اب تھوڑا ٹھہر کر دیکھتا ہوں، شاید کچھ اسکرین شاٹس بھی سمجھ آجائیں تو اپ۔ڈیٹ کروں۔
عبد القدوس! چوتھے کام کا کوڈ شامل کردیا ہے، تصویری صورت میں۔
ڈفر! یار تمہارے لیے ہی تو لکھی ہے خصوصی طور پر ورنہ میں نے مزید کچھ عرصہ سستی کا شکار رہنا تھا۔
السلام علیکم
ٹیوٹوریل کے لئے شکریہ عمار! میں نے بھی سیکھ لیا یہ کام
زبردست اچھا ٹیوٹوریل ہے۔۔۔ میں ابھی اس کو چیک کرتا ہوں۔
السلام عللیکم عمار
بھائی یہ ویب ہوسٹ کتنے کی مل جاتی ہے اور مجھ اپنے بلاگ کے لے لینی ہے
آپ مد د کریں ۔اس لیے کے اردو ٹیگ سے بلاگ ختم ہونے کے بعد یہ احسا س ہو کے اپنی ہوسٹ ہونی چاہے اس کے لیے مدد کریں ۔
ابھی تو فری ہوسٹ سے کا م چلایا ہے ۔
اکرام
کام اچھا کیا ہے اردو بلاگ کے حوالے سے آپ کی مدد کی ضرورت ہے
یار یہ اسکمیت کو تو بند کردو
لگتا ہے آجکل کچھ زیادہ سختی شروع کر دی موصوف نے۔ لیکن مجبوری ہے اچھے خاصے سپیم کمنٹس ہوتے ہیں، پھر ان کو ڈھونڈ ڈھونڈ کے حذف کرنا ہوگا۔ اس سے بہتر ہے کہ ماڈریشن کے منتظر کمنٹس کو چیک کر لیا جائے۔ امید ہے آپ برا نہیں منائیں گے، آپکا کمنٹ ہرگز ضائع نہیں ہوگا۔ آپکے ڈپلیکیٹ کمنٹس میں، میں نے صرف ایک ہی شائع ہونے دیا تھا۔ شکریہ
واہ جی واہ
۔۔۔۔۔۔۔۔۔۔۔۔۔۔۔ میں نے ایک “زیر ترجمہ” تھیم میں اس کا کامیاب تجربہ کیا ہے۔
زبردست اچھا ٹیوٹوریل ہے۔۔۔ میں بھی اس کو چیک کرتا ہوں۔
بہت اچھا کام کر رہے ہیںآپ
بلا گر کے لئے کچھ نہیں ہے؟
جواب نہیں دیا؟
طارق: ہم صرف ورڈپریس کیلیے اسباق شائع کرتے ہیں اور شروع میں تو اس سائٹ کا مقصد صرف ورڈپریس ہی تھا۔ تاخیر سے جواب دینے کیلیے معذرت۔
اسلام علیکم
جو سی ایس ایس کے ساتھ کھیل سکتا ہے وہ تو کر لے گا مگر جو بالکل انجان ہے اس کے لیے یہ تو شاید کسی کا نام نہیں ۔
کوئی سکرپٹ پیدا کریںجو یہ سب کام خود ہی کر دے ۔
hi friends:
i celebrate my birthday this month in different style. plz visit my blog and leave some comments for me. thanks
کیا ورڈ پریس کی طرح یہ کام پی ایچ پی بی بی فورم کی تھیم میں بھی ہو سکتا ہے؟براہ مہربانی اس کے لیے بھی طریقہ بتا دیں.شکریہ
معذرت پی ایچ پی بی بی کے بارے میں ہمارے معلومات صفر ہیں.