الدرس الرابع: تعديل القائمة العلوية في قالب Sora Store وإضافة الصفحات والأقسام.
بعد تثبيت قالب Sora Store Free وتغيير الشعار واسم الموقع، نصل الآن إلى واحدة من أهم خطوات تخصيص القالب: تعديل القائمة العلوية Main Menu.
القائمة هي وسيلة التنقل الأساسية داخل الموقع، ولذلك يجب أن تكون بسيطة وواضحة، خصوصًا إذا كنا سنحوّل Sora Store من شكل متجر تقليدي إلى موقع مراجعات منتجات وتسويق بالعمولة.
وفي هذا الدرس لن نشرح قائمة قالب آخر؛ بل سنعتمد على ملف Sora Store الموجود لدينا، والذي يحتوي بالفعل على Widget باسم Main Menu ونظام خاص للتعامل مع القوائم الفرعية.
ماذا سنفعل في هذا الدرس؟
سنتعلم:
- أين توجد القائمة داخل قالب 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:
HomeURL:
/أو استخدم رابط الصفحة الرئيسية الكامل لموقعك.
وبما أن القالب يحتوي على منطق يحدد العنصر الحالي ويضيف له 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:
SmartphonesURL:
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 UsURL:
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.
