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

انشاء قسم التذييل 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  تابع الدرس من هنا 

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

أحدث المواضيع الى الآن

دورة تدريبية مجانية للغة الإنجليزية

دورة تدريبية مجانية للغة الإنجليزية

يوفر برنامج شبكة OPEN دورة تدريبية مجانية للغة الإنجليزية عبر الإنترنت فرصًا تعليمية افتراضية لمعلمي اللغة الإنجليزية والمهنيين... قراءة المزيد

منحة جامعة العلوم التطبيقية في ألمانيا

منحة جامعة العلوم التطبيقية في ألمانيا

قدّم على منحة جامعة العلوم التطبيقية في ألمانيا لجميع الطلاب لدراسة البكالوريوس و الدراسات العليا منحة جامعة العلوم التطبيقية في... قراءة المزيد

منحة جامعة بيتس الأمريكية

منحة جامعة بيتس الأمريكية

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

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

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

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

منح جامعة Jacobs في ألمانيا

منح جامعة Jacobs في ألمانيا

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

منح جامعة كوينزلاند الاسترالية للتكنولوجيا للبكالوريوس

منح جامعة كوينزلاند الاسترالية للتكنولوجيا للبكالوريوس

تقدم منح جامعة كوينزلاند للتكنولوجيا (QUT) في أستراليا لطلاب البكالوريوس الدوليين فرصة التقدم للحصول على منحة دراسية تهدف إلى جذب أفضل... قراءة المزيد