4 طرق لتحسين النسخة المحمولة من موضوع وورد الخاص بك

المادة التي كتبها:
  • وورد
  • تم التحديث: Jul 29 ، 2013

النسخة المحمولة وورد

دعونا نواجه الحقيقة ، أصبحت الأجهزة المحمولة أكثر وأكثر شعبية. لم يعد التصفح المكتبي يتنامى بعد الآن ، فهو يتناقص فعليًا ، بينما ينمو الجوّال بسرعة مع كل هذه الهواتف الذكية والطاولات الرائعة.

وفقًا لـ Net MarketShare ، تمثل الأجهزة المحمولة نسبة 10٪ من إجمالي عدد زيارات الويب. إنها شخصية كبيرة ، وهي أكبر في بعض المناطق والبلدان. ولكن الشيء المهم هنا هو الاهتمام الخاص الذي تتطلبه الأجهزة المحمولة ، بسبب المساحة المحدودة للشاشة وحقيقة أن اتصالات الهاتف المحمول تكون أبطأ عادة من اتصال سطح المكتب.

هناك الكثير من مظاهر WordPress متجاوبة ولكنك تعلم أنه سيكون لدينا دائمًا مجال للتحسين. لذا سنرى هنا تقنيات 4 وطرق استخدامها لتحسين تجربة الجوّال لمستخدميك.

#1 Ol 'Media Types

قبل بضع سنوات ، عندما تم اعتبار IE5.5 و IE6 على قيد الحياة ، بدأت متصفحات الجوّال في الظهور (وكان أوبرا أفضل من ذلك) ، وبدأ الناس يدركون أن الأمور كانت تنكسر منذ أن كانت الهواتف لا تعود معالجة أشياء بسيطة مثل CSS (ناهيك عن JS و flash وما إلى ذلك).

لذا ، كان إنشاء موقع محمول منفصل تمامًا هو الخيار الوحيد عندما جاءت أنواع الوسائط لإنقاذنا. كانت الفكرة بسيطة ، يمكن أن تخبر المتصفح إذا كان الملف الذي تقدمه هو قواعد CSS "متقدمة" (لأجهزة الكمبيوتر المكتبية) أو قواعد CSS بسيطة (للأغراض اليدوية أو المطبوعة). بناء الجملة بسيط مثل هذا:

<link rel = "stylesheet" href = "handheld.css" type = "text / css" media = "handheld" />

قد يكون هذا خيارًا جيدًا لإنشاء تصميم مختلف تمامًا لموقعك على الجوّال. ولكن عليك فقط عدم استخدامه.

قد تبدو أنواع الوسائط جيدة في البداية ولكن مشكلة بسيطة تأتي مع الهواتف الذكية الحديثة: عدم وجود دعم للمتصفح. معظم اللاعبين الرئيسيين هناك كانوا يتجاهلون هذا النوع من الوظائف (مثل التفاح)
ثم تأتي الاستفسارات الإعلامية لإنقاذنا.

#2 استعلامات الوسائط وكيفية تحسين تجربة الجوّال حقاً

هذه هي الطريقة الأكثر شيوعًا لإنشاء إصدار الجوال من موقعك.

يمكنك استهداف نقاط معينة استنادًا إلى غضب من حجم المتصفح ، وحجم شاشة الجهاز ، وكثافة البكسل (نعم ، شبكية العين!) ، وحتى أنواع الوسائط.

في ما يلي استعلام وسائط بسيط:

media (max-width: 700px) {body {background: red؛ }}

هذا يشبه إلى حد كبير البرمجة. IF "عرض المستعرض هو 700 أو أقل" ، THEN "تطبيق شفرة CSS التالية".

موضوع الطفل

دعونا إنشاء مجلد جديد في / المواضيع الخاصة بك واسمها العشرين موبايل. أعلم ، هناك عشرون إثنا عشر يستخدم بالفعل استعلامات وسائط ، لكننا هنا للتعلم ، أليس كذلك؟

لذلك ، أنشئ ملف style.css وأضف هذا المحتوى:

/ * Theme Name: mobile theme Template: twentytwelve * /import url (“../ twentytwelve / style.css”)؛ media المحمولة ، الشاشة فقط و (أقصى عرض: 767px) {nav ul {display: none؛} nav select {display: block}}

أعلاه قمنا بإنشاء CSS للموضوع الفرعي ، وقمنا أيضًا بإضافة قاعدة تستهدف فقط أجهزة الجوال ، والتي ستخفي القائمة الرئيسية وتعرض تحديدًا. حتى إذا كان لديك قائمة في تحديد ، يمكنك توفير مساحة كبيرة بدلاً من عرضه كعناصر ul / li

#3 تحول المتطرفة مع jQuery موبايل

يُعد jQuery mobile إطارًا رائعًا يستخدم وظائف jQuery لتحسين تجربة الجوّال ، مع عناصر واجهة مستخدم محسّنة وعناصر واجهة المستخدم.

تحتاج HTML إلى جعلها تعمل بشكل بسيط ، فهي تستخدم سمات بيانات HTML و JS للكشف عن عناصر واجهة المستخدم وإنشائها.

