تصميم ترويسة وتذييل قالب ووردبريس | التطبيق العملي (2) لتطوير قالب ووردبريس
في الدرس السابق من سلسلة تطوير قوالب ووردبريس (التطبيق العملي 1) بدأنا بإعداد ملف نموذج القالب الأساسي index.php الذي يهتم بعرض المحتوى الأساسي لصفحات القالب. وفي درس اليوم من سلسلة تطويرقوالب ووردبريس من الصفر سوف نشرح كيفية إنشاء ترويسة وتذييل مخصص لقالب ووردبريس الخاص بنا.
وكنا قد شرحنا أن استدعاء دالة get_header () في أي ملف تمبلت تخبر ووردبريس بأن يقوم بتضمين ملف الترويسة header.php، واستدعاء الدالة get_footer () في أي ملف تمبلت تخبر ووردبريس بأن يقوم بتضمين ملف footer.php.
في ملف index.php قمنا باستدعينا هاتين الدالتين لكننا اعتمدنا على هيدر وفوتر افتراضيين لقالب احتياطي يوفره لنا ووردبريس، واليوم سنعمل على تخصيص الهيدر والفوتروتصميمهما وفق متطلبات قالبنا.
إنشاء ملف ترويسة القالب header.php
قم بإنشاء ملف جديد باسم header.php ضمن مجلد القالب الخاص بك، ضمن هذا الملف سوف نكتب الأكواد اللازمة لجلب محتوى الهيدر المطلوب حسب تصميم قالبنا.
يتضمن هذا الملف كافة الأكواد التي تستدعى قبل البدء بعرض محتوى الصفحة الرئيسي main content ضمن الوسم <main> فهو يتضمن عادة (الوسم <head> ووسم الفتح <body> والوسم <header> الذي سيجمع جزء المحتوى الضروري في ترويسة كل للصفحة والظاهر قبل المحتوى الفعلي للصفحة)
وكما وضحنا في المخطط الشبكي للقالب الذي أدرجناه في الدرس السابق يجب أن يعرض قالبنا ضمن الترويسة <header> كل من لوجو الموقع على اليسار وقائمة التنقل الرئيسية على اليمين، كما نحتاج قبل ذلك لعرض مجموعة من الأكواد الأساسية في وسم head كما سنشرح بالتفصيل في فقراتنا التالية.
1.إضافة البيانات الأساسية للصفحات
قبل البدء بجلب البيانات المطلوب عرضها في ترويسة الموقع هناك بعض الأمور الهامة التي يجب أن نضمنها في الوسم <head> وهو الجزء الغير ظاهر في الصفحة كوسوم وعناصر HTML الهيكلية الأساسية مثل Doctype الذي يخبر المتصفح بكيفية تفسير HTML، ومجموعة المحارف charset التي تستخدمها في الموقع أو المدونة، وتقوم بضبط عرض منفذ العرض viewport على عرض الجهاز الذي تستخدمه
تجدر الملاحظة أننا هنا قمنا بإعطاء الوسم HTML الكلاس class=”no-js” وهذه طريقة تمكن المطورين من تصميم الصفحات مع أو دون أكواد جافاسكريبت. فمن خلال تعيين هذا الصف يمكن استخدام أكواد CSS فقط من أجل تصميم الصفحات الخالية من JavaScript. وبهذا يمكن للمطور تحديد تنسيقات CSS للمتصفحات التي تدعم تشغيل أكواد جافا سكريبت وتنسيقات أخرى للمتصفحات التي تقوم بتعطيلها. بمعنى أن الكلاس no-js لن يطبق إلا إذا تم تعطيل جافا سكريبت للمتصفح.
كما يجب أن نستدعي الوسم <title> الذي يعرض عنوان الموقع أعلى نافذة المتصفح ونكتب مجموعة من بيانات ميتا الوصفية التي تتضمن معلومات تعريفية مثل عنوان المستند أعلى المستعرض وفي نتائج محرك البحث، وتضع الروابط الضرورية link لملفات التنسيقات والسكربتات التي نستخدمها في الموقع.
وأخيرًا يفضل أن نستدعي خطاف الإجراء wp_head في حال احتاج القالب أو أحد الإضافات لإضافة بعض الأكواد لاحقًا.
ستكون بداية الملف بالشكل التالي.
<?php
/**
* ملف تمبلت الهيدر
* أي كل ما هو موجود فوق الوسم main
* @package ola1
* @subpackage olatheme
*/
?>
<!DOCTYPE html>
<html class="no-js" lang="<?php bloginfo("language"); ?>">
<head>
<!--- Basic Page Needs -->
<title>
<?php bloginfo("name"); ?>
</title>
<!-- Meta -->
<!-- mobile specific meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="description" content="Blog wordpress theme">>
<meta name="author" content="OLA SALEH">
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="https://www.wpar.net/create-wordpress-theme-from-scratch-2-header-and-footer/<?php echo get_template_directory_uri();?>/style.css">
<link rel="shortcut icon" href="https://www.wpar.net/create-wordpress-theme-from-scratch-2-header-and-footer/images/logo.png" >
<!-- Header hook -->
<?php wp_head(); ?>
</head>
2.عرض لوغو الموقع
بعدها نكتب الوسم <body> والوسم <header لنبدأ بعرض بيانات الترويسة الفعلية وهي لوجو الموقع ثم قائمة التنقل الرئيسية.
في قالبنا هذا سوف أضع صورة لوجو ثابتة logo.png داخل مجلد الصور الخاص بالقالب الخاص بنا وأعرضها بشكل ثابت ضمن الكود، لكن من الهام أن أوفر لصاحب الموقع طريقة لتغيير لوغو الموقع ولإضافة الشعار الخاص به متى ما أراد وأسهل طريقة لتحقيق ذلك هي من خلال الدالة الموقع في أي وقت.
أسهل طريقة لتحقيق ذلك هو من خلال الدالة add_theme_support التي شرحنا في درس سابق والتي تحتاج لأن نمرر لها اسم الميزة المطلوبة custom-logo، كما يمكننا تخصيص أبعاد اللوجو من خلال كتابة الكود التالي في ملف وظائف القالب functions.php وسوف تستدعى تلقائيًا عند تنفيذ القالب.
// دعم ميزة تخصيص اللوجو في القالب
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 100,
'flex-height' => true,
'flex-width' => true,
) );
هذا الكود سوف يخبر ووردبريس أن القالب الخاص بنا يدعم لوغو مخصصًا قابلاً للتحميل ويجعله يوفر قسم يمكنك من تغيير الشعار وتحميل أي صورة تريدها ضمن لوحة التحكم< المظهر< تخصيص<هوية الموقع كما يلي.
يمكننا من خلال النقر فوق زر تغيير الشعار تحميل صورة لعرضها ك شعار الموقع، وحجم الصورة المقترحة هنا هو 100×100 بيكسل. ولكن يفضل هنا أن نقوم بتحميل نسخة بضعف هذه الأبعاد اتظهر بشكل مثالب على الشاشات التي تدعم ميزة عرض شبكية العين(Retina Display)
مجرد إضافة صورة لوجو هنا لا يكفي لجعل ووردبريس يعرضها بشكل تلقائي. لماذا؟ لأنه لا يعرف ما هو المكان الذي تريد أن تعرضها فيه، لذا عليك استدعاء الدالة the_custom_logo() في المكان الذي تريد عرض هذا الشعار فيه ضمن ملف header.php
تقوم هذه الدالة بإنشاء كود HTML ورابط يوجه زائر الموقع إلى الصفحة الرئيسية ويكون مصدر الصورة هو عنوان URL لصورة الشعار الذي تم تحميله.
تكون الأكواد المطلوبة للقيام بهذه المهمة في ملف header.php كما يلي:
<header class="site-header">
<div class= "wrapper site-header__wrapper">
<!-- Website logo -->
<div class="logo">
<?php
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
else{
?>
<a class="logo" href="https://www.wpar.net/create-wordpress-theme-from-scratch-2-header-and-footer/<?php echo esc_url( home_url("/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="https://www.wpar.net/create-wordpress-theme-from-scratch-2-header-and-footer/<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo" width="100" height="100" />
</a>
<?php } ?>
</div>
3.عرض قائمة التنقل
بعد عرض الشعار عليك عرض قائمة التنقل الرئيسية في ترويسة الموقع، ولكن قبل إنشاء قائمة التنقل الخاصة قم بإنشاء بعض الصفحات في الموقع كي تتمن من إضافتها للقائمة عند إنشائها.
للقيام بذلك عد من جديد إلى الملف functions.php و قم بإضافة دعم القوائم لهذا القالب داخل الملف وقم بتسجيل مواضع عرض القوائم التي تريدها من خلال الدالة register_nav_menus ().
وإذا عدت إلى التصميم المبدأي للصفحتنا الرئيسية فسوف تلاحظ أنها تعرض قائمتين للتنقل. واحد في الترويسة وأخرى في في التذييل. لذا سنضيف في قالبنا قائمة رئيسية في الهيدر وقائمة في الفوتر كما يلي:
// تسجيل قائمة تنقل رئيسية وقائمة تنقل في الفوتر في القالب
function register_my_menus() {
register_nav_menus([
'primary' => __( 'القائمة الرئيسية' ),
'footer' => __( 'قائمة الفوتر' ),
]);
}
add_action( 'init', 'register_my_menus' );
اقرأ المزيد: إنشاء قوائم تنقل في قالب ووردبريس وتخصيصها بالكود البرمجي
هذا الكود سوف يتسبب في تسجيل مكانين لعرض القوائم داخل القالب الخاص بنا وفي هذه المواضع يمكن لصاحب الموقع إنشاء أي قائمة مخصصة وتحديد المكان الذي يريده لعرضها.
بعد هذا الكتابة إذا عدت للوحة التحكم واخترت المظهر قوائم ستجد هذين الموضعين، إذا قمت بإنشاء قوائمك، واخترت مكان العرض لها في أحد الأماكن التي سجلتها، ثم استعرضت الموقع فلن ترى هذه القوائم لأنك كذلك لم تخبر ووردبريس أين ستعرضها.
يجب أن تخبر ووردبريس بأنك تريد أن تعرض قائمة التنقل الرئيسية في ترويسة الموقع من خلال استدعاء الدالة wp_nav_menu() في الملف header.php ضمن الوسم <nav> كما يلي:
<nav class="header-menu-init-xl">
<?php
if ( has_nav_menu( 'primary' ) ) {
wp_nav_menu( array(
'theme_location' => 'primary',
'items_wrap' => '<ul>%3$s</ul>',
'menu_class' => 'my-navigation',
'fallback_cb' => false,
'depth'=> 1,)
);
} ?>
</nav>
عد الآن إلى المتصفح واستعرض الصفحة الرئيسية لموقعك، يجب ان تظهر لك القائمة الآن بالشكل التالي:
لعلك تتساءل لماذا ظهرت القائمة بهذا الشكل؟ الجواب لأن ووردبريس ينشئ بشكل افتراضي وسم قائمة ul ووسم li لكل عنصر من عناصرها كما أن ووردبريس يضيف مجموعة من كلاسات التنسيق الافتراضية سواء للقائمة أوغيرها من عناصر الصفحة بالاعتماد على عدة من عوامل لتساعدك في تنسيق موقعك.
بهذا نكون قد أضفنا العناصر المطلوبة لترويسة قالبنا، وفي الخطوة التالية يجب علينا إضافة التنسيقات لتظهر الترويسة بالشكل المطلوب.
4. تنسيق عناصر الترويسة (الشعار والقائمة)
كما ذكرنا للتو يضيف ووردبريس عدة كلاسات تنسيق افتراضية للعناصر ويمكنك إذا رغبت استخدام هذه الكلاسات في تصميم صفحة الويب الخاصة بك.
أو يمكنك بشكل بديل في حال كنت لا تريد استخدام هذه الفئات التي يتم إنشاؤها تلقائيًا العمل على إضافة كلاسات خاصة بك وإضافة التنسيقات اللازمة لها.
في هذه الفقرة سنضيف تصميم لعناصر ترويسة الموقع بالاعتماد على كلاساتنا الخاصة. لذا سنحررملف تنسيقات القالب style.css ونقوم بإضافة التنسيقات التالية إليه:
/* Header styles*/
.site-header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
div.logo
{ float: right;}
div.m_nav
{float: left;}
.header-menu-init-xl
{ display: initial !important; }
header .logo img {
flex-grow: 0;
max-width: 100%;
margin-right: 20px;
}
header nav ul {
align-items: flex-start;
display: flex;
gap: 2rem;
list-style-type: none;
padding: 0;
margin-left: 20px;
font-weight:700;
}
header nav ul li a {
color: inherit;
text-decoration: none;
}
بهذا نكون انتيهنا من ترويسة الموقع وستبدو بعد التنسيق بالشكل التالي:
إنشاء ملف تذييل القالب footer.php
الآن سوف نضيف العناصر المطلوبة لتذييل قالب ووردبريس دورًاالخاص بنا، فوتر قالبنا بسيط وقياسي، وهو يتضمن كل الكود الازم لعرضه بعد الوسم <main> .
سنعرض في الفوتر الخاص بقالبنا عنصرين هما قائمة الفوتر ونص حفظ الحقوق كما سنستدعي خطاف الإجراء wp_footer() للسماح بأي تعدلات لاحقة.
لذا ننشئ ملف جديد في مجلد القالب ونسميه footer.php ونضيف له الكود التالي:
<?php
/**
* ملف تمبلت الفوتر
* أي كل ما هو موجود بعد الوسم main
* @package ola1
* @subpackage olatheme
*/
?>
<footer>
<div class="container">
<!-- 1.footer nav -->
<div class="footer-nav">
<section>
<?php
if ( has_nav_menu( 'footer' ) ) {
wp_nav_menu(
array(
'theme_location' => 'footer',
'items_wrap' => '<ul class="inline">%3$s</ul>',
'fallback_cb' => false,
'depth' => 1,
)
);
}
?>
</section>
</div>
</footer>
<!-- 2.copyright -->
<div class="site-info">
<p class="site-info">
<?php printf( '%s.جميع الحقوق محفوظة© %s', get_bloginfo('name'), date( 'Y' ) ); ?>
</p>
</div>
</div>
<!-- 3.footer hook -->
<?php echo wp_footer(); ?>
</body>
</html>
الخطوة الأخيرة هي تنسيق عناصر الفوتر من خلال إضافة التنسيقات التالية لملف style.css
/* Footer styles*/
footer {
background: #553c9a;
color: white;
margin-top: 5rem;
padding: 2rem 1rem 2rem 1rem;
}
footer .footer-nav {
display: flex;
flex-wrap: wrap;
max-width: 1080px;
margin: 0 auto;
gap: 1rem;
justify-content: space-between;
}
footer .footer-nav section ul {
margin: 0;
padding: 0;
list-style-type: none;
}
footer .footer-nav section ul.inline {
display: flex;
gap: 2rem;
}
footer .footer-nav section ul li {
font-weight:400;
margin-bottom: 1rem;
}
footer .footer-nav section ul li a {
text-decoration: none;
color: white;
}
footer .footer-nav section ul li a:hover {
text-decoration: underline;
}
div.site-info{
background-color: #c1afd4;
padding: 2rem;
}
p.site-info {
font-weight:400;
text-align: center;
}
.site-info a:hover {
color: #553c9a; /* link color on hover */
}
الأن إذا استعرضنا موقعنا في المتصفح سيظهر الفوتر بالشكل التالي:
وستظهر الصفحة الرئيسية لموقعنا بعد تخصيص الترويسة والتذييل بالشكل التالي:
الخلاصة
تعلمنا في مقال اليوم كيفية إنشاء ترويسة وتذييل مخصص في قالب ووردبريس وكيفية تنسيقهما بما يوافق الشكل العام المطلوب لتصميم قالبنا. في الدروس القادمة من سلسلة تطوير قوالب ووردبريس سنبدأ بتخصيص باقي صفحات الموقع بحيث تعرض محتوى مختلف عن المحتوى المعروض في الصفحة الرئيسية.
يمكنك تحميل ملفات التطبيق العملي (2) لبناء قالب ووردبريس من خلال النقر على الزر التالي
المجتمع الأكبر عربيًا لمستخدمي ووردبريس
انضم لمجتمع قسم الووردبريس الأكبر عربيًا لدعم مستخدمي ووردبريس. من خلال المجتمع ستحصل على المساعدة اللازمة في إنشاء موقعك الووردبريس أو تخصيص متجرك على ووكومرس
