إخفاء أو إظهار كود أو أداة على نموذج الجوال أو سطح المكتب في مدونة بلوجر. مع تزايد استخدام منصات التدوين مثل بلوجر كوسيلة لمشاركة المعلومات والمحتوى على الإنترنت، أصبحت قضايا تخصيص وتنسيق المدونات أمرًا حيويًا. يأتي إخفاء أو إظهار أكواد أو أدوات ضمن تلك المدونات كوسيلة مهمة لتحقيق تصميم ووظائف مخصصة. في هذا المقال، سنستكشف مفهوم إخفاء أو عرض أكواد HTML، CSS، وأدوات أخرى داخل منصة بلوجر.
في بعض الأحيان نكون بحاجة إلى إظهار كود أو أداة معينة على نموذج سطح المكتب دون نموذج الجوال أو العكس، وتتجلى أهمية إخفاء أو إظهر كود أو اداة على نموذج الهاتف دون نموذج سطح المكتب، في أن تقليل الأدوات على نسخة الهاتف بقدر الإمكان يؤثر إيجابيا في سرعة التحميل، بالمقابل هناك بعض الإضافات تكون فعالة على نسخة الهاتف فقط مثل إضافة زر مشاركة الواتس آب.
سنتعرف اليوم عن كيفية إخفاء أو إظهار كود أو أداة على نسخة الهاتف أو سطح المكتب في مدونة بلوجر. وقبل ان نذكر طرق اظهار واخفاء الأدوات، يجب التفريق بين 3 نماذج ظهور الموقع على الهاتف وهي كالتالي:
نموذج الجوال الافتراضي: نموذج جوال بلوجر التقليدي يفتقد ظهور الأدوات والإضافات به رغم بعض المميزات التي تميزه عن القالب المتجاوب مثل سرعة تحميله.
نموذج سطح المكتب على الجوال (القوالب المتجاوبة Responsive templates): عادة جميع الأكواد أو الأدوات التي يتم إدراجها في مدونة بلوجر من تخطيط المدونة تظهر على جميع صفحات المدونة. لابد من إختيار النموذج الأمثل لموقعك من بين الثلاث نماذج. وتختلف كيفية إخفاء أو إظهار الأدوات بين هذه النماذج وهي كالتالى:
الطريقة المناسبة لنموذج الجوال الافتراضي ونموذج الجوال المخصص:
يجب التأكد أولا من تفعيل نموذج الجوال الافتراضي ونموذج الجوال المخصص.
من لوحة تحكم بلوجر >>> قالب.
إذا أردت إخفاء أو إظهار أدوات أخرى غير الأدوات الافتراضية أو المخصصة اتبع الخطوات التالية:
1 ـ من لوحة تحكم بلوجر >>> قالب >>> تحرير HTML.
(ننصح بأخذ نسخة احتياطية من القالب)
2 ـ ابحث بالاستعانة بـ (CTRL+F) عن (اسم الأداة) أو (معرف ID الأداة) المراد إخفاؤها أو إظهارها وسنجد كود الأداة بهذا الشكل (مثال):
<b:widget id='HTML3' locked='false' title='x الأداة' type='HTML'>
3 ـ بعد هذا الكود مباشرة locked=’false’ أضف أحد الأكواد التالية حسب الغرض:
إخفاء الأداة على نموذج الجوال فقط وإظهارها على نموذج سطح المكتب:
mobile='no'
إظهار الأداة على نموذج الجوال فقط وإخفائها على نموذج سطح المكتب:
mobile='only'إظهار الأداة على كل من نموذج الجوال وعلى نموذج سطح المكتب:
mobile='yes'4 ـ اضغط (حفظ) … هنيئا لك 🙂
5 ـ يمكنك اختبار نسخة الجوال بإضافة /?m=1 إلى رابط مدونتك.
الطريقة المناسبة للقوالب المتجاوبة التى تعمل كنموذج سطح المكتب على الجوال
إخفاء أداة HTML/JavaScript التخطيط:
باستخدام وسم الإخفاء:
1 ـ من لوحة تحكم بلوجر >>> قالب >>> تحرير HTML.
(ننصح بأخذ نسخة احتياطية من القالب)
2 ـ ابحث بالإستعانة بـ (CTRL+F) عن (اسم الأداة) أو (معرف ID الأداة) المراد إخفاؤها أو إظهارها وستجد كود الأداة بهذا الشكل (مثال):
<b:widget id='HTML3' locked='false' title='x الأداة' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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='x الأداة' 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 != ""'>
<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>
4 ـ اضغط (حفظ) … هنيئا لك 🙂
إذا كانت الأداة تحتوى على جافا سكريبت يفضل إخفاؤه أيضا حتى تحصل على أعلى سرعة تحميل.
باستخدام تقنية Css:
1 ـ من لوحة تحكم بلوجر >>> تخطيط.
نضغط على تحرير الاداة ونقوم بنسخ (معرف ID الأداة) الذي سنجده في نهاية رابط الأداة، مثال HTML3.
2 ـ من لوحة تحكم بلوجر >>> قالب >>> تحرير HTML.
3 ـ ابحث بالاستعانة بـ (CTRL+F) عن الكود ]]> وضع قبله الكود التالي:
@media screen and (max-width:1039px){
#HTML3{
display:none;
}
}
استبدل HTML3 بمعرف ID الأداة.
استبدل 1039px بعرض المتصفح الذي تريد اختفاء الأداة فيها.
4 ـ اضغط (حفظ) … هنيئا لك 🙂
من عيوب هذه الطريقة أنها تقوم بإخفاء ظاهري للأدوات، ولا تخفي الجافا سكريبت، وبالتالي لا تقلل من وقت تحميل القالب على نموذج الجوال.
إخفاء أوإظهار كود HTML/JavaScript
نضع كود HTML/JavaScript المراد إخفاؤه أو إظهاره داخل وسم الإخفاء أو الإظهار المناسب، وذلك على الشكل التالي:
وسم الإخفاء أو الإظهار المناسب الكود المراد إخفاؤه أو إظهاره
</b:if>
وسم إخفاء الأداة على نسخة الهاتف وإظهارها على نسخة سطح المكتب:
<b:if cond='data:blog.isMobileRequest == "false"'>وسم إظهار الأداة على نسخة الهاتف وإخفاؤها على نسخة سطح المكتب:
<b:if cond='data:blog.isMobileRequest == "true"'>من عيوب هذه الطريقة إنها تعمل على الهواتف الذكية فقط ولا تعمل على التابلت والآيباد.
منقول
