اپنے ورڈپریس تھیم کے موبائل ورژن کو بہتر بنانے کے 4 طریقے

آرٹیکل نے لکھا:
  • WordPress
  • اپ ڈیٹ: جول 29، 2013

موبائل ورژن ورڈپریس

آئیے سچ کا سامنا کریں، موبائل آلات زیادہ مقبول ہو رہے ہیں. ڈیسک ٹاپ براؤزنگ اب بڑھتی ہوئی نہیں ہے، یہ اصل میں کمی ہے، جبکہ موبائل ان تمام خوفناک سمارٹ فونز اور ٹیبلز کے ساتھ تیزی سے بڑھ رہی ہے.

نیٹ مارکیٹ شیئر کے مطابق، موبائل آلات پورے ویب ٹریفک کے 10٪ کی نمائندگی کرتا ہے. یہ ایک بڑی شخصیت ہے، اور کچھ نچوں اور ممالک میں یہ بھی بڑا ہے. لیکن یہاں اہم بات یہ ہے کہ موبائل آلات کی ضرورت ہوتی ہے، محدود اسکرین کی جگہ کی وجہ سے اور یہ حقیقت یہ ہے کہ موبائل کنکشن عام طور پر ڈیسک ٹاپ کنکشن سے سست ہوتے ہیں.

بہت سے ورڈپریس موضوعات ذمہ دار ہیں لیکن آپ جانتے ہیں، ہم ہمیشہ اصلاحات کے لئے کمرے میں رکھیں گے. تو یہاں ہم اپنے صارفین کے لئے موبائل تجربے کو بہتر بنانے کے لئے 4 ٹیکنالوجیز اور ان کا استعمال کرنے کے طریقے دیکھیں گے.

#1 اول 'میڈیا کی اقسام

کچھ سال پہلے ، جب IE5.5 اور IE6 کو زندہ سمجھا جاتا تھا ، موبائل براؤزر ابھی پاپ آؤٹ کرنے لگے تھے (اور اوپیرا اب تک کا سب سے بہتر تھا) ، اور لوگوں کو یہ احساس ہونے لگا کہ فون صرف اس وقت سے ٹوٹ رہا ہے جب فون واپس آرہا تھا تب بھی ایسا نہیں ہوسکتا تھا۔ سی ایس ایس جیسے آسان چیزوں پر عمل کریں (جے ایس ، فلیش وغیرہ کا ذکر نہ کریں)۔

لہذا، مکمل طور پر علیحدہ موبائل سائٹ کرتے ہوئے صرف ایک ہی اختیار تھا جب میڈیا کی اقسام ہمیں بچانے کے لئے آئے. خیال یہ تھا کہ آپ براؤزر کو بتا سکتے ہیں اگر آپ اس فائل کو فراہم کرتے ہیں تو "اعلی درجے کی" سی ایس ایس کے قوانین (ڈیسک ٹاپ کے لئے) یا سادہ سی ایس ایس کے قوانین (ہینڈ ہیلڈ یا پرنٹ کے لئے) ہے. نحو اس طرح کے طور پر آسان ہے:

<link rel = "stylesheet" href = "ہینڈ ہیلڈ.css" قسم = "ٹیکسٹ / سی ایس ایس" میڈیا = "ہینڈ ہیلڈ" />

آپ کی موبائل سائٹ کے لئے بالکل مختلف ڈیزائن بنانے کے لئے یہ ایک اچھا اختیار ہوسکتا ہے۔ لیکن آپ کو اسے استعمال نہیں کرنا چاہئے۔

میڈیا کی نوعیت پہلی بار اچھی لگ سکتی ہے لیکن ایک سادہ مسئلہ جدید سمارٹ فونز کے ساتھ آیا: براؤزر کی مدد کی کمی. وہاں سے زیادہ اہم کھلاڑی صرف اس قسم کی فعالیت کو نظر انداز کر رہے تھے (جیسے سیب)
پھر میڈیا سوالات ہمیں بچانے کے لئے آتی ہیں.

#2 میڈیا سوالات اور کس طرح واقعی موبائل تجربے کو بہتر بنانے کے

یہ آپ کی ویب سائٹ کے موبائل ورژن کو بنانے کے لئے بہت مقبول ترین طریقہ ہے.

آپ براؤزر کا سائز، آلہ اسکرین کا سائز، پکسل کثافت (ہاں، ریٹنا!)، اور یہاں تک کہ میڈیا کی اقسام کے غصہ پر مبنی مخصوص پوائنٹس کو نشانہ بنا سکتے ہیں.

