إعجاب

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

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

إعجاب

الزوار قدّ شاهدوا أيضاً المقالات التالية :

STUDYSHOOT ©