انشاء قسم التذييل Footer اسفل الصفحات في موقع ووردبريس الدرس 10

انشاء قسم التذييل Footer اسفل الصفحات في موقع ووردبريس الدرس 10

انشاء قسم التذييل Footer اسفل الصفحات في موقع ووردبريس الدرس 10

في ووردبريس هناك ما يسمى التذييل Footer , وهو القسم الذي يكون اسفل الصفحات في الموقع , و عملية انشاء قسم التذييل في ووردبريس بسيطة جداّ ولا تحتاج الى التعقيدات بحيث وكما تحدثنا في المقالين السابقين و تعملنا كيف نقوم بانشاء Header و Blog Post Template , فاليوم سوف نتعرف على كيفية انشاء قسم التذييل من خلال استخدام كود يعمل لنا ويدجت مخصص Footer Widget

ماهو قسم التذييل Footer في الصفحات

لتعرف ما هو التذييل Footer , قم بالنظر في الصورة التالية التي قمنا بادراجها سابقاً لمعرفة أقسام الصفحة الاساسية في الموقع الالكتروني .

ماهو قسم التذييل Footer في الصفحات

انشاء قسم Footer Widget من خلال الكود

بداية يجب أن نقوم بانشاء قسم Footer Widget , في ملف Function.php  في مجلد الثيم , سنقوم بكتابة الكود التالي لاخبار وورد بريس أن يقوم بتسجيل تذييل للموقع في صفحة الاوامر لكي يظهرها لنا في لوحة تحكم وورد بريس …

سوف أقوم بتقسيم قسم التذييل الى ثلاثة أقسام , يمين , وسط , يسار . ولهذا نحتاج الى تسجيل ثلاثة اقسام في ملف Function.php , فقط قم بنسخ الكود التالي ولصقه في هذا الملف .

الكود الأول يلصق في ملف Function.php

function my_theme_widgets(){
register_sidebar(
                    array (
                        'name'=> 'Footer Area one ',
                        'id'=> 'footerone-menu',
                        'before_widget'=> '<div class= "widget-item">',
                        'after_widget'=> '</div>',
                        'before_title'=> '<h5 class= "sidebar-content">',
                        'after_title'=> '</h5>'
                        ));
register_sidebar(
                    array (
                        'name'=> 'Footer Area Two ',
                        'id'=> 'footertwo-menu',
                        'before_widget'=> '<div class= "widget-item">',
                        'after_widget'=> '</div>',
                        'before_title'=> '<h5 class= "sidebar-content">',
                        'after_title'=> '</h5>'
                        ));
register_sidebar(
                    array (
                        'name'=> 'Footer Area Three ',
                        'id'=> 'footerthree-menu',
                        'before_widget'=> '<div class= "widget-item">',
                        'after_widget'=> '</div>',
                        'before_title'=> '<h5 class= "sidebar-content">',
                        'after_title'=> '</h5>'
                        ));
}
add_action ('widgets_init', 'my_theme_widgets');

كما لاحظ قمنا بانشاء ثلاثة اقسام ,اسمينا كلاً منها ‘Footer Area one ‘,   ‘Footer Area Two ‘,’Footer Area Three ‘

معاينة التغييرات في قسم تخصيص في موقع ووردبريس

الآن اذهب الى لوحة تحكم وورد بريس , انظر في قسم Appearance , من ثم Widgets , من ثم ستجد لديك هذه الاقسام الثلاثة , كل ماعليك هو ان تقوم باضافة المحتوى الذي تريد وضعه في كل قسم على حدا .

الآن بعد أن اخترنا المحتوى الذي نريد أن نضغه في الاقسام الثلاثة وليس شرطاً أن تستخدمها معاً , تستطيع استخدام قسم واحد او اثنين او ثلاثة ان اردت ووالكود التالي سيشرح لنا كيف نقوم بتنسيق  قسم واحد أو قسمين أو ثلاثة اقسام , ساترك لك في القسم التالي ثلاثة اكواد, الاول لاستخدام قسم واحد و الثاني لاستخدام قسمين , والثالث لاستخدام ثلاثة اقسام في منطقة التذييل أو Footer .. انظر الأكواد وهي تأخذ تنسيق Bootstrap

شرح أكواد Bootstrap المستخدمة في التذييل Footer في ووردبريس

  • الأول :
<div class="row">
    <div class="col-12">
    <?php if ( is_active_sidebar( 'footerone-menu' ) ) : ?>
    <ul id="sidebar">
    <?php dynamic_sidebar( 'footerone-menu' ); ?>
    </ul>
    <?php endif; ?>
    </div>
</div>
  • الثاني :
<div class="row">
        <div class="col-6">
           <?php if ( is_active_sidebar( 'footerone-menu' ) ) : ?>
           <ul id="sidebar">
           <?php dynamic_sidebar( 'footerone-menu' ); ?>
           </ul>
           <?php endif; ?>
        </div>
        <div class="col-6">
           <?php if ( is_active_sidebar( 'footertwo-menu' ) ) : ?>
           <ul id="sidebar">
           <?php dynamic_sidebar( 'footertwo-menu' ); ?>
           </ul>
           <?php endif; ?>
        </div>
