technique

الدرس الرابع: تعديل القائمة العلوية في قالب Sora Store

صورة
Tamer Ahmed
اخر تحديث :

الدرس الرابع: تعديل القائمة العلوية في قالب Sora Store وإضافة الصفحات والأقسام.

بعد تثبيت قالب Sora Store Free وتغيير الشعار واسم الموقع، نصل الآن إلى واحدة من أهم خطوات تخصيص القالب: تعديل القائمة العلوية Main Menu.

القائمة هي وسيلة التنقل الأساسية داخل الموقع، ولذلك يجب أن تكون بسيطة وواضحة، خصوصًا إذا كنا سنحوّل Sora Store من شكل متجر تقليدي إلى موقع مراجعات منتجات وتسويق بالعمولة.

وفي هذا الدرس لن نشرح قائمة قالب آخر؛ بل سنعتمد على ملف Sora Store الموجود لدينا، والذي يحتوي بالفعل على Widget باسم Main Menu ونظام خاص للتعامل مع القوائم الفرعية.

الدرس الرابع: تعديل القائمة العلوية في قالب Sora Store


ماذا سنفعل في هذا الدرس؟

سنتعلم:

  • أين توجد القائمة داخل قالب Sora Store.
  • طريقة تغيير أسماء عناصر القائمة.
  • إضافة Home.
  • إضافة Reviews.
  • إضافة الأقسام.
  • ربط القائمة بـ Labels.
  • إضافة Contact Us.
  • حذف روابط Demo.
  • إنشاء قائمة فرعية.
  • فهم علامة + المستخدمة في هذا القالب.
  • تجهيز القائمة للدرس القادم الخاص بـ Mega Menu.

1. أين توجد القائمة في قالب Sora Store؟

بعد فحص ملف القالب، نجد أن القائمة الرئيسية موجودة داخل:

<b:section id='menu'>

وبداخلها Widget باسم:

Main Menu

وهو من نوع:

type='LinkList'

أي أن القائمة مبنية باستخدام LinkList في Blogger.

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

2. الطريقة الآمنة لتعديل القائمة

ابدأ من لوحة تحكم Blogger:

Blogger → Layout

ثم ابحث عن:

Main Menu

واضغط:

Edit

ستظهر لك عناصر القائمة الموجودة حاليًا.

من هنا يمكنك تغيير:

  • اسم الرابط.
  • عنوان الرابط URL.
  • ترتيب العناصر.
  • إضافة عناصر جديدة.

وهذه الطريقة أفضل للمبتدئ من الدخول إلى XML مباشرة.

3. كيف نضيف الصفحة الرئيسية؟

أضف عنصرًا جديدًا:

Name:

Home

URL:

/

أو استخدم رابط الصفحة الرئيسية الكامل لموقعك.

وبما أن القالب يحتوي على منطق يحدد العنصر الحالي ويضيف له class باسم selected، فإن الرابط الحالي يمكن أن يحصل تلقائيًا على تنسيق العنصر المحدد.

4. إضافة قسم مراجعات المنتجات

إذا كان هدفنا إنشاء موقع مراجعات، يمكن أن تكون القائمة مثلًا:

Home
Reviews
Smartphones
Laptops
Gadgets
Buying Guides
Contact Us

هذه القائمة أبسط بكثير من وضع عشرات الأقسام أمام الزائر.

5. كيف نربط القائمة بـ Label؟

لنفترض أنك أنشأت Label باسم:

Smartphones

وتريد أن يؤدي الضغط على Smartphones إلى عرض جميع المقالات التي تحمل هذا التصنيف.

رابط Label في Blogger يكون عادةً بهذا الشكل:

https://yourblog.blogspot.com/search/label/Smartphones

وفي مدونتك، إذا كان النطاق هو:

https://reviews300.blogspot.com

فسيكون الرابط مثل:

https://reviews300.blogspot.com/search/label/Smartphones

ضع:

Name:

Smartphones

URL:

https://reviews300.blogspot.com/search/label/Smartphones

ثم احفظ.

6. إضافة Reviews

يمكن إنشاء Label باسم:

Reviews

ثم إضافة:

Name:
Reviews

ورابط:

https://reviews300.blogspot.com/search/label/Reviews

وبذلك عندما يضغط الزائر على Reviews سيذهب إلى صفحة تعرض المقالات التي تحمل هذا التصنيف.

7. إضافة Buying Guides

يمكن أيضًا إنشاء Label:

Buying Guides

ثم إضافته إلى القائمة.

مثال:

Name:
Buying Guides

والرابط:

https://reviews300.blogspot.com/search/label/Buying%20Guides

استخدام %20 بدل المسافة في الرابط أكثر أمانًا.

8. إضافة Contact Us

