كيفية اخفاء واظهار بعض الادوات لمدونة بلوجر

mohamedelafndey يناير 12, 2018 0 تعليق

بسم الله الرحمن الرحيم

شرح النهارده كيفيه تعديل نموذج القالب أى يتوافق مع أجهزة الهواتف الذكية بعد أن أصبح نسبة كبيرة من من متصفحى الإنترنت من خلال الهواتف المحمولة وأصبح شرط التقدم فى محركات البحث هو أن يكون الموقع مناسب للجوال mobile friendly. ففى السابق كنا نستخدم نموذج جوال بلوجر التقليدى الذى يفتقد ظهور الأدوات والإضافات به رغم بعض المميزات التى تميزه عن القالب المتجاوب مثل سرعة تحميله.

والآن سنتحدث عن كيفية اخفاء واظهار بعض الادوات على نسخة الهاتف، فمن المفضل تقليل الادوات على نسخة الهاتف بقدر الامكان حتى لا تتأثر سرعة التحميل فلا داعى لظهور جميع ادوات القالب فى نسخة الهاتف فى المقابل ان بعض الاضافات تكون فعالة على نسخة الهاتف

وقبل ان نذكر طرق اظهار واخفاء الأدوات لابد من التفريق بين حالات ظهور الموقع الثلاثة على الهاتف وهى كالتالى:

نموذج الجوال الإفتراضى
نموذج الجوال المخصص
نموذج سطح المكتب على الجوال (القوالب المتجاوبة Responsive templates)

وهذه الصورة توضح كيفية تفعيل الثلاث نماذج بما يناسب موقعك:

لابد من إختيار النموذج الأمثل لموقعك من بين الثلاث نماذج.

وتختلف كيفية اظهار واخفاء الادوات بين هذه النماذج وهى كالتالى:

الطريقة الأولى:

وهى مناسبة لنموذج الجوال الإفتراضى و المخصص فقط أى لابد من تفعيل نموذج الجوال أما إذا كنت تستخدم قالب متجاوب وقمت بتفعيل نموذج سطح المكتب على الجوال فلا تعمل هذه الطريقة .

نموذج الجوال الإفتراضى:

التحكم فى إظهار أو إخفاء الأدوات الرسمية المتاحة على النموذج الإفتراضى وهى (قائمة الصفحات - رأس الصفحة - المشاركات - الملف الشخصى - الإسناد - إعلانات أدسنس الرسمية)

نموذج الجوال المخصص:

إذا أردت إظهار أو اخفاء ادوات أخرى غير الأدوات الإفتراضية قم بتخصيص القالب

فى الحالتين إتبع الخطوات التالية:

1.اذهب إلى لوحة تحكم بلوجر >> قالب >>> قم بالإحتفاظ بنسخة إحتياطية من القالب تجنبًا للأخطاء
2.قم بتفعيل نموذج الجوال لمدونتك
3.تحرير القالب ثم إستخدم Ctrl للبحث على إسم الأداة المراد إخفاؤها أو إظهارها فى القالب تجدها كما بالصورة (مثال على إسم الأداة "تابعنا")

4.أضف أحد الأكواد التالية بعد هذا الكود مباشرة locked=’false’ حسب الغرض من ظهور أو إخفاء الأداة:

mobile='no' إخفاء الأداة على نموذج الجوال
mobile='only' ظهور الأداة على الجوال فقط وإخفائها على نموذج سطح المكتب
mobile='yes' ظهور الأداة على كل من نموذج الجوال ونموذج سطح المكتب

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

ثم إحفظ القالب وإختبر نسخة الجوال بإضافة /?m=1 لرابط مدونتك

مثال: http://www.afndey.tk/?m=1

الطريقة الثانية:

