تعرف على تغيير الشعار واسم الموقع في قالب Sora Store بطريقة صحيحة من خلال هذا المقال.
بعد تثبيت قالب Sora Store Free، تأتي خطوة مهمة جدًا وهي استبدال الشعار الافتراضي باسم وشعار موقعك.
وهنا يجب الانتباه إلى نقطة مهمة: تغيير الشعار لا يعني بالضرورة تعديل كود HTML. في Sora Store توجد طريقة أسهل من خلال أداة Header، وهي الطريقة التي يوصي بها توثيق Sora لإضافة الشعار. (Sora Blogging Tips)
وفي هذا الدرس سنشرح الطريقتين، ثم نوضح ماذا تفعل إذا لم يظهر الشعار بالحجم المناسب.
ماذا سنتعلم في هذا الدرس؟
سنتعلم:
- تغيير اسم المدونة.
- رفع شعار جديد.
- تغيير الشعار من Layout.
- معرفة مكان الشعار داخل قالب Sora Store.
- ضبط حجم الشعار.
- حل مشكلة الشعار الصغير.
- معرفة الفرق بين شعار الكمبيوتر وشعار القائمة على الهاتف.
- تعديل الشعار من HTML عند الحاجة.
- الحفاظ على توافق الشعار مع الهاتف.
أولًا: ما الفرق بين اسم الموقع والشعار؟
هناك شيئان مختلفان:
اسم الموقع
وهو اسم المدونة الذي يظهر في إعدادات Blogger، مثل:
Reviews300
أو:
تقنيات نور
الشعار Logo
وهو صورة تحتوي على اسم الموقع أو رمزه.
مثل:
tN
تقنيات نورومن الأفضل أن يكون اسم المدونة والشعار متوافقين.
ثانيًا: تغيير اسم الموقع
قبل تغيير الشعار، من الأفضل ضبط اسم الموقع أولًا.
ادخل إلى:
Blogger → Settings → Basic → Title
ثم اكتب اسم موقعك.
مثلًا:
Reviews300أو:
Product Reviews & Buying Guidesثم احفظ التغييرات.
لماذا هذه الخطوة مهمة؟
لأن قالب Sora Store يستخدم اسم المدونة في أكثر من مكان.
وفي نسخة القالب الموجودة لدينا، نلاحظ أن الشعار مرتبط بـ:
data:blog.titleكما أن عنوان المدونة يستخدم أيضًا في خصائص الصورة مثل alt وtitle.
وهذا مفيد جدًا لمحركات البحث وإمكانية الوصول.
ثالثًا: رفع الشعار من Layout
هذه هي الطريقة التي نفضلها أولًا.
من لوحة Blogger:
Layout → Header
ثم اضغط Edit.
توثيق Sora يوضح الطريقة بشكل مباشر:
- الدخول إلى Layout.
- الضغط على Edit في منطقة Header.
- إضافة صورة الشعار.
- الضغط على Save. (Sora Blogging Tips)
بعد ذلك اختر صورة الشعار من جهازك.
رابعًا: اختيار صورة الشعار المناسبة
لا تستخدم صورة ضخمة جدًا.
مثلاً لا ترفع شعارًا بحجم:
3000 × 2000إذا كان المطلوب مجرد شعار صغير في الهيدر.
الأفضل تجهيز صورة:
PNGبخلفية شفافة إذا كان التصميم يسمح بذلك.
مثال:
Logo.pngويُفضل أن تكون الصورة واضحة حتى عند عرضها على شاشة الهاتف.
خامسًا: نقطة مهمة جدًا في نسخة القالب التي نعمل عليها
هنا لدينا ميزة مهمة لأنني راجعت ملف XML الخاص بقالبك.
القالب يحتوي على Widget باسم:
Header1وهو المسؤول عن الشعار الرئيسي، كما أن القالب مضبوط حاليًا لاستخدام صورة للشعار (useImage=true).
والقالب يحتوي أيضًا على Widget منفصل باسم:
Image002وهو بعنوان:
Main menu Mopile Logoوهذا يعني أن هناك شعارًا مرتبطًا بقائمة الهاتف أيضًا.
وهذه المعلومة مهمة جدًا، لأن تغيير الشعار الرئيسي فقط قد لا يغير بالضرورة الصورة المستخدمة في القائمة الخاصة بالهاتف.
سادسًا: لماذا قد يظهر الشعار صغيرًا؟
هذه من أكثر المشاكل التي يواجهها مستخدمو قوالب Blogger.
قد ترفع صورة كبيرة، ولكن القالب يعرضها بحجم صغير.
والسبب أن القالب قد يفرض أبعادًا محددة باستخدام CSS أو خصائص HTML.
وفي ملف Sora Store الذي نعمل عليه يوجد تحديد مباشر للصورة داخل كود Header.
فالقالب يحتوي على:
<img expr:alt='data:blog.title'
expr:src='data:sourceUrl'
expr:title='data:blog.title'
height='70'
id='Header1_headerimg'
width='250'/>أي أن العرض والارتفاع الافتراضيين هنا هما:
Width = 250px
Height = 70pxوهذا يفسر لماذا قد لا يظهر الشعار بالحجم الذي تتوقعه حتى لو كانت الصورة الأصلية أكبر.
سابعًا: هل نغير Width وHeight؟
يمكن ذلك، ولكن لا أنصح بتعديلهما في البداية.
ابدأ برفع شعار مناسب لهذه الأبعاد.
مثلًا:
250 × 70أو صورة بنسبة قريبة من ذلك.
ثم اختبر الموقع.
إذا كان الشعار صغيرًا جدًا، ننتقل إلى تعديل CSS بدلًا من تغيير HTML مباشرة.
ثامنًا: تعديل حجم الشعار باستخدام CSS
يمكننا لاحقًا إضافة CSS مخصص.
مثلًا:
#Header1_headerimg {
width: 300px !important;
height: auto !important;
}وهذا يجعل عرض الشعار تقريبًا:
300pxمع الحفاظ على نسبة أبعاده.
لكن لا تستخدم هذا الكود الآن إلا إذا كان الشعار لديك صغيرًا فعلًا.
سنخصص درسًا لاحقًا لتحسين الهيدر والهاتف، ونضع فيه CSS متجاوبًا بحيث يكون الحجم مختلفًا على الكمبيوتر والهاتف.
تاسعًا: لماذا لا ننصح بتكبير الشعار بشكل مبالغ فيه؟
لأن الهيدر يحتوي على عناصر أخرى.
في ملف القالب، يوجد الهيدر بهذه البنية تقريبًا:
Header
│
├── HeaderTOP
│
└── HeaderBOT
│
├── Mobile Menu
├── Logo
├── Header Links
└── Searchوهذا واضح من بنية XML الموجودة في القالب.
لذلك إذا جعلنا الشعار ضخمًا جدًا فقد يؤدي ذلك إلى:
- ضغط القائمة.
- اختفاء جزء من البحث.
- زيادة ارتفاع الهيدر.
- مشاكل في الهاتف.
- تداخل العناصر.
عاشرًا: ماذا عن شعار الهاتف؟
هذه نقطة مهمة جدًا.
في قالبك يوجد قسم منفصل باسم:
Main menu Mopile Logoوهو Widget من نوع Image.
لذلك إذا لاحظت أن:
الشعار في الكمبيوتر جيد
ولكن:
الشعار في قائمة الهاتف مختلف
فهذا ليس بالضرورة خطأ.
قد يكون السبب أن القالب يستخدم صورة منفصلة للقائمة على الهاتف.
وسنتعامل مع هذه الصورة في درس تحسين نسخة الهاتف والقائمة المحمولة.
الحادي عشر: ماذا نفعل إذا لم يظهر الشعار؟
إذا رفعت الصورة ولم تظهر، تحقق من:
1. هل استخدمت Image في Header؟
يجب أن يكون الشعار مضافًا إلى أداة Header.
2. هل تم حفظ الإعدادات؟
اضغط Save.
3. هل تستخدم HTTPS؟
إذا كانت المدونة تعمل عبر:
https://يفضل أن تكون صورة الشعار أيضًا من مصدر HTTPS.
4. هل الصورة متاحة؟
إذا كانت الصورة محذوفة أو الرابط غير صحيح فلن تظهر.
الثاني عشر: ماذا عن اسم الموقع داخل HTML؟
في قالبنا، اسم الموقع ليس مكتوبًا ككلمة ثابتة داخل صورة الشعار.
القالب يستخدم:
<data:blog.title/>في العناوين الخاصة بالمدونة، بينما يستخدم مصدر الصورة في data:sourceUrl.
وهذا أفضل من كتابة:
<h1>Reviews300</h1>يدويًا داخل القالب.
لذلك لا أنصحك بتغيير data:blog.title إلى اسم موقعك يدويًا.
غيّر اسم الموقع من إعدادات Blogger.
الثالث عشر: ماذا يحدث إذا لم تستخدم صورة Logo؟
القالب يحتوي أيضًا على منطق يعرض عنوان المدونة بدل الصورة عندما لا تكون الصورة مفعلة.
داخل الكود نجد:
<b:if cond='data:useImage'>وبالتالي إذا كانت الصورة مفعلة، يعرض القالب الصورة، وإذا لم تكن كذلك ينتقل إلى عنوان المدونة والوصف.
وهذه نقطة مهمة للمبتدئ:
لا تحتاج إلى حذف كود العنوان لمجرد أنك تستخدم صورة Logo.
الرابع عشر: أفضل طريقة لموقع مراجعات
إذا كان الموقع متخصصًا في مراجعات المنتجات، مثل:
Reviews300
فأنصح بأن يكون الشعار بسيطًا.
مثل:
Reviews300
Product Reviews & Buying Guidesأو شعار رمزي بجانب اسم الموقع.
لا تجعل الشعار يحتوي على نصوص كثيرة، لأن المساحة في الهاتف محدودة.
الخامس عشر: تحسين الشعار لمحركات البحث
إذا كان الشعار صورة، يجب أن يحتوي على alt مناسب.
والخبر الجيد أن القالب الذي نعمل عليه يستخدم:
expr:alt='data:blog.title'أي أن النص البديل للصورة مرتبط باسم المدونة.
وهذا أفضل من استخدام:
alt="logo"فقط.
السادس عشر: هل نحتاج إلى تعديل HTML؟
ليس في البداية.
الترتيب الصحيح هو:
المرحلة الأولى
تغيير اسم المدونة من Settings.
المرحلة الثانية
رفع الشعار من Layout.
المرحلة الثالثة
اختبار الكمبيوتر.
المرحلة الرابعة
اختبار الهاتف.
المرحلة الخامسة
إذا كان الحجم غير مناسب، نعدل CSS.
المرحلة السادسة
إذا احتجنا إلى تغيير بنية الشعار، نعدل HTML/XML.
وهذا يقلل جدًا من احتمالية تلف القالب.
مثال عملي
لنفترض أن اسم الموقع:
Reviews300والشعار:
reviews300-logo.pngبعد رفع الشعار يصبح الهيدر تقريبًا:
┌──────────────────────────────────────────┐
│ │
│ [ Reviews300 LOGO ] Menu 🔍 │
│ │
└──────────────────────────────────────────┘ثم في الهاتف:
┌───────────────────────┐
│ ☰ [LOGO] 🔍 │
└───────────────────────┘وفي الدروس القادمة سنعمل على جعل هذا التصميم أكثر توازنًا على الشاشات الصغيرة.
مشكلة مهمة: لا تغير الكود عشوائيًا
إذا وجدت في XML:
height='70'
width='250'لا تقم بتغييرهما إلى:
height='200'
width='500'مباشرة.
قد يبدو الشعار أفضل على الكمبيوتر، لكن الهيدر قد يصبح ضخمًا جدًا على الهاتف.
والأفضل هو استخدام CSS متجاوب.
الخلاصة
تغيير الشعار في Sora Store لا يحتاج بالضرورة إلى تعديل HTML.
ابدأ بالطريقة الآمنة:
Blogger → Layout → Header → Edit → Upload Logo → Save
وهي الطريقة التي يشرحها توثيق Sora لإضافة الشعار. (Sora Blogging Tips)
وفي نسخة القالب التي نستخدمها في هذه السلسلة، يوجد Header1 للشعار الرئيسي، كما توجد صورة منفصلة مرتبطة بقائمة الهاتف، ولذلك يجب الانتباه إلى أن تغيير شعار الكمبيوتر لا يعني بالضرورة تغيير شعار الهاتف.
كما أن نسخة القالب الحالية تضبط صورة الشعار الرئيسية على 250×70 داخل HTML، ولذلك سنعالج مشكلة الحجم لاحقًا بطريقة متجاوبة بدل تكبير الأبعاد بشكل عشوائي.
الدرس القادم
الدرس الرابع: تعديل القائمة العلوية في قالب Sora Store وإضافة الصفحات والأقسام
سنشرح فيه بالتفصيل:
- أين توجد القائمة في Sora Store.
- إضافة Home.
- إضافة Reviews.
- إضافة Contact Us.
- إضافة التصنيفات.
- إنشاء قائمة منسدلة.
- تغيير الروابط.
- حذف روابط Demo.
- إضافة روابط Labels.
- وتجهيز القائمة لاحقًا لإنشاء Mega Menu.
وهذا الدرس سيكون عمليًا جدًا، وسنستخدم أمثلة مناسبة لموقع مراجعات المنتجات والأفلييت.