إذا كانت لديك صفحة اتصال، مثل:

/p/contact-us.html

يمكن إضافة:

Name:

Contact Us

URL:

https://reviews300.blogspot.com/p/contact-us.html

والقالب الذي نعمل عليه يحتوي بالفعل على Widget خاص بـ Contact Form ضمن إضافات المقال، لذلك سنتناول إنشاء صفحة Contact Us واستخدام نموذج الاتصال بالتفصيل في درس مستقل.

9. حذف روابط Demo

بعد تثبيت القالب قد تجد روابط تجريبية لا تحتاج إليها.

مثل:

Features
Download
Demo

إذا كانت موجودة في القائمة، يمكنك حذفها من:

Layout → Main Menu

ولا تحذفها من XML مباشرة.

نحن نريد أن تصبح القائمة مرتبطة بمحتوى موقعك الحقيقي.

10. ترتيب القائمة

أنصح ألا تجعل القائمة طويلة جدًا.

مثلًا:

Home
Reviews
Smartphones
Laptops
Gadgets
Buying Guides
Contact

أفضل من:

Home
Phones
Android
iPhone
Samsung
Xiaomi
Huawei
Laptops
HP
Dell
Lenovo
Accessories
Headphones
Smart Watches
...

القائمة الطويلة جدًا تصبح مشكلة خصوصًا على الشاشات الصغيرة.

11. إنشاء قائمة فرعية Dropdown

هنا نصل إلى جزء مهم جدًا في نسخة Sora Store الموجودة لدينا.

القالب يحتوي على كود خاص يراقب اسم عنصر القائمة إذا كان يحتوي على علامة:

+

وهذه العلامة لها وظيفة مهمة في إنشاء القوائم الفرعية.

أي أن علامة + ليست مجرد رمز تجميلي.

12. كيف تعمل علامة +؟

الفكرة الموجودة في القالب تعتمد على ترتيب عناصر القائمة.

مثلًا نريد:

Smartphones
   ├── Android
   ├── iPhone
   └── Samsung

نضع العنصر الرئيسي بطريقة يفهمها القالب، ثم نضع العناصر التابعة له بعده.

الكود الموجود في القالب يفحص:

data:link.name contains "+"

وبناءً عليه يبدأ أو ينهي قائمة فرعية.

وهذا يعني أن الترتيب وطريقة كتابة أسماء العناصر مهمان جدًا.

13. مثال عملي لقائمة فرعية

يمكن أن يكون ترتيب القائمة:

Home
Reviews
Smartphones+
Android
iPhone
Samsung
Laptops
Gadgets
Contact Us

الفكرة هنا أن:

Smartphones+

هو العنصر الذي يخبر نظام القائمة بأن العناصر التالية ستكون ضمن قائمة فرعية.

لكن لا تنفذ هذا المثال مباشرة على مدونتك قبل التأكد من النتيجة في نسختك.

في الدرس القادم سنشرح هذه الآلية عمليًا، ونبني قائمة منسدلة حقيقية خطوة بخطوة.

14. لماذا لا نعدل XML الآن؟

قد تلاحظ أن XML يحتوي على:

<b:widget id='LinkList001'

ثم كود طويل مسؤول عن إنشاء القائمة.

لكننا لا نحتاج إلى تعديل هذا الكود لمجرد تغيير:

Home

إلى:

الرئيسية

أو إضافة:

Reviews

لأن بيانات القائمة نفسها تأتي من Widget.

لذلك:

تعديل المحتوى من Layout، وتعديل طريقة عمل القائمة من XML.

وهذا فرق مهم جدًا.

15. متى نستخدم Edit HTML؟

نستخدم Edit HTML عندما نريد تعديل وظيفة القائمة نفسها.

مثل:

  • تغيير شكل القائمة.
  • تغيير المسافات.
  • تغيير الألوان.
  • إضافة تأثيرات.
  • تغيير طريقة عمل Dropdown.
  • إنشاء Mega Menu.
  • إضافة أيقونات.
  • تعديل القائمة الخاصة بالهاتف.

أما إذا أردت فقط:

إضافة رابط

فلا حاجة إلى تعديل HTML.

16. القائمة في الهاتف

في قالب Sora Store لدينا، الهيدر يحتوي على زر للقائمة المحمولة:

<label aria-label='main menu'
       class='open nav1'
       for='NavM'
       id='navMopile'
       onclick='openSidenav()'>

ثم يظهر الشعار، ثم روابط الهيدر، ثم زر البحث.

وهذا يعني أن القالب لديه نظام منفصل لفتح القائمة الجانبية على الهاتف.

كما أن CSS الخاص بالقالب يحدد القائمة الجانبية بعرض يصل إلى:

300px