هذه الطريقة عرضها موقع MBT و مناسبة للقوالب المتجاوبة التى تعمل كنموذج سطح المكتب على الجوال وهى التى أستخدمها فى مدونتى وهى مفيدة جدًا للأدوات التى تحتوى على Html ,Javascript وإليك الخطوات:
1.اذهب إلى لوحة تحكم بلوجر >> قالب >>> قم بالإحتفاظ بنسخة إحتياطية من القالب تجنبًا للأخطاء
2.تحرير القالب ثم البحث بإستخدام Ctrl عن إسم الأداة المراد إخفاؤها على الجوال تجدها موجودة فى مثل هذا الكود بعد توسيع الأسهم.

 <b:widget id='HTML3' locked='false' title='إسم الأداة' type='HTML'> 
                  <b:includable id='main'> 
                    <!-- only display title if it's non-empty --> 
                    <b:if cond='data:title != &quot;&quot;'> 
                      <h2 class='title'> <data:title/> 
                      </h2> 
                    </b:if> 
                    <div class='widget-content'> 
                      <data:content/> 
                    </div> 
                    <b:include name='quickedit'/> 
                   </b:includable> 
                </b:widget>

3. والآن مباشرة بعد تحديد إسم الأداة كما هو موضح باللون الأحمر ،ولإخفاؤها على الجوال ،قم بإضافة الكودين باللون الأحمر.كما هو موضح في الكود التالي:

<b:widget id='HTML3' locked='false' title='إسم الأداة' type='HTML'> 
                  <b:includable id='main'> 
<b:if cond='data:blog.isMobileRequest == "false"'> 
                    <!-- only display title if it's non-empty --> 
                    <b:if cond='data:title != &quot;&quot;'> 
                      <h2 class='title'><data:title/> 
                      </h2> 
                    </b:if> 
                    <div class='widget-content'> 
                      <data:content/> 
                    </div> 
                    <b:include name='quickedit'/> 
                    </b:if> 
                  </b:includable> 
                </b:widget>

إذا كانت الأداة تحتوى على جافاسكريبت يفضل إخفاؤه أيضًا حتى تحصل على أعلى سرعة تحميل ويكون ذلك بالبحث عن كود الجافاسكريبت الخاص بالإضافة فى منطقة </head> وإضافة الكودين السابقين كما بالمثال

<b:if cond='data:blog.isMobileRequest == "false"'>كود الجافاسكريبت
</b:if>

هذا الكود يعمل على إخفاء الأداة على نسخة الهاتف وإظهارها على نسخة سطح المكتب.
إذا أردت العكس أى ظهور الأداة على الهاتف فقط وإخفاؤها من سطح المكتب عليك بتبديل كلمة "false" بالقيمة "true"
من عيوب هذه الطريقة إنها تعمل جيدًا على الهواتف الذكية فقط ولا تعمل على التابلت والآيباد.

الطريقة الثالثة

وهى تكون بإستخدام تقنية Css وتكون مناسبة للقوالب المتجاوبة .

لابد من معرفة "معرف الأداة" Widget ID ,ويكون ذلك من خلال تحرير الأداة ستجد معرف الأداة بالرابط كما بالصورة

والآن قم بتحرير القالب من لوحة التحكم و إبحث عن الكود التالى

]]></b:skin>

ثم قم بلصق الكود التالى قبله مباشرة بعد تغيير رقم معرف الأداة الملون باللون الأحمر

@media screen and (max-width:1039px){
#HTML1{
display:none;
}
}

من عيوب هذه الطريقة أنها تقوم بإخفاء ظاهرى للأدوات ولا تخفى الجافاسكريبت بمعنى إنها لاتقلل من وقت تحميل القالب على نموذج الجوال.
الي هنا نصل الي نهاية الدرس آمل ان ينأل اعجابكم
::محمد الافندي::♥

تفاصيل التدوينة

كاتب الموضوع : mohamedelafndey

mohamedelafndey

محمد محمود الافندي , مدون عربي اعشق التدوين وعالم البرمجيات بشكل عام وتبسيط المعلومه وثوف اشارك معكم كل ماهو جديد فقط انتظرونا..

إظهار التعليقات

44

الجمعة، 12 يناير 2018