یہاں ایک سادہ میڈیا سوال ہے:

media (زیادہ سے زیادہ چوڑائی: 700PX) {جسم {پس منظر: سرخ؛ }}

یہ پروگرامنگ کے طور پر بہت زیادہ ہے. IF "براؤزر کی چوڑائی 700 یا کم ہے" تو "درج ذیل سی ایس ایس کوڈ کو لاگو کریں".

چائلڈ تھیم

آئیے اپنے / تھیمز میں ایک نیا فولڈر بنائیں اور اس کا نام بیس موبائل رکھیں۔ مجھے معلوم ہے ، بیس بارہ پہلے ہی میڈیا کے سوالات کا استعمال کرتے ہیں ، لیکن ہم سیکھنے کے لئے یہاں موجود ہیں ، کیا ہم نہیں؟

لہذا، ایک سٹائل سی ایس ایس فائل بنائیں اور اس مواد کو شامل کریں:

/ * تھیم کا نام: موبائل مرکزی خیال، موضوع سانچہ: بائیٹیووون * /import url (".. / twentytwelve / style.css")؛ media ہینڈ ہیلڈ، صرف اسکرین اور (زیادہ سے زیادہ چوڑائی: 767PX) {نیویارک {ڈسپلے: کوئی؛} منتخب کریں {ڈسپلے: بلاک}}

اوپر ہم نے چائلڈ تھیم سی ایس ایس بنایا اور ہم نے ایک قاعدہ بھی شامل کیا ہے جس میں صرف موبائل ڈیوائسز کو ہی نشانہ بنایا جائے گا ، جو مین مینو کو چھپائے گا اور ایک منتخب دکھائے گا۔ لہذا اگر آپ کے پاس کسی سلیکٹ میں مینو ہے تو آپ اسے ال / li اشیاء کے بطور نمائش کرنے کی بجائے بہت ساری جگہ بچاسکتے ہیں۔

jQuery موبائل کے ساتھ #3 انتہائی تبدیلی

jQuery موبائل ایک بہتر فریم ورک ہے جو مرضی کے مطابق ویجٹ اور یوآئ عناصر کے ساتھ، موبائل تجربے کو بہتر بنانے کے لئے jQuery فعالیت کا استعمال کرتا ہے.

ایچ ٹی ایم ایل کی ضرورت ہے، یہ کام بہت آسان ہے، یہ صرف HTML اعداد و شمار کی صفات اور جے ایس کا استعمال کرتا ہے جو UI ویجٹ کا پتہ لگانے اور تخلیق کرتا ہے.

لیکن آپ کے ورڈپریس بلاگ میں مناسب طریقے سے jQuery موبائل کام کرنے کے لئے آپ کو سب سے پہلے jQuery موبائل سکرپٹ کو کال کرنے کی ضرورت ہوگی. ہمارے بچے کے مرکزی خیال، موضوع پر واپس لوٹنے، مرکزی مرکزی خیال، موضوع کے ہیڈرر فائل فائل کو اور سر ٹیگ میں ان لائنز کو شامل کریں:

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src = "http://code.jquery.com / موبائل / 1.3.1 / jquery.mobile-1.3.1.min.js "> </ script>

مجھے یہ بتانا چاہئے کہ تجارتی تجزیہ کیلئے آپ کو wp_enqueue _script استعمال کرنا چاہئے، لہذا آپ اپنی سائٹ میں لائبریریوں کو نقل و حرکت سے بچنے سے بچیں گے.
اب ہم آپ کو چاہتے ہیں کہ کسی بھی UI عنصر کے ساتھ کے ارد گرد کھیل سکتے ہیں. jQuery موبائل میں بہت سے UI ویجٹ ہیں جنہیں آپ ایک مرکزی خیال، موضوع میں استعمال کرسکتے ہیں، لیکن آتے ہی صفحے اور ٹھوس پینل لاگو ہوتے ہیں.
یہ بنیادی HTML مطابقت رکھتا ہے:

<div data-role = "page"> <div data-role = "header"> </ div> <div data-role = "content"> </ div> <div data-role = "footer"> </ div> </ div>

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

<div data-role = "collapsible-set"> <div data-role = "collapsible-set" ڈیٹا کو ختم کر دیا گیا ہے = "حقیقی"> <p> Collapsible علاقے کی مواد </ p> </ div> </ div>

وہاں لوپ کو نافذ کرنا بہت آسان ہے ، ہے نا؟ ٹھیک ہے ، آپ کا کوڈ اس طرح نظر آئے گا:

