STUDYSH 🌏🌏 T

grant • opportunitY • WORK • FUTURE

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

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


studyshoot on telegram
شارك هذه الفرصة مع الأصدقاء

في ووردبريس هناك ما يسمى التذييل 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  تابع الدرس من هنا 

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



شارك هذه الفرصة مع الأصدقاء





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

اضافة خطوط جوجل العربية في ووردبريس في 3 خطوات |Arabic Webfonts

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

تخصيص القالب في ووردبريس customizer الدرس السادس عشر

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

انشاء صفحة الأرشيف في وورد بريس الدرس الخامس عشر

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

اضافة عداد تنازلي بموقعك في ووردبريس باستخدام جافا سكريبت و php

اضافة عداد تنازلي بموقعك WordPress Countdown Timer في ووردبريس باستخدام جافا سكريبت و php , لربما تستغرب من انك تستطيع انشاء عداد تنازلي في ووردبريس... قراءة المزيد

اظهار المقالات في وورد بريس الدرس الرابع عشر

في هذا الدرس سوف نتعلم كيف نقوم بـ اظهار المقالات في وورد بريس التي قمنا بانشائها في الدرس السابق, وكذلك سنقوم بتخصص اظهار عدد المقالات... قراءة المزيد

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

انشاء المقالات المخصصة والتصنيفات المخصصة في وورد بريس الدرس الثالث عشر في الدرس السابق تعلمنا كيف نقوم باظهار المنشورات التي نقوم... قراءة المزيد

انظر المنح التالية

القائمة الشاملة ←

منحة IsDB للباحثات النساء في علوم الاستدامه المقدم من البنك الاسلامي للتنميه

باحثات في بدايات حياتهن المهنية من 21 دولة من أقل البلدان نمواً في البنك الإسلامي للتنمية (IsDB) مؤهلات

مسابقة Transform المجانية عبر الإنترنت

يجتمع الشباب معًا لتبادل الخبرات والتعلمات التي غيرت حياتهم المهنية، انضم إلى مسابقة Transform للاستماع إلى قصص من

مهرجان Games for Change Virtual Festival للالعاب

إنضم إلى المجتمع العالمي من المطورين والمعلمين والطلاب والباحثين افتراضيًا لإثارة الخيال حول كيف يمكن للألعاب والوسائط الغامرة

مسابقة Posterheroes عبر الانترنت لتصميم الملصقات

مسابقة Posterheroes عبر الانترنت هي مسابقة دولية حول التواصل الاجتماعي تدعو إلى تصميم ملصقات حول القضايا الاجتماعية والبيئية.

STUDYSHOOT ©