[ حصريا ] دورة برمجة الاضافات - [ الدرس الثالث - انشاء العبارات والقوالب للاضافة ]

[shqawe]

بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

نستكمل معكم اليوم ما بدنأه في الدرس السابق من دورة برمجة الاضافات ومن فاتته الدروس السابقة يستطيع مراجعة فهرس الدورة عن طريق الرابط التالي:

[ حصريا ] - فهرس [ دورة XenArabia لبرمجة الإضافات ] من تقديم الأستاذ شقاوي

بسم الله الرحمان الرحيم و الصلاة و السلام على المظلل بالغمام محمد ابن عبد الله عليه أفضل الصلاة و أزكى التسليم حرصا على التنظيم تم عمل هذا الموضوع ليسهل على الجميع الوصول لدروس [ دورة XenArabia لبرمجة الإضافات ] حتى تكون مرجعا لكل مبتدء في عالم برمجة إضافات XenForo كما نوجه الشكر الجزيل للأخ...

xenarabia.com

في الدرس السابق قمنا بانشاء خيارات خاصة باضافة كلمة مدير كلمة الموقع وكان الشكل النهائي لها هو الشكل التالي:

في درسنا اليوم سوف نقوم بانشاء عبارات وقوالب للاضافة وسوف نبدأ بالعبارات:

بسم الله وعلى بركة الله:

نقوم بالذهاب الى

لوحة التحكم > المظهر > العبارات > اضافة عباراة

ملاحظة: تأكد ان اللغة المختارة هي اللغة الرئيسية

الان لنضيف معلومات العبارة كما بالصورة التالي:



لاحظ معي التالي:

اللغة: اللغة الرئيسية كما ذكرت ونبهت سابقا ً <<<< ضروري هذا الخيار
العنوان: ضع هنا عنوان فريد للعبارة ويفضل ان يدل هذا العنوان على العباراة نفسها ولكن بدون اي فراغات
نص العبارة: هنا ضع ترجمة هذه العبارة حسب لغتك
الاضافة: نختار من القائمة المنسدلة اضافتنا كما فعلنا عند انشاء خيارات للاضافة

اضغط حفظ وبهذا نكون قد انشئنا عبارة لاضافتنا.

سؤال قد يتبادر في الاذهان لماذا نستخدم العبارات في حين انه يمكننا استخدام نص العبارة داخل القوالب
وللسؤال جوابين:
الاول: انه سوف يسهل عليك اذا اردت تحويل الاضافة الى اكثر من لغة ان تقوم بترجمة العبارات فقط ولن تجبر على الدخول على القوالب والبحث عن كل عبارة وترجمتها علما ً ان في بعض حالات الترجمة داخل القوالب ممكن تقوم بحذف بعض الاكواد من القالب دون علمك مما يسبب لك مشاكل في عرض القالب.
الثاني: انه في حين استخدام ملفات php والخاصة بالاضافات المتطورة فانك سوف تحتاج الى استخدام العبارات بدلا ً من نصوصها لانه ليس كل من يستطيع التعديل على القوالب يستطيع التعديل على ملفات الاضافة


الان بعد حفظ العباراة نحتاج الى اضافة اربع قوالب:

- قالب خاص باظهار كلمة مدير الموقع اعلى المنتدى.
- قالب خاص باظهار كلمة مدير الموقع اسفل المنتدى.
- قالب خاص باظهار كلمة مدير الموقع في الشريط الجانبي.
- قالب خاص بخيارات css

طبعاً قمنا بانشاء ثلاث قوالب لعرض محتويات الاضافة لاننا في الدرس السابق انشئنا خيار خاص يحدد لك مكان عرض الاضافة

الان توجه الى لوحة التحكم > المظهر > القوالب > اضافة قالب:
ملاحظة: تأكد ان الاستايل الذي سوف تضيف له القالب هو الاستايل الرئيسي.

سوف نقوم باضافة القالب الخاص بعرض كلمة مدير الموقع اعلى المنتدى وليكن اسمه wsm_template_up ومحتوى القالب كالتالي:

<xf:include template="wsm_css" />
<div class="container_wsm">
    <h3>{{ phrase('word_site_manager') }}</h3>
    <div class="wsm_messate">
       {$xf.options.mfa_managerwords}
    </div>
</div>

واختر من القائمة المنسدلة بالاسفل الاضافاة الخاصة بنا ثم احفظ القالب.

الان كرر نفس العملية اضف قالب جديد باسم wsm_template_dw وضع له نفس المحتوى واختر الاضافة الخاصة بنا واحفظ القالب.

ثم ايضا ً كرر نفس العملية واضف قالب جديد باسم wsm_template_sidebar وسوف يكون محتوى القالب كالتالي:

<div class="block" data-widget-id="0" >
    <div class="block-container">
        <h3 class="block-minorHeader">{{ phrase('word_site_manager') }}</h3>
        <div class="block-body">
    
            <div class="block-row block-row--minor">
                {$xf.options.mfa_managerwords}
            </div>
        </div>
    </div>
    </div>

ونكرر نفس العملية مرة اخيرة ونضيف قالب باسم wsm_css وهو خاص بتكويد القوالب الخاصة بنا ولك حرية التعامل معه وسوف يكون محتواه كلاسات css خالية كالتالي:

<style>
.container_wsm{

}

.container_wsm h3{

}

.wsm_messate{
    
}
</style>

الان لنشرح بعض الاكواد في القوالب وليست كلها باعتبار ان المتلقي لهذه الدورة مطلوب منه الخبرة الكاملة في html :

في قالب wsm_template_up و قالب wsm_template_dw في اول سطر قمنا بادراج هذا الكود :

<xf:include template="wsm_css" />

وهنا قمنا باستدعاء قالب ال css الذي انشئناه مؤخرا ً لكي نطبق خيارات ال css الخاصة بنا على قوالبنا

ثم بعد ذلك قمنا بادراج هذا الكود:

{{ phrase('word_site_manager') }}

وهو كود اظهار العبارة اللتي انشئناه بداية الدرس ويكنك عن طريق هذا الكود ادراج اي عبارة في القوالب

{{ phrase('ضع عبارتك هنا') }}

ثم بعد ذلك قمنا بادراج قيمة نص كلمة المدير والذي وضعنا له خيار في خيارات الاضافة في الدرس الثاني وكان معرف الخيار هو mfa_managerwords

لذا لو احببنا ادراج اي خيار من خيارات الاضافة داخل القوالب فإننا سوف نقوم باستخدام هذا الكود يتبعه الخيار الذي نريد

{$xf.options.mfa_managerwords}

وللتبسيط اكثر

$xf : هو متغير عام للزين فورو يستطيع جلب العديد من القيم
options:متغير خاص بجلب قيم خيارات الزين فورو
mfa_managerwords: هو المتغير الخاص بقيمة نص كلمة مدير الموقع

اتمنى ان اكون وفقت في ايصال الفكرة

الان نود ان نجرب عملنا وهذه الخطوة فقط للتجربة لكي نرى هل جميع الاكواد تعمل وليست هي الطريقة المستخدمة

ولكن طريقتي في البرمجة هي ان اجرب صحة كل خطوة اقوم بها قبل الانتقال للخطوة التي تليها لكي لا اضيع بين الخطوات

سوف نقوم بالتوجه الى:

المظهر > الاستايلات > اختر القوالب من اي استايل تريد ثم ثم افتح قالب PAGE_CONTAINER وابحث عن

<div class="p-body-main

وضع فوقه هذا الكود:

<xf:include template="wsm_template_up" />

لتكون النتيجة كالتالي:




الان النتيجة التي ظهرت لنا في الصورة السابقة هي:

كلمة مدير الموقع << العبارة التي اضفناها
ونص كلمة مدير الموقع <<< النص الذي وضعناه في خيار الاضافة

ولا تقلق من شكل الكلمة التي ظهر وذلك بسبب ان قالب wsm_css فارغ ولم نقم باضافة خيارات ال css داخلة ولكن لنذهب ونفتح قالب wsm_css ونستبدل محتواه بهذا الكود:

<style>
.container_wsm{
    margin: 20px 0px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    padding: 5px 15px 13px 15px;
    box-shadow: 0px 0px 7px #828181;
}

.container_wsm h3{
    color: #2886a0;
}

.wsm_messate{
    font-weight: bold;
    color: #9c9c9c;   
}
</style>

لتصبح النتيجة كالتالي:




اذا ظهرت معك النتيجة بنفس الصورة السابقة فهذا معناه ان عملك ممتاز وتحتاج الى ازالة الكود الذي اضفناه في قالب PAGE_CONTAINER

لاننا في الدرس القادم باذن الله سوف نتعلم كيفية ادراج الاكواد واستبدالها تلقائيا ً

اما اذا لم تظهر معك نفس النتيجة فاعد العملية مرة اخرى


