انشاء و تعديل القائمة الرئيسية Header في قالب موقع ووردبريس الدرس 7

 انشاء و تعديل القائمة الرئيسية Header في قالب موقع ووردبريس الدرس 7

تعديل القائمة الرئيسية Header في قالب موقع ووردبريس أمر بسيط ولا يحتاج التعقيدات فالموضوع يعتمد على معرفة HTML وبعض أكواد php التي يمكن استخدامها مجاناً ; بعد أن وضحنا في الدرس السابق , ماهي ملفات الثيم وقمتا بتعريف كل ملف على حدا مع الكود الاساسي الذي يجب أن نبدأ به في كل ملف , سنتعلم اليوم كيفية انشاء قائمة قالب موقع ووردبريس ف , وكيف سنقوم بتصميم تنسيق جميل لهذه القائمة , بالاضافة الى اننا سنستخدم Bootstrap classes لهذه العملية ,

انشاء Navigation Menu في قالب موقع ووردبريس باستخدام كود PHP التالي function.php

add_theme_support('menus');
//Menus
                register_nav_menus(

                    array(
                            'top-menu'=> 'Top Menu',
                 		));

شرح كود Navigation Menu

 نطلب من ملف الاوامر , باضافة دعم خيار القوائم الى موقعنا , وكذلك من ثم تسجيل قائمة قمنا باعطائها الاسم Top Menu, احفظ الآن العمل , واذهب الى موقعك في وورد بريس , ثم اضغط على appearance  بمعنى مظهر , ثم اختر Menus. سيطلب منك انشاء قائمة جديدة , قم بانشائها واعطها اسم ايّاً تريد , ثم انظر في اسفل الصفحة ستجد هناك مربع اختيار , يظهر به اسم القائمة التي انشئناها في ملف Function.php . قم بتفعيل مربع الخيار ثم اضغط على حفظ .. قم باضافة بعض الصفحات الى هذه القائمة وايضاً اضغط على حفظ ..

المرحلة التالية هي اظهار Navigation Menu في الموقع :

 اذا قمت بفتح صفحة من صفحات الموقع لن تجد أن القائمة ظهرت بعد في الاعلى لأننا لم نقم بوضع الكود في المكان المخصص له لاظهارها وبناءاً عليه سنذهب الآن الى ملف header.php , وسوف نقوم بلصق الكود التالي :

<?php
wp_nav_menu(
array(
'theme_location'=> 'top-menu',
//'menu'=> 'top-bar'
'menu_class'=>'sidenavs'
));?>

شرح كود اظهار Navigation Menu في الموقع

اخبرنا ملف header  بأن هذه القائمة هي التي ستكون القائمة الرئيسية للموقع , وبناءا عليه سوف تظهر الآن هذه القائمة في الموقع . في الصفحات وفي المقالات ايضاً . ولكن لم ننتهي بعد , اذهب وقم بتحديث الصفحة التي فتحتها منذ قليل , ستجد أن هناك قائمة بالفعل ولكن لن تجدها بالشكل الذي تريده , فهي بشعة المنظر شيئاً ما وهذا ما سنقوم الآن بفعله عبر css كما قلنا سابقاً بتجميل الموقع وسنبدأ الآن يتجميل هذا الموقع … ولكن كيف ؟

الكود الأخير يلصق في ملف header.php

<?php wp_head(); ?>
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head> </head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<body>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<header class="studyshoot-header" > 
<div class="studyshoot-head" > 
                                                  <?php
                                                     wp_nav_menu(
                                                       array(
                                                       'theme_location'=> 'top-menu',

                                                          //'menu'=> 'top-bar'
                                                            'menu_class'=>'top-bar '
                                                         )
                                                       );
                                                       ?>
</div > 
</header>

تنسيق القائمة الرئيسية Header بشكل متناسب مع الموقع باستخدام css

.studyshoot-head{
  width: 100%;
  bottom: 0;
  left: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
  border-style: solid #343a40;
  text-align: center;
  z-index: 999;
}
.studyshoot-head a{
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  z-index: 999;
}
 .studyshoot-head ul li{
  color: white;
  display: inline-block;
  text-decoration: none;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left:  12px;
  padding-right:  12px;
  content: '';
  z-index: 999;
  color: #fff; 
  background-color: #f2911c;
  border-color: #343a40;
  cursor: pointer;
  -webkit-appearance: button;
  border-top: 1px solid white;
}
 .studyshoot-head  ul li:hover{
  color: white;
  display: inline-block;
  text-decoration: none;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left:  12px;
  padding-right:  12px;
  content: '';
  z-index: 999;
  color: #fff;
  background-color: black;
  border-color: #d3b574;
  cursor: pointer;
  -webkit-appearance: button;
  border-top: 1px solid #343a40;
  transition: all 0.35s ease-in-out;
  border-radius: 10px;
}
.studyshoot-head  .top-bar li .sub-menu {display: none;}
.studyshoot-head ul li .sub-menu :hover{display: block;}
.studyshoot-head .top-bar >.menu-item-has-children:hover >.sub-menu {
  display: inline-grid;
  position: absolute;
  padding-top: 50px;
  padding-right: 0;
  padding-left: 0; 
  text-align: right;
  width: 250px; 
  z-index: 999;  
}
.studyshoot-head .menu-item-has-children .sub-menu > .menu-item-has-children:hover > .sub-menu {
  display: inline-block;
  position: relative;
  padding-top: 15px;
  padding-right: 0;
  padding-left: 0; 
  text-align: right;
}