ولكن من أجل جعل jQuery Mobile يعمل بشكل صحيح في مدونة WordPress الخاصة بك ستحتاج إلى استدعاء jQuery mobile script أولاً. العودة إلى موضوع الطفل لدينا ، ملف header.php موضوع الرئيسي مكررة وإضافة هذه الخطوط في علامة الرأس:

<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 /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </ script>

يجب أن أذكر أنه بالنسبة إلى العروض التجارية يجب عليك استخدام wp_enqueue _script ، لذلك عليك تجنب تكرار المكتبات في موقعك.
الآن يمكننا اللعب مع أي عنصر من عناصر واجهة المستخدم التي تريدها تقريبًا. يحتوي jQuery mobile على الكثير من أدوات واجهة المستخدم التي يمكنك استخدامها في المظهر ، ولكن لنقم بتطبيق الصفحة واللوحات القابلة للطي.
هذا هو بناء جملة HTML الأساسي:

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

باستخدام هذا الرمز ، ستنشئ "صفحة" جديدة ومساحات الرأس والمحتوى والتذييل. يتم إصلاح رأس الصفحة وتذييلها ، وسيتغير المحتوى استنادًا إلى الصفحة الحالية ، بحيث يمكنك تحميل صفحات متعددة مرة واحدة وإخفائها بمجرد تعيين أرقام تعريف مختلفة.
هذا هو HTML الأساسي للألواح القابلة للطي:

<div data-role = "collapsible-set"> <div data-role = "collapsible-set" data-collapsed = "true"> <p> محتوى المنطقة القابلة للطي </ p> </ div> </ div>

من السهل تنفيذ حلقة هناك ، أليس كذلك؟ حسنًا ، سيبدو رمزك كما يلي:

<div data-role = "collapsible-set"> <؟ بينما (have_posts ()) {...؟> <div data-role = "collapsible" data-collapsed = "true"> </ div> <؟ ...}؟> </ div>

اختيار القائمة المنقحة

باستخدام الشفرة التي رأيناها أعلاه (في قسم استعلامات الوسائط) ، يمكنك إخفاء قائمتك المعتادة وإظهار قائمة تحديد خاصة. يسمح لك jQuery بإضافته بدون الكثير من كود PHP (لنكون صادقين لن نحتاج إلى PHP على الإطلاق). لنقم بإنشاء ملف جديد وإضافة هذا الكود هناك:

jQuery (وظيفة ($) {// عندما يكون DOM جاهز $ (document). ready (function () {// لنقم بإنشاء عنصر select $ ("<select />").appendTo ("nav")؛ / / باستخدام الخيار الجديد ، انتقل إلى… $ ("<option />"، {"value": ""، "text": "Go to…"}). appendTo ("nav select")؛)؛ / / الآن لدينا اختيار إنشاء دعونا نشرها: $ ("nav .menu a"). كل (function () {// لكل LINK تجده في القائمة var aux = $ (this)؛ $ ("<الخيار /> "، {" value ": aux.attr (" href ")،" html ": aux.text ()؛}) appendTo (" nav select ")؛ // إلحاق عنصر جديد بالاختيار)} / // ثم قمنا بتعيين وظيفة القائمة المنسدلة لإعادة التوجيه عندما نختار عنصر جديد $ ("nav select"). change (function () {window.location = $ (this) .find ("option: selected"). val ()؛})؛})؛

سيؤدي إجراء ذلك إلى إنشاء قائمة جوال جديدة ، ولكن المشكلة هي أننا نحمّل ميزة jquery mobile حتى في الإصدار "العادي" من الموقع. ولهذا يمكننا استخدام بعض المكونات الإضافية لمساعدتنا على تحسين موقعنا.

#4 - التفاف على كل شيء باستخدام Mobile Detector

ينشئ هذا المكون الإضافي الرائع وظيفة جديدة تتيح لنا تحميل السمات بشكل مشروط اعتمادًا على جهاز المستخدم. وهو يعمل مع قواعد مشروطة بسيطة ، مثل:

<؟ php if (MobileDTS :: is ('android')) {....} elseif (MobileDTS :: is ('mobile')) {....} else {}؟>

تقوم طريقة MobileDTS بالتحقق من الجهاز الحالي ثم تقوم بإرجاع true / false بسيط. بعد ذلك يمكننا استخدام وظيفة سحرية تسمى switch_theme () لتعيين سمة جديدة ، ويمكنك استخدام الملحقات الإضافية مثل MobileDTS :: is_switcher_enabled () لإنشاء رابط لإصدار سطح المكتب عند استخدام الهاتف المحمول ، على سبيل المثال.

النتيجة

لذا ، هل سبق لك استخدام الإضافات أو الوظائف المتنقلة في موضوع WordPress؟ الطريقة التي تفضل؟ لا تخجل وتقاسم أفكارك!

مقال روتشستر أوليفيرا

أنا مصمم على شبكة الإنترنت ورجل أعمال من Itajubá (MG) ، البرازيل. أحب الكتابة عن المواضيع الغامضة والقيام ببعض الأشياء الرائعة.

الحصول على اتصال: