موقع المنح الدراسية العربي الأول
×

القائمة ☰

التسجيل

انشاء قسم التذييل 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 ©