</div>
  • الثالث وهو استخدام الثلاثة اقسام معاً لانشاء قسم التذييل Footer ..
<div class="row">
        <div class="col-4">
            <?php if ( is_active_sidebar( 'footerone-menu' ) ) : ?>
            <ul id="sidebar">
            <?php dynamic_sidebar( 'footerone-menu' ); ?>
            </ul>
            <?php endif; ?>
        </div>
        <div class="col-4">
            <?php if ( is_active_sidebar( 'footertwo-menu' ) ) : ?>
            <ul id="sidebar">
            <?php dynamic_sidebar( 'footertwo-menu' ); ?>
            </ul>
            <?php endif; ?>
        </div>
        <div class="col-4">
            <?php if ( is_active_sidebar( 'footerthree-menu' ) ) : ?>
            <ul id="sidebar">
            <?php dynamic_sidebar( 'footerthree-menu' ); ?>
            </ul>
            <?php endif; ?>
        </div>
</div>

الآن بالنسبة للتنسيق , كما تلاحظ سابقاً , قمنا باعطاء الكود السابق لكل منطقة تذييل Id و بناءاً عليه سوف نستخدمها لكي نقوم بتنسيق محتوى وشكل التذييل ..

في المثال التالي سوف اقوم بانشاء منطقة تذييل كاملة المحتوى مع التنسيق , قم بقراءة الكود وفهمه بشكل جيد , حتى تستطيع التعديل عليه بما يتناسب مع احتياجاتك …

مقال آخر سيفيدك :

الكود الثاني يلصق في ملف footer.php

<div class="footer">  
    <div class="row">
            <div class="col-4">
                <?php if ( is_active_sidebar( 'footerone-menu' ) ) : ?>
                <ul id="sidebar">
                <?php dynamic_sidebar( 'footerone-menu' ); ?>
                </ul>
                <?php endif; ?>
            </div>
            <div class="col-4">
                <?php if ( is_active_sidebar( 'footertwo-menu' ) ) : ?>
                <ul id="sidebar">
                <?php dynamic_sidebar( 'footertwo-menu' ); ?>
                </ul>
                <?php endif; ?>
            </div>
            <div class="col-4">
                <?php if ( is_active_sidebar( 'footerthree-menu' ) ) : ?>
                <ul id="sidebar">
                <?php dynamic_sidebar( 'footerthree-menu' ); ?>
                </ul>
                <?php endif; ?>
            </div>
    </div>
</div>

الكود الثالث يلصق في ملف style.css

.footer{
    background: rgba(0,0,0,.9);
    padding-top: 30px;
    padding-bottom: 25px;

}
.footer h5{
    list-style: none;
    color: orange;
    font-weight: 700;
}
.footer ul li {
    list-style: none;
}
.footer a{
     font-size: 15px;
    color: white;
    text-decoration: none;
}

معاية التغييرات الأخيرة بعد التنسيق لقسم اسفل الصفحات – التذييل Footer

اقسام في منطقة التذييل أو Footer .. انظر الأكواد وهي تأخذ تنسيق Bootstrap ...

هل أعجبك الدرس ؟ لا تنسى أن تقم بمشاركته مع الاصدقاء والمهتمين وفي مواقع التواصل الاجتماعي , فهكذا تقوم بدعمنا ونحن نقدر ذلك …

تابع معي الدرس القادم الذي سيكون عن كيفية  بناء الصفحة الرئيسية للموقع أو ما يعرف بـ Landing Page أو Front page  تابع الدرس من هنا 

اقرأ أيضاً في دروس سابقة :

الزوار قاموا بقراءة ما يلي أيضاً

أفضل الدول لدراسة الفنون والتصميم وتاريخ الفن في الخارج

أفضل الدول لدراسة الفنون والتصميم وتاريخ الفن في الخارج

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

أفضل 16 منحة ماجستير طب الاسنان ممولة بالكامل

أفضل 16 منحة ماجستير طب الاسنان ممولة بالكامل

طلاب الطب الذين يختارون دراسة ماجستير طب الاسنان لديهم الكثير من الفرص الوظيفية كبيرة ومع ذلك ، مثل العلوم الطبية الأخرى، يمكن أن تكون... قراءة المزيد

ما هو الفرق بين المنحة الممولة بالكامل والمنحة الممولة جزئياً

ما هو الفرق بين المنحة الممولة بالكامل والمنحة الممولة جزئياً

كل جامعة أو مؤسسة تعليمية لديها معاييرها الخاصة لتحديد المنحة الدراسية كاملة أو منحة دراسية كاملة الرسوم ولكن عمومًا منحة الرسوم... قراءة المزيد

دورات مجانية عن بعد – Free courses – كورسات مجانية

دورات مجانية عن بعد – Free courses – كورسات مجانية

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

ما هو الفرق بين التدريب العملي و التطوع؟

ما هو الفرق بين التدريب العملي و التطوع؟

تعرف في هذا المقال على الفرق بين التدريب العملي و التطوّع في الخارج …سواءً كنت طالبًا في المدرسة أو الجامعة، فإنك ومع حلول فصل الصيف... قراءة المزيد

ما هو اختبار GMAT؟ ما تحتاج لمعرفته حول الاختبار والنتائج والأقسام

ما هو اختبار GMAT؟ ما تحتاج لمعرفته حول الاختبار والنتائج والأقسام

يعد اختبار قبول الخريجين في الإدارة ، أو اختبار GMAT ، جزءًا مهمًا من عملية التقديم في كليات إدارة الأعمال يعد GMAT اختبارًا موحدًا متعدد... قراءة المزيد


تعرف على التخصصات الدراسية التالية

تخصص الهندسة الطبية الحيوية Biomedical Engineering

تخصص الهندسة الطبية الحيوية Biomedical Engineering

الهندسة الطبية الحيوية تعتبر مهنة فاصلة ما بين الهندسة والطب, لماذا؟ لأنك ستجبر بالعمل في المجالين معاً, فعلى سبيل المثال اذا كنت عالم... قراءة المزيد

تخصص علم النفس

تخصص علم النفس

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

تخصص هندسة الحاسوب – Computer Engineering

تخصص هندسة الحاسوب – Computer Engineering

يُشارك المهندسون المختصون في تخصص هندسة الحاسوب في العديد من جوانب الأجهزة والبرمجيات في مجال الحوسبة، بدءً من تصميم وحدات التحكم... قراءة المزيد

تخصص التصميم الجرافيكي – Graphic Design

تخصص التصميم الجرافيكي – Graphic Design

يعد تصميم الجرافيك Graphic Design أداة مهمة تعزز كيفية تواصلك مع الآخرين يساعدك تخصص التصميم الجرافيكي على نقل أفكارك بطريقة ليست فعالة فحسب،... قراءة المزيد


اخترنا لك المنح التالية للتقديم عليها

مسابقة الكتابة المقدمة من أنسفيلد وولف للكتاب بقيمة عشرة الآف دولار

مسابقة الكتابة المقدمة من أنسفيلد وولف للكتاب بقيمة عشرة الآف دولار

تقدم مؤسسه أنسفيلد وولف للكتاب جوائزالكتابة لذوي الأعمال الرائعة والتي تساهم في فهمنا للعنصرية وتقديرنا للتنوع الثقافي، يتم منح... قراءة المزيد

منحة جامعة ويسترن واشنطن لدراسة البكالوريوس في أمريكا

منحة جامعة ويسترن واشنطن لدراسة البكالوريوس في أمريكا

بدافع دعم الطلاب ذوي الإمكانات العالية ، تقدم منحة جامعة ويسترن واشنطن جائزة الإنجاز الدولي  المنحة مفتوحة للطلاب الدوليين من أجل... قراءة المزيد

منحة الماجستير في جامعة سيدني  المقدمه من مؤسسة AWET الخاصة

منحة الماجستير في جامعة سيدني المقدمه من مؤسسة AWET الخاصة

أنشئت منحة الماجستير في جامعة سيدني المقدمه من مؤسسة AWET الخاصة في عام 2007 من قبل  الصندوق الأسترالي لتقديم المساعدة للطلاب الذين... قراءة المزيد

منح الماجستير في إدارة الأعمال و  القانون

منح الماجستير في إدارة الأعمال و القانون

قدّم الآن على منح الماجستير في إدارة الأعمال و  القانون عبر الانترنت هذه المنحة مخصصة للطلاب ذوي الاحتياجات المالية الصعبة حيث تساعدهم... قراءة المزيد

اقرأ المقالات التالية القائمة الشاملة ←
أفضل جامعات سلوفينيا للطلاب الدوليين

أفضل جامعات سلوفينيا للطلاب الدوليين

تعرف في المقال التالي على جامعات سلوفينيا الأفضل في قائمة موقع STUDYSHOOT, بالاضافة الى معلومات الدراسة والمنح الدراسية المقدمة سلوفينيا... قراءة المزيد

منحة Hsing Yun للطلاب الدوليين للماجستير في الصحة النفسية في أستراليا

منحة Hsing Yun للطلاب الدوليين للماجستير في الصحة النفسية في أستراليا

يتوفر الآن التمويل الجديد منحة Hsing Yun التعليمية للطلاب الدوليين في معهد نان تيان (NTI) للدراسة في أستراليا تساعد هذه  الطلاب الدوليين... قراءة المزيد

أفضل جامعات لاتفيا للطلاب الدوليين

أفضل جامعات لاتفيا للطلاب الدوليين

تعرف على قائمة أفضل جامعات لاتفيا للطلاب الدوليين الراغبين بالدراسة في دول البلطيق لاتفيا بلد أوروبي معروف بوجود اقتصاد متقدم وعالي... قراءة المزيد

جامعة ترينت في كندا

جامعة ترينت في كندا

جامعة ترينت هي جامعة عامة في كندا، تأسست عام 1964 تقع في مدينة بيتيربوروغ، أوشاوا كليات جامعة ترينت في كندا كلية كاثرين بار... قراءة المزيد