<div ڈیٹا کردار = "collapsible-set"> <؟ جبکہ (have_posts ()) {...؟> <div data-role = "collapsible" ڈیٹا ختم ہو گیا ہے = "سچ"> </ div> <؟ ...}؟>> </ div>

منتخب کردہ مینو میں ترمیم

اس کوڈ کے ساتھ جو ہم نے اوپر دیکھا ہے (میڈیا سوالات کے سیکشن میں) آپ اپنا معمول کا مینو چھپا سکتے ہو اور خصوصی سلیکٹ مینو دکھا سکتے تھے۔ jQuery آپ کو زیادہ پی ایچ پی کوڈ کے بغیر اسے شامل کرنے کی اجازت دیتا ہے (ایمانداری کے ساتھ ہمیں پی ایچ پی کی ضرورت نہیں ہوگی)۔ آئیے ایک نئی فائل بنائیں اور یہ کوڈ وہاں شامل کریں۔

jQuery (فنکشن ($) {// جب ڈوم تیار ہے $ (دستاویز). already (function () {// ہمیں منتخب عنصر تخلیق کریں $ ("<select "").appendTo("nav")؛ / / نئے اختیار کے ساتھ، جانے کے لئے ... $ ("<اختیار />"، {"قیمت": ""، "متن": "جائیں ...")). ضمیمہ ("نام منتخب")؛)؛ / / اب ہمارے پاس منتخب شدہ بون نے اسے آباد کر دیا ہے: $ ("nav .menu a"). ہر ایک (فنکشن () {// ہر لنک کے لئے آپ مینو مینو میں تلاش کریں = $ (اس)؛ $ ("<اختیار /> "، {" قیمت ": معاون (" href ")،" html ": aux.text ()؛}). اپ ڈیٹ ٹو (" نام منتخب ")؛ // منتخب کرنے کے لئے ایک نیا آئٹم ضم) ؛ // پھر ہم ڈراپ ڈاؤن فعالیت کو ری سیٹ کرنے کے لئے مقرر کرتے ہیں جب ہم ایک نیا آئٹم $ ("نام منتخب کریں") منتخب کرتے ہیں. تبدیلی (فنکشن () {ونڈو .شن = $ (اس) .فائن ("اختیار: منتخب کردہ"). ()؛})؛})؛

ایسا کرنا ایک نئے موبائل مینو تشکیل دے گا، لیکن مسئلہ یہ ہے کہ، ہم سائٹ کے "معمول" ورژن میں بھی جیوٹے موبائل لوڈ کر رہے ہیں. اس وجہ سے ہم ہماری ویب سائٹ کو بہتر بنانے میں مدد کرنے کے لئے چند پلگ ان بھی استعمال کرسکتے ہیں.

#4 - موبائل ڈیکیکٹر کے ساتھ سب کچھ لپیٹ

یہ بہت اچھا پلگ ان ایک نیا فعالیت تخلیق کرتا ہے جو ہمیں صارف کے آلے کے مطابق مشروط طور پر موضوعات کو لوڈ کرنے دیتا ہے. اور یہ سادہ مشروط قواعد کے ساتھ کام کرتا ہے، جیسے:

<؟ پی پی پی اگر (MobileDTS :: ہے ('android')) {....} elseif (MobileDTS :: ہے ('موبائل')) {....} اور {}؟>

MobileDTS طریقہ موجودہ آلہ کی جانچ پڑتا ہے تو پھر ایک سادہ سچ / جھوٹ واپس آتا ہے. پھر ہم ایک نیا مرکزی خیال، موضوع قائم کرنے کیلئے switch_theme () کا نام جادو جادو استعمال کرسکتے ہیں، اور آپ کو پلگ ان کی حالت میں استعمال کر سکتے ہیں جیسے MobileDTS :: is_switcher_enabled () ایک ڈیسک ٹاپ ورژن کے لۓ لنک بنانے کے لئے، مثال کے طور پر موبائل استعمال کرسکتے ہیں.

نتیجہ

تو، کیا آپ نے کبھی اپنے ورڈپریس تھیم میں موبائل پلگ ان یا افعال استعمال کیا ہے؟ آپ کونسی طریقہ کو ترجیح دیتے ہیں؟ شرمندگی مت کرو اور اپنے خیالات کا اشتراک کرو!

روچسٹر اولیورا کے بارے میں

میں اسجوبا (ایم جی)، برسل سے ویب ڈیزائنر اور کاروباری ادارے ہوں. میں غیر معمولی موضوعات کے بارے میں لکھنا چاہتا ہوں اور کچھ ٹھنڈی چیزیں کر رہا ہوں.

رابطہ کریں: