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

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
3,370
مستوى التفاعل
2,917
النقاط
113
الإقامة
K.S.A
  • التقييمات: 0
  • #1
بسم الله الرحمن الرحيم

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

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

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


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

l-6-jpg.1108



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

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

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

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

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

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

l-1.jpg

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

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

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

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


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

- قالب خاص باظهار كلمة مدير الموقع اعلى المنتدى.

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

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

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

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

HTML:
<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 وسوف يكون محتوى القالب كالتالي:


HTML:
<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 خالية كالتالي:

CSS:
<style>
.container_wsm{

}

.container_wsm h3{

}

.wsm_messate{
    
}
</style>


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

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

HTML:
<xf:include template="wsm_css" />

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

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

HTML:
{{ phrase('word_site_manager') }}

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

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

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

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

HTML:
{$xf.options.mfa_managerwords}

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

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

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

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

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

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

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

HTML:
<div class="p-body-main

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

HTML:
<xf:include template="wsm_template_up" />

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

l-2.jpg


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

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

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

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>

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

l-3.jpg


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

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

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


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

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

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

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

أبو غَيْث

:: الإدارة العامة ::
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
5,743
مستوى التفاعل
3,916
النقاط
113
العمر
41
الإقامة
المغرب
الموقع الالكتروني
ما شاء الله عليك اخي
صراحة فتحت الباب الذي كان مغلقا للكثيرين ممن يريدون تعلم برمجة إضافة زين فورو
عفاك الرحمان و امدك بالصحة و العافية
واصل تميزك يا غالي
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
3,370
مستوى التفاعل
2,917
النقاط
113
الإقامة
K.S.A
ما شاء الله عليك اخي
صراحة فتحت الباب الذي كان مغلقا للكثيرين ممن يريدون تعلم برمجة إضافة زين فورو
عفاك الرحمان و امدك بالصحة و العافية
واصل تميزك يا غالي

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

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

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

أبو عبدالله

:: الأعضاء ::
إنضم
2 فبراير 2019
المشاركات
131
مستوى التفاعل
134
النقاط
43
الإقامة
مكة المكرمة
ماشاء الله تبارك الله يا استاذ تركي

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

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

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

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

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

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
28 يناير 2019
المشاركات
2,716
مستوى التفاعل
2,177
النقاط
113
العمر
24
الإقامة
sohag, Egypt
الموقع الالكتروني
رائع جدا أخي شقاوي جزاك الله خيرا
أنتظر منك طريقة البحث عن الأكواد واستبدالها لكي أبدأ في الإضافة التي أخبرتك عنها من قبل :D
تحياتي لك وبوركت مجهوداتك
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
3,370
مستوى التفاعل
2,917
النقاط
113
الإقامة
K.S.A
ماشاء الله تبارك الله يا استاذ تركي

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
28 يناير 2019
المشاركات
2,716
مستوى التفاعل
2,177
النقاط
113
العمر
24
الإقامة
sohag, Egypt
الموقع الالكتروني
هلا وغلا بالغالي الحبيب احمد ويجزاك ربي الخير انت ومن يقرأ ان شاء الله
بالنسبة لطريقة استبدال الاكواد راح تكون الدرس القادم باذن الله
والدرس القادم راح يكون شوي دسم واتوقع انه يكون طويل لانه راح يحتوي على الكثير من المعلومات
اللي من بعدها يستطيع الواحد الانطلاق في عالم الاضافات
احترامي وتقديري
اخوكم
شقاوي
الله الله هذا ما ننتظره
إذا نرجو أن لا تتأخر علينا أخي الحبيب
تحياتي لك وبالإنتظار إن شاء الله
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
3,370
مستوى التفاعل
2,917
النقاط
113
الإقامة
K.S.A
الله الله هذا ما ننتظره
إذا نرجو أن لا تتأخر علينا أخي الحبيب
تحياتي لك وبالإنتظار إن شاء الله

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

جميع المواضيع والمشاركات والتعليقات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

الأعضاء المتصلون

إحصائيات المنتدى

المواضيع
2,082
المشاركات
21,949
الأعضاء
977
آخر عضو مسجل
rfab
أعلى