تنبيه . اذا كنت تريد ان تغيير اسماء الكلاسات فيجب أن تقوم ايضاً بتغييرها من ملف ال style.css

class=”studyshoot-head” , class=”studyshoot-header” , ‘menu_class’=>’top-bar ‘

معاينة التغييرات على اضافة قوائم ووردبريس

  • قم الآن بتحديث الصفحة في موقعك , ستجد شكل القائمة  بشكل أجمل مما كانت عليه , لنقم بشرح كود css حتى تستطيع ابتكار تصميمك لوحدك .

ملاحظات تعديل القائمة الرئيسية Header

عند رغبتنا بتنسيق أي قسم في الموقع , يجب أن نعطيه تعريف ; class  OR  id , وسنتحدث الآن عن اذا ماكنا نريد تنسيق الكلاس فيجب قبل أن نضع اسم الكلاس في ملف style.css  ان نضع نقطه قبله , اما اذا كنا نتحدث عن تنسيق id  فيجب أن نقوم بوضع اشارة #.هذه هي القاعدة .

اما الآن عن المرحلة التالية بعد ان نكتب اسم الكلاس فيجب أن نقوم بفتح علامتي  {} , ونقوم بكتابة التنسيق ضمن هاتان العلامتان ,  وعند كتابة الكود يجب أن تكتبه ومن ثم تكتب اشارة : و عن الانتهاء الاغلاق بالاشارة ; على سببيل المثال انظر الكود 

شرح CSS لـ تعديل القائمة الرئيسية Header

.Class-name{
  width: عرض المحتوى  ;
  height: ارتفاع المحتوى ;
  font-size:حجم الخط;
  font-weight: قوة الخط;
  line-height: ارتفاع الطر ;
  padding-right: ترك مسافة من اليمين  ;
  padding-left:  ترك مسافة من اليسار ;
  padding-top:ترك مسافة من الاعلى  ;
  padding-bottom: ترك مسافة من الاسفل ;
  color: اللون  ;
  background-color:لون الخلفية  ;
  background-image: صورة الخلفية  ;
  margin-left: الهامش من اليسار ;
  margin-bottom: الهامش من الاسفل  ;
  margin-right: الهامش من اليمين  ;
  margin-top:  الهامش من الاعلى ;
  text-align: محاذاة النص     (يمين , يسار , وسط ) ;
}

انشاء ترويسة علوية متناسقة مع الجوال

واليوم سوف نقوم بادخال معطيات جديدة , يمكنك نسخ الكود التالي كله بملف header.php بدلاً عن الكود السابق :

 <?php wp_head(); ?>
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head> </head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<body>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<header class="studyshoot-header" > 
<header class="studyshoot-head" > 
                                                  <?php
                                                     wp_nav_menu(
                                                       array(
                                                       'theme_location'=> 'top-menu',

                                                          //'menu'=> 'top-bar'
                                                            'menu_class'=>'top-bar '
                                                         )
                                                       );
                                                       ?>  

 
</header> 
</header>



<div class="mobile-header "> 
  <div class="pos-f-t">
    <div class="collapse" id="navbarToggleExternalContent">
      <div class="bg-dark p-4">
       <div class="new-style">
                          <?php
                            wp_nav_menu(
                                       array(
                                            'theme_location'=> 'top-menu',
                                               //'menu'=> 'top-bar'
                                            'menu_class'=>'sidenavs'
                          ));?>
        </div>
      </div>
    </div>
            <nav class="navbar navbar-dark bg-dark">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            </nav>
</div>
</div>

لقد قمنا بانشاء كلاسين في الكود السابق , الأول قمنا باعطاءه الاسم  studyshoot-header  وسوف نظهره فقط للشاشات التي عرضها اكبر من 1200 , اما الكلاس الثاني فقط اعطيناه الاسم mobile-header وسوف نظهره فقط اذا كان حجم الشاشة أو عرضها بالاحرى اقل من 1200 . وسيصبح لدينا كود التنسيق الكامل لـ تصميم القائمة العلوية Header :