والى هنا نكون قد انتهينا من درسنا لهذا اليوم

اسأل الله العلي القدير ان اكون قد وفقت في ايصال المعلومة بشكل سلسل وبسيط ويسعدني الرد على اي استفسار

ان اصبت فمن فضل الله علي وان اخطأت فجل من لايخطأ

احترامي وتقديري
اخوكم
شقاوي

 

[أبو غَيْث]

ما شاء الله عليك اخي
صراحة فتحت الباب الذي كان مغلقا للكثيرين ممن يريدون تعلم برمجة إضافة زين فورو
عفاك الرحمان و امدك بالصحة و العافية
واصل تميزك يا غالي

 

[shqawe]

ما شاء الله عليك اخي
صراحة فتحت الباب الذي كان مغلقا للكثيرين ممن يريدون تعلم برمجة إضافة زين فورو
عفاك الرحمان و امدك بالصحة و العافية
واصل تميزك يا غالي

حياك وبياك اخوي محمد نورت الموضوع

ونحمد الله الذي امدنا بالصحة والعافية للنقل بعض ما عندنا من العلم للغير خوفا ً من لجام نلجم به من نار يوم القيامة اعاذنا الله واياكم

احترامي وتقديري
اخوك
شقاوي

 

[أبو عبدالله]

ماشاء الله تبارك الله يا استاذ تركي

والله ما قصرت وكفيت ووفيت شرح يفتح النفس

باذن الله تكون هذي الدورة مرجع لكل واحد يبي يتعلم برمجة الاضافات الخاصة بـ Xenforo

شكرا لك يا مبدع

وننتظر ابداعتك ومواضيعك الممتعة

الله يعطيك الصحة والعافية وشكرا لك

 

[MesterPerfect]

رائع جدا أخي شقاوي جزاك الله خيرا
أنتظر منك طريقة البحث عن الأكواد واستبدالها لكي أبدأ في الإضافة التي أخبرتك عنها من قبل
تحياتي لك وبوركت مجهوداتك

 

[shqawe]

ماشاء الله تبارك الله يا استاذ تركي

والله ما قصرت وكفيت ووفيت شرح يفتح النفس

باذن الله تكون هذي الدورة مرجع لكل واحد يبي يتعلم برمجة الاضافات الخاصة بـ Xenforo

شكرا لك يا مبدع

وننتظر ابداعتك ومواضيعك الممتعة

الله يعطيك الصحة والعافية وشكرا لك

هلا وغلا بالشيخ @أبو عبدالله

واحمد الله ان الشرح بسيط ومفهوم لاني وانا اكتب الدرس فيه اماكن في الدرس عدت صياغتها كذا مرة

والله يعافيك ويحميك لعين ترجيك

رائع جدا أخي شقاوي جزاك الله خيرا
أنتظر منك طريقة البحث عن الأكواد واستبدالها لكي أبدأ في الإضافة التي أخبرتك عنها من قبل
تحياتي لك وبوركت مجهوداتك

هلا وغلا بالغالي الحبيب احمد ويجزاك ربي الخير انت ومن يقرأ ان شاء الله

بالنسبة لطريقة استبدال الاكواد راح تكون الدرس القادم باذن الله

والدرس القادم راح يكون شوي دسم واتوقع انه يكون طويل لانه راح يحتوي على الكثير من المعلومات

اللي من بعدها يستطيع الواحد الانطلاق في عالم الاضافات

احترامي وتقديري
اخوكم
شقاوي

 

[MesterPerfect]

هلا وغلا بالغالي الحبيب احمد ويجزاك ربي الخير انت ومن يقرأ ان شاء الله
بالنسبة لطريقة استبدال الاكواد راح تكون الدرس القادم باذن الله
والدرس القادم راح يكون شوي دسم واتوقع انه يكون طويل لانه راح يحتوي على الكثير من المعلومات
اللي من بعدها يستطيع الواحد الانطلاق في عالم الاضافات
احترامي وتقديري
اخوكم
شقاوي

الله الله هذا ما ننتظره
إذا نرجو أن لا تتأخر علينا أخي الحبيب
تحياتي لك وبالإنتظار إن شاء الله

 

[shqawe]

الله الله هذا ما ننتظره
إذا نرجو أن لا تتأخر علينا أخي الحبيب
تحياتي لك وبالإنتظار إن شاء الله

باذن الله ان لم يعقني اي عائق فغدا ً سوف يتم كتابة الدرس