كنا في الدرس 1 من سلسة تصميم ثيمات ووردبريس من الصفر تحدثنا عن الملفات الاساسية التي بمجموعها تُؤلف ثيم ووردبريس . وفي هذا الدرس سوف نعرف أكثر عن انشاء ترويسات الصفحات Header في ووردبريس
انشاء ترويسة الصفحات نعني بها Header , وهذا هو الاساس في قوالب ووردبريس , فمن دون ملف header.php لايمكن عمل أي شيء , وفي هذا الملف سوف نقوم باعطار الأوامر لاظهار القائمة الاساسية , اللوجو , وايقونة البحث أو زر لتسجيل الدخول أو شيء آخر بحسب ما تريد أنت كمطور ووردبريس أو صاحب موقع العمل به.
أول خطوة في انشاء الترويسة , هو اعطاء أمر من خلال تمرير كود في ملف Functions.php بانشاء قائمة اساسية التي تسمى Nav Menu, وهذه القائمة سوف تظهر في قسم قوائم في لوحة تحكم ووردبريس كي نقوم لاحقاً باضافة العناصر التي نريد عرضها سواء روابط أو صفحات أو تصنيفات
انشاء هيدر موقع ووردبريس
اذهب الى ملف functions.php وقم بكتابة الكود التالي من أجل انشاء هيدر موقع ووردبريس
register_nav_menus( array( 'top-menu'=> 'Top Menu', ));
Top Menu i, هو اسم القائمة
اذهب الآن الى قسم قوائم ووردبريس, ستجد اسم قائمة جديدة Top Menu
الان كما هو موضح بالصورة , قم بانشاء قائمة جديدة , واحفظها
استخدام و اظهار الهيدر في موقع ووردبريس في ملف Header.php
اذهب الآن الى ملف header.php وقم بكتابة الكود التالي الذي هو مسؤول عن اظهار القائمة الرئيسية في الصفحات في موقع ووردبريس , علماً أن هذه العملية ديناميكية , أي انه هذا الكود سوف يقوم باظهار عناصر القائمة في كل الصفحات والمقالات والارشيف وغيرها في موقع ووردبريس
يوضع هذا الكود اسفل علامة body مباشرة , راجع هنا كيف كتبنا الكود الأول في ملف الهيدر.
<nav class="navbar ">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<?php
wp_nav_menu(
array(
'theme_location'=> 'top-menu',
'menu_class'=>'top-bar',
));?>
</div>
<span onclick="openNav()">☰</span>
</nav>
تنسيق شكل الهيدر في موقع ووردبريس بشكل افضل
ماعليك معرفته هو أن القائمة الريسية ظهرت نعم , ولكن تحتاج الى العمل بأكواد html و css حتى تتمكن من اظهارها بشكل أفضل ..
تتكون القوائم في ووردبريس من عدة طبقات , الطبقة الاولى هي العناصر الاساسية , الطبقة الثانية هي التي تأتي بعد الطبقة الأولى , والطبقة الثالثة تأتي بعد الطبقة الثانية , وهكذا..
لذلك يجب استيعاب موضوع تنسيق الطبقات كلاً على حدا حتى تحصل على النتيجة المثلى وهذا تماماً ما سنفعله في هذه السلسلة الآن
انظر الصورتان قبل البدء لكي تتعرف أكثر عما كنت اتحدث عنه
انشاء هيدر موقع ووردبريس 
استخدام تنسيق الهيدر في ملف style.css
سنذهب الى ملف style.css وسنقوم بلصق كود css هناك ,
تنسيق الطبقة الأولى من الهيدر
.navbar {
display: flex;
justify-content: space-evenly;
align-items: center;
border-top: 4px solid #289dcc;
z-index: 1200;
padding: 0 50px 0 50px;
color: #0000;
margin: 0;
clear: both;
background-color: transparent;
}
.sidenav a {
color: #000;
display: block;
text-decoration: none;
float: none;
font-size: 14px;
-webkit-transition: all 0.3s;
text-transform: uppercase;
font-weight: 500;
line-height: 1em;
letter-spacing: .7px;
border-radius: 0;
padding: 18px 20px 18px 20px;
}
.navbar span,
.navbar .closebtn{
font-size: 30px;
color:#000;
}
.sidenav a:hover {
background-color: #1B252F;
color: #green;
}
.sidenav ul li:hover>a:after {
opacity: 1;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.sidenav ul li a:after {
position: absolute;
left: 0;
bottom: 1px;
width: 100%;
height: 2px;
background: #f4952f;
content: "";
opacity: 0;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.top-bar{
display: flex;
justify-content: center;
align-items: center;
list-style: none;
margin:0px;
}
.top-bar ul{
display: flex;
}
.sidenav li{
position: relative;
padding-left: 0px;
list-style: none;
padding-right: 0px;
margin:0;
padding:0;
}
تنسيق الطبقة الثانية والثالثة والرابعة من الهيدر :
.top-bar li .sub-menu{
display: none;
position: absolute;
z-index: 9666;
width: 200px;
}
.sidenav li .sub-menu a{
display: block;
color:white;
text-decoration: none;
font-size: 14px;
background: #040a15;
border-left: 4px solid orange;
}
.sidenav li .sub-menu a:hover{
text-decoration: none;
cursor: pointer;
}
.sidenav .sub-menu li .sub-menu {
right: 100%;
padding: 0px;
top: 0;
}
.top-bar > .menu-item-has-children:hover > .sub-menu{
display: block;
padding-right: 0;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children:hover .sub-menu {
display: block;
padding-right: 0;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
z-index: 999;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu{
display: block;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0%;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0%;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0%;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0;
}
الان ان لاحظت التغيير الذي حصل بعد الأكواد كلها التي قمنا بوضعها , فالهيدر اصبح جاهز للاستخدام في موقعك , ولكن فقط على الشاشات الكبيرة , وليس على الجوال أو التابلت فحسب , ولهذا سوف نحتاج الى اعطاء تنسيق جديد يدعم شكل Navigation Menu على الشاشات الصغيرة , وكما سنقوم بكتابة كود js اي جافا سكريبت لذلك
تسنيق هيدر موقع ووردبريس على الجوال
الان سنقوم بتنسيق واعطاء الشكل الآخر للهيدر على الشاشات الاصغر من 929 بكسل , ولهذا سنقوم بانشاء الكود التالي :
@media screen and (max-width: 992px) {
.navbar{
justify-content: space-around;
padding: 0px 0px 0px 0px ;
}
.top-bar ul{
justify-content: space-between;
display: block;
background-color: black;
background-image: linear-gradient(90deg,#fff 0%,#fff 80%);
clear: both;
padding:0px 0px 0px 0px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1200;
top: 0;
left: 0;
background-color: transparent;
background-image: linear-gradient(220deg,#4c41b9 0%,#00ff83 100%);
overflow-x: hidden;
transition: .5s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 #ccc;
padding-top: 60px;
border-top: 5px solid #fcb900;
}
.sidenav a{
padding: 22px;
}
.sidenav a:hover {
text-decoration: none;
color: white;
}
.top-bar{
display: block;
justify-content: unset;
align-items: unset;
list-style: none;
margin:0px;
padding: 0px;
}
.sidenav li{
position: relative;
padding-left: 0px;
list-style: none;
padding-right: 0px;
margin: 0;
}
.top-bar li .sub-menu{
display: none;
position: absolute;
z-index: 9666;
}
.sidenav li .sub-menu a{
display: block;
font-size: 14px;
border-left: 1px solid orange;
}
.sidenav li .sub-menu a:hover{
text-decoration: none;
cursor: pointer;
}
.sidenav .sub-menu li .sub-menu {
right: 0%;
top: 0;
}
.top-bar > .menu-item-has-children:hover > .sub-menu{
display: block;
padding: 0px;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children:hover .sub-menu {
display: block;
padding: 0px;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
z-index: 999;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0;
padding: 0px;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu{
display: block;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu {
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
right: 100%;
left: 0%;
padding: 0px;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0%;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0%;
padding: 0px;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu{
display: none;
}
.top-bar .menu-item-has-children .sub-menu >.menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu .menu-item-has-children .sub-menu :hover.menu-item-has-children .sub-menu {
display: block;
top: 100%;
right: 0;
padding: 0px;
}
}
ان كنت تلاحظ أنه لازال هناك بعض الاجراءات التي يجب فعلها , لكي نقوم باخفاء عنصر القائمة و ايقونة الاغلاق على الشاشات الاكبر من 992 و اظهارها على الشاشات الاصغر من ذلك الحجم ..
كود css لاخفاء العناصر للشاشات الكبيرة هو :
@media screen and (min-width: 992px) {
.navbar span,
.navbar .closebtn{
display: none;
}
}
الان , لكي نقوم بتفعيل عنصر القائمة على شاشات الجوال الاصغر من 992px يجب أن نقوم بكتابة كود جافا سكريبت بسيط , وهو كالتالي :
function openNav() {
document.getElementById("mySidenav").style.width = "290px", document.getElementById("main").style.marginLeft = "250px", document.body.style.backgroundColor = "rgba(0,0,0,0.4)"
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0", document.getElementById("main").style.marginLeft = "0", document.body.style.backgroundColor = "white"
}
الان إن لاحظت التغييرات , كل شيء على مايرام .. اصبح لدينا هيدر , وبداخله يوجد القائمة الرئيسية منسقة بشكل كامل على الشاشات العريضة والشاشات الاقل عرضاً ( الجوال ) . تستطيع انت التحكم بتنسيق الالوان والخطوط كما تريد , مايهمني في هذه السلسة هو اعطاء الجوهر الكامل في انشاء ترويسة الصفحات في موقع ووردبريس .
اظهار زر تسجيل الدخول في هيدر موقع ووردبريس
لكي نقوم باظهار زر يجب أن نقوم بكتابة كود html , في ملف header.php . وهذا الكود سوف سعرض لنا هذا الزر الذي سنقوم بتسميته مثلاً : تسجيل الدخول .
اذهب الى ملف header.php ثم قم بلصق الكود التالي قبل اغلاق علامة nav مباشرة
<a href="https://wpmrj3.com/" class="btn "> تسجيل الدخول </a>
الآن بين علامتي “” تستطيع وضع الرابط التي تريد .أما بالنسبة لتنسيق شكل الزر فيمكن ايضاً استخدام الكلاس btn التي عرفنا الزر به , في ملف css بالكود التالي
.btn {
border-radius: 3px;
text-align: center;
padding: 8px 22px;
font-size: 15px;
margin: 5px;
color: white;
transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,-webkit-border-radius .3s,-webkit-box-shadow .3s;
background-color: #191e23;
}
اظهار اللوجو في هيدر موقع ووردبريس
لكي نقوم بعملية اظهار اللوجو , يجب أولاً أن نقوم بتعريف خاصية انشاء اللوجو التي يتيحها لنا ووردبريس كمنصة بناء المواقع الالكترونية , لذلك سنقوم بكتابة كود في ملف functions.php
add_theme_support( 'custom-logo', array( 'height' => 150, 'width' => 140, 'flex-height' => true, 'flex-width' => true, 'header-text' => array( 'site-title', 'site-description' ), ) );
كما تلاحظ . قمنا باعطاء اللوجو في السابق أبعاد وهي 150 طول / 140 عرض .. تستطيع تعديل هذه الابعاد كما تريد من الكود السابق , وا التعديل عليها بواسطة css كما في الاسفل .
والآن لعرض اللوجو في الهيدر نحتاج الى وضع سطر الكود التالي في ملف header.php بعد الكود الذي اظهرنا به الزر السابق وقبل اغلاق علامة </nav> مباشرة
<?php the_custom_logo(); ?>
الان تستطيع أن تقوم بتنسيق صورة اللوجو كما تريد … يمكن بالشكل التالي مثلاً :
.navbar img{
height: 180px;
width: 32%;
}
الشكل النهائي يجب أن يكون كالتالي :
انتهى الى الآن درس انشاء قالب ووردبريس من الصفر – انشاء ترويسة الصفحات 2 , اترك لنا تعليق في حال وُجد أي سؤال لديك أو افادة .