Elite Gamers
مجلّة ألعاب كاملة — أخبار ومراجعات ألعاب وتغطية فيديو وعتاد وأدلّة خطوة بخطوة وفعاليّات رياضات إلكترونيّة وأفلام وأنمي — بُنيت من الصفر كقالب ووردبريس مخصّص. بلا قالب مشترى، وبلا تخطيط page builder، وبلا كومة إضافات. عربيّة أوّلًا ومن اليمين إلى اليسار بالبنية لا بالترقيع، مع مبدّل AR / FR / EN حيّ، وكلّ نوع محتوى وحقل ومكوّن وحركة وسطر CSS مكتوب لهذا المشروع وحده.
المشكلة
اللاعبون العرب يقرأون أخبارهم ومراجعاتهم عبر واجهات مصمّمة للإنجليزيّة أوّلًا، والاتّجاه من اليمين إلى اليسار فيها فكرة لاحقة. والمجلّة الموجّهة إليهم احتاجت تسعة أنواع محتوى، ودرجة مراجعة تثق بها هيئة التحرير، وبحثًا يعمل كما تُكتب العربيّة فعلًا — ولا شيء من ذلك يأتي في قالب يُشترى. وتحت هذا كلّه القيد الحقيقيّ: المجلّة تُحرَّر كلّ يوم، لسنوات، بأيدي أناس ليسوا مطوّرين.
النتيجة
قالب مكتوب من أوّله إلى آخره: 9 أنواع محتوى، و4 تصنيفات، ومحرّك تقييم متعدّد المحاور مرجّح بمصدر حقيقة واحد، ولوحة أوامر ⌘K بطيّ إملائيّ عربيّ، ومبدّل لغات AR / FR / EN حيّ. نحو 1.7 ميغابايت أُزيلت من حِمل الواجهة الأولى، ثمّ تدقيق بعد الاكتمال عبر 11 مجالًا — 96 ملاحظة مؤكّدة ومعالَجة، وصفر حرجة.
ما تمّ تسليمه
ما رفضتُ تثبيته.
ثلاث قواعد وُضعت قبل أوّل commit، وصمدت إلى آخره. كلّ واحدة كلّف الالتزام بها أكثر ممّا كان يكلّف خرقها — وهذا وحده سبب ذكرها.
لا إضافة يعتمد عليها القالب
لا شيء يُشترى، ولا يُجدَّد، ولا ينكسر تحت قدميك.
الحقول المخصّصة على register_post_meta الأصليّ مع صناديق ميتا مكتوبة يدويًّا — بلا ACF. والسيو والبيانات المنظّمة ومعالجة الصور والتقاط النشرة البريديّة والأدوات التحريريّة كلّها شيفرة قالب أصليّة. القالب الذي يتّكئ على خمس إضافات يرث خمسة مسارات تحديث، وخمسة أسطح أمان، وخمس رخص؛ وهذا لا يرث شيئًا. وقد ثبّت مشغّل الموقع لاحقًا فوقه نموذج تواصل وإضافتَي بطولات ومكافحة سبام — وهذا قراره، والقالب لا يشترطها ولا ينكسر بها.
لا CDN، ولا طلب خارجيّ من القالب
لا شيء عن الزائر يُسلَّم إلى طرف ثالث.
كلّ خطّ مستضاف ذاتيًّا ومجزّأ — 26 ملفّ .woff2 بمجموع 468 كيلوبايت. بلا Google Fonts، وبلا متتبّعات خارجيّة، وبلا سكربتات خارجيّة من القالب نفسه. هذا يجعله نظيفًا أمام GDPR بالبنية لا بصفحة سياسة، ومحمولًا: لا يتوقّف عن العمل لأنّ خدمة شخص آخر توقّفت.
لا خطوة بناء
قابل للنشر بنسخ مجلّد، وبعد خمس سنوات كذلك.
بلا webpack، وبلا Sass، وبلا npm install لتشغيله أو صيانته. الموارد تمرّ عبر wp_enqueue_script وwp_enqueue_style بسلسلة اعتماديّات مفروضة صراحةً. والسبب طول العمر لا الكسل: سلسلة الأدوات أوّل ما يتعفّن، والقالب الذي يحتاج واحدة لكي يُعدَّل قالبٌ لا يستطيع المطوّر التالي أن يلمسه بأمان.
التصيير من الخادم أوّلًا، من أوّله إلى آخره. الجافاسكربت يُثري هذا الموقع؛ ولا يُشترط أبدًا لقراءته.
كلّ مكوّن، مكتوب.
تسعة أنواع محتوى، ومحرّك تقييم، ونظام تصميم، ولوحة أوامر — كلّ مكوّن وكلّ حركة وكلّ سطر CSS مكتوب لهذا المشروع.
بنية المحتوى
مصمَّمة حول عمل هيئة التحرير الحقيقيّ، لا حول ما تصادف أن يقدّمه قالب جاهز.
- 9 أنواع محتوى مخصّصة: المراجعات، والفيديو، وفعاليّات الرياضات الإلكترونيّة، والعتاد، والأدلّة خطوة بخطوة، والأفلام والمسلسلات، والأنمي والمانغا، والمعارض، والشركاء — إضافة إلى مخزن مشتركين خاصّ للنشرة البريديّة.
- 4 تصنيفات (المنصّة، النوع الفنّي، السلسلة، العلامة)، مربوطة بحسب نوع المحتوى، فالفيلم يحمل نوعًا فنّيًّا وسلسلة لا منصّة أجهزة.
- قوالب أرشيف مخصّصة، وأشرطة تصفية، وترقيم «حمّل المزيد»، ومكوّنات مخصّصة للحالة الفارغة وحالة الخطأ وصفحة 404.
محرّك تقييم المراجعات
الجزء الصعب في البناء، والجزء الذي وجب أن يستحيل الخطأ فيه.
- تقييم متعدّد المحاور مرجّح — أسلوب اللعب، والقصّة، والرسوميّات، ومحور رابع — بأوزان تُطبَّع على مجموعها، فيمكن أن يُوزَن محور ثلاثة أضعاف دون إعادة حساب البقيّة.
- اشتقاق «الكلّ أو لا شيء»: المتوسّط المرجّح لا يتولّى إلّا بعد امتلاء كلّ المحاور. فالنموذج نصف الممتلئ لا يستطيع أبدًا أن يعيد كتابة درجة منشورة بصمت.
- مصدر حقيقة واحد. الدالّة eg_overall_score() تغذّي حلقة الدرجة، وصفّ النجوم، وشارات بطاقات الأرشيف، وخاصّيّة الترتيب، والبحث، ولوحة الأوامر، وقيمة ratingValue في JSON-LD — فلا يمكن للحلقة والنجوم أن تتناقضا.
- الحظر الزمنيّ مفروض عند القارئ المشترك لا في كلّ قالب على حدة، فلا تتسرّب درجة محظورة عبر بطاقة ولا نتيجة بحث ولا بيانات منظّمة. وهيئة التحرير مستثناة.
- لوحة تقييم كاملة: حلقة درجة دائريّة متحرّكة، وصفّ خمس نجوم، وأشرطة تفصيل لكلّ محور، ومفتاح ألوان بنطاقات — يقودها جميعًا خاصّيّة CSS مخصّصة واحدة.
نظام التصميم
147 رمزًا في ثلاث طبقات — أوّليّة، ودلاليّة، ومكوّنيّة — ونحو 200 خاصّيّة مخصّصة عبر ملفّات الأنماط.
- سمتان، داكنة وفاتحة، ضُبطتا يدويًّا. كلّ اقتران لونيّ قيس بالقياس لا بالعين: اللون الذهبيّ المميّز مفصول بحسب السمة تحديدًا لأنّ قيمةً منه قاست 1.63:1 على الأبيض.
- الألوان الدلاليّة تُشحن ثلاثيّات — صلبة، وتظليل خفيف، وحبر — ليبقى النصّ فوق خلفيّة مظلّلة مقروءًا دائمًا. والقيمة المشتركة القديمة قاست 1.86:1 فاستُبدلت.
- أربع عائلات خطّيّة عبر اللاتينيّة والعربيّة، مع إعادة ربط للرموز بحسب اللغة لتلتقط النصوص العربيّة خطّ عرض عربيًّا تلقائيًّا، مع فرض الأرقام الجدوليّة على كلّ رقم.
من اليمين إلى اليسار، بالبنية
ليس موقعًا إنجليزيًّا رُبطت عليه رقعة عربيّة.
- خصائص منطقيّة في كلّ مكان — inline-size وmargin-inline وinset-inline-start — بدل قيم يمين ويسار تُعكَس بعد الحدث.
- حركات التمرير والبارالاكس تقرأ document.dir، فلا تسير حركة اتّجاهيّة بالمقلوب في العربيّة.
- لوحة أوامر ⌘K على combobox وlistbox صحيحين وفق ARIA، تُستعلَم من محتوى حقيقيّ، بطيّ إملائيّ عربيّ يشمل صور الهمزة، والياء والألف المقصورة، والتاء المربوطة — فيجد القارئ الباحث بلا تشكيل مقالَه رغم ذلك.
- مبدّل AR / FR / EN حيّ يبدّل المحتوى المحرَّر فورًا، بلا إعادة تحميل الصفحة.
الأداء
القياس أوّلًا، ثمّ الإصلاح — بهذا الترتيب.
- شريط الواجهة يحمّل غلاف الشريحة الأولى وحده بأولويّة، مع تلميح preload لعنصر LCP؛ أمّا الشرائح 2–8 فتُشحن كخصائص بيانات وتُرسَم عند التنشيط، مع جلب مسبق للتالية أثناء التوقّف. أُزيل بذلك نحو 1.7 ميغابايت من الحِمل الفوريّ.
- أغلفة الصور الفوتوغرافيّة وُحّدت إلى JPEG بعدما قيست صورة شُحنت PNG بنحو ميغابايت لكلّ قصّة؛ فخفّضت إعادة التحويل نحو 80%.
- الشعار نزل من 2048 بكسل و427 كيلوبايت إلى 168 بكسل و12 كيلوبايت.
- prefers-reduced-motion محترمة في 11 ملفّ أنماط و5 وحدات جافاسكربت — كلّ حركة، بلا استثناء.
- الحركة مبنيّة على GSAP وScrollTrigger وLenis، مستضافة ذاتيًّا ومحمّلة شرطيًّا لا عموميًّا.
السيو والبيانات المنظّمة، أصليّة
اثنا عشر نوعًا من Schema.org مكتوبة يدويًّا، وبلا إضافة SEO في القالب البتّة.
- Review وVideoObject وHowTo وHowToStep — الأدلّة خطوة بخطوة تُصدر ترميز خطوات حقيقيًّا — ثمّ SportsEvent وSportsTeam وOrganization وWebSite مع SearchAction وBreadcrumbList وImageObject وPerson وRating.
- روابط canonical مخصّصة، وتوليد Open Graph وبطاقة Twitter، وأوصاف ميتا ديناميّة، ومسارات تنقّل، وrobots.txt مُرشَّح.
- تحريريّ بالتصميم: لا أسعار، ولا روابط شراء، ولا عروض في البيانات المنظّمة.
ما تناله هيئة التحرير
من ينشر كلّ يوم هو المستخدم الحقيقيّ لقالب مجلّة.
- طبقة Customizer يقودها مخطّط تصريحيّ واحد: تُضاف مدخلة إلى مصفوفة، فيتبعها الإعداد وعنصر تحكّمه ومنقّيه وقارئه تلقائيًّا.
- كلّ خيار اختياريّ فعلًا — فمع عدم لمس أيّ إعداد، لا يُصدر القالب بايتًا زائدًا، وتكون النسخة غير الملموسة مطابقة بالبايت للتصميم المُسلَّم.
- لون التمييز يختار لون نصّه بحساب السطوع وفق WCAG، فلا يُنتج لونٌ فاتح أزرارًا بيضاء على فاتح — وذات الحساب مكرّر في جافاسكربت المعاينة الحيّة.
- بانٍ لخطوات الأدلّة بلا سحب وإفلات، وأنماط تنبيهات تحريريّة بـPHP وCSS خالصين، فيبقى المحتوى ترميزًا أساسيًّا صالحًا ويصمد بعد تبديل القالب.
- ملفّ theme.json مقصور عمدًا على settings، مقيسًا عند +1.1 كيلوبايت مضغوطًا، لأنّ إضافة مفتاح styles تجعل ووردبريس يُصدر ملفّ أنماط عامًّا منافسًا.
- سكربت فحص ذاتيّ مستقلّ (tests/check-customizer.php) يعمل بلا ووردبريس وبلا قاعدة بيانات وبلا خادم، ويؤكّد أنّ قيم كلّ عنصر تحكّم تنجو من منقّيه هو.
الوصوليّة
- رابط تخطٍّ، وإدارة للتركيز، وأدوار ARIA عبر أكثر من 20 قالبًا، وtabindex متنقّل على مجموعات الاختيار.
- درج الهاتف على visibility:hidden عند الإغلاق — إذ تركت transform وحدها 14 عنصرًا قابلًا للتركيز في ترتيب التنقّل بكلّ صفحة، بما فيها سطح المكتب حيث لا يمكن فتح الدرج أصلًا.
- التباين مُتحقَّق منه بالقياس في السمتين، لا بالعين.
دقّقتُ شيفرتي أنا.
كان البناء مكتمل الميزات. وهذه عادةً نقطة التسليم. لكنّ هذا المشروع مرّ أوّلًا بتدقيق جنائيّ لشيفرته هو: 22 وكيل مراجعة آليًّا عبر 11 مجالًا، و101 ملاحظة أُثيرت، 96 منها مؤكّدة بالدليل و5 مدحوضة، عولجت في 14 commit، بصفر مشكلة حرجة. وهذه خمسة ممّا التقطه:
- مساعد ترقيم كان يعطّل بصمت «حمّل المزيد» والترقيم المرقّم في الموقع كلّه — بينما ظلّ الجافاسكربت والتعليقات كلاهما يؤكّدان أنّه يعمل.
- دالّة تهريب JSON-LD كان الـstr_replace فيها يحمل مصفوفتَي بحث واستبدال متطابقتين بايتًا ببايت: عمليّة لاغية موثّقة.
- محدِّد رابط للبطاقة كاملةً لم يطابق عنصرًا واحدًا منذ يوم كتابته، لأنّه كان يشترط رابطًا داخل رابط.
- تقدير زمن القراءة يعتمد str_word_count()، وهي تعمل على البايتات فكانت تعدّ العربيّة نحو أربعة أضعاف.
- منقّي Customizer يسقط أمام تحويل PHP الصامت لمفاتيح المصفوفات الرقميّة إلى أعداد صحيحة — عطبٌ بلا أيّ عَرَض ظاهر في الواجهة، لم يلتقطه إلّا تأكيد مكتوب.
لم يكن أيّ من هذه مرئيًّا من الواجهة، وهذا هو المقصد بالضبط: إنّها صنف العطب الذي يُشحن ويستقرّ ثمّ يصير مشكلة من يتسلّم الموقع في العام التالي. وكلّ قرار غير بديهيّ، وكلّ قياس متحقَّق منه، وكلّ مقايضة معروفة موثّقة في المستودع، إلى جانب مدوّنة تصميم من سبعة ملفّات — موجز إبداعيّ، ونظام تصميم، ومواصفة منتج، ومكتبة مكوّنات، وإرشادات تجربة استخدام، وإرشادات حركة، وموجز رئيسيّ — كُتبت قبل الشيفرة.
القالب، بالأرقام.
القالب، بالأرقام.
( التالي )