decorations””:[]}}]
في الدرس السابق من سلسلة تطوير قوالب ووردبريس (التطبيق العملي 1) بدأنا بإعداد ملف نموذج القالب الأساسي index.php الذي يهتم بعرض المحتوى الأساسي لصفحات القالب. وفي درس اليوم من سلسلة تطويرقوالب ووردبريس من الصفر سوف نشرح كيفية إنشاء ترويسة وتذييل مخصص لقالب ووردبريس الخاص بنا. وكنا قد شرحنا أن استدعاء دالة get_header () في أي ملف تمبلت تخبر ووردبريس بأن يقوم بتضمين ملف الترويسة header.php، واستدعاء الدالة get_footer () في أي ملف تمبلت تخبر ووردبريس بأن يقوم بتضمين ملف footer.php. في ملف index.php قمنا باستدعينا هاتين الدالتين لكننا اعتمدنا على هيدر وفوتر افتراضيين لقالب احتياطي يوفره لنا ووردبريس، واليوم سنعمل على تخصيص الهيدر والفوتروتصميمهما وفق متطلبات قالبنا.
Table Of Contents إنشاء ملف ترويسة القالب header.php 1.إضافة البيانات الأساسية للصفحات 2.عرض لوغو الموقع 3.عرض قائمة التنقل 4. تنسيق عناصر الترويسة (الشعار والقائمة) إنشاء ملف تذييل القالب footer.php الخلاصة إنشاء ملف ترويسة القالب header.php قم بإنشاء ملف جديد باسم header.php ضمن مجلد القالب الخاص بك، ضمن هذا الملف سوف نكتب الأكواد اللازمة لجلب محتوى الهيدر المطلوب حسب تصميم قالبنا. يتضمن هذا الملف كافة الأكواد التي تستدعى قبل البدء بعرض محتوى الصفحة الرئيسي main content ضمن الوسم
>
2.عرض لوغو الموقع بعدها نكتب الوسم
‘width’ => 100,
‘flex-height’ => true,
‘flex-width’ => true,
) );
هذا الكود سوف يخبر ووردبريس أن القالب الخاص بنا يدعم لوغو مخصصًا قابلاً للتحميل ويجعله يوفر قسم يمكنك من تغيير الشعار وتحميل أي صورة تريدها ضمن لوحة التحكم< المظهر< تخصيص<هوية الموقع كما يلي. يمكننا من خلال النقر فوق زر تغيير الشعار تحميل صورة لعرضها ك شعار الموقع، وحجم الصورة المقترحة هنا هو 100×100 بيكسل. ولكن يفضل هنا أن نقوم بتحميل نسخة بضعف هذه الأبعاد اتظهر بشكل مثالب على الشاشات التي تدعم ميزة عرض شبكية العين(Retina Display) مجرد إضافة صورة لوجو هنا لا يكفي لجعل ووردبريس يعرضها بشكل تلقائي. لماذا؟ لأنه لا يعرف ما هو المكان الذي تريد أن تعرضها فيه، لذا عليك استدعاء الدالة the_custom_logo() في المكان الذي تريد عرض هذا الشعار فيه ضمن ملف header.php تقوم هذه الدالة بإنشاء كود HTML ورابط يوجه زائر الموقع إلى الصفحة الرئيسية ويكون مصدر الصورة هو عنوان URL لصورة الشعار الذي تم تحميله. تكون الأكواد المطلوبة للقيام بهذه المهمة في ملف header.php كما يلي:
- %3$s
‘,
‘menu_class’ => ‘my-navigation’,
‘fallback_cb’ => false,
‘depth’=> 1,)
);
} ?>
عد الآن إلى المتصفح واستعرض الصفحة الرئيسية لموقعك، يجب ان تظهر لك القائمة الآن بالشكل التالي: لعلك تتساءل لماذا ظهرت القائمة بهذا الشكل؟ الجواب لأن ووردبريس ينشئ بشكل افتراضي وسم قائمة 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 الآن سوف نضيف العناصر المطلوبة لتذييل قالب ووردبريس دورًاالخاص بنا، فوتر قالبنا بسيط وقياسي، وهو يتضمن كل الكود الازم لعرضه بعد الوسم