ملف header.php

جدول المحتوى

دلوقتي دخلنا في مرحلة التقطيع الحقيقي للقالب، والملف اللي هنبدأ بيه هو🧠 درس: شرح ملف header.php – عنوان كل صفحة في موقع

1. مقدمة: يعني إيه `header.php`؟

ببساطة كده…
header.php هو الملف اللي بيظهر في أول كل صفحة على موقعك.
هو اللي بيتكتب فيه الجزء العلوي للموقع: اللوجو، المينيو، الروابط، الميتا تاجز… إلخ.

2. وظيفة الملف وليه هو مهم؟

📌 الوظائف الأساسية لـ header.php:

تحميل ملفات الـ CSS و JavaScript
عرض لوجو الموقع
عرض قائمة التنقل (Navigation)
تضمين أكواد SEO
بداية كود HTML (اللي فوق خالص في الصفحة)

يعني من الآخر…
ده الملف اللي بيحدد “الوش” بتاع موقعك 😎

3. إزاي ووردبريس بيستخدم `header.php`؟

أي صفحة بتتفتح على موقعك، ووردبريس بيروح يجيب header.php عن طريق الكود:

<?php get_header(); ?>

ده بيكون مكتوب في أول كل ملفات القالب زي:

index.php
page.php
single.php

4. محتويات ملف `header.php`

كود البداية بتاع HTML
الميتا تاجز (العنوان، الوصف…)
استدعاء wp_head()
بداية الـ <body>
لوجو الموقع أو اسم الموقع
قائمة التنقل (main menu)
أي أكواد ثابتة فوق الموقع (زي بانر، إعلان، شريط إشعارات)

5. الهيكل الأساسي للملف

ده شكل مبسط:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php wp_title(); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<header>
  <div class="site-logo">
    <a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
  </div>
  <nav>
    <?php
      wp_nav_menu([
        'theme_location' => 'main-menu',
        'container' => false,
      ]);
    ?>
  </nav>
</header>

6. الوسوم اللي لازم تكون موجودة

لازم يكون عندك:

<html> + language_attributes()
<meta charset> + bloginfo('charset')
<meta viewport> علشان الموبايل
wp_head() (مهم جدًا)
body_class() داخل وسم <body>

7. شرح وافي لكل سطر

السطر	معناه
`language_attributes()`	بيحط لغة الموقع تلقائيًا (مثلاً: lang=”ar”)
`bloginfo('charset')`	الترميز (UTF-8 غالبًا)
`wp_title()` أو `document_title()`	بيعرض عنوان الصفحة
`wp_head()`	لازم يكون قبل قفل الـ `</head>` علشان الإضافات تشتغل
`body_class()`	بيضيف كلاس لكل صفحة حسب نوعها (مثلاً: single, page-id-2)

8. استدعاء ملفات CSS وJS

ما تكتبش اللينكات يدويًا!
استخدم wp_enqueue_style() جوه functions.php علشان التحميل يكون صح.

لكن header.php لازم يكون فيه:

<?php wp_head(); ?>

لأن ووردبريس بيضخ الأكواد من functions.php هنا.

9. إضافة القوائم داخل الـ Header

لو كنت سجلت القائمة في functions.php كده:

register_nav_menus([
  'main-menu' => 'Main Menu'
]);

يبقى في header.php تكتب:

wp_nav_menu([
  'theme_location' => 'main-menu',
  'menu_class' => 'nav-menu'
]);

10. التوافق مع الموبايل (Responsive Header)

نصايحك يا معلم:

استخدم Flexbox أو Grid في CSS
فعل قائمة Hamburger للموبايل
جرب الهيدر على الشاشات الصغيرة

علشان الزائر ميفرشلك الموقع بسبب الهيدر 😅

11. ربط الملف مع باقي القالب

كل الصفحات الأساسية بتبدأ بـ:

<?php get_header(); ?>

وده اللي بيشغّل header.php.

12. الفرق بين `header.php` و `get_header()`

الكود	وظيفته
`header.php`	هو الملف نفسه اللي بيحتوي كود الهيدر
`get_header()`	هو دالة ووردبريس اللي بتستدعي الملف

13. تعدد الـ Headers – هل ممكن؟

أيوه طبعًا!

ممكن تعمل أكتر من نسخة زي:

header-home.php
header-landing.php

وتستدعيهم كده:

<?php get_header('home'); ?>

فايدة؟ تقدر تعمل شكل مختلف لكل نوع صفحة 🔥

14. ممارسات ونصايح مهمة

✅ استخدم تعليقات توضيحية داخل الكود
✅ ما تكتبش أكواد JavaScript داخل الهيدر
✅ خفف الكود – كل كيلوبايت بيفرق
✅ اربط ملف الهيدر بـ CSS مناسب
✅ اعتمد على عناصر HTML5 زي <header>, <nav> بلاش DIV كتير

15. مراجعة سريعة

header.php هو عنوان أي صفحة في موقعك
بيتحط فيه كود البداية، الميتا، اللوجو، القوائم
لازم يكون فيه wp_head() قبل نهاية <head>
بيتستدعى باستخدام get_header()
ممكن يكون عندك أكتر من هيدر مخصص

✅ الأسئلة الشائعة

س: لازم أستخدم wp_head()؟
ج: أيوه، مهم جدًا علشان الإضافات والبلجنز تشتغل صح.

س: ينفع أضيف جافاسكربت جوه الهيدر؟
ج: يفضل لأ، خليه في footer.php أو عن طريق wp_enqueue_script() في functions.php.

س: إيه اللي يحصل لو نسيت header.php؟
ج: الصفحة هتشتغل بس هتكون ناقصة، والإضافات مش هتشتغل صح.

نهاية الدرس: “العنوان دايمًا أول انطباع”

لو فكرت في الهيدر كـ “وش الموقع”،
يبقى لازم تهتم بيه زي ما تهتم بتصميم الواجهة نفسها.

الهيدر مش مجرد شكل،
ده بوابة تجربة المستخدم.
لو اتعمل صح، المستخدم هيكمل…
ولو بايظ؟ المستخدم هيقفل 😢

خلي شغلك دايمًا احترافي، والهيدر هو أول اختبار!

1. مقدمة: يعني إيه header.php؟