تصميم متجر سلة بـ CSS وجافاسكربت: سبعة أمور تحسمها قبل أن توظف أحدا
قرأنا ملفات الأكواد في 22 متجرا حيا على سلة وثماني صفحات من مساعدة سلة نفسها. ما الذي يستطيعه عمل الكود، وما تحمله المتاجر فعلا، وسبعة أمور تحسمها قبل أن يدخل أحد متجرك.
قبل أن توظف أحدا لتخصيص متجرك على سلة بـ CSS أو جافاسكربت، اتفق كتابة على ثلاثة أمور: أن يجري العمل على نسخة مكررة من الثيم، وأن يدخل المنفذ بطلب صلاحية تستطيع إلغاءه، وأن تحتفظ أنت بكل سطر كود وكل ملف خارجي. واحكم على النتيجة بما يبقى مقروءا لجوجل.
هذا الدليل لأصحاب متاجر سلة في السعودية والخليج الذين على وشك الدفع مقابل كود. في 5 نوفمبر 2026 حمّلنا ملفات الأكواد المخصصة في 22 متجرا حيا على سلة، وقرأنا تسع صفحات من مساعدة سلة (ثماني منها عن الأكواد والخدمات المدفوعة)، وفتحنا ثلاث صفحات من جوجل، وأجرينا 56 بحثا في الاقتراحات التلقائية، وقرأنا أربع صفحات نتائج في جوجل من موقع في الرياض.
تدقيق سيو مجاني من 5 نقاط قبل أن تغيّر الكود. أرسل لنا عنوان متجرك. خلال 48 ساعة يرسل لك أخصائي أول 5 إصلاحات مرتبة حسب الأولوية مع الأدلة، منها ما يراه جوجل في صفحاتك المهمة اليوم، فتكون لديك صورة «قبل». احصل على تدقيقك المجاني.
الخلاصة: خمس نتائج وما تفعله بها
| ما وجدناه | ما تفعله |
|---|---|
| تقول سلة إن الكود يحتاج باقة برو أو سبيشل ودومينا خاصا وصلاحية تصميم المتجر. | تأكد من الثلاثة قبل أن تدفع لأي أحد. |
| من 8 صفحات في سلة عن الأكواد والخدمات المدفوعة، لا تذكر أي صفحة البحث أو سرعة الصفحة، ولا تقول أي صفحة ما يحدث لكودك حين يتغير الثيم. | ضع هذه النقاط في الطلب بنفسك. |
| 17 من 22 متجرا فيها ملف تنسيق مخصص و12 فيها سكربت. متوسط السكربت 13.9 كيلوبايت وأكبره 156. | اطلب حجم كل ملف يضيفه العمل. |
| 3 من 12 سكربتا تكتب العناوين أو ترميز الأسئلة الشائعة أو تخفيها. | اطلب قائمة بما يضيفه الكود أو يخفيه أو يعيد كتابته. |
| تُكمل خدمات التاجر الطلب تلقائيا بعد 7 أيام دون قبول أو رفض منك. | احسم قبل 7 أيام، واحتفظ بنسختك أنت. |
ماذا يبحث الملاك وماذا يجدون
أجرينا في 4 نوفمبر 56 بحثا في الاقتراحات التلقائية بإعداد السعودية (24 بالإنجليزية و32 بالعربية، من جهاز في مصر، وبحد أقصى عشرة اقتراحات). أعاد 22 منها اقتراحات. سؤال التوظيف يكاد لا يظهر: «مبرمج سلة» و«تصميم متجر سلة css» و«برمجة متجر سلة» لا يعيد كل منها إلا نفسه، و“hire salla developer” لا يعيد شيئا. و“salla developer” يعيد عشرة اقتراحات عن بوابة مطوري سلة وحسابهم ووثائقهم وتسجيل الدخول والوظائف وواجهة البرمجة. أما ما يظهر عليه طلب فعلا فهو الأكواد الجاهزة. «اكواد سلة» يعيد عشرة اقتراحات: أربعة منها أكواد CSS (ثلاثة مجانية أو جاهزة)، وواحد للخصومات، وأربعة لألعاب كرة السلة.
في الصفحة الأولى من الرياض قرأنا عناوين النتائج الثماني لكل بحث من أربعة أبحاث، أي 32 نتيجة، ولا نذكر أي ترتيب. «تصميم متجر سلة css» يعرض دليل CSS من سلة نفسها وسبع صفحات تبيع عمل CSS، من إعلان في منصة مستقلين إلى استوديوهات. «اكواد css سلة» يعرض صفحتين من مساعدة سلة وخمس صفحات أكواد مجانية أو جاهزة وصفحة خدمة واحدة. «تعديل قالب سلة» يعرض ثلاث صفحات من مساعدة سلة ومتجر الثيمات وصفحتي خدمة وفيديو ودرسا. أما “salla css customization” فتكاد صفحات سلة نفسها تنفرد به. لا يبدو أي عنوان من الـ 32 دليلا للمشتري الذي يقرر من يوظف.
ما الذي يستطيعه عمل الكود وما لا يستطيعه
صفحات مساعدة سلة، التي فتحناها في 5 نوفمبر 2026، ترسم الإطار:
- المتطلبات. باقة برو أو سبيشل، ودومين خاص، وصلاحية الدخول إلى تصميم المتجر، وتقول سلة إنها خاصة بموظفي المتجر. وتقول الأسئلة الشائعة عن الثيمات إن متاجر باقة بيسك تستطيع تخصيص تصميمها، لكن صفحات الكود تشترط برو أو سبيشل.
- CSS هو المظهر: الألوان والخطوط والمسافات والخلفيات وشكل العرض على الشاشات المختلفة. وجافاسكربت هو السلوك: النوافذ المنبثقة، والأزرار أو النصوص الجديدة، والتنقل في صفحات محددة، وآراء العملاء في تصنيفات مختارة.
- أين يقع. من تصميم المتجر تضغط تخصيص النسخة ثم تبويب تخصيص متقدم. ويطلب دليل CSS في سلة أن تعاين المتجر بعد الحفظ.
- الدعم. لثيم من مطور خارجي تقول سلة أن تتواصل مع ذلك المطور، ولثيم من سلة فإلى دعمها. ولتصميم مخصص بالكامل تحيلك سلة إلى موقع المطورين.
ماذا تحمل 22 متجرا حيا في ملفات أكوادها
استخدمنا المتاجر الـ 22 نفسها التي في دليل تصميم متجر سلة، وهي متاجر ظهرت في الصفحة الأولى في بحوثنا من الرياض في أكتوبر. تقدم سلة الأكواد المخصصة لكل متجر في ملفات منفصلة. حمّلنا ملف التنسيق والسكربت المرتبطين بالصفحة الرئيسية لكل متجر (وفي 11 من الـ 22 تُحوِّل الصفحة الرئيسية مرة واحدة إلى نسختها العربية، واتبعنا هذه القفزة الواحدة)، وقسنا حجمهما بالبايت، وقرأنا الملفات الكبيرة بأعيننا.
| المقياس | النتيجة |
|---|---|
| متاجر فيها ملف تنسيق مخصص | 17 من 22 |
| متاجر فيها سكربت مخصص | 12 من 22 |
| متاجر بلا أي منهما | 5 من 22 |
| حجم ملف التنسيق | متوسطه 2.4 كيلوبايت (0.9 مضغوطا)، من 95 بايت إلى 74 كيلوبايت، و3 فوق 20 كيلوبايت |
| حجم السكربت | متوسطه 13.9 كيلوبايت (4.1 مضغوطا)، من 295 بايت إلى 156 كيلوبايت، واثنان فوق 100 كيلوبايت |
| السكربت مقارنة بالسكربت الرئيسي للثيم نفسه | المتوسط 14%، ومتجران عند 100% و168% |
| ملفات تنسيق تستخدم !important | 15 من 17 |
| الثيمات خلف المتاجر الـ 22 | 8 ثيمات مختلفة، و11 متجرا تشترك في ثيم وإصدار واحد |
ماذا تفعل الملفات الأكبر كما قرأناها:
- سكربت من 156 كيلوبايت معظمه صفحة واحدة. يكتب قسما للفروع، بالعربية والإنجليزية، داخل صفحة واحدة: 168 رابطا، وعنوانين رئيسيين (H1) لكل لغة. ويحمّل كذلك سكربتا من شركة أخرى. وملف التنسيق في المتجر يخفي عنوان الصفحة الأصلي حين يوجد ذلك القسم. وكبر الملف من 152,796 بايت في 4 نوفمبر إلى 155,568 في 5 نوفمبر، فالكود الحي يتحرك.
- سكربت من 135 كيلوبايت يمس ما يقرؤه البحث. يعيّن عنوان الصفحة الرئيسية بعد تحميلها، ويبني بيانات منظمة للأسئلة الشائعة لصفحات التصنيفات من أسئلة مخزنة في السكربت. ولا يزال يحمل علامة اختبار ورسالة تُطبع في وحدة تحكم المتصفح.
- ملف تنسيق من 22.7 كيلوبايت معظمه نسخة من تنسيقات مكتبة سلايدر. ويذكر تعليق في أوله اسم المكتبة وإصدارها، و128 من قواعده الـ 166 تذكرها.
- سكربت من 284 حرفا يفعل شيئا واحدا: يضيف إلى تذييل المتجر رابطا لموقع مطوره.
- عناوين خارجية. 4 من 12 سكربتا تحمّل سكربتا أو صورة أو بيانات من عنوان خارج سلة والمتجر، منها موقع لاستضافة الصور وشعار دفع على صفحة في GitHub Pages لا تحمل اسم المتجر. وملف تنسيق واحد يحمّل خطه من حساب استضافة لا يحمل اسم المتجر.
- العناوين. 3 من 12 سكربتا تكتب العناوين أو عنوان الصفحة أو ترميز الأسئلة الشائعة أو تخفيها، و3 من 17 ملف تنسيق تخفي عنوانا رئيسيا: اثنان في صفحات محتوى وواحد داخل قسم آراء العملاء.
هذه المتاجر تظهر في البحث، فلعلها أحسن صيانة من المتوسط، ولم نختبر أثر أي من هذا في الترتيب أو السرعة. المقصود ما ينبغي للمشتري أن يسأل عنه.
ماذا تقول صفحات سلة للمشتري وماذا تتركه
قرأنا متن ثماني صفحات: تخصيص الثيم بالكود، ودليل CSS، ودليل الخط المخصص، ونسخ الثيمات، وطلبات صلاحيات الشركاء، والأسئلة الشائعة في خدمات التاجر، وتخصيص الخدمة، وتصفح الخدمات، آخر تحديث لها بين 29 أغسطس و3 نوفمبر 2026. وهذه أعدادنا، رمّزناها بالقراءة اليدوية على عبارات صارمة، وراجعناها ببحث أوسع عن الكلمات:
| الموضوع | الصفحات التي تغطيه، من 8 |
|---|---|
| الباقة والدومين والصلاحية المطلوبة | 2 |
| المعاينة قبل النشر | 2 |
| كيف تلغي صلاحية المنفذ | 2 |
| الاسترداد أو الإلغاء | 1 |
| الاحتفاظ بنسخة من كودك | 0 |
| البحث أو السيو | 0 |
| سرعة الصفحة | 0 |
| ما يحدث للكود المخصص حين يتغير الثيم | 0 |
| من يملك الكود | 0 |
وأقرب صفحة إلى مسألة النسخ هي صفحة نسخ الثيمات: تبين كيف تكرر نسخة ثيم، وهذه أسلم طريقة للعمل، لكنها لا تطلب منك حفظ كودك في ملف. وهذه الفجوات هي المكان الذي يجب أن يعمل فيه طلبك.
ماذا يفعل جوجل بالمحتوى الذي يضيفه السكربت
يقول دليل جافاسكربت من جوجل، المحدّث في 4 مارس 2026، إن الصفحات تمر بالزحف ثم التصيير ثم الأرشفة، وإن الصفحة قد تنتظر في طابور التصيير ثواني أو أكثر، وإن السكربت يستطيع تعيين العنوان ووصف الصفحة أو توليد JSON-LD. ويقول أيضا إن توليد HTML من الخادم ما زال فكرة جيدة لأن بعض الروبوتات لا تشغّل جافاسكربت. وتقول سياسة البيانات المنظمة من جوجل، المحدّثة في 10 يوليو 2026، ألا تُوسَم محتويات لا يراها القارئ.
فالسكربتات مسموحة، ومع ذلك ينبغي أن يبقى النص الذي يجب أن يتصدر، من عناوين ووصف المنتج والأسعار والروابط، في HTML الذي يرسله الخادم. وما يضيفه سكربت اقرأه في أداة فحص عنوان URL في سيرش كونسول، في HTML بعد التصيير، بعد أن يصبح مباشرا.
أين توظف على سلة، وما الذي تحميه كل طريق
- خدمات التاجر داخل لوحة التحكم. يعرض ملف كل مقدم خدمة مهاراته وتقييماته وآراء التجار ومعرض أعماله. وتستطيع إلغاء صلاحية وصوله إلى المتجر من صفحة الطلب. وإن ألغيت قبل بدء العمل عاد المبلغ إلى محفظة التاجر خلال 24 ساعة. وبعد بدء التنفيذ تطلب الإلغاء فيقبله مقدم الخدمة أو يرفضه. والطلب الذي يبقى دون تغيير 7 أيام متتالية دون قبول منك أو رفض يُكمل تلقائيا. وأقصى حجم للملف 20 ميغابايت.
- شريك في سلة، بطلب صلاحية. لا يطلب الشريك كلمة مرورك. يسمّي الطلب الشريك وتاريخه والصلاحيات المطلوبة بالضبط. فتقبل ما فيه فقط، أو ترفض مع ذكر السبب، أو تلغي لاحقا.
- مستقل أو وكالة بحساب موظف. يحتاج الحساب صلاحية تصميم المتجر، وتقول سلة إنها خاصة بموظفي المتجر. والصفحات التي قرأناها لا تصف حماية لهذا الطريق، فطبّق القواعد نفسها بنفسك واحذف الحساب حين ينتهي العمل.
سبعة أمور تحسمها قبل أن توظف
1. حدد العمل كقائمة شاشات
اكتب الصفحات التي تتغير، وهل العمل CSS أو جافاسكربت أو الاثنان، وكيف يبدو المنجز على الجوال. الجواب الجيد: قائمة صفحات وسلوكيات مع لقطة «قبل» لكل منها. علامة التحذير: «اجعله يبدو فخما».
2. اعمل على نسخة مكررة لا على الثيم المباشر
تتيح سلة أن تكرر نسخة الثيم وتخصصها وحدها وتعاينها قبل نشرها. وتسمح باقة برو بنسختين من الثيم فتبقى إحداهما دون مساس، وتسمح سبيشل بـ 50. ولا يمكن حذف نسخة منشورة فعالة. الجواب الجيد: يعدّل المنفذ النسخة المكررة وتنشرها أنت بعد أن تفحصها على جوالك. علامة التحذير: تعديلات على النسخة المنشورة.
3. امنح الصلاحية بطلب، وحدد لها تاريخ نهاية
استخدم طلب صلاحية من شريك أو طلبا في خدمات التاجر لتستطيع الإلغاء. وإن لم يكن أمامك غير حساب موظف فامنحه صلاحية تصميم المتجر وحدها، واكتب تاريخ النهاية. الجواب الجيد: تُلغى الصلاحية يوم تقبل العمل. علامة التحذير: كلمة مرور مالك مشتركة.
4. امتلك النسخ والملفات الخارجية
اطلب الـ CSS والجافاسكربت النهائيين ملفات في يدك، وقائمة بكل عنوان خارجي يستخدمه الكود مع الحساب الذي يملكه. دليل الخط المخصص في سلة نفسها يجعلك ترفع ملف الخط إلى خادم خارجي، وفي متاجرنا يحمّل 4 من 12 سكربتا وملف تنسيق واحد من الخارج. الجواب الجيد: كل ملف وكل حساب مسمّى وأنت مالكه. علامة التحذير: خطك أو شعاراتك على صفحة المطور.
5. اطلب قائمة بما يضيفه الكود أو يخفيه أو يعيد كتابته
اطلب قائمة صفحة بصفحة بأي عنوان أو عنوان صفحة أو وصف أو سؤال شائع أو سعر أو تقييم أو رابط يضيفه الكود أو يخفيه أو يغيره. الجواب الجيد: قائمة، وفحص لـ HTML بعد التصيير في أداة فحص عنوان URL بعد الإطلاق. علامة التحذير: «السكربت يتولى السيو». يشرح دليل سيو متجر سلة ما تطبعه سلة أصلا، ويشرح تطبيقات سيو سلة أم خبير ما تضيفه التطبيقات.
6. ضع حدا للحجم واسأل عما يُلصق
اطلب حجم كل ملف في عرض السعر. متوسطنا 2.4 كيلوبايت من CSS و13.9 من السكربت، وأي عرض أعلى بكثير يحتاج سببا بكلمات بسيطة. وأهداف جوجل: LCP خلال 2.5 ثانية، وINP دون 200 ميلي ثانية، وCLS دون 0.1، من صفحة محدّثة في 10 ديسمبر 2025. الجواب الجيد: وزن قبل وبعد لكل تغيير. علامة التحذير: مكتبة كاملة ملصوقة في الصندوق.
7. خطط لليوم التالي للتسليم
CSS يسمّي فئات، والقاعدة التي تستهدف فئة يعيد إصدار لاحق من الثيم تسميتها تتوقف عن المطابقة دون أي تنبيه. وأربعة من ملفات التنسيق الـ 17 تسمّي 10 فئات أو أكثر تبدأ بـ s- (بادئة بطاقات المنتجات والأزرار ونوافذ العروض في هذه الملفات)، أحدها 94. والمتاجر الـ 22 تعمل بـ 8 ثيمات، وأرقام إصدارات الثيمات بين 1.16.0 و1.380.0. الجواب الجيد: مذكرة من صفحة واحدة بالثيم والفئات التي يعتمد عليها الكود، وإعادة اختبار بعد أي تغيير في الثيم، وقرار داخل مهلة القبول البالغة 7 أيام. علامة التحذير: لا مذكرة ولا إعادة اختبار.
حين لا تكون المشكلة في الكود
إن كان الزوار القلائل هم المشكلة فلن يصلحها كود جديد: ابدأ بـ زيارات بلا مبيعات وقائمة فحص سيو المتجر. وإن كنت تختار استوديو فاقرأ كيف تختار شركة تطوير متاجر إلكترونية، وإن كان الكود جزءا من إعادة بناء فاقرأ إعادة تصميم الموقع دون خسارة السيو. وتفحص خدمة سيو سلة وخدمة السيو التقني عندنا ما يقرؤه جوجل قبل تغيير الكود وبعده، ولا تحلان محل من يكتبه.
كيف فحصنا وما حدود ذلك
في 4 نوفمبر 2026 أجرينا 56 بحثا في الاقتراحات التلقائية بإعداد السعودية، من جهاز في مصر؛ وهي تُظهر اقتراحات لا أحجام بحث. وفي 5 نوفمبر قرأنا أربع صفحات نتائج في جوجل من موقع في الرياض مع إيقاف التخصيص الشخصي، وسجلنا العناوين والروابط ولا نذكر أي ترتيب، وفتحنا تسع صفحات من مساعدة سلة وثلاث صفحات من جوجل كنصوص خام دون اتباع إعادة التوجيه. هذه القواعد قد تتغير. وقرأنا النظائر العربية لسبع من صفحات سلة؛ وبعض التفاصيل، مثل أن الشريك لا يطلب كلمة المرور وأن النسخة المنشورة الفعالة لا تُحذف، وردت في الصفحات الإنجليزية فقط.
حمّلنا ملفات الأكواد المخصصة في 22 متجرا على سلة في 5 نوفمبر، كما ترتبط بالصفحة الرئيسية، بوكيل مستخدم جوال واللغة العربية. الأحجام بالبايت، وأعداد ما تفعله الملفات من أنماط راجعناها بقراءة الملفات. والمتاجر ظهرت في بحوثنا في أكتوبر، فليست عينة عشوائية. لم نختبر سرعة أي متجر ولا ترتيبه، ولا نسمّي متجرا أو وكالة أو مطورا. وعدّ تغطية صفحات سلة فحص لوجود الموضوع لا تقييم للصفحات.
المصادر
صفحات مركز مساعدة سلة، فتحناها في 5 نوفمبر 2026: Customizing the theme using code (31 أغسطس 2026)، وA simple guide to styling your Salla store with CSS (29 أغسطس 2026)، وAdd a custom font to your store using GitHub (31 أغسطس 2026)، وManaging themes, customization, and store content protection (3 نوفمبر 2026)، وHow to manage partner permission requests on your store (29 أغسطس 2026)، وMerchant Services frequently asked questions (29 أغسطس 2026)، وMerchant Services: Customize a service (29 أغسطس 2026)، وBrowse and explore Merchant Services (31 أغسطس 2026)، وTheme store FAQs (27 أكتوبر 2026). ومن جوجل سيرش سنترال: Understand JavaScript SEO basics (4 مارس 2026)، وGeneral structured data guidelines (10 يوليو 2026)، وCore Web Vitals (10 ديسمبر 2025). كل الصفحات المرتبطة بالإنجليزية. أما أعداد الأكواد في المتاجر ونتائج الإكمال التلقائي وقراءات البحث فمن عملنا.
على وشك منح أحد صلاحية الدخول إلى متجرك؟ يسجل تدقيقنا المجاني من 5 نقاط ما يقرؤه جوجل في صفحاتك المهمة اليوم، فيمكن فحص أي تغيير في الكود على صورة «قبل». وهو الخطوة الأولى في طريقة عملنا مع المتاجر في السعودية، وترى كيف نكتب تقاريرنا في دراسات الحالة. دون التزام، ويصلك خلال 48 ساعة. اطلب تدقيقك المجاني.