كود CSS لتنسيق القائمة العلوية بعد انشاء Navigation Menu

.studyshoot-head{
  width: 100%;
  bottom: 0;
  left: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
  border-style: solid #343a40;
  text-align: center;
  z-index: 999;
}
.studyshoot-head a{
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  z-index: 999;
}
 .studyshoot-head ul li{
  color: white;
  display: inline-block;
  text-decoration: none;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left:  12px;
  padding-right:  12px;
  content: '';
  z-index: 999;
  color: #fff; 
  background-color: #f2911c;
  border-color: #343a40;
  cursor: pointer;
  -webkit-appearance: button;
  border-top: 1px solid white;
}
 .studyshoot-head  ul li:hover{
  color: white;
  display: inline-block;
  text-decoration: none;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left:  12px;
  padding-right:  12px;
  content: '';
  z-index: 999;
  color: #fff;
  background-color: black;
  border-color: #d3b574;
  cursor: pointer;
  -webkit-appearance: button;
  border-top: 1px solid #343a40;
  transition: all 0.35s ease-in-out;
  border-radius: 10px;
}
.studyshoot-head  .top-bar li .sub-menu {display: none;}
.studyshoot-head ul li .sub-menu :hover{display: block;}
.studyshoot-head .top-bar >.menu-item-has-children:hover >.sub-menu {
  display: inline-grid;
  position: absolute;
  padding-top: 50px;
  padding-right: 0;
  padding-left: 0; 
  text-align: right;
  width: 250px; 
  z-index: 999;  
}
.studyshoot-head .menu-item-has-children .sub-menu > .menu-item-has-children:hover > .sub-menu {
  display: inline-block;
  position: relative;
  padding-top: 15px;
  padding-right: 0;
  padding-left: 0; 
  text-align: right;
}
  .new-style a{
    color: white;
    text-align: right;
    text-decoration: none;
  }
.new-style ul li{
   list-style: none;
  display: block;
  text-align: right;
  display: block;
}
.new-style  .sidenavs li .sub-menu {display: none;}
.new-style ul li .sub-menu :hover{display: block;background-color: unset;}
.new-style .sidenavs >.menu-item-has-children:hover >.sub-menu {
  display:block;
  position: relative;
  padding-top: 15px;
  padding-right: 0;
  padding-left: 0;
}
.new-style  .menu-item-has-children .sub-menu > .menu-item-has-children:hover > .sub-menu {
  display: block;
  position: relative;
  padding-top: 15px;
  padding-right: 0;
  padding-left: 0;
  width: 250px;
  text-align: right;
  background-color: transparent;}
 .site-titless{
  padding-top: 8px;
 }
@media screen and (max-width: 1200px) {
.studyshoot-header {display: none;}}
@media screen and (min-width: 1200px) {
.mobile-header {display: none;}}

فقط قم بنسخ الكود الأول وضعه في ملف header.php , والكود الثاني في ملف style.css  , وستحصل بذلك على قائمة لموقعك الالكتروني , تستطيع اللعب والتحكم بالتنسيق كما تريد , كالحجم والعرض , والالوان وغيره , فقط عليك ان تفهم العملية ,

معاية المحتوى بعد تعديل القائمة الرئيسية Header

القائم ة التي ستظهر على الشاشات اقل من 1200
القائم ة التي ستظهر على الشاشات اقل من 1200
القائم ة التي ستظهر على الشاشات اكير من 1200
تعديل القائمة الرئيسية Header

ملاحظات حول اضافة قوائم ووردبريس Header و انشاء Navigation Menu

في القائمة التي ستعمل على الشاشات الاعرض من 1200 , قمت بتنسيقها من دون الرجوع الى تنسيق Bootstrap , ولكن القائمة التي ستعمل على الشاشات الاقل عرضاً من 1200 قمت باستخدام تنسيق Bootstrap , يمكنك استخدام تنسيق Bootstrap لعمل قائمة واحدة متناسقة مع كل الشاشات ولكن الهدف هو التعلّم هنا , لذلك قمت بعرض مثالين متتاليين لهذه العملية ..


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

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

ملاحظة , هناك الف فكرة وطريقة لتنسيق و انشاء Navigation Menu h; تعديل القائمة الرئيسية Header المتناسقة مع كل الشاشات في وورد بريس , ولكن هذه الطريقة المثلى لتعلم انشاء القوائم , قم بقراءة الكود بشكل صحيح , وقم بتفسير كل سطر بمعناه .. اذا احتجت الى مساعدة اخبرني بنموذج الاتصال الموجود في هذه الصفحة