مع فتحها عند تفعيل NavM.

لذلك عندما نعدل القائمة الرئيسية، يجب أن نختبر نسخة الكمبيوتر والهاتف معًا.

17. ماذا عن شعار قائمة الهاتف؟

توجد في القالب منطقة منفصلة باسم:

Main menu Mopile Logo

وهي Widget باسم:

Image002

وهي مخصصة لشعار القائمة المحمولة.

وهذا يفسر لماذا قد تجد أحيانًا اختلافًا بين شعار الهيدر وشعار القائمة الجانبية على الهاتف.

سنعود لهذه النقطة عند تطوير القائمة المحمولة.

18. قائمة مناسبة لموقع Reviews300

بما أن هدفنا هو إنشاء موقع مراجعات منتجات، أقترح أن تكون القائمة في البداية:

Home
Reviews
Smartphones
Laptops
Gadgets
Buying Guides
Contact Us

ثم لاحقًا يمكن أن تصبح:

Home
Reviews
  Smartphones
  Laptops
  Smart Watches
  Headphones

Buying Guides
  Best Smartphones
  Best Laptops
  Best Gadgets

Deals
Contact Us

وهنا يبدأ الموقع في أخذ شكل موقع مراجعات حقيقي.

19. لا تضع كل شيء في القائمة

هناك معلومات يمكن وضعها في الفوتر بدل القائمة الرئيسية.

مثل:
  • Privacy Policy.
  • Disclaimer.
  • Affiliate Disclosure.
  • Terms of Use.
  • About Us.

ليس من الضروري أن تظهر جميعها في أعلى الصفحة.

القائمة الرئيسية يجب أن تحتوي على أهم أقسام الموقع فقط.

20. اختبار القائمة

بعد تعديل القائمة اضغط Save.

ثم افتح الموقع.

اختبر:

الكمبيوتر

هل تظهر جميع الروابط؟

الهاتف

هل تظهر القائمة عند الضغط على ☰؟

الروابط

هل كل رابط يفتح الصفحة الصحيحة؟

Labels

هل صفحة التصنيف تعرض المقالات الصحيحة؟

القوائم الفرعية

هل تظهر في المكان الصحيح؟

اللغة

إذا كان الموقع باللغة الإنجليزية، حافظ على أسماء الأقسام باللغة الإنجليزية بشكل موحد.

مشكلة شائعة: الرابط لا يعمل

إذا كان الرابط:

/search/label/Smartphones

ولا يعرض المقالات، تحقق أولًا من أن المقالات تحتوي فعلًا على Label:

Smartphones

وتذكر أن:

Smartphones

ليست بالضرورة نفس:

smartphones

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

مشكلة ثانية: القائمة أصبحت مزدحمة

إذا أضفت الكثير من العناصر، لا تحاول حل المشكلة بإجبار القائمة على عرض كل شيء.

الحل الأفضل هو استخدام:

Dropdown

ثم لاحقًا:

Mega Menu

وبذلك نستطيع تنظيم عشرات الأقسام دون جعل الهيدر مزدحمًا.

قاعدة مهمة قبل الدرس الخامس

من الآن فصاعدًا، عندما نعدل قالب Sora Store، سنقسم التعديل إلى مستويين:

المستوى الأول – Layout

لتغيير:

  • النصوص.
  • الروابط.
  • Widgets.
  • عناصر القائمة.

المستوى الثاني – Edit HTML

لتغيير:

  • CSS.
  • JavaScript.
  • بنية القائمة.
  • طريقة عرض العناصر.
  • الوظائف الجديدة.

وهذه الطريقة تقلل احتمال تلف القالب.

الخلاصة

قائمة Sora Store في النسخة التي نعمل عليها تعتمد على Widget من نوع LinkList باسم Main Menu، ولذلك يمكن إجراء التغييرات الأساسية من Layout دون لمس XML.

كما أن القالب يحتوي على نظام مخصص للقوائم الفرعية يعتمد على فحص أسماء عناصر القائمة بحثًا عن علامة +، ولذلك سنستخدم هذا النظام نفسه بدل تركيب كود قائمة مختلف فوق القالب.

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

الدرس الخامس

إنشاء قائمة منسدلة Dropdown Menu في قالب Sora Store

في الدرس القادم سننتقل إلى التطبيق العملي، وسننشئ قائمة مثل:

Reviews
│
├── Smartphones
├── Laptops
├── Smart Watches
└── Headphones

وسأشرح بالضبط ماذا نكتب في خانة اسم كل عنصر وماذا نضع في خانة الرابط، ولماذا تستخدم نسخة Sora Store علامة +، ثم نختبر النتيجة على الكمبيوتر والهاتف قبل الانتقال إلى Mega Menu.

تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات