ربكا نيوز | تكنولوجيا
بقلم:د.محمد الجندى|رئيس التحرير
تفكيك أكواد XML: كيف تبني "ودجت" (Widget) خاصاً بك من الصفر
 |
| فهم بنية XML الداخلية هو الخطوة الأولى لتتحول من مجرد "مستخدم" إلى "مطور" حقيقي لقوالب بلوجر. |
في عالم تطوير الويب، تمتلئ الإنترنت بشروحات تعديل قوالب بلوجر. تعلمك كيفية تغيير لون، أو إخفاء عنصر، أو استبدال شعار. لكن ماذا لو أردت أن تفعل ما هو أعمق من ذلك؟ ماذا لو أردت بناء وظيفة فريدة، أو "ودجت" (Widget) خاص بموقعك لا يقدمه أي قالب جاهز؟ هنا، تصمت 99% من الشروحات، ويبقى هذا العالم حكراً على قلة من المطورين المحترفين. هذا المقال هو بوابتك لاختراق هذا الحاجز.
🚀 السلسلة 1: ورشة العمل: الهندسة العكسية والبرمجة الآمنة
| 📘 الحلقة 1: ربكا نيوز وتوجيهات المبرمجين: 5 أخطاء قاتلة تدمر موقعك | اقرأ الآن ❯ |
| 🌐 الحلقة 2: كشف الأسرار: الهندسة العكسية لقوالب بلوجر XML | ✅ أنت هنا |
| 🎨 الحلقة 3: شفرة العقل الرقمي: إتقان Schema Markup 2026 | اقرأ الآن ❯ |
| 📄 الحلقة 4: المفتاح الذهبي: أقوى 5 أنواع سكيما مارك أب لتصدر جوجل 2026 | اقرأ الآن ❯ |
سلسلة حصرية مقدمة من إدارة موقع ربكا نيوز ❤️
سنقوم معاً برحلة "هندسة عكسية" (Reverse Engineering) لقلب أي قالب بلوجر. سنتجاهل المظهر الخارجي ونتعمق في "غرفة المحركات" - ملف XML. ستتعلم لغة بلوجر البرمجية الخاصة، وستفهم كيف تتفاعل المكونات مع بعضها. في نهاية هذا الدليل، لن تحتاج بعد الآن للبحث عن "كود إضافة كذا..."، بل ستكون قادراً على كتابة هذا الكود بنفسك.
الفصل الأول: تشريح قالب بلوجر - ما وراء الكواليس
عندما تفتح ملف XML الخاص بقالب بلوجر، قد يبدو للوهلة الأولى كأنه طلاسم غير مفهومة. لكن في الحقيقة، هو منظم بشكل منطقي ودقيق للغاية. يمكننا تشبيهه بجسم الإنسان؛ هناك هيكل عظمي، وجهاز عصبي، وجلد خارجي. دعنا نفكك هذا الهيكل.
- الجلد (`<b:skin>`): هذا هو المكان الذي يعيش فيه كل كود CSS الخاص بالقالب. هو المسؤول عن الألوان، الخطوط، والأحجام. أي تعديل جمالي يتم هنا.
- الهيكل العظمي (`<b:section>`): هذه هي "المناطق" الرئيسية في تصميمك (الهيدر، الشريط الجانبي، الفوتر، منطقة المقالات). هي حاويات كبيرة تحدد أماكن وضع الأدوات (Widgets).
- الأعضاء الداخلية (`<b:widget>`): هذه هي الأدوات الفعلية التي تظهر في موقعك (قائمة الروابط، صندوق البحث، آخر المشاركات). كل "ودجت" يعيش داخل "سكشن".
- الجهاز العصبي (Tags & Data): هي لغة بلوجر الخاصة التي تبدأ بـ `b:`. هذه الأكواد هي التي تجعل القالب "ذكياً"؛ فهي تجلب البيانات (مثل عناوين المقالات، التواريخ) وتعرضها بشكل ديناميكي.
الجدول التالي يمثل حجر الزاوية في فهمك. إنه يفكك أهم الأوسمة (Tags) التي ستتعامل معها بشكل دائم.
جدول مفاتيح لغة بلوجر XML
| الوسم (Tag) | الوظيفة الأساسية |
|---|---|
| <b:skin><![CDATA[...]]></b:skin> | الحاوية الرئيسية لكل أكواد CSS. ما بداخل `CDATA` يتم التعامل معه كنص عادي لحمايته. |
| <b:section id='...'>...</b:section> | يُعرّف منطقة قابلة لإضافة الأدوات (Widgets) في صفحة "التخطيط". الـ `id` هو المعرف الفريد للمنطقة. |
| <b:widget id='...' type='...'>...</b:widget> | يمثل أداة فردية (مثل HTML/JavaScript, Label, Profile). الـ `type` يحدد نوع الأداة. |
| <b:loop values='...' var='i'>...</b:loop> | أداة برمجية لتكرار كود معين. تُستخدم لعرض قائمة المقالات، التصنيفات، أو التعليقات. |
| <b:if cond='...'>...</b:if> | أداة برمجية لعرض كود معين فقط إذا تحقق شرط ما (مثال: عرض ودجت في الصفحة الرئيسية فقط). |
| data:post.title | مثال على "وسم بيانات". هذا الكود يقوم بجلب "عنوان المقال" وعرضه في مكانه. |
الفصل الثاني: بناء الودجت الأول - من الفكرة إلى الواقع
النظرية وحدها لا تكفي. حان الوقت لتطبيق ما تعلمناه. سنقوم الآن ببناء ودجت بسيط لكنه عملي جداً من الصفر: "ودجت رسالة ترحيبية مخصصة". هذا الودجت سيعرض رسالة ترحيب مع أيقونة، وهو شيء لا يمكنك فعله مباشرة من لوحة تحكم بلوجر القياسية.
الخطوة 1: تحديد الهدف وكتابة الـ HTML الأساسي
هدفنا هو إنشاء صندوق بسيط يحتوي على عنوان ورسالة. الـ HTML الخاص به سيكون كالتالي:
الخطوة 2: تحويل الـ HTML إلى ودجت بلوجر
الآن سنأخذ هذا الكود ونغلفه بـ "هيكل ودجت بلوجر". هذا الهيكل يخبر بلوجر: "هذا الكود هو أداة جديدة، اجعلها قابلة للتعديل والإضافة من صفحة التخطيط".
الكود النهائي للودجت سيكون كالتالي:
تحليل الكود:
- `b:widget`: هو الوسم الرئيسي الذي يعرّف الأداة.
- `id='HTML99'`: معرف فريد. يجب أن يكون مختلفاً عن أي ID آخر في قالبك.
- `type='HTML'`: يخبر بلوجر أن هذه أداة من نوع "HTML/JavaScript".
- `locked='false'`: هذا يعني أنه يمكنك حذفها أو تحريكها من صفحة التخطيط.
- `title='رسالة ترحيبية'`: العنوان الافتراضي الذي سيظهر في لوحة التحكم.
- `b:includable id='main'`: هي الحاوية القياسية لمحتوى أي ودجت.
- `data:content`: هذا هو السحر. هذا الوسم سيقوم بعرض المحتوى الذي ستكتبه داخل صندوق HTML في لوحة التحكم.
الخطوة 3: إضافة الودجت إلى القالب
الآن، كل ما عليك فعله هو فتح ملف XML الخاص بقالبك، والبحث عن الـ `b:section` الذي تريد إضافة الودجت فيه (مثلاً، الشريط الجانبي `sidebar`)، ثم لصق الكود أعلاه بداخله. ابحث عن شيء كهذا:
`<b:section class='sidebar' id='sidebar-right' maxwidgets='10' showaddelement='yes'>`
... والصق كود الودجت الخاص بك هنا ...
`</b:section>`
بمجرد حفظ القالب، اذهب إلى صفحة "التخطيط"، وستجد ودجت جديداً باسم "رسالة ترحيبية" يمكنك تحريكه أو تعديل محتواه كأي ودجت عادي!
الفصل الثالث: الارتقاء بالمستوى - إضافة المنطق البرمجي (`b:if` و `b:loop`)
بناء ودجت ثابت أمر رائع، لكن القوة الحقيقية تظهر عندما تجعل الودجت "ذكياً" ويتفاعل مع السياق. هنا يأتي دور الشروط (`b:if`) والحلقات التكرارية (`b:loop`).
مثال عملي: عرض ودجت في الصفحة الرئيسية فقط
لنفترض أنك تريد أن يظهر ودجت "رسالة الترحيب" فقط للزوار الجدد في الصفحة الرئيسية، ويختفي في صفحات المقالات. كل ما عليك فعله هو تغليف محتوى الودجت بوسم `b:if` الشرطي:
بهذه البساطة! الشرط `data:view.isHomepage` يتحقق من نوع الصفحة. إذا كانت الصفحة الرئيسية، يعرض المحتوى. إذا لم تكن، يتجاهله تماماً. الجدول التالي يعرض أشهر الشروط التي ستحتاجها:
قائمة التحقق الشرطية: أشهر متغيرات `data:view`
| الشرط `cond` | متى يتحقق؟ |
|---|---|
| data:view.isHomepage | عندما يكون الزائر في الصفحة الرئيسية للمدونة. |
| data:view.isPost | عندما يكون الزائر في صفحة مقال فردي. |
| data:view.isPage | عندما يكون الزائر في صفحة ثابتة (مثل "من نحن" أو "اتصل بنا"). |
| data:view.isLabelSearch | عندما يكون الزائر في صفحة أرشيف تصنيف معين. |
| data:view.isMobile | عندما يكون الزائر يتصفح من جهاز محمول. |
مثال متقدم: عرض آخر 5 مقالات من تصنيف معين
هذا هو الاختبار الحقيقي لمهاراتك. سنجمع بين `b:widget`, `b:loop`, و `b:if` لبناء ودجت يعرض قائمة بآخر 5 مقالات من تصنيف "تكنولوجيا". هذا يتطلب استدعاء "خلاصة" (Feed) خاصة ببلوجر.
هذا الكود يستخدم ودجت من نوع `Feed` ويستدعي رابط خلاصة المقالات من تصنيف "تكنولوجيا"، ثم يستخدم JavaScript لعرضها كقائمة. هذا مثال متقدم يوضح أنك لم تعد مقيداً بالأدوات الأساسية.
الخاتمة: أنت الآن المهندس
لقد قطعنا شوطاً طويلاً. بدأت كـ "مُعدِّل" والآن أنت تحمل مفاتيح "الهندسة". لم تعد مضطراً للانتظار حتى يضيف مطور القالب الميزة التي تريدها؛ يمكنك الآن محاولة بنائها بنفسك. هذا الدليل ليس نهاية المطاف، بل هو خطوتك الأولى في عالم لا نهائي من الإمكانيات.
الطريق أمامك مفتوح الآن. يمكنك بناء ودجت يعرض الطقس، أو أسعار العملات، أو حتى دمج واجهات برمجية (APIs) خارجية. لقد منحتك الأساس، والبناء متروك لإبداعك. تذكر دائماً، كل قالب معقد بدأ بفكرة وودجت بسيط.
