Crash Course WP Theme Dev | محمد أبوزيد

القوالب المجانية	القوالب المدفوعة
متاحة من موقع WordPress.org	متوفرة على مواقع زي ThemeForest
مناسبة للمبتدئين	فيها مزايا متقدمة
محدودة في الدعم	فيها دعم فني وشروحات
غالبًا أقل في الأداء	غالبًا أسرع ومحسّنة

المطلوب	استخدم
تغيير التصميم والشكل	قالب Theme
إضافة ميزة معينة	إضافة Plugin
تخصيص التصميم بالكامل	قالب + Elementor + ACF

القالب بيتكوّن من إيه؟

1. مقدمة

في الدروس اللي فاتت اتكلمنا عن الفرق بين القالب والإضافة، وفهمنا إن القالب بيتحكم في شكل الموقع.
طيب، القالب ده جواه إيه؟ بيتكوّن من إيه؟ إزاي بتشتغل الملفات دي مع بعض؟

اللي هنتكلم فيه النهاردة هو حجر الأساس لأي مطوّر قوالب ووردبريس 🔥

2. الملفات الأساسية في أي قالب ووردبريس

القالب بيتكون من ملفات كتير، لكن دول أهم 6 ملفات:

اسم الملف	الوظيفة
style.css	تنسيق الموقع + بيانات القالب
index.php	الصفحة الرئيسية الافتراضية
functions.php	تحميل الأكواد والخصائص
header.php	رأس الصفحة
footer.php	تذييل الصفحة
screenshot.png	صورة المعاينة داخل لوحة التحكم

3. ملف `style.css`: قلب القالب من برّا

ده أول ملف ووردبريس بيدور عليه علشان يعرف القالب ده إيه.
فيه معلومات القالب زي:

cssCopyEdit/*
Theme Name: Abozaid Tech Theme
Theme URI: https://abozaid.tech
Author: محمد أبو زيد
Description: قالب تعليمي لتعلم تطوير قوالب ووردبريس
Version: 1.0
*/

وطبعًا تقدر تضيف تحته أكواد CSS لتنسيق موقعك.

4. ملف `index.php`: لو مفيش غيره… هيشتغل لوحده

ده الملف الأساسي اللي ووردبريس بيرجع له لو مفيش ملفات تانية.

يعني لو معملتش page.php ولا archive.php، ووردبريس مش لاقي حاجة تعرض، هيستخدم index.php.

5. ملف `functions.php`: المُخ بتاع القالب

لو القالب عنده أي حاجة ديناميكية، أو عايز تضيف أكواد PHP، هتحطها هنا.

مثال:

إضافة دعم للقوائم
تسجيل sidebar
ربط ملفات CSS أو JS خارجية
أي كود PHP بتحب تشتغل عليه

6. `header.php` و `footer.php`: الرأس والتذييل

header.php = بيحتوي على <head>، شعار الموقع، القائمة العلوية
footer.php = بيحتوي على الفوتر، روابط التواصل، حقوق النشر

وبيتضافوا في باقي الملفات بكود زي:

phpCopyEdit<?php get_header(); ?>
...
<?php get_footer(); ?>

7. ملفات `single.php` و `page.php`

single.php = بيعرض المقالة الواحدة (Post)
page.php = بيعرض الصفحات (Page)

تقدر تخصص فيهم التنسيق، تحط أزرار، أو حتى تعرض محتوى مخصص.

8. ملف `screenshot.png`: صورة القالب

الصورة اللي بتظهر جوه لوحة التحكم.
يفضل تكون:

مقاس 1200×900 بيكسل
حجم صغير (أقل من 150KB)
تحفظها في المجلد الرئيسي للقالب باسم screenshot.png

9. ملفات إضافية (اختيارية بس مفيدة)

sidebar.php – الشريط الجانبي
archive.php – عرض أرشيف المقالات
search.php – صفحة نتائج البحث
404.php – لما الصفحة مش موجودة
front-page.php – لو عايز صفحة رئيسية مخصصة

10. Child Theme: النسخة الاحتياطية للتعديلات

لو بتشتغل على قالب جاهز، متعدّلش عليه مباشرة.
اعمل نسخة تانية اسمها Child Theme، وعدّل فيها براحتك.
ده بيساعدك إنك تحفظ التعديلات لما القالب يتحدث.

11. إزاي القالب بيتفاعل مع ووردبريس؟

ووردبريس بيشتغل بنظام القوالب الهرمي (Template Hierarchy).
يعني بيشوف نوع الصفحة إيه، ويدوّر على الملف المناسب بالترتيب.

مثلاً لو بتفتح صفحة مقالة، بيدوّر على:
single-post.php > لو مش لاقيه > single.php > لو مش لاقيه > index.php

12. ترتيب تحميل ملفات القالب

ووردبريس ليه نظام تحميل ملفات معين:

functions.php
style.css
الصفحة المطلوبة (single – page – index)
header.php
محتوى الصفحة
footer.php

13. أفضل طريقة لتنظيم ملفات القالب

خلي مجلداتك مرتبة كده:

bashCopyEdit/abozaid-theme/
├── style.css
├── index.php
├── header.php
├── footer.php
├── functions.php
├── page.php
├── single.php
├── screenshot.png
├── /assets/
│   ├── /css/
│   ├── /js/
│   └── /images/

14. أدوات هتفيدك وانت بتراجع ملفات القالب

Theme Check: للتأكد من جودة القالب
What The File (إضافة): تعرف الزائر بيشوف أي ملف
Query Monitor: لمراجعة الاستعلامات والملفات اللي بتشتغل

15. ملخص الدرس

كل قالب ليه ملفات أساسية: style.css، functions.php، index.php
فهم كل ملف بيسهّل التعديل والبناء
استخدم Child Theme لتعديلات آمنة
استخدم أدوات تنظيم علشان القالب يفضل سهل التطوير والصيانة

ملفات القالب الأساسية

1. مقدمة: يعني إيه ملفات أساسية في القالب؟

لما تيجي تبني قالب ووردبريس، أول حاجتين لازم يكونوا عندك هما:

style.css: ملف التنسيقات والمعلومات التعريفية
index.php: صفحة العرض الأساسية

دول زي عمودين في عمارة. من غيرهم ووردبريس مش هيعرف حتى إن الملف ده قالب، ولا هيشتغل من الأساس.

2. إيه هو ملف style.css؟

ده مش مجرد ملف CSS عادي، ده بطاقة تعريف القالب.

يعني فيه معلومات عن اسم القالب، المصمم، الإصدار، والستايلات اللي هتستخدمها في الموقع.

بدونه، ووردبريس مش هيعرض القالب في لوحة التحكم أصلاً.

3. إيه هو ملف index.php؟

ده الصفحة اللي ووردبريس بيرجع لها لما مش يلاقي ملفات تانية لعرض المحتوى.

يعني لو مفيش ملف مخصص للمقالات أو الصفحات، بيرجع لـ index.php.

وده معناه إنك لازم تبني الملف ده بشكل ذكي، يكون قابل لعرض حاجات مختلفة.

4. العلاقة بين الملفين في شغل القالب

التنين دول بيكملوا بعض:

style.css بيحدد الشكل والتنسيقات + تعريف القالب.
index.php بيعرض المحتوى.

يعني واحد بيقول “أنا قالب اسمي كذا وشكلي كذا”، والتاني بيقول “أنا هعرض المقالات كده والصفحات كده”.

5. محتويات style.css بالتفصيل

الجزء اللي فوق (التعريف):

/*
Theme Name: My First Theme
Theme URI: https://example.com
Author: Mohamed Abozaid
Author URI: https://abozaid.tech
Description: قالب ووردبريس بسيط للتجربة
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myfirsttheme
*/

بعد كده تبدأ تكتب CSS عادي:

body {
  background-color: #f5f5f5;
  font-family: 'Cairo', sans-serif;
}

6. محتويات index.php بالتفصيل

بيكون غالبًا بسيط في البداية:

<?php get_header(); ?>

<main>
  <?php
  if (have_posts()) :
    while (have_posts()) : the_post();
      the_title('<h2>', '</h2>');
      the_content();
    endwhile;
  else :
    echo '<p>مفيش محتوى</p>';
  endif;
  ?>
</main>

<?php get_footer(); ?>

وده بيعرض المقالات أو الصفحات بطريقة عامة.

7. إزاي ووردبريس بيتعامل مع الملفات دي؟

ووردبريس بيمشي حسب “تسلسل القالب” (Template Hierarchy).

لو فيه single.php هيعرضه، لو مفيش بيرجع لـ index.php.

لو القالب مفيهوش style.css، مش هيظهر أصلاً في لوحة التحكم!

8. الأخطاء الشائعة فيهم

نسيان تعليق معلومات القالب في style.css
كتابة CSS من غير ما تكون داخل style.css
نسيان استدعاء get_header() و get_footer() في index.php
استخدام HTML فقط بدون PHP داخل index.php

9. ازاي تختبر الملفات دي صح؟

ادخل على لوحة تحكم ووردبريس → مظهر → قوالب
لو القالب ظهر، يبقى style.css تمام
فعّل القالب وشوف لو بيعرض محتوى → يبقى index.php شغال
استخدم أدوات زي “Theme Check” أو “Query Monitor”

10. تطبيق عملي سريع لقالب بسيط

أنشئ فولدر جديد في /wp-content/themes/myfirsttheme

جواه حط:

`style.css`:

/*
Theme Name: My First Theme
*/
body {
  font-family: Arial, sans-serif;
}

`index.php`:

<!DOCTYPE html>
<html>
<head>
  <title><?php bloginfo('name'); ?></title>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
  <h1><?php bloginfo('name'); ?></h1>
  <p><?php bloginfo('description'); ?></p>
</body>
</html>

وفعل القالب، مبروك عليك أول قالب! 🎉

11. هل ممكن تشتغل من غيرهم؟

لا. أقل قالب لازم يحتوي على الاتنين دول:

style.css
index.php

بدونهم، مفيش قالب أصلاً.

12. تأثيرهم على السيو والسرعة

التنسيقات الذكية في style.css بتقلل حجم الصفحة
عرض المحتوى النظيف في index.php بيساعد في ترتيب جوجل
استخدام العناصر بشكل منظم بيساعد محركات البحث تفهم الموقع

13. نصايح للمبتدئين في كتابة أول قالب

✅ خليك بسيط في البداية
✅ افهم يعني إيه كل دالة بتكتبها
✅ جرب تعدل وتشوف الفرق
✅ استخدم قوالب جاهزة كمصدر تعليم
✅ متكسلش تجرب بنفسك

14. شوية أدوات هتساعدك في كتابة الملفات دي

VS Code: محرر الكود
LocalWP: سيرفر محلي
Theme Check Plugin: لفحص القالب
Developer Tools: لمتابعة التنسيق والتصميم
GitHub Copilot (لو متاح ليك): مساعد ذكي للكود

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

style.css هو الهوية والتنسيق
index.php هو الصفحة العامة لعرض المحتوى
الاتنين لازم يكونوا موجودين لأي قالب
شغلك النضيف عليهم بيأثر في السيو وسرعة الموقع
لو اتعلمتهم صح، تقدر تبدأ شغل فعلي في تصميم قوالب

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

س: ينفع أستخدم index.html بدل index.php؟
ج: لأ، ووردبريس مبني على PHP فلازم تكون index.php.

س: ينفع أكتب CSS في ملف خارجي؟
ج: ينفع، بس لازم ملف style.css يكون موجود فيه معلومات القالب.

س: لو نسيت أكتب التعليق في style.css؟
ج: القالب مش هيظهر في لوحة التحكم خالص!

خلاصة الدرس: “الملفات اللي بتدي روح للقالب”

دلوقتي عرفت إن أي قالب ووردبريس، حتى أبسط واحد، بيبدأ بملفين أساسيين:

واحد بيقول “أنا مين” (style.css)
والتاني بيقول “هعرض إيه وإزاي” (index.php)

ابدأ بيهم، وفهم كل تفصيلة فيهم، وبعد كده هتقدر تكمل باقي ملفات القالب وانت فاهم بتعمل إيه بالظبط.

مراجعة متحيّزة إيجابية:

بصراحة، لو قدرت تكتب ملف style.css وindex.php بإيدك، فأنت بدأت فعليًا مشوار كبير في عالم تطوير القوالب.

الملفين دول بيعتبروا المفتاح اللي بيفتحلك كل أبواب ووردبريس.

ومع الوقت، هتبدأ تضيف باقي الملفات وتفهم تسلسل القوالب وازاي تبني قوالب احترافية.
بس البداية دايمًا من هنا 💥

ملف functions.php

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

لما نقول إن ده “قلب القالب”، فإحنا مش بنبالغ!

functions.php هو المكان اللي بتضيف فيه كل الأكواد اللي بتخلي القالب شغال بذكاء.

عايز تضيف دعم لقائمة؟
تشغّل صورة مصغرة؟
تحمل ملفات CSS؟
تكتب دالة مخصصة؟
تتحكم في سلوك الموقع؟
👇
كل ده بيحصل من خلال functions.php

2. الملف ده بيشتغل إزاي؟

بمجرد ما المستخدم يفعّل القالب، ووردبريس بيقرأ ملف functions.php تلقائيًا.

يعني مش محتاج تنادي عليه يدويًا، هو شغال في الخلفية وبيقوم بدور مدير العمليات.

3. الفرق بينه وبين ملفات القالب التانية

الملف	الوظيفة
`style.css`	التنسيق والشكل العام
`index.php`	عرض المحتوى
`functions.php`	تشغيل خصائص القالب وإضافة أكواد برمجية مخصصة

ببساطة: ده مش ملف تصميم، ده ملف ذكاء وتحكم.

4. أهم الحاجات اللي ممكن تضيفها فيه

تشغيل خصائص القالب (thumbnails, menus, widgets)
تسجيل ملفات CSS وJS
إضافة أكواد الحماية أو التخصيص
كتابة دوال خاصة للقالب
التعديل على سلوك ووردبريس

5. كود تهيئة القالب – أول خطوة في `functions.php`

أول حاجة بتعملها هي تعريف خصائص القالب الأساسية:

function abozaid_theme_setup() {
  // دعم الصورة البارزة
  add_theme_support('post-thumbnails');

  // تسجيل القوائم
  register_nav_menus(array(
    'main-menu' => 'Main Menu',
    'footer-menu' => 'Footer Menu'
  ));

  // دعم العناوين
  add_theme_support('title-tag');
}

add_action('after_setup_theme', 'abozaid_theme_setup');

6. إضافة دعم للصور المصغرة، القوائم، والـ widgets

الصور المصغرة (Thumbnails):

add_theme_support('post-thumbnails');

القوائم:

register_nav_menus([
  'header-menu' => 'قائمة الهيدر',
  'footer-menu' => 'قائمة الفوتر'
]);

Widgets:

function abozaid_widgets_init() {
  register_sidebar([
    'name' => 'Sidebar',
    'id' => 'sidebar-1',
    'before_widget' => '<div class="widget">',
    'after_widget' => '</div>',
  ]);
}
add_action('widgets_init', 'abozaid_widgets_init');

7. تسجيل ملفات CSS وJS من خلاله

ده مهم جدًا علشان تنظم تحميل الملفات وتتحكم في السرعة:

function abozaid_enqueue_files() {
  wp_enqueue_style('main-style', get_stylesheet_uri());
  wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', [], false, true);
}
add_action('wp_enqueue_scripts', 'abozaid_enqueue_files');

8. إنشاء وظائف مخصصة للقالب

تقدر تضيف أكواد أو دوال بتخدم هدف معين:

function abozaid_custom_excerpt($length) {
  return 20;
}
add_filter('excerpt_length', 'abozaid_custom_excerpt');

9. استخدامه لتغيير سلوك ووردبريس

مثلاً تخفي الشريط العلوي من الواجهة:

add_filter('show_admin_bar', '__return_false');

أو تمنع ووردبريس من تحميل نسخته من jQuery:

function remove_default_jquery() {
  wp_deregister_script('jquery');
}
add_action('wp_enqueue_scripts', 'remove_default_jquery');

10. الفرق بينه وبين الإضافات (Plugins)

`functions.php`	Plugin
شغال مع القالب بس	شغال في أي موقع
بيتوقف لو القالب اتغيّر	بيكمل شغل حتى لو غيرت القالب
مناسب للحاجات الصغيرة	مناسب للوظائف الكبيرة والمعقدة

11. أفضل ممارسات كتابة الكود في `functions.php`

✅ استخدم أسماء فريدة للدوال (علشان ما تتعارضش مع الإضافات)
✅ قسم الكود باستخدام تعليقات
✅ استخدم add_action و add_filter بدل ما تكتب دوال عشوائية
✅ لو الكود كبير، افصله في ملفات تانية واستدعيه
✅ اعمل نسخة احتياطية قبل ما تعدل

12. أخطاء شائعة لازم تتجنبها

❌ تكتب دالة بنفس اسم دالة موجودة
❌ تنسى سيمي كولن
❌ تحميل ملفات JS أو CSS غلط
❌ نداء دوال ووردبريس قبل وقتها
❌ كتابة كود جوا functions.php بدون if function_exists

13. هل ينفع أستغنى عنه؟

تقنيًا… لأ
أي قالب محترم لازم يكون فيه functions.php
حتى لو فاضي! ووردبريس بيتوقع وجوده.

14. نسخة مطورة من الملف – مثال عملي

<?php
// تهيئة القالب
function abozaid_theme_setup() {
  add_theme_support('post-thumbnails');
  add_theme_support('title-tag');
  register_nav_menus([
    'main-menu' => 'Main Menu',
  ]);
}
add_action('after_setup_theme', 'abozaid_theme_setup');

// تحميل الملفات
function abozaid_enqueue_styles() {
  wp_enqueue_style('main-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'abozaid_enqueue_styles');

// إضافة ويدجت
function abozaid_widgets() {
  register_sidebar([
    'name' => 'Main Sidebar',
    'id' => 'sidebar-1',
    'before_widget' => '<section>',
    'after_widget' => '</section>',
  ]);
}
add_action('widgets_init', 'abozaid_widgets');

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

functions.php هو دماغ القالب
بتضيف فيه الخصائص والتخصيصات
بتسجل فيه الملفات والوظائف
بيتنفذ تلقائي أول ما القالب يتفعّل
لو فهمته صح، تقدر تتحكم في الموقع بشكل كامل

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

س: لو كتبت كود غلط في functions.php، إيه اللي هيحصل؟
ج: الموقع ممكن يظهر شاشة بيضاء أو “خطأ فادح”، لازم تعدل الكود من مدير الملفات أو FTP.

س: ينفع أستخدم دوال جافا سكريبت هنا؟
ج: لأ، ده ملف PHP، لكن تقدر تسجل ملفات JS منه.

س: هل ينفع أقسم الكود في ملفات تانية؟
ج: أيوه، الأفضل كده، واستخدم require أو include.

خلاصة الدرس: “الملف اللي بيحرّك كل حاجة!”

دلوقتي فهمت إنك مش مجرد بتصمم شكل في ووردبريس،
أنت بتبرمج عقله كمان!

functions.php مش بس ملف…
ده مركز التحكم في القالب، وهتستخدمه في كل تفصيلة صغيرة وكبيرة.

اكتبه صح، واحفظ عليه، وخليه منظم
علشان هو اللي هيخلي شغلك يبدو احترافي ومتين 🔥

مراجعة متحيزة إيجابية

بصراحة، أي مطور ووردبريس لازم يكون صاحبه الأول هو functions.php.

من غيره، القالب هيبقى مجرد ديكور ساكت!
لكن معاه، القالب بيبقى ديناميكي وذكي.

وكل لما تتعلم أكتر، هتحب الملف ده أكتر، وهتبدأ تبني دوالك بنفسك، وتتحكم في سلوك الموقع زي الساحر!

تفعيل القالب

يلا بينا نكمل كورس القوالب وندخل على مرحلة مهمة جدًا وهي

1. مقدمة: بعد ما خلصت القالب… إزاي تشغّله؟

خلصت تصميم القالب؟
زبطت الأكواد؟
عملت ملفات style.css, index.php, functions.php؟

جميل جدًا، دلوقتي جه وقت الجد:
تفعّل القالب وتبدأ تجربه على موقعك الحقيقي أو التجريبي.

2. تحضير ملفات القالب

قبل ما تفكر ترفعه، اتأكد إن الملفات دي موجودة داخل مجلد القالب:

style.css
index.php
functions.php
صورة للمعاينة screenshot.png (اختياري لكنها بتدي شكل احترافي)
أي ملفات تانية زي header.php, footer.php, إلخ

مثال لمجلد القالب:

abozaid-theme/
├── style.css
├── index.php
├── functions.php
├── screenshot.png

3. رفع القالب يدويًا (الطريقة التقليدية)

الطريقة 1: باستخدام FTP أو File Manager

ضغط مجلد القالب بصيغة .zip
افتح لوحة تحكم الاستضافة (cPanel مثلاً)
ادخل على المسار:
public_html/wp-content/themes/
ارفع ملف الـ ZIP وفك الضغط
القالب هيظهر تلقائيًا في لوحة تحكم ووردبريس

4. رفع القالب من داخل لوحة التحكم

الطريقة 2: من داخل ووردبريس نفسه

افتح لوحة التحكم > مظهر > قوالب
اضغط على “أضف جديد”
فوق هتلاقي زر “رفع قالب”
اختار ملف ZIP بتاع القالب
اضغط “التثبيت الآن”
بعد كده “تفعيل”

خلاص، القالب اشتغل 👏

5. التأكد من ظهور القالب في القائمة

روح على:
مظهر > قوالب
هتلاقي قالبك ظهر ضمن القوالب الموجودة
لو ضايف صورة screenshot.png هتظهر كمعاينة شكل القالب.

6. تفعيل القالب بنجاح

بعد ما تضغط “تفعيل”، الموقع هيبدأ يشتغل بالقالب الجديد.

جرب تدخل على الصفحة الرئيسية، وشوف شكله.

لو في أي خطأ في القالب، ووردبريس ممكن يعرض لك رسالة أو يوقف القالب ويرجع للقالب القديم.

7. خطوات ما بعد التفعيل

✅ اتأكد إن كل حاجة ظاهرة كويس (الهيدر، الفوتر، القوائم، المقالات…)
✅ اضبط الإعدادات من مظهر > تخصيص
✅ راجع القائمة الرئيسية – لو مسجلة في functions.php، هتظهر
✅ جرب تعرض مقالة، صفحة، أرشيف
✅ اختبر الموقع على الموبايل والتابلت

8. اختبار القالب على صفحات مختلفة

جرّب تفتح الصفحات دي:

الصفحة الرئيسية
صفحة مقالة واحدة
صفحة ثابتة
صفحة التصنيفات
صفحة البحث
صفحة الخطأ 404 (لو عندك ملف 404.php)

ده هيساعدك تتأكد إن كل حاجة شغالة تمام.

9. مراجعة السرعة والأداء

استخدم أدوات زي:

GTMetrix
PageSpeed Insights
Lighthouse

علشان تشوف سرعة القالب، ولو محتاج تحسينات.

10. استخدام أدوات المطور لفحص القالب

في المتصفح (Chrome مثلاً):

كليك يمين > Inspect
راجع الكود
شوف شكل التصميم على الموبايل
تابع الأخطاء في الكونسول (لو فيه)

ده بيساعدك تصلّح بسرعة.

11. مشاكل ممكن تقابلك بعد التفعيل

❌ الصفحة بيضا؟
يبقى فيه خطأ في الكود – راجع functions.php

❌ القوائم مش ظاهرة؟
يمكن نسيت تسجلها أو تعيّنها من لوحة التحكم

❌ الخطوط بايظة؟
راجع ملف style.css وتأكد إنه متحمل

❌ صور المقالات مش بتظهر؟
يبقى لازم تضيف دعم الصورة المصغرة

12. هل أقدر أفعّل القالب على موقع تجريبي؟

أكيد ✅

فيه كذا طريقة:

تستخدم Local by Flywheel أو XAMPP على جهازك
تعمل موقع فرعي staging لو بتستخدم استضافة قوية
تشتغل على دومين فرعي (مثلاً: dev.yoursite.com)

دي طريقة آمنة تجرب بيها من غير ما تأثر على الموقع الرئيسي.

13. تفعيل قالب Child لتعديل آمن

لو بتعدل على قالب موجود، أو هتجرب تعديلات كتير،
الأفضل تعمل قالب ابن (Child Theme).

ليه؟
علشان أي تحديثات مستقبلية للقالب الأصلي ما تمسحش شغلك.

14. نصايح قبل ما تفعّل القالب للناس

🔸 جرّبه بنفسك على أكتر من جهاز
🔸 اعرضه على ناس تاخد رأيهم في التصميم
🔸 اختبر التوافق مع إضافات مشهورة (زي Elementor، WooCommerce، Yoast)
🔸 اعمل Backup لموقعك قبل ما تغير أي حاجة
🔸 راجع الـ SEO والسرعة قبل الإطلاق الرسمي

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

القالب بيتفعّل من داخل لوحة التحكم أو يدويًا
تأكد من ملفات القالب الأساسية
جرّب الموقع بالكامل بعد التفعيل
راجع السرعة والتوافق
احذر من الأخطاء في الكود – ودايمًا اعمل نسخة احتياطية

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

س: القالب مش بيظهر بعد ما رفعته؟
ج: اتأكد إن المجلد نفسه فيه ملفات القالب مش متحطوط جواه مجلد تاني.

س: فين بلاقي القالب في لوحة التحكم؟
ج: مظهر > قوالب

س: الموقع بقى أبيض بعد التفعيل؟
ج: فيه خطأ في الكود – عدّل من FTP أو cPanel أو استخدم WP Debug

س: ينفع أفعّل القالب من WP CLI؟
ج: أيوه، لو بتشتغل على سيرفر تقدر تستخدم أمر:

wp theme activate your-theme-name

نهاية الدرس: “لحظة الاختبار الحقيقي”

تفعيل القالب هو اللحظة اللي بتشوف فيها تعبك كله بيتحوّل لموقع حقيقي قدامك.

هو الخطوة اللي بتخلي الكود يبقى واقع.
وكل لما تجرب وتختبر أكتر، كل لما القالب يطلع أنضج وأقوى.

كل تفصيلة صغيرة بتفرق… من سرعة التحميل، لعرض المقالة، للخط العربي.

ولو وصلت للمرحلة دي… 👏
فـ انت على أول طريق الاحتراف يا معلم!

ملف 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؟
ج: الصفحة هتشتغل بس هتكون ناقصة، والإضافات مش هتشتغل صح.

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

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

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

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

ملف footer.php

طالما فهمنا الهيدر، يبقى الطبيعي دلوقتي نكمل بالملف اللي بيقفل الصفحة:

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

الـ footer.php هو آخر جزء بيظهر في الصفحة،
ده اللي بيكون فيه:

حقوق النشر
روابط الصفحات المهمة
روابط السوشيال ميديا
سكريبتات جافاسكربت
أحيانًا القوائم التانية (secondary nav)
وكود إغلاق الموقع

2. الملف ده مكانه فين في القالب؟

المفروض يكون موجود في جذر مجلد القالب،
زيه زي header.php و index.php.

3. استخدامه في ووردبريس

بنستخدمه في أي صفحة عن طريق:

<?php get_footer(); ?>

وده بيتكتب في نهاية الملفات:

index.php
page.php
single.php

يعني أي صفحة لازم تبدأ بـ get_header() وتنتهي بـ get_footer().

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

قفل الـ <div> أو العناصر اللي اتفتحت في الهيدر أو الكونتنت
محتوى الفوتر (حقوق، قوائم…)
wp_footer() ← مهم جدًا
كود إغلاق </body> و </html>

5. الفرق بينه وبين `header.php`

`header.php`	`footer.php`
بداية الصفحة	نهاية الصفحة
فيه الهيدر والقائمة الرئيسية	فيه الحقوق، روابط تكميلية
يحتوي على `wp_head()`	يحتوي على `wp_footer()`
يبدأ HTML	يقفل HTML

6. الشكل العام للملف

مثال بسيط:

<footer>
  <div class="footer-widgets">
    <?php if ( is_active_sidebar( 'footer-widget' ) ) : ?>
      <?php dynamic_sidebar( 'footer-widget' ); ?>
    <?php endif; ?>
  </div>

  <div class="footer-info">
    <p>&copy; <?php echo date('Y'); ?> - <?php bloginfo('name'); ?></p>
  </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

7. شرح الأكواد الأساسية

الكود	الوظيفة
`dynamic_sidebar()`	بيعرض الويدجيت (زي قائمة أو نص)
`date('Y')`	بيطبع السنة الحالية تلقائي
`bloginfo('name')`	اسم الموقع
`wp_footer()`	بيحط أكواد السكريبتات والإضافات
`</body> و </html>`	قفل الصفحة

8. استدعاء القوائم والفوتر الديناميكي

لو عملت قائمة للفوتر في functions.php:

register_nav_menu('footer-menu', 'Footer Menu');

تستدعيها كده في footer.php:

<?php
  wp_nav_menu([
    'theme_location' => 'footer-menu',
    'menu_class' => 'footer-nav'
  ]);
?>

9. دمج ملفات الجافاسكربت

أحسن مكان لتحميل ملفات الـ JS هو قبل </body>

في functions.php، استخدم:

wp_enqueue_script('theme-script', get_template_directory_uri().'/assets/js/script.js', [], null, true);

علشان السكريبت يتحط في wp_footer() تلقائي.

10. أهمية `wp_footer()`

لو نسيت السطر ده:

<?php wp_footer(); ?>

أكواد إضافات زي Google Analytics، Elementor، WooCommerce، مش هتشتغل.
يعني حرفيًا، الموقع ممكن يبوظ 🤕

11. التوافق مع الـ Responsive Design

خلي تصميم الفوتر:

✅ يستخدم Flexbox أو Grid
✅ يشتغل كويس على الموبايل
✅ يختصر المحتوى بدل ما يزحمه
✅ يخلّي النصوص كبيرة وواضحة

12. تقسيم الفوتر لأعمدة (Widgets)

ممكن تعمل مكان للويدجيت بالفوتر كده:

if ( is_active_sidebar( 'footer-widget-1' ) ) {
  dynamic_sidebar( 'footer-widget-1' );
}

وتضيف الأعمدة دي من لوحة التحكم.

13. ربطه بباقي الملفات

أي صفحة فيها:

<?php get_footer(); ?>

يعني الصفحة دي بتسحب footer.php وتعرضه تلقائي.

14. ممارسات احترافية

✅ ما تنساش wp_footer()
✅ فعّل ويدجيتات للفوتر
✅ خفف الأكواد قد ما تقدر
✅ اجرب الفوتر على الشاشات الصغيرة
✅ استخدم <footer> بدل <div> علشان SEO

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

footer.php هو آخر جزء في الصفحة
لازم يحتوي على wp_footer()
بيتستدعى بكود get_footer()
بيتحط فيه الحقوق، السكريبتات، القوائم السفلية
لازم يكون Responsive

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

س: لو نسيت أضيف wp_footer()؟
ج: الموقع هيشتغل ناقص، الإضافات مش هتشتغل، وسرعة الموقع ممكن تتأثر.

س: ممكن أعمل أكتر من footer.php؟
ج: أيوه، زي: footer-home.php وتستخدم get_footer('home');.

س: الفوتر لازم يكون فيه قوائم؟
ج: لا، بس وجودها مفيد جدًا لتجربة المستخدم والسيو.

نهاية الدرس: “الوداع اللي يخلّي الزائر يرجع تاني”

الفوتر مش مجرد كلام صغير تحت الصفحة…
ده فرصتك الأخيرة تسيب انطباع حلو.

سواء كان فيه روابط، حقوق، أو تصميم أنيق…
لو تعاملت معاه باحتراف، الزائر هيحترم شغلك، وهيفكر يرجعلك.

خليك دايمًا بتفكر في كل تفصيلة 👌
عايز نكمل بملف index.php أو تشرحلي نبدأ عرض المقالات؟
قولي يا مبدع ✍️

ملف index.php

نكمل مع بعض وندخل على ملف مهم جدًا في أي قالب ووردبريس:
🔥 ملف index.php – العمود الفقري لعرض المحتوى

1. مقدمة: يعني إيه ملف `index.php`؟

ببساطة، هو الملف الرئيسي في أي قالب ووردبريس.
لو مفيش ملفات تانية زي home.php أو single.php، ووردبريس هيرجع لـ index.php.

يعني هو الملاذ الأخير لعرض المحتوى.

2. أهميته في القالب

مفيش قالب ووردبريس بيشتغل من غير الملف ده.
حتى لو القالب فاضي، لازم يحتوي على style.css و index.php.

3. ترتيب الأولوية في ووردبريس (Template Hierarchy)

لما تفتح صفحة معينة، ووردبريس بيدور على الملف الأنسب:

صفحة مقالة؟ يدور على single.php
صفحة رئيسية؟ يدور على home.php أو front-page.php
مش لاقي؟ يروح في الآخر لـ index.php

يعني هو الملف اللي عمره ما بيتساب ✌️

4. محتوى ملف `index.php` الأساسي

الملف بيكون عبارة عن:

استدعاء الهيدر
بداية الكونتينت
الحلقة (Loop)
استدعاء المقالات
استدعاء الفوتر

5. استخدام الحلقة (The Loop)

الحلقة هي اللي بتعرض المقالات أو البوستات.

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <div><?php the_excerpt(); ?></div>
  <?php endwhile; ?>
<?php else : ?>
  <p>مفيش محتوى لسه 🙁</p>
<?php endif; ?>

6. استدعاء ملفات الهيدر والفوتر

في بداية الملف:

<?php get_header(); ?>

وفي آخره:

<?php get_footer(); ?>

كده بتضمن تصميم موحّد لكل الصفحات.

7. تنسيق شكل المقالات

ممكن تضيف كود لتنسيق كل بوست، زي:

<article class="post">
  <h2><?php the_title(); ?></h2>
  <div class="post-meta"><?php the_date(); ?> - <?php the_author(); ?></div>
  <div class="post-content"><?php the_excerpt(); ?></div>
</article>

8. التعامل مع عدم وجود محتوى

لو مفيش مقالات، لازم تعرض رسالة:

<p>مافيش مقالات دلوقتي. تابعنا قريب 👀</p>

ده أحسن من صفحة فاضية تخوف الزائر 😅

9. الفرق بين `index.php` وملفات تانية

الملف	الاستخدام
`index.php`	ملف عام لعرض أي نوع محتوى
`single.php`	لعرض مقال واحد
`archive.php`	لعرض أرشيف تصنيفات أو وسوم
`page.php`	لعرض الصفحات الثابتة

10. مثال عملي لملف `index.php`

<?php get_header(); ?>

<div class="content-area">
  <main class="site-main">
    <?php if ( have_posts() ) : ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <article class="post">
          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <div class="excerpt"><?php the_excerpt(); ?></div>
        </article>
      <?php endwhile; ?>
    <?php else : ?>
      <p>مافيش مقالات حالياً</p>
    <?php endif; ?>
  </main>
</div>

<?php get_footer(); ?>

11. استخدام `get_template_part()` للتنظيم

بدل ما تكتب كل كود المقال، ممكن تعمل ملف:

template-parts/content.php

وبعدين تستدعيه كده:

<?php get_template_part('template-parts/content'); ?>

ده بيخلي القالب منظم وأسهل في الصيانة.

12. تحسين الأداء والسيو من خلاله

استخدم the_excerpt() بدل the_content() لسرعة التحميل
خلي روابط العناوين SEO-Friendly
أضف <article> و <section> علشان محركات البحث تفهم البنية

13. التوافق مع الجوال

✅ استخدم كلاس CSS زي responsive-grid
✅ خلي الخط كبير وواضح
✅ ما تستخدمش صور ضخمة
✅ خلّي التباعد كويس بين العناصر

14. ممارسات احترافية

اختبر الملف على صفحة أرشيف، الرئيسية، وتصنيف
فعّل صفحة بلوج من الإعدادات → قراءة
استخدم قوالب منفصلة للمقالات لو المشروع كبير
راعي بساطة الكود وعدم التكرار

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

index.php هو الأساس لأي قالب ووردبريس
بيحتوي على الحلقة Loop لعرض المحتوى
لازم يحتوي على get_header() و get_footer()
منظم وسهل التخصيص باستخدام get_template_part()
خفيف وسهل على الزوار والموبايلات

✅ أسئلة شائعة

س: ينفع أعتمد على index.php بس في القالب؟
ج: أيوه، بس مش احترافي. يفضل تفصل كل نوع محتوى في ملفه.

س: إيه الفرق بين index.php و home.php؟
ج: home.php لو موجود بيستخدم في الصفحة الرئيسية. لو مش موجود، ووردبريس بيروح لـ index.php.

س: ينفع أستخدم the_content() بدل the_excerpt()؟
ج: ممكن، بس هيعرض المقال بالكامل، وده تقيل شوية على الصفحة.

🎯 نهاية الدرس: “القلب النابض اللي بيعرض محتواك”

لو header.php هو وجه الموقع، و footer.php هو وداعه،
فـ index.php هو الجسم اللي شايل كل حاجة.

لو أتقنت الملف ده، فهمك له هيساعدك تتوسع وتبني باقي ملفات القالب بسهولة.
وصدقني… أول مرة تشوف محتوى بيتعرض من كود أنت كاتبه، هتحس بالفخر الحقيقي 💪

ملف single.php

دلوقتي جايين نشرح واحد من أهم ملفات القالب: ملف عرض المقالة الفردية
يلا نبدأ بدرس:

1. مقدمة: إيه هو `single.php`؟

ملف single.php هو المسئول عن عرض مقال واحد فقط
يعني لما الزائر يضغط على عنوان مقالة من المدونة، الملف ده هو اللي بيظهر له محتوى المقال بالكامل.

2. إمتى بيتستخدم؟

لما حد يدخل على رابط مقالة مباشرة
ووردبريس تلقائيًا بيستخدم single.php لو موجود
لو مش موجود، بيرجع يستخدم index.php كبديل

3. الفرق بينه وبين `index.php`

`index.php`	`single.php`
بيعرض لستة مقالات	بيعرض مقالة واحدة فقط
فيه الحلقة (Loop) بتكرار	الحلقة مرة واحدة فقط
مناسب للرئيسية/الأرشيف	مخصص لعرض المقال

4. شكل الملف العام

<?php get_header(); ?>

<div class="content-area">
  <main class="site-main">
    <?php
      if ( have_posts() ) :
        while ( have_posts() ) : the_post();
          // المحتوى هنا
        endwhile;
      endif;
    ?>
  </main>
</div>

<?php get_footer(); ?>

5. استدعاء الهيدر والفوتر

نفس أي ملف:

<?php get_header(); ?>
...
<?php get_footer(); ?>

عشان يفضل الشكل العام ثابت في كل الصفحات.

6. الحلقة The Loop للمقالة الواحدة

<?php
  if ( have_posts() ) :
    while ( have_posts() ) : the_post();
      // عرض العنوان والمحتوى
    endwhile;
  endif;
?>

هنا الحلقة بتتعامل مع مقال واحد بس.

7. عرض العنوان والمحتوى

<article class="single-post">
  <h1><?php the_title(); ?></h1>
  <div class="post-meta">
    <span>بواسطة: <?php the_author(); ?></span>
    <span>في: <?php the_date(); ?></span>
  </div>
  <div class="post-content">
    <?php the_content(); ?>
  </div>
</article>

8. عرض بيانات الكاتب والتاريخ

جزء مهم لزيادة الثقة:

<div class="post-meta">
  <span>الكاتب: <?php the_author(); ?></span> | 
  <span>بتاريخ: <?php the_time('j M Y'); ?></span>
</div>

9. عرض الصورة البارزة Featured Image

<?php if ( has_post_thumbnail() ) : ?>
  <div class="featured-image">
    <?php the_post_thumbnail('large'); ?>
  </div>
<?php endif; ?>

بتدي شكل احترافي للمقال.

10. إضافة التاجز والتصنيفات

<div class="post-taxonomy">
  <p>التصنيفات: <?php the_category(', '); ?></p>
  <p>الكلمات المفتاحية: <?php the_tags(); ?></p>
</div>

دي بتساعد في تحسين تجربة الزائر والسيو.

11. كود التعليقات

<?php
  if ( comments_open() || get_comments_number() ) {
    comments_template();
  }
?>

لو التعليقات مفعلة، هيظهر النموذج والتعليقات الموجودة.

12. تحسين SEO للمقال

✅ استخدم عناوين H2 و H3 جوه المحتوى
✅ أضف الميتا داتا زي الكاتب والتاريخ
✅ اربط المقال بمقالات تانية أو صفحات
✅ استخدم الصورة البارزة بحجم مناسب وAlt Text

13. إضافة مقالات مشابهة Related Posts

ممكن تضيفها بكود بسيط:

<?php
  $related = new WP_Query([
    'category__in' => wp_get_post_categories(get_the_ID()),
    'posts_per_page' => 3,
    'post__not_in' => [get_the_ID()]
  ]);

  if ( $related->have_posts() ) :
    echo '<h3>مقالات مشابهة:</h3><ul>';
    while ( $related->have_posts() ) : $related->the_post();
      echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    endwhile;
    echo '</ul>';
    wp_reset_postdata();
  endif;
?>

14. ممارسات احترافية

استخدم get_template_part() لتنظيم الكود
فعل Lazy Load للصور
خلي تصميم المقال مريح للعين (line height + spacing)
خلي فيه زر مشاركة على السوشيال ميديا

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

single.php لعرض مقالة واحدة فقط
بيحتوي على الحلقة The Loop لمقال واحد
فيه عنوان، محتوى، صورة، ميتا، تصنيفات، تعليقات
ممكن تضيف مقالات مشابهة
ضروري لتحسين السيو وتجربة المستخدم

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

س: لو معنديش single.php؟
ج: ووردبريس هيستخدم index.php، بس يفضل يكون فيه ملف single.php مخصص.

س: إزاي أضيف التعليقات؟
ج: بكود comments_template(); داخل الحلقة.

س: ينفع أعمل تصميم مختلف لكل مقالة؟
ج: أيوه، باستخدام single-posttype.php أو template-parts.

🔚 نهاية الدرس: “المقال اللي يخلّي الزائر يكمل التصفح”

لو عايز الزائر يتفاعل مع المحتوى، يرجع يزورك تاني، يشارك مقالاتك، ويثق في موقعك…
ابدأ من هنا.
من أول مقالة فردية، وملف single.php هو اللي هيخلي الزائر يحس إن شغلك احترافي ومريح 👌

ملف page.php

page.php هو الملف المسؤول عن عرض الصفحات الثابتة في ووردبريس.

1. مقدمة: إيه هو `page.php`؟

page.php هو الملف المسؤول عن عرض الصفحات الثابتة في ووردبريس.
زي صفحة “من نحن”، “اتصل بنا”، “الشروط والأحكام”، اللي مش بتتغير زي المقالات، وبتمثل محتوى ثابت.

2. الفرق بين `page.php` و `single.php`

`page.php`	`single.php`
للصفحات الثابتة	للمقالات الفردية
مش بيستخدم تصنيفات أو تاجز	بيستخدم تصنيفات وتاجز
تصميم بسيط ومباشر	تصميم غني بالمقالات

3. متى يستخدم `page.php`؟

لما تدخل على صفحة ثابتة من صفحات الموقع
لو مفيش قالب فرعي مخصص (Page Template)
لو عايز تحكم في شكل الصفحات بشكل موحد

4. البنية الأساسية للملف

<?php get_header(); ?>

<div class="content-area">
  <main class="site-main">
    <?php
      if ( have_posts() ) :
        while ( have_posts() ) : the_post();
          // هنا محتوى الصفحة
        endwhile;
      endif;
    ?>
  </main>
</div>

<?php get_footer(); ?>

5. استدعاء الهيدر والفوتر

زي أي صفحة في القالب، لازم تستخدم:

<?php get_header(); ?>
<?php get_footer(); ?>

6. الحلقة The Loop في `page.php`

حتى الصفحات الثابتة محتاجين نستخدم الحلقة عشان نعرض المحتوى:

<?php
  if ( have_posts() ) :
    while ( have_posts() ) : the_post();
      the_title('<h1>','</h1>');
      the_content();
    endwhile;
  endif;
?>

7. عرض العنوان والمحتوى

نستخدم the_title() لعرض عنوان الصفحة
و the_content() لعرض محتوى الصفحة.

8. التعامل مع القوالب الفرعية (Page Templates)

ممكن تعمل قوالب فرعية مختلفة لصفحات معينة، مثلاً:

page-contact.php لصفحة الاتصال
page-about.php لصفحة من نحن

علشان تدي كل صفحة تصميم خاص بيها.

9. إضافة الميتا والحقول المخصصة

لو عايز تضيف بيانات زي رقم تليفون أو خريطة، ممكن تستخدم حقول مخصصة وتعرضها بـ:

<?php echo get_post_meta(get_the_ID(), 'meta_key', true); ?>

10. تنسيق الصفحة لتحسين تجربة المستخدم

خلي التنسيق بسيط وواضح
استخدم خطوط مريحة
قسم المحتوى بفواصل وعناوين فرعية
ضيف صور أو فيديوهات لو مناسب

11. نصائح لتحسين SEO للصفحات

استخدم عنوان واضح وجذاب
خلي الرابط ثابت (Permalink) بسيط
اضف وصف ميتا
استخدم كلمات مفتاحية مناسبة
اربط الصفحات ببعض

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

page.php مسؤول عن الصفحات الثابتة
يشبه single.php لكنه أبسط
ممكن تعمل قوالب فرعية للصفحات المختلفة
لازم تستخدم الحلقة The Loop
اهتم بالتصميم وسهولة الاستخدام

13. أسئلة شائعة

س: ممكن أستخدم نفس تصميم المقالات للصفحات؟
ج: ممكن، لكن الأفضل تفرق عشان كل نوع محتوى ليه خصوصيته.

س: إيه الفرق بين الصفحة والمقالة؟
ج: الصفحة ثابتة ومستقلة، المقالة جزء من مدونة وله تصنيفات وتاريخ.

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

14. نهاية الدرس: “الصفحة الثابتة اللي بتعبر عن موقعك”

الصفحات الثابتة هي الواجهة الرسمية لموقعك.
لازم تهتم بتصميمها عشان تعبر عن هوية الموقع، تكون واضحة وسهلة الاستخدام، وتدي الزائر كل المعلومات اللي محتاجها.
لو عرفت تتحكم في page.php، هتقدر تبني موقع متكامل واحترافي بجد.

ملف sidebar.php

الـ Sidebar أو الشريط الجانبي هو العمود اللي بيظهر جنب المحتوى الأساسي في الموقع.

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

الـ Sidebar أو الشريط الجانبي هو العمود اللي بيظهر جنب المحتوى الأساسي في الموقع.
زي لما تدخل على مدونة أو موقع وتلاقي عمود فيه روابط، بحث، تصنيفات، إعلانات، أو ودجات تانية.

2. ليه بنستخدم sidebar في المواقع؟

عرض معلومات إضافية للزوار
تسهيل التنقل داخل الموقع
عرض الإعلانات أو روابط مهمة
تحسين تجربة المستخدم

3. ملف `sidebar.php` وظيفته إيه؟

sidebar.php هو الملف المسؤول عن تصميم ومحتوى الشريط الجانبي في القالب.
دايمًا بيتحط فيه أكواد PHP لاستدعاء الودجات وكود HTML لتنظيم الشكل.

4. طريقة استدعاء الـ sidebar في القالب

عشان تضيف الشريط الجانبي في أي مكان في القالب، تستخدم الكود ده:

<?php get_sidebar(); ?>

وبيجيب ملف sidebar.php ويعرض محتواه.

5. إضافة ودجات (Widgets) في الشريط الجانبي

لو عايز تضيف ودجات، لازم تسجل مكان للودجات في ملف functions.php:

function mytheme_widgets_init() {
  register_sidebar( array(
    'name'          => 'الشريط الجانبي الرئيسي',
    'id'            => 'main-sidebar',
    'before_widget' => '<div class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ));
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

بعد كده في sidebar.php:

<?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
  <?php dynamic_sidebar( 'main-sidebar' ); ?>
<?php endif; ?>

6. التحكم في محتوى الـ sidebar من لوحة التحكم

من خلال لوحة تحكم ووردبريس، تقدر تدخل على “المظهر” > “ودجات” وتضيف أو تعدل المحتوى في الشريط الجانبي بكل سهولة بدون كود.

7. تصميم الـ sidebar باستخدام CSS

ممكن تخلي الـ sidebar على جنب اليمين أو الشمال، وتتحكم في عرضه ولونه من خلال CSS. مثال:

.sidebar {
  width: 300px;
  float: right;
  background-color: #f5f5f5;
  padding: 20px;
}

8. التعامل مع sidebars متعددة

لو عندك أكثر من شريط جانبي (مثلاً واحد للصفحات، وواحد للمدونة)، تقدر تسجل أكتر من sidebar في functions.php وتستدعيهم في ملفات مختلفة.

9. نصائح لاستخدام sidebar بشكل احترافي

خلي المحتوى بسيط ومنظم
استخدم عناوين واضحة للودجات
ما تزودش عدد الودجات عشان متسببش ازدحام
خلي التصميم متوافق مع تصميم الموقع

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

sidebar.php مسؤول عن تصميم الشريط الجانبي
بيتم استدعاؤه بـ get_sidebar()
لازم تسجل Sidebar في functions.php عشان تضيف ودجات
التحكم في الودجات من لوحة التحكم
التصميم بالـ CSS بيحدد شكل ومكان الـ sidebar

11. أسئلة شائعة

س: هل لازم كل قالب يكون فيه sidebar؟
ج: لأ مش لازم، في قوالب بتبقى full width بدون شريط جانبي.

س: هل ممكن أغير مكان sidebar؟
ج: طبعًا، عن طريق تعديل CSS أو ترتيب الأكواد في القالب.

س: هل ممكن أستخدم ودجات مخصصة في sidebar؟
ج: أكيد، ممكن تضيف أي ودجات سواء الافتراضية أو اللي أنت ضايفها بإضافات.

12. نهاية الدرس: “العمود اللي بيخلي موقعك أكتر تفاعل”

الشريط الجانبي مش بس جزء من التصميم، ده أداة مهمة عشان تزود تفاعل الزائر مع موقعك.
لو عرفت تتحكم في sidebar.php وتستخدم الودجات بشكل صح، هتدي موقعك قيمة أكبر وتجربة مستخدم ممتازة.

الـ Widgets في ووردبريس

1. يعني إيه Widgets؟

الـ Widgets أو الويدجات هي قطع صغيرة من المحتوى أو الوظائف بتتحط في أماكن معينة زي الشريط الجانبي (Sidebar) أو الفوتر.
زي البحث، قائمة التصنيفات، روابط التواصل، قائمة الأخبار، وغيرها.

2. أهمية الـ Widgets في الموقع

بتديك تحكم سهل في إضافة محتوى جانبي بدون كود
بتسهل على الزوار التنقل في الموقع
بتخلي الموقع تفاعلي ومتجدد بسهولة

3. أنواع Widgets في ووردبريس

Widgets إفتراضية: زي البحث، التصنيفات، الأرشيف، النصوص
Widgets من إضافات: مثلاً ودجات وسائل التواصل أو الإعلانات
Widgets مخصصة: ممكن تصممها بنفسك لو حابب تضيف وظائف خاصة

4. ازاي تضيف Widgets في الشريط الجانبي (sidebar) أو الفوتر

اذهب للوحة تحكم ووردبريس
من قائمة “المظهر” اختار “ودجات”
هتلاقي أماكن متعددة للودجات حسب القالب (شريط جانبي، فوتر، إلخ)
اسحب الـ Widget اللي عايزه للمكان المناسب
عدل الإعدادات واضغط حفظ

5. ازاي تسجل مكان للـ Widgets في القالب (Sidebar / Footer)

لازم تسجل مساحة ودجات في ملف functions.php عشان تقدر تحط فيها Widgets. مثال:

function mytheme_widgets_init() {
  register_sidebar( array(
    'name'          => 'الشريط الجانبي الرئيسي',
    'id'            => 'main-sidebar',
    'before_widget' => '<div class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ));
  
  register_sidebar( array(
    'name'          => 'فوتر الموقع',
    'id'            => 'footer-area',
    'before_widget' => '<div class="footer-widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h4 class="footer-widget-title">',
    'after_title'   => '</h4>',
  ));
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

بعد كده في ملفات القالب بتستخدم:

<?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
  <?php dynamic_sidebar( 'main-sidebar' ); ?>
<?php endif; ?>

<?php if ( is_active_sidebar( 'footer-area' ) ) : ?>
  <?php dynamic_sidebar( 'footer-area' ); ?>
<?php endif; ?>

6. كيفية إضافة Widgets مخصصة (Custom Widgets)

لو حابب تضيف ودجة جديدة بنفسك، هتحتاج تكتب كلاس PHP صغير بيورث من WP_Widget، وده مثال بسيط:

class My_Custom_Widget extends WP_Widget {
  function __construct() {
    parent::__construct(
      'my_custom_widget',
      __('ودجة مخصصة', 'text_domain'),
      array( 'description' => __( 'ودجة بسيطة مخصصة', 'text_domain' ), )
    );
  }
  
  public function widget( $args, $instance ) {
    echo $args['before_widget'];
    echo '<p>دي ودجتي المخصصة!</p>';
    echo $args['after_widget'];
  }
}

function register_my_custom_widget() {
  register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'register_my_custom_widget' );

7. نصائح لاستخدام Widgets بشكل فعال

لا تزدحم الشريط الجانبي بعدد كبير من الودجات
استخدم عناوين واضحة للودجات
جرب الودجات على موبايل وسطح المكتب
خلي تصميم الودجات متناسق مع شكل الموقع

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

الـ Widgets هي أدوات صغيرة بتحطها في الشريط الجانبي أو الفوتر
تقدر تضيفها من لوحة تحكم ووردبريس بسهولة
لازم تسجل Sidebar أو مناطق ودجات في functions.php
ممكن تعمل ودجات مخصصة لو عندك خبرة في PHP

9. أسئلة شائعة

س: هل ممكن أستخدم ودجات في أماكن مختلفة؟
ج: أكيد، بس لازم تسجل كل مكان Sidebar مختلف.

س: هل لازم أعرف برمجة عشان أستخدم Widgets؟
ج: لأ، تقدر تستخدم الودجات الجاهزة من لوحة التحكم بسهولة.

س: ازاي أعدل شكل الويدجات؟
ج: من خلال CSS في ملف القالب.

10. نهاية الدرس: “الأدوات اللي بتخلي موقعك ذكي وسهل الاستخدام”

الـ Widgets بتديك مرونة كبيرة في تطوير موقعك بدون تعقيد، وهي الأداة اللي بتخلي الموقع يتفاعل أكتر مع الزوار.
لو عرفت تستخدمها صح، هتدي موقعك شكل احترافي وسهل التصفح.

Wordpress Loop

وده هيساعدك تتحكم في شكل عرض المقالات في home.php أو أي مكان تاني في القالب.

يعني إيه WordPress Loop؟

الـ Loop هو قلب أي قالب ووردبريس.
هو المسئول عن استرجاع وعرض المقالات أو الصفحات أو أي نوع محتوى تاني.

أول ما المستخدم يدخل صفحة، ووردبريس بيراجع الاستعلام (Query) ويبدأ يعرض النتائج من خلال الـ Loop.

الفرق بين loop الافتراضي و loop المخصص

النوع	بيشتغل على إيه	تحكمك فيه
الافتراضي	نتائج الاستعلام التلقائي	محدود
المخصص	باستخدام WP_Query	تحكم كامل بالمصادر، الترتيب، التصنيفات

كود الـ Loop الافتراضي

بيستخدم have_posts() و the_post():

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <article>
    <h2><?php the_title(); ?></h2>
    <p><?php the_excerpt(); ?></p>
  </article>
<?php endwhile; else : ?>
  <p>مفيش مقالات.</p>
<?php endif; ?>

إنشاء Loop مخصص باستخدام WP_Query

لما تحب تعرض مثلاً 5 مقالات بس من نوع معين، تستخدم WP_Query:

<?php
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 5
);

$query = new WP_Query( $args );

if ( $query->have_posts() ) :
  while ( $query->have_posts() ) : $query->the_post(); ?>
    <div class="custom-post">
      <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
      <p><?php the_excerpt(); ?></p>
    </div>
  <?php endwhile;
  wp_reset_postdata();
else :
  echo "<p>مفيش نتائج.</p>";
endif;
?>

تخصيص Loop لعرض المقالات من تصنيف معين

مثلاً لو عايز تعرض بس مقالات من التصنيف “أخبار”:

$args = array(
  'category_name' => 'أخبار',
  'posts_per_page' => 4
);

أو تعرض مقالات بـ tag معين:

$args = array(
  'tag' => 'وردبريس'
);

إضافة pagination للـ Loop

$args = array(
  'posts_per_page' => 3,
  'paged' => get_query_var('paged') ? get_query_var('paged') : 1
);

وبعد الـ loop:

the_posts_pagination(array(
  'mid_size' => 2,
  'prev_text' => __('« السابق'),
  'next_text' => __('التالي »'),
));

نصائح لتحسين SEO في الـ Loop

استخدم <h2> أو <h3> للعناوين
ضيف alt text للصور المصغرة
اربط المقالات بروابط دائمة صديقة للسيو
عرض excerpt مش كامل المقال لتقليل التكرار
استخدم noindex لو صفحة الأرشيف مش مهمة لمحركات البحث

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

هل لازم أستخدم WP_Query؟

مش لازم، لكن لو محتاج تحكم في عدد النتائج، الترتيب، النوع… يبقى هو الأفضل.

الفرق بين WP_Query و query_posts؟

WP_Query هو الطريقة الصحيحة. query_posts ممكن تخرب الكويري الأساسي وتسبب مشاكل.

ينفع أستخدم loop مخصص في أي مكان؟

أيوه، في أي قالب فرعي أو صفحة مخصصة أو حتى داخل shortcode.

ملخص سريع

Loop هو الأساس في عرض أي محتوى في ووردبريس.
عندك الـ loop الافتراضي، لكن تقدر تعمل loop مخصص باستخدام WP_Query.
تقدر تحدد نوع المقالات، عددها، ترتيبها، تصنيفها.
pagination مهمة جدًا لتجربة المستخدم.
تحسين SEO جوه loop يخلي مقالاتك تتصدر بسهولة.

نظرة إيجابية عن استخدام الـ Loop

ميزة ووردبريس القوية هي مرونته، والـ Loop من أهم الحاجات اللي بتخليك تتحكم في كل حاجة في طريقة عرض المحتوى.
تخيل إنك تقدر تبني صفحة خدمات، مدونة، أرشيف، أو حتى معرض صور، كله من خلال loop بسيط!
وبالتالي، إتقانك للـ WP_Query والـ Loop بيخليك محترف تطوير قوالب بكل ثقة.

قالب فرعي (Child Theme)

أدرس كامل عن إنشاء قالب فرعي (Child Theme) عشان تفهم ليه وإزاي تستخدمه صح.

1. ليه نستخدم قالب فرعي (Child Theme)؟

لما تعدل في قالب ووردبريس مباشر، ممكن يحصل مشكلة لما تيجي تحدث القالب الأصلي. التحديث يمسح كل التعديلات اللي عملتها!
عشان كده بنستخدم القالب الفرعي، اللي هو نسخة منفصلة بتورث وظائف القالب الأصلي، وتقدر تعدل فيها براحتك من غير ما تخاف إن التحديث يمسح شغلك.

2. إيه الفرق بين القالب الأصلي والقالب الفرعي؟

القالب الأصلي (Parent Theme): القالب الرئيسي اللي بيتبني عليه الموقع
القالب الفرعي (Child Theme): قالب بسيط بيورث وظائف وشكل القالب الأصلي، وممكن تعدل فيه بأمان

3. خطوات إنشاء قالب فرعي خطوة بخطوة

الخطوة 1: إنشاء فولدر جديد

روح لمجلد القوالب في موقعك:
wp-content/themes/
اعمل فولدر جديد باسم القالب الفرعي، مثلاً:
mytheme-child

الخطوة 2: إنشاء ملف style.css

جوه الفولدر الجديد، اعمل ملف style.css واكتب فيه:

/*
Theme Name: MyTheme Child
Template: mytheme
Description: قالب فرعي لتعديل آمن على MyTheme
Author: محمد ابوزيد
Version: 1.0
Text Domain: mytheme-child
*/

خلي بالك من السطر المهم Template: mytheme — ده اسم فولدر القالب الأصلي بالظبط.

الخطوة 3: إنشاء ملف functions.php

في نفس الفولدر، اعمل ملف functions.php واكتب فيه الكود ده عشان تحمل ستايل القالب الأصلي:

<?php
function mytheme_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_child_enqueue_styles' );

الخطوة 4: تفعيل القالب الفرعي

ادخل على لوحة تحكم ووردبريس
اذهب لـ “المظهر” > “القوالب”
هتلاقي قالب باسم “MyTheme Child”
فعّله

الخطوة 5: ابدأ التعديل بأمان

أي تعديل عايز تعمله في القالب، حطه في القالب الفرعي، سواء ملفات CSS أو PHP
التحديثات هتفضل بتنزل على القالب الأصلي، والتعديلات بتاعتك في القالب الفرعي هتفضل موجودة

4. أهم نصائح عند استخدام القالب الفرعي

دايمًا خلي اسم الفولدر في سطر Template مطابق بالظبط للقالب الأصلي
لو عايز تعدل ملفات PHP معينة، انسخ الملف من القالب الأصلي وحطه في القالب الفرعي وعدل عليه
ماتمسحش ملفات القالب الأصلي
تابع تحديثات القالب الأصلي بانتظام
جرب الموقع بعد كل تعديل عشان تتأكد إن كل حاجة شغالة

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

القالب الفرعي بيخليك تعدل بأمان بدون ما تخسر التعديلات بتاعتك بعد التحديث
لازم تعمل فولدر جديد وتكتب style.css وfunctions.php صح
فعل القالب من لوحة التحكم وابدأ شغل التعديلات عليه

6. أسئلة شائعة

س: هل لازم كل القوالب تدعم القوالب الفرعية؟
ج: معظم القوالب الشائعة بتدعمها، بس لازم تتأكد من وثائق القالب الأصلي.

س: هل ممكن أعمل قالب فرعي لقالب مجاني أو مدفوع؟
ج: أيوه، ممكن تعمله لأي قالب، سواء مجاني أو مدفوع.

س: هل لازم أنقل كل ملفات القالب الأصلي في القالب الفرعي؟
ج: لأ، فقط الملفات اللي عايز تعدلها.

7. نهاية الدرس: “التعديل الذكي على القالب بدون خوف”

باستخدام قالب فرعي، تقدر تعدل على موقعك بثقة وبدون خوف من ضياع شغلك مع التحديثات.
دي خطوة مهمة جداً لأي مطور ووردبريس محترف أو حتى لو أنت مبتدئ حابب تحافظ على شغلك.

التعديل على قالب فرعي (Child Theme)

1. مراجعة سريعة على القالب الفرعي

القالب الفرعي بيورث كل ملفات ووظائف القالب الأصلي
انت بتعدل فقط في الملفات اللي بتحطها جوه فولدر القالب الفرعي
لو ملف موجود في القالب الفرعي، وده نفس اسمه في القالب الأصلي، الووردبريس هيستخدم الملف الموجود في القالب الفرعي بدل الأصلي

2. تعديل ملف CSS في القالب الفرعي

لو عايز تعدل ألوان، خطوط، أو أي حاجة تخص التنسيق:

افتح ملف style.css في القالب الفرعي
ضيف أكواد CSS جديدة أو عدل على الموجودة
مثلاً لو عايز تغير لون خلفية الموقع:

body {
  background-color: #f0f0f0;
}

بعد الحفظ، حدث الصفحة وشوف التغيير

3. تعديل ملف PHP في القالب الفرعي

لو عايز تعدل في شكل الهيدر، الفوتر، أو غيره:

افتح فولدر القالب الأصلي
اختار الملف اللي عايز تعدل عليه مثلاً header.php
انسخه كله وانقله في فولدر القالب الفرعي
افتح نسخة header.php في القالب الفرعي وعدل اللي انت عايزه
لما تحفظ، ووردبريس هيفضل يستخدم نسخة القالب الفرعي

4. إضافة ملفات جديدة للقالب الفرعي

ممكن تضيف ملفات جديدة مش موجودة في القالب الأصلي وتستخدمها في موقعك:

مثلاً ملف custom-functions.php لو عايز تضيف دوال PHP جديدة
تقدر تستدعيه من functions.php في القالب الفرعي:

require get_stylesheet_directory() . '/custom-functions.php';

5. نصائح مهمة قبل وبعد التعديل

دايمًا اعمل نسخة احتياطية قبل التعديل
جرب التعديلات على بيئة اختبار مش مباشرة على الموقع الشغال
استخدم أدوات تصحيح الأخطاء لو حصل خطأ
تأكد من تحديث القالب الأصلي والقالب الفرعي باستمرار

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

القالب الفرعي مكان آمن للتعديل
أي ملف تضيفه أو تعدله في القالب الفرعي هيكون هو المتحكم في الموقع بدلاً من القالب الأصلي
تعديل CSS سهل وبسيط داخل style.css
تعديل PHP محتاج نسخ الملفات المراد تعديلها للقالب الفرعي

7. أسئلة شائعة

س: هل التعديل في القالب الفرعي بيأثر على تحديثات القالب الأصلي؟
ج: لأ، التحديثات بتتطبق على القالب الأصلي فقط، وتعديلاتك في الفرعي بتفضل موجودة.

س: ممكن أعدل أكتر من ملف في القالب الفرعي؟
ج: أكيد، وعدل على قد حاجتك.

س: هل لازم أكون مبرمج عشان أعدل على القالب الفرعي؟
ج: مش لازم محترف، بس لازم تعرف شوية CSS وPHP بسيطة.

8. نهاية الدرس: “التعديل بأمان واحترافية”

القالب الفرعي هو طريقك الآمن عشان تعدل على موقعك من غير ما تقلق من التحديثات.
ابدأ بالتعديل على style.css لو حابب تغير التصميم، ولما تكون جاهز تضيف أو تعدل ملفات PHP بسهولة.
لو احتجت أي مساعدة في التعديلات، أنا موجود معاك خطوة بخطوة!

استخدام Template Parts

1. يعني إيه Template Parts؟

لما بتبني قالب ووردبريس، ساعات كتير بتلاقي نفسك بتكرر أجزاء من الكود في صفحات مختلفة، زي الهيدر، الفوتر، أو أجزاء معينة من الصفحة.
Template Parts يعني تجزئة القالب لأجزاء صغيرة كل جزء في ملف لوحده.
بعد كده بتستدعي كل جزء لما تحتاجه باستخدام دالة خاصة.

2. ليه نستخدم Template Parts؟

تنظيم الكود: بدل ما يكون عندك ملف PHP ضخم، تقسم الكود لأجزاء صغيرة سهلة التعديل
إعادة الاستخدام: ممكن تستخدم نفس الجزء في أكتر من صفحة بسهولة
تسهيل الصيانة: لما تحب تغير حاجة في جزء معين، تعدلها في ملف واحد بس بدل ما تدور في كل الملفات
تعاون أسهل: لو فريق بيشتغل على القالب، كل واحد يشتغل على جزء معين

3. إزاي نستخدم get_template_part()؟

ووردبريس جايبلك دالة اسمها:

get_template_part( $slug, $name = null );

$slug: اسم الملف الأساسي بدون الامتداد (مثلاً header)
$name: إضافة اختيارية لو عايز تستدعي نسخة معينة (مثلاً header-home.php)

لو انت استدعيت:

get_template_part('header');

هيجيب ملف اسمه header.php من فولدر القالب.

لو كتبت:

get_template_part('header', 'home');

هيجيب ملف اسمه header-home.php.

4. مثال عملي على تقسيم الكود

مثلاً، عايز تنظم الهيدر بتاعك:

اعمل ملف اسمه header-top.php فيه الكود الخاص بالجزء العلوي من الهيدر
اعمل ملف header-nav.php فيه قائمة التنقل
في header.php تستدعي الاتنين دول:

<?php
get_template_part('header', 'top');
get_template_part('header', 'nav');
?>

كده لو عايز تعدل على قائمة التنقل، تروح تعدل في header-nav.php بس.

إزاي نستخدم get_template_part()؟ (مع مثال عملي)

لو عندك ملف header.php فيه كود كبير عايز تقسمه، ممكن تعمل كذا ملف:

ملف header-top.php فيه الجزء اللي فيه شعار الموقع
ملف header-nav.php فيه القائمة الرئيسية

مثال:

header-top.php

<div class="header-top">
  <h1>شعار الموقع هنا</h1>
  <p>مرحبا بك في موقعي</p>
</div>

header-nav.php

<nav class="main-navigation">
  <ul>
    <li><a href="/">الرئيسية</a></li>
    <li><a href="/blog">المدونة</a></li>
    <li><a href="/contact">اتصل بنا</a></li>
  </ul>
</nav>

header.php

<?php
get_template_part('header', 'top');
get_template_part('header', 'nav');
?>

لما تزور الموقع، ووردبريس هيجيب الأول كود header-top.php وبعده كود header-nav.php، وكأنهم في ملف واحد بس مقسمين عشان تنظيم أفضل.

5. نصائح مهمة عند استخدام Template Parts

خلي أسماء الملفات معبرة عشان تعرف كل جزء بيعمل إيه بسهولة
استخدم Template Parts لكل جزء بيتكرر في أكتر من صفحة
لو بتستخدم قالب فرعي، تقدر تضيف Template Parts جديدة أو تعدل اللي موجودة
دايمًا جرب التعديلات وشوف إذا في مشاكل

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

Template Parts بتنظم القالب لأجزاء صغيرة
تستخدم دالة get_template_part() لاستدعاء الأجزاء دي
بتوفرلك وقت وجهد في التعديل والصيانة
مثال: استدعاء get_template_part('header', 'nav') هيجيب ملف header-nav.php

7. أسئلة شائعة

س: هل لازم أستخدم Template Parts في كل القوالب؟
ج: مش لازم، بس دايمًا بتنصح بيها لأنها بتسهل الشغل.

س: هل Template Parts بتأثر على أداء الموقع؟
ج: لا، العكس ممكن تساعد في تحسين الكود وتنظيمه.

س: هل أقدر أستخدم Template Parts في القالب الفرعي؟
ج: أكيد، وممكن تضيف أو تعدل فيهم براحتك.

8. نهاية الدرس: “كود مرتب = موقع ناجح”

التقسيم باستخدام Template Parts هو سر كبير من أسرار القوالب الاحترافية.
خلي شغلك منظم ومرتب، وهتسهل عليك التعديل والتطوير وكمان تحسين الأداء.

ملف comments.php

1. يعني إيه ملف comments.php؟

ملف comments.php هو الملف المسؤول عن عرض كل التعليقات الخاصة بالبوست أو الصفحة، وكمان بيحتوي على نموذج يسمح للزوار يكتبوا تعليق جديد.
أي قالب ووردبريس احترافي لازم يحتوي على ملف ده عشان نظام التعليقات يشتغل كويس.

2. إزاي تعرض التعليقات في القالب؟

في ملف comments.php بنستخدم دالة ووردبريس:

if ( have_comments() ) {
    // عرض عدد التعليقات
    echo '<h3>' . get_comments_number() . ' تعليق</h3>';
    
    // عرض قائمة التعليقات
    wp_list_comments( array(
        'style'       => 'ol',       // القائمة بشكل مرتب ordered list
        'short_ping'  => true,       // عرض التعليقات الصغيرة (Pingbacks) بشكل مختصر
        'avatar_size' => 50          // حجم صورة المستخدم
    ));
}

الكود ده بيشوف هل فيه تعليقات ولا لأ، ولو فيه، بيعرضها بطريقة مرتبة وجميلة.

3. التحكم في شكل التعليقات

تقدر تتحكم في شكل التعليقات باستخدام callback function في wp_list_comments.
لو عايز شكل مخصص، تكتب دالة بتحدد تصميم التعليق، لكن عشان نبسط الموضوع ممكن تستخدم التصميم الافتراضي اللي ووردبريس بيقدمه.

4. إضافة نموذج إضافة تعليق

عشان تضيف نموذج إضافة تعليق في نهاية صفحة التعليقات، تستخدم:

comment_form();

الوظيفة دي بتجيب نموذج جاهز بشكل مرتب، واللي يكتب تعليقه هيتسجل في الموقع.

5. مثال كامل لملف comments.php

<?php
if ( post_password_required() ) {
    echo '<p>الموضوع ده محمي بكلمة سر، لازم تدخلها عشان تشوف التعليقات.</p>';
    return;
}
?>

<div id="comments" class="comments-area">

<?php if ( have_comments() ) : ?>
    <h3 class="comments-title">
        <?php
        $comments_number = get_comments_number();
        if ( $comments_number === 1 ) {
            echo 'تعليق واحد';
        } else {
            echo $comments_number . ' تعليقات';
        }
        ?>
    </h3>

    <ol class="comment-list">
        <?php
        wp_list_comments( array(
            'style'       => 'ol',
            'short_ping'  => true,
            'avatar_size' => 50,
        ) );
        ?>
    </ol>

<?php else : ?>
    <p>مافيش تعليقات لحد دلوقتي. كن أول واحد يعلق!</p>
<?php endif; ?>

<?php comment_form(); ?>

</div><!-- #comments -->

6. نصائح مهمة لإدارة التعليقات

فعل خاصية الموافقة اليدوية على التعليقات في إعدادات ووردبريس
استخدم إضافات مكافحة السبام زي Akismet
شجع الزوار على التعليق بإضافة نص ترحيبي أو دعوة في نموذج التعليقات
خلي شكل نموذج التعليقات بسيط وواضح

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

ملف comments.php بيعرض التعليقات ونموذج إضافة تعليق
بتستخدم have_comments() وwp_list_comments() لعرض التعليقات
بتستخدم comment_form() عشان تعرض نموذج إضافة تعليق
ممكن تخصص شكل التعليقات بدوال callback لكن الافتراضي كفاية للمبتدئين

8. أسئلة شائعة

س: أقدر أغير تصميم نموذج التعليقات؟
ج: أيوه، تقدر تعدل في إعدادات comment_form() أو تبني نموذجك بنفسك.

س: إزاي أمنع التعليقات السبام؟
ج: استخدم إضافة Akismet أو أي إضافة مضادة للسبام.

س: هل التعليقات بتظهر تلقائياً؟
ج: لا، لو فعلت الموافقة اليدوية لازم توافق عليها الأول.

9. كود جاهز لتخصيص نموذج التعليقات أو شرح تفصيلي؟

لو حابب تخصص شكل نموذج التعليقات بدل النموذج الافتراضي، ممكن تستخدم الدالة comment_form() مع مجموعة خيارات بتتحكم في النصوص والشكل بسهولة.

مثال عملي لتخصيص نموذج التعليقات:

<?php
$comments_args = array(
    'title_reply'          => 'اترك تعليقك هنا',
    'label_submit'         => 'أرسل التعليق',
    'comment_notes_before' => '<p>برجاء احترام قواعد النقاش.</p>',
    'comment_notes_after'  => '<p>شكراً لمشاركتك!</p>',
    'fields'               => array(
        'author' => '<p class="comment-form-author"><label>الاسم <span class="required">*</span></label><input type="text" name="author" required></p>',
        'email'  => '<p class="comment-form-email"><label>البريد الإلكتروني <span class="required">*</span></label><input type="email" name="email" required></p>',
    ),
    'comment_field'        => '<p class="comment-form-comment"><label>التعليق</label><textarea name="comment" required></textarea></p>',
);

comment_form($comments_args);
?>

شرح الكود:

'title_reply': عنوان فوق نموذج التعليق
'label_submit': نص زر الإرسال
'comment_notes_before' و 'comment_notes_after': نصوص قبل وبعد النموذج
'fields': الحقول الأساسية زي الاسم والإيميل
'comment_field': مربع نص التعليق

9. نهاية الدرس: “التعليقات روح الموقع وتواصل مع الزوار”

التعليقات بتدي الموقع حياة وروح، وبتخلي الزوار يتفاعلوا مع المحتوى بتاعك.
ملف comments.php هو الباب اللي بتفتح منه الحوار ده، فحافظ عليه نظيف ومنظم، وشجع جمهورك يشاركوا معاك دايمًا.

لو حابب نكمل مع دروس زي تخصيص نموذج التعليقات أو دمج إضافات تعليقات، قولي وأنا جاهز! ✌️

هل تحب كود جاهز لتخصيص نموذج التعليقات أو شرح تفصيلي؟

أكيد يا محمد، هزودلك القسم 10 بكود جاهز بسيط لتخصيص نموذج التعليقات مع شرح مبسط:

دعم القوائم (Menus)

1. ليه نضيف دعم القوائم في القالب؟

القوائم بتعتبر من أهم مكونات الموقع، لأنها بتخلي الزائر يقدر يتنقل بسهولة بين صفحات الموقع المختلفة.
لو القالب مش عامل دعم للقوائم، مش هتقدر تضيف أو تعدل القوائم من لوحة تحكم ووردبريس.

عشان كده لازم نسجل دعم القوائم في القالب ونعرّف الأماكن اللي هنظهر فيها القوائم دي.

2. تسجيل القوائم في ملف functions.php

ببساطة، بتستخدم الدالة register_nav_menus() أو register_nav_menu() لو عايز تسجل قائمة واحدة.

مثال لتسجيل أكتر من قائمة:

function abozaid_register_menus() {
    register_nav_menus( array(
        'main-menu'    => __('القائمة الرئيسية', 'abozaid'),
        'footer-menu'  => __('قائمة الفوتر', 'abozaid'),
    ) );
}
add_action('after_setup_theme', 'abozaid_register_menus');

شرح الكود:

بنسجل قائمتين: الرئيسية والفوتر
after_setup_theme عشان نسجل القوائم في الوقت الصح بعد تحميل القالب

3. عرض القوائم في القالب

لو عايز تعرض القائمة في الهيدر، تروح لملف header.php وتكتب الكود ده:

<?php
wp_nav_menu( array(
    'theme_location' => 'main-menu',
    'container'      => 'nav',
    'container_class'=> 'main-navigation',
    'menu_class'     => 'main-menu',
) );
?>

لو عايز تعرض قائمة الفوتر، في ملف footer.php:

<?php
wp_nav_menu( array(
    'theme_location' => 'footer-menu',
    'container'      => 'nav',
    'container_class'=> 'footer-navigation',
    'menu_class'     => 'footer-menu',
) );
?>

4. مثال عملي كامل

في ملف functions.php

function abozaid_register_menus() {
    register_nav_menus( array(
        'main-menu'   => __('القائمة الرئيسية', 'abozaid'),
        'footer-menu' => __('قائمة الفوتر', 'abozaid'),
    ) );
}
add_action('after_setup_theme', 'abozaid_register_menus');

في ملف header.php

<!DOCTYPE html>
<html>
<head>
    <title>موقعي</title>
    <?php wp_head(); ?>
</head>
<body>
<header>
    <?php
    wp_nav_menu( array(
        'theme_location' => 'main-menu',
        'container'      => 'nav',
        'container_class'=> 'main-navigation',
        'menu_class'     => 'main-menu',
    ) );
    ?>
</header>

في ملف footer.php

<footer>
    <?php
    wp_nav_menu( array(
        'theme_location' => 'footer-menu',
        'container'      => 'nav',
        'container_class'=> 'footer-navigation',
        'menu_class'     => 'footer-menu',
    ) );
    ?>
</footer>
<?php wp_footer(); ?>
</body>
</html>

5. نصائح مهمة

بعد تسجيل القوائم، هتلاقيها في لوحة تحكم ووردبريس تحت مظهر > قوائم تقدر تضيف وتعدل عليها بسهولة.
لو ما ظهرش عندك مكان تعيين القوائم، اتأكد إنك سجلت القوائم صح في functions.php وبالاسم الصح.
استخدم CSS عشان تنسق شكل القوائم اللي ظهرت على موقعك.

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

تسجيل القوائم في functions.php ضروري عشان تظهر في لوحة التحكم
عرض القوائم بيكون بدالة wp_nav_menu() مع تحديد theme_location
تقدر تسجل أكتر من قائمة وتعرضهم في أماكن مختلفة زي الهيدر والفوتر
القوائم بتخلي الموقع أكتر احترافية وسهل تنقل فيه

7. أسئلة شائعة

س: هل لازم أسجل كل القوائم في functions.php؟
ج: أيوه، لو عايز تظهر في لوحة تحكم ووردبريس.

س: لو ما سجلتش القوائم، إيه اللي هيحصل؟
ج: مش هتقدر تضيف قوائم أو تعيينها في لوحة التحكم.

س: ممكن أغير شكل القوائم؟
ج: أكيد، باستخدام CSS أو حتى عبر دوال callback في wp_nav_menu.

إضافة دعم الصور البارزة

1. يعني إيه الصور البارزة (Featured Images)؟

الصور البارزة أو الـ Featured Images هي الصور اللي بتظهر على كل مقال أو صفحة كمقدمة بصرية بتلفت نظر الزائر، زي بوستر للفيلم بالظبط.
دي الصور اللي بتظهر مثلاً فوق العنوان أو في صفحة الأرشيف أو الصفحة الرئيسية جنب ملخص المقال.

2. ليه نستخدم الصور البارزة؟

بتدي مظهر احترافي للموقع
بتجذب انتباه الزائر
بتحسن تجربة المستخدم وتجعل المحتوى أجمل
بتساعد في تحسين السيو (SEO) لما تستخدم صور محسنة

3. تفعيل دعم الصور البارزة في القالب

عشان تفعل ميزة الصور البارزة لازم تضيف الكود ده في ملف functions.php:

function abozaid_theme_setup() {
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'abozaid_theme_setup' );

الكود ده بيفعل ميزة الصور البارزة في القالب.
ممكن كمان تحدد أحجام مختلفة للصور بالوظيفة set_post_thumbnail_size أو add_image_size لو حابب.

4. إظهار الصور البارزة في المقالات والصفحات

عشان تعرض الصورة البارزة في ملف القالب زي single.php أو page.php، بتستخدم الدالة:

if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'full' ); // ممكن تغير الحجم 'thumbnail', 'medium', 'large', 'full' أو أي حجم مخصص
}

الكود ده بيتأكد إن المقال أو الصفحة ليها صورة بارزة، ولو موجودة هيعرضها.

5. مثال عملي كامل

في ملف functions.php

function abozaid_theme_setup() {
    add_theme_support( 'post-thumbnails' ); // تفعيل الصور البارزة
    
    // إضافة حجم صورة مخصص (اختياري)
    add_image_size( 'abozaid-thumb', 600, 400, true ); // 600x400 بقطعية تلقائية
}
add_action( 'after_setup_theme', 'abozaid_theme_setup' );

في ملف single.php

<?php get_header(); ?>

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
?>
        <h1><?php the_title(); ?></h1>

        <?php
        if ( has_post_thumbnail() ) {
            the_post_thumbnail( 'abozaid-thumb' ); // عرض الصورة بالحجم المخصص
        }
        ?>

        <div class="post-content">
            <?php the_content(); ?>
        </div>
<?php
    endwhile;
endif;
?>

<?php get_footer(); ?>

6. نصائح مهمة

دايمًا حاول تضيف صور بارزة للمقالات علشان الموقع يبقى جذاب
استخدم أحجام مناسبة لتقليل حجم الصور وسرعة تحميل الموقع
ممكن تضيف CSS لتنسيق عرض الصور حسب تصميم موقعك
الصور البارزة بتظهر أوتوماتيك في صفحة المقالات، بس لو عايز تظهرها في صفحة الأرشيف أو الصفحة الرئيسية لازم تضيف الكود المناسب هناك برضه

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

الصور البارزة هي صورة مميزة لكل مقال أو صفحة
لازم تفعل دعم الصور البارزة بـ add_theme_support('post-thumbnails')
تستخدم has_post_thumbnail() و the_post_thumbnail() عشان تعرض الصور
ممكن تحدد أحجام صور مخصصة باستخدام add_image_size()
الصور بتساعد في تحسين مظهر الموقع وتجربة المستخدم

8. أسئلة شائعة

س: هل الصور البارزة موجودة تلقائياً في كل القوالب؟
ج: لأ، لازم المطور يفعلها باستخدام add_theme_support().

س: إزاي أغير حجم الصورة؟
ج: تستخدم add_image_size() وتحدد الحجم، وبعد كده تستدعي الحجم ده في the_post_thumbnail().

س: هل ممكن أستخدم الصور البارزة في الصفحة الرئيسية أو صفحة الأرشيف؟
ج: أيوه، بس لازم تضيف الكود اللي يعرض الصور في ملفات القالب الخاصة بالصفحات دي.

التعامل مع Custom Post Types

(أنواع منشورات مخصصة) في ووردبريس

1. مقدمة: يعني إيه Custom Post Types؟

ووردبريس بيجي بواجهة جاهزة للكتابة زي المقالات (Posts) والصفحات (Pages)، بس ساعات بيكون عندك محتوى مختلف محتاج تنسقه وتعرضه بشكل مختلف، زي:

منتجات في متجر
مشاريع أعمال (Portfolio)
فيديوهات
مراجعات كتب
أي نوع محتوى خاص بيك

الأنواع دي بنسميها Custom Post Types أو “أنواع منشورات مخصصة”.

2. ليه نستخدم أنواع منشورات مخصصة؟

عشان تنظم المحتوى بشكل أفضل
عشان تخلي كل نوع محتوى له صفحة أرشيف خاصة وشكل عرض مختلف
عشان تضيف وظائف وحقول خاصة لنوع المحتوى ده
عشان تحسن تجربة المستخدم وتبسط إدارة المحتوى

3. الفرق بين المنشورات العادية وأنواع المنشورات المخصصة

الخاصية	منشورات (Posts)	صفحات (Pages)	منشورات مخصصة (Custom Post Types)
نوع المحتوى	مقالات، أخبار	صفحات ثابتة	أي نوع محتوى تخصصه بنفسك
الأرشيف	نعم	لا	حسب إعدادات النوع
التصنيفات	يدعم تصنيفات	لا	ممكن تدعم تصنيفات ووسوم
القوالب	قالب المقالات	قالب الصفحات	تقدر تعمل قوالب خاصة

4. إزاي تنشئ نوع منشور جديد يدويًا في ملف functions.php

هنا بنستخدم الدالة register_post_type() داخل دالة مربوطة بـ init:

function abozaid_register_custom_post_type() {
    $labels = array(
        'name'               => __('منتجات', 'abozaid'),
        'singular_name'      => __('منتج', 'abozaid'),
        'add_new'            => __('أضف منتج جديد', 'abozaid'),
        'add_new_item'       => __('أضف منتج جديد', 'abozaid'),
        'edit_item'          => __('تعديل المنتج', 'abozaid'),
        'new_item'           => __('منتج جديد', 'abozaid'),
        'view_item'          => __('عرض المنتج', 'abozaid'),
        'search_items'       => __('بحث في المنتجات', 'abozaid'),
        'not_found'          => __('مافيش منتجات', 'abozaid'),
        'not_found_in_trash' => __('مافيش منتجات في سلة المهملات', 'abozaid'),
        'menu_name'          => __('المنتجات', 'abozaid'),
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => true,
        'menu_icon'          => 'dashicons-cart',
        'supports'           => array('title', 'editor', 'thumbnail', 'excerpt', 'custom-fields'),
        'rewrite'            => array('slug' => 'products'),
        'show_in_rest'       => true, // لتفعيل محرر Gutenberg
    );

    register_post_type('product', $args);
}
add_action('init', 'abozaid_register_custom_post_type');

5. شرح أهم الوسائط (Arguments) في `register_post_type`

labels: النصوص اللي بتظهر في لوحة التحكم
public: هل النوع ظاهر في الموقع ولوحة التحكم
has_archive: هل له صفحة أرشيف خاصة
menu_icon: أيقونة في لوحة التحكم
supports: الحقول اللي يدعمها النوع (العنوان، المحرر، الصور البارزة…)
rewrite: ضبط رابط الصنف
show_in_rest: تفعيل دعم محرر جوتنبرج (مهم جداً لو تستخدم المحرر الجديد)

6. إضافة دعم تكستوص، صورة بارزة، تصنيفات، وحقول مخصصة

لو عايز النوع الجديد يدعم التصنيفات أو الوسوم، لازم تضيف دوال تسجيل لها:

function abozaid_register_taxonomies() {
    register_taxonomy(
        'product_category', 
        'product', 
        array(
            'label' => __('تصنيفات المنتجات', 'abozaid'),
            'hierarchical' => true,
            'show_in_rest' => true,
        )
    );
}
add_action('init', 'abozaid_register_taxonomies');

وبكده تقدر تستخدم تصنيفات للمنتجات زي التصنيفات العادية.

7. طريقة عرض منشورات النوع المخصص في القالب

صفحة الأرشيف: لو عندك has_archive مفعلة، تقدر تعمل ملف قالب اسمه archive-product.php (لو اسم النوع هو product) لعرض كل المنشورات.
صفحة المفرد (Single): تعمل ملف single-product.php لعرض تفاصيل المنتج الواحد.

8. إنشاء ملفات قالب خاصة بالنوع المخصص

مثال بسيط لملف archive-product.php:

<?php get_header(); ?>

<h1>منتجاتنا</h1>

<?php if ( have_posts() ) : ?>
    <div class="products-list">
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <?php if ( has_post_thumbnail() ) {
                    the_post_thumbnail('medium');
                } ?>
                <p><?php the_excerpt(); ?></p>
            </article>
        <?php endwhile; ?>
    </div>
<?php else : ?>
    <p>مافيش منتجات متاحة دلوقتي.</p>
<?php endif; ?>

<?php get_footer(); ?>

9. مثال عملي كامل: إنشاء نوع منشور “منتجات”

1. تسجيل النوع في functions.php

(الكود اللي فوق في النقطة 4)

2. تسجيل تصنيف المنتجات (اختياري)

(الكود اللي فوق في النقطة 6)

3. إنشاء ملفات القالب:

archive-product.php
single-product.php

4. إضافة منتجات من لوحة التحكم وتجربتها

10. نصائح مهمة عند التعامل مع أنواع المنشورات المخصصة

اختار أسماء واضحة ومختصرة
فكر في الحقول اللي هتحتاجها (ممكن تستخدم Advanced Custom Fields أو أدوات أخرى)
دايمًا فعّل show_in_rest لو هتستخدم محرر جوتنبرج
خلي رابط النوع بسيط وواضح
صمم ملفات القالب بشكل متناسق مع شكل موقعك

11. استخدام إضافات لتسهيل إنشاء Custom Post Types

لو مش حابب تبرمج الكود، في إضافات ممتازة زي:

Custom Post Type UI
Pods
Toolset

دي بتسهل عليك إنشاء النوع بدون كود، وتديرهم من لوحة التحكم.

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

الأنواع المخصصة بتنظم المحتوى بشكل أفضل
تسجيل النوع بيتم باستخدام register_post_type
لازم تسجل التصنيفات لو عايزها مرتبطة بالنوع
ملفات القالب زي archive-{post_type}.php و single-{post_type}.php مهمة لعرض المحتوى
في إضافات بتسهل العملية لو مش محترف في الكود

13. أسئلة شائعة

س: هل الأنواع المخصصة بتأثر على سرعة الموقع؟
ج: لا، طالما الكود منظم ومفيش استعلامات غير ضرورية.

س: هل لازم أعمل ملفات قالب منفصلة لكل نوع؟
ج: مش لازم، بس لو عايز شكل مميز لكل نوع، ده الأفضل.

س: هل أقدر أعدل على لوحة التحكم بتاعت النوع المخصص؟
ج: أيوه، تقدر تضيف حقول مخصصة وأعمدة جديدة.

التعامل مع (Custom Fields)

الدرس: التعامل مع الحقول المخصصة (Custom Fields) في ووردبريس

1. مقدمة: يعني إيه الحقول المخصصة؟

الحقول المخصصة في ووردبريس هي ببساطة بيانات إضافية بتضيفها على كل منشور، صفحة، أو حتى نوع منشور مخصص، عشان تضيف معلومات مش موجودة في المحتوى العادي.

مثلاً:

سعر منتج
تاريخ انتهاء صلاحية
رابط فيديو
بيانات إضافية لأي محتوى

2. ليه نستخدم الحقول المخصصة؟

عشان تضيف معلومات إضافية غير النص الأساسي
عشان تعرض بيانات مميزة في الموقع بطريقة منظمة
عشان تساعد المستخدمين أو الزوار يفهموا تفاصيل أكتر عن المحتوى
عشان تتحكم في شكل عرض المحتوى بناءً على البيانات دي

3. الفرق بين الحقول المخصصة والفئات والتصنيفات

الخاصية	الفئات (Categories)	التصنيفات (Tags)	الحقول المخصصة (Custom Fields)
نوع البيانات	تصنيفات عامة	كلمات مفتاحية	بيانات حرة ومخصصة
التكرار	لا	نعم	حسب الاستخدام
الاستخدام	تنظيم المحتوى	وصف المحتوى	إضافة بيانات خاصة
طريقة العرض	من القالب أو الإضافة	من القالب	من القالب عن طريق الكود

4. أنواع الحقول المخصصة اللي ممكن تضيفها

نص (Text)
رقم (Number)
اختيار (Select)
خانة اختيار (Checkbox)
تاريخ (Date)
رابط (URL)
صورة (Image)
وأكثر حسب الحاجة

5. إزاي تضيف حقل مخصص يدويًا في ووردبريس؟

ووردبريس بيجي بخاصية الحقول المخصصة (Custom Fields) جاهزة بس بتكون مخفية في بعض الإصدارات.
تقدر تفعيلها من:

ادخل على صفحة تحرير منشور
فوق على الثلاث نقاط (خيارات الشاشة)
فعل خيار “الحقول المخصصة” (Custom Fields)

لو مش موجودة، ممكن تضيفها بإضافة خاصة.

إضافة حقل مخصص من لوحة التحكم

في صفحة تحرير المقال، تحت المحرر هتلاقي جزء الحقول المخصصة
تضغط على “أدخل جديد”
تكتب اسم الحقل (مثلاً: price)
تكتب القيمة (مثلاً: 150)
تضغط إضافة

6. عرض الحقول المخصصة في القالب (Themes)

عشان تعرض القيمة دي في الموقع لازم تستخدم دالة get_post_meta() في ملف القالب.

مثال:

<?php
// الحصول على قيمة الحقل المخصص باسم price للمنشور الحالي
$price = get_post_meta(get_the_ID(), 'price', true);
if ($price) {
    echo '<p>سعر المنتج: ' . esc_html($price) . ' جنيه</p>';
}
?>

الدالة دي بتاخد:

ID المنشور
اسم الحقل
true عشان ترجع قيمة واحدة فقط مش مصفوفة

7. استخدام الحقول المخصصة مع Custom Post Types

لو عندك نوع منشور مخصص (زي منتجات)، تقدر تضيف حقول مخصصة مخصوص له زي السعر، اللون، الحجم…

وكل نوع بيظهر حسب القالب الخاص بيه، بتعرض البيانات دي بنفس الطريقة باستخدام get_post_meta().

8. إضافة الحقول المخصصة بطرق سهلة: إضافات مشهورة

لو مش حابب تكتب كود كتير، فيه إضافات بتسهل عليك الشغل:

Advanced Custom Fields (ACF):
أشهر إضافة، بتخليك تنشئ حقول مخصصة بأنواع مختلفة بسهولة كبيرة من لوحة التحكم، وبتعرضها بالكود اللي الإضافة بتديلهالك.
Meta Box:
إضافة احترافية تانية لتنظيم الحقول وإدارتها.
Pods:
إضافة شاملة لإنشاء أنواع منشورات مخصصة وحقول مخصصة مع بعض.

9. مثال عملي: إنشاء حقل مخصص لمنتج (سعر المنتج مثلاً)

1. تسجيل نوع منشور المنتجات (لو مش مسجل)

function abozaid_register_product_post_type() {
    register_post_type('product', array(
        'labels' => array(
            'name' => __('منتجات', 'abozaid'),
            'singular_name' => __('منتج', 'abozaid'),
        ),
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'thumbnail'),
        'show_in_rest' => true,
    ));
}
add_action('init', 'abozaid_register_product_post_type');

2. إضافة حقل السعر في صفحة تحرير المنتج

ممكن تستخدم خاصية الحقول المخصصة في ووردبريس أو إضافة ACF لتسهيل المهمة.

3. عرض السعر في قالب single-product.php

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>

    <?php
    $price = get_post_meta(get_the_ID(), 'price', true);
    if ($price) {
        echo '<p>سعر المنتج: ' . esc_html($price) . ' جنيه</p>';
    } else {
        echo '<p>السعر غير متوفر</p>';
    }
    ?>

<?php endwhile; endif; ?>

<?php get_footer(); ?>

10. نصائح مهمة عند استخدام الحقول المخصصة

دايمًا استخدم أسماء حقول واضحة ومحددة
استخدم sanitize_text_field أو دوال تعقيم أخرى لو بتتعامل مع مدخلات المستخدم
لما تعرض البيانات، استخدم دوال الهروب (مثل esc_html، esc_url) عشان تحمي موقعك من هجمات الـ XSS
نظم حقولك وحاول تستخدم إضافات متقدمة لو هتضيف حقول كتير
تذكر إن الحقول المخصصة مش بتظهر تلقائي في لوحة التحكم إلا لو فعلتها أو استخدمت إضافة

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

الحقول المخصصة بتضيف بيانات إضافية لأي منشور أو صفحة
تقدر تضيفها من لوحة التحكم أو بالكود
تستخدم get_post_meta لعرض البيانات في القالب
في إضافات زي ACF بتسهل عليك التعامل
لازم تعقم البيانات وتحمي موقعك

12. أسئلة شائعة

س: هل ممكن أضيف حقل مخصص لأي نوع منشور؟
ج: أيوه، تقدر تضيف لأي منشور أو صفحة أو نوع منشور مخصص.

س: هل الحقول المخصصة بتأثر على سرعة الموقع؟
ج: لأ، لو الكود منظم ومافيش استعلامات زيادة.

س: هل ممكن أستخدم الحقول المخصصة في ووردبريس القديم؟
ج: أيوه، بس هتحتاج تفعلها من خيارات الشاشة أو تستخدم إضافات.

س: هل ممكن أضيف حقول مخصصة من خلال الكود بدون إضافات؟
ج: ممكن، بس هيبقى الموضوع محتاج شغل برمجي أكتر.

تفعيل دعم اللغات

الدرس: تفعيل دعم اللغات (Translation & RTL Support) في قالب ووردبريس

1. مقدمة: ليه دعم اللغات مهم في القوالب؟

لو عايز موقعك يوصل لعدد أكبر من الناس سواء عرب أو غير عرب، لازم القالب يكون جاهز للغات مختلفة. مش بس ترجمة النصوص، كمان لازم يدعم اللغات اللي بتكتب من اليمين للشمال (RTL) زي العربية، الفارسية، والعبرية.

دعم اللغات مش بس بيخلي الموقع متاح أكتر، كمان بيحسن تجربة المستخدم ويخلي موقعك محترف أكتر.

2. الفرق بين الترجمة والـ RTL

الترجمة (Translation): تحويل النصوص المكتوبة في القالب من اللغة الأصلية (غالبًا إنجليزي) للغة تانية
الـ RTL (Right To Left): تحويل اتجاه الكتابة وتصميم القالب بحيث يكون مناسب للغات اللي بتكتب من اليمين للشمال زي العربية

3. خطوات تفعيل دعم الترجمة في القالب

أول حاجة: استخدام دوال الترجمة في الكود

لو في القالب عندك نصوص ثابتة زي:

<h1>Welcome to my website</h1>

ده غلط لو عايز تدعم لغات مختلفة. لازم تستخدم دوال الترجمة بتاعت ووردبريس، زي:

<h1><?php _e('Welcome to my website', 'your-textdomain'); ?></h1>

_e() بتطبع النص وترجمه لو موجود
__() بترجع النص للترجمة بدون طباعة (تستخدم لما تحب تخزن النص في متغير)
your-textdomain هو معرف خاص بقالبك عشان تتعرف عليه ملفات الترجمة

4. استخدام ملفات POT, PO, MO

POT (Portable Object Template): ملف القالب الأصلي اللي بيحتوي على جميع النصوص اللي ممكن تتترجم، وهو ملف فارغ من الترجمة.
PO (Portable Object): نسخة مترجمة من POT بتحوي النصوص الأصلية والترجمة بجانبها.
MO (Machine Object): ملف ترجمة مضغوط بيستخدمه ووردبريس فعليًا لتحميل الترجمات بسرعة.

القالب بيحمل ملف الـ MO الخاص باللغة اللي الموقع شغال بيها.

5. إضافة دعم ملفات اللغات في functions.php

عشان تخلي ووردبريس يعرف يشغل ملفات الترجمة الخاصة بقالبك، لازم تضيف الكود ده في ملف functions.php:

function abozaid_theme_setup() {
    load_theme_textdomain('your-textdomain', get_template_directory() . '/languages');
}
add_action('after_setup_theme', 'abozaid_theme_setup');

your-textdomain نفس النص اللي استخدمته في دوال الترجمة
/languages المجلد اللي هتحط فيه ملفات الترجمة (PO و MO)

6. طريقة إنشاء ملفات الترجمة باستخدام أدوات مجانية

استخدام برنامج Poedit (الأشهر)

افتح Poedit
اختار “Create new translation”
اختار ملف الـ POT اللي جاي مع القالب أو اللي أنت عملته
ابدأ ترجم كل النصوص للعربية أو اللغة اللي عايزها
احفظ الملف باسم اللغة، مثلاً ar.po
البرنامج هيعمل تلقائيًا ملف ar.mo

أدوات أونلاين

Loco Translate – إضافة ووردبريس تتيح الترجمة من لوحة التحكم
Poeditor.com – موقع لترجمة ملفات POT أونلاين

7. إضافة دعم الـ RTL في القالب

لو عايز القالب يدعم العربية واللغات اللي بتكتب من اليمين للشمال، لازم تخلي الكود يدعم الاتجاه ده.

الخطوة 1: في ملف style.css

في رأس ملف style.css، لازم تضيف:

/*
Theme Name: Abozaid Theme
Text Domain: your-textdomain
...
*/

الخطوة 2: إعداد ملف rtl.css

لازم تعمل ملف rtl.css في مجلد القالب
في الملف ده هتكتب CSS اللي بيغير اتجاه العناصر من اليسار لليمين

مثال:

body {
    direction: rtl;
    text-align: right;
}

.header {
    float: right;
}

الخطوة 3: تحميل ملف rtl.css تلقائيًا

ووردبريس بيقدر يحمل ملف rtl.css لو مسماه بالطريقة دي، لكن لازم تضيف كود في functions.php عشان يتأكد من تحميله:

function abozaid_load_styles() {
    wp_enqueue_style('abozaid-style', get_stylesheet_uri());

    if (is_rtl()) {
        wp_enqueue_style('abozaid-rtl', get_template_directory_uri() . '/rtl.css', array('abozaid-style'));
    }
}
add_action('wp_enqueue_scripts', 'abozaid_load_styles');

8. كيف تختبر دعم RTL في القالب؟

غير لغة موقع ووردبريس للغة عربية من لوحة التحكم (Settings > General > Site Language)
افتح الموقع وشوف إذا الاتجاه اتغير للعربي (من اليمين لليسار)
اختبر كل الصفحات وشوف الهيدر، الفوتر، القوائم، النصوص، هل كلها بتظهر مظبوطة
جرب في أجهزة مختلفة والشاشات الصغيرة

9. نصائح وأخطاء شائعة لازم تتجنبها

ما تستخدمش اتجاه ثابت في CSS: زي float: left; بدون تحكم في الـ RTL
استخدم وحدات CSS مرنة: زي margin-inline-start بدل margin-left
تجنب الصور اللي مش مناسبة للاتجاه العكسي: يعني لو في صورة سهم أو شكل لازم تعكسه في RTL
اختبر كل العناصر في الوضعين LTR و RTL
دايمًا استخدم دوال الترجمة مش نصوص ثابتة

10. أفضل الممارسات في تصميم قوالب متعددة اللغات

استخدم دوال الترجمة بشكل صحيح (مثل _e, , esc_html)
نظم ملفات الترجمة في مجلد منفصل /languages
صمم CSS بحيث يكون قابل للتعديل والانعكاس مع RTL بسهولة
جرب القالب مع إضافات الترجمة (زي WPML، Polylang) لو هتدعم مواقع متعددة اللغات
اعتمد على خاصية is_rtl() في PHP لتغير بعض الوظائف أو النصوص حسب اتجاه اللغة
لا تستخدم نصوص في الصور، أو استخدم نسخ مخصصة من الصور للغات المختلفة

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

دعم اللغات بيبدأ باستخدام دوال الترجمة في الكود
ملفات POT, PO, MO هي أساس الترجمة في ووردبريس
لازم تضيف load_theme_textdomain في functions.php
ملف rtl.css ضروري لدعم الاتجاه من اليمين للشمال
لازم تختبر القالب على أكثر من لغة واتجاه
دايمًا استخدم أدوات ترجمة معروفة زي Poedit أو Loco Translate

12. أسئلة شائعة

س: هل لازم كل النصوص في القالب تستخدم دوال الترجمة؟
ج: أيوه، عشان تكون القابلية للترجمة كاملة ومش ناقصة.

س: هل لازم أعمل rtl.css يدوي؟
ج: الأفضل، عشان تتحكم في التفاصيل، لكن ممكن تستخدم أطر عمل CSS بتدعم RTL تلقائيًا.

س: هل ممكن أستخدم Google Translate للترجمة؟
ج: ممكن، لكن مش احترافي وبيأثر على جودة الموقع، الأفضل الترجمة اليدوية.

س: هل القالب يدعم اللغات لو ما عملتش حاجة؟
ج: لأ، لازم تكتب الكود صح وتضيف ملفات الترجمة.

س: هل لازم أنشئ ملفات PO و MO لكل لغة؟
ج: أيوه، كل لغة ليها ملفات خاصة بيها.

تحسين أداء وسرعة القالب

تحميل أكواد CSS وJS بطريقة محسنة
استخدام Lazy Load للصور

1. مقدمة عن أهمية تحسين الأداء

سرعة تحميل الموقع من أهم عوامل نجاحه سواء في تجربة المستخدم أو في ترتيب محركات البحث (SEO). لو الموقع ثقيل، الزائر هيمشي وممكن جوجل تقلل ترتيبه.

القالب جزء كبير من سرعة الموقع، لأنه بيحمل أكواد CSS وJS وصور. عشان كده تحسين تحميل هذه الموارد لازم يكون أولوية لأي مطور قوالب.

2. تحميل أكواد CSS و JS بطريقة محسنة

تحميل الملفات بشكل منفصل (Enqueueing)

في ووردبريس لازم تستخدم دالة wp_enqueue_style() و wp_enqueue_script() عشان تضيف ملفات CSS وJS، وده بيساعد على تحميل الملفات بطريقة منظمة وسليمة.

مثال في functions.php:

function abozaid_enqueue_scripts() {
    // تحميل ملف CSS الرئيسي
    wp_enqueue_style('abozaid-style', get_stylesheet_uri());

    // تحميل ملف JS
    wp_enqueue_script('abozaid-main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'abozaid_enqueue_scripts');

الباراميتر الأخير true في wp_enqueue_script بيخلي تحميل السكريبت في الفوتر بدل الهيدر وده بيحسن الأداء لأنه بيخلي المحتوى يظهر أسرع.

التحميل الشرطي (Conditional Loading)

مش لازم تحمل كل ملفات CSS وJS في كل صفحة. مثلا لو عندك صفحة خاصة بسبلايدر، تحميل ملف السبايدر مش لازم يكون في كل الصفحات.

مثال:

function abozaid_enqueue_conditional_scripts() {
    if (is_page('gallery')) {
        wp_enqueue_script('slider-js', get_template_directory_uri() . '/js/slider.js', array('jquery'), null, true);
        wp_enqueue_style('slider-css', get_template_directory_uri() . '/css/slider.css');
    }
}
add_action('wp_enqueue_scripts', 'abozaid_enqueue_conditional_scripts');

ده بيخلي السبايدر يشتغل بس في صفحة المعرض، وميحملش في باقي الصفحات.

تقليل عدد طلبات HTTP

كل ملف CSS أو JS بيعمل طلب HTTP للتحميل. لو عندك 10 ملفات، هتعمل 10 طلبات وده بيأخر تحميل الصفحة.

الحل: دمج ملفات CSS مع بعض وملفات JS مع بعض.

في بيئة التطوير ممكن تستخدم أدوات زي Gulp أو Webpack عشان تعمل Bundle للملفات.

لو عايز حل بسيط في ووردبريس، تقدر تستخدم إضافات تحسين الأداء زي Autoptimize أو WP Rocket بتعمل دمج وتصغير أوتوماتيكي.

تصغير الملفات (Minify)

تصغير CSS وJS يعني إزالة المسافات والتعليقات لتصغير حجم الملف. ده بيخلي التحميل أسرع.

مثال:

/* before minify */
body {
    background-color: #fff;
    margin: 0;
    padding: 0;
}

/* after minify */
body{background-color:#fff;margin:0;padding:0;}

3. استخدام Lazy Load للصور

إيه هو Lazy Load؟

Lazy Load يعني تحميل الصور فقط لما تدخل منطقة الرؤية (viewport) بتاعة الزائر، مش كل الصور تتحمل مرة واحدة.

ده بيقلل تحميل الصفحة الأولي ويخليها أسرع.

ليه Lazy Load مهم؟

الصور بتاخد حجم كبير في الصفحة، وبتأثر على سرعة التحميل
لو عندك صفحة فيها صور كتير، تحميلها كلها مرة واحدة بيبطئ الموقع
Lazy Load بيقلل استهلاك الباندويث وبيخلي تجربة المستخدم أحسن

طرق تطبيق Lazy Load في القالب

1. استخدام خاصية `loading="lazy"` في HTML5 (أسهل وأسرع)

في ووردبريس من الإصدار 5.5 ورايح، بيضيف الخاصية دي تلقائي للصور في المحتوى. لو بتعرض صور في القالب، تقدر تضيف الخاصية دي بنفسك.

مثال في قالبك:

<img src="<?php echo esc_url($image_url); ?>" loading="lazy" alt="Description">

2. استخدام JavaScript Lazy Load

لو عايز دعم أوسع وتخصيص أكبر، ممكن تستخدم مكتبة JS زي lazysizes.

4. أكواد عملية لتحسين تحميل CSS و JS

تحميل CSS في الفوتر (مش دايمًا مطلوب)

عادة الـ CSS بيتحمل في الهيدر، بس في حالات ممكن تحاول تحمله في الفوتر لتحسين الأداء لو القالب بسيط.

لكن ده مش دائمًا حل كويس، عشان ممكن يخلي الصفحة تظهر من غير تنسيق لفترة.

مثال لتحميل JS في الفوتر (كود كامل)

function abozaid_enqueue_scripts() {
    wp_enqueue_style('abozaid-style', get_stylesheet_uri());

    wp_enqueue_script('abozaid-main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'abozaid_enqueue_scripts');

استخدام التحميل الشرطي (تكرار مثال سابق لكن بالتفصيل)

function abozaid_enqueue_scripts() {
    // تحميل ملف CSS الأساسي
    wp_enqueue_style('abozaid-style', get_stylesheet_uri());

    // تحميل ملف JS الأساسي في كل الصفحات
    wp_enqueue_script('abozaid-main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);

    // تحميل ملفات خاصة بصفحة المقال فقط
    if (is_single()) {
        wp_enqueue_script('single-js', get_template_directory_uri() . '/js/single.js', array('jquery'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'abozaid_enqueue_scripts');

5. أكواد وأمثلة عملية لتفعيل Lazy Load

مثال 1: إضافة خاصية loading=”lazy” تلقائيًا للصور في محتوى المقال

في ملف functions.php نضيف هذا الكود:

function abozaid_lazyload_images($content) {
    if (is_singular()) {
        $content = preg_replace('/<img(.*?)src=/i', '<img loading="lazy"$1src=', $content);
    }
    return $content;
}
add_filter('the_content', 'abozaid_lazyload_images');

مثال 2: استخدام مكتبة lazysizes

حمل مكتبة lazysizes.min.js
أضفها في القالب

function abozaid_enqueue_lazyload() {
    wp_enqueue_script('lazysizes', get_template_directory_uri() . '/js/lazysizes.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'abozaid_enqueue_lazyload');

غير صورك بالشكل ده:

<img data-src="path/to/image.jpg" class="lazyload" alt="Description" />

هتلاحظ الصور بتتحمل لما المستخدم يقرب منها في الصفحة.

6. نصائح إضافية لتحسين أداء القالب

استخدم صور مضغوطة وذات أبعاد مناسبة
استعمل تنسيق صور حديث زي WebP لو ممكن
استخدم CDN لتوزيع ملفاتك بسرعة حول العالم
قلل استخدام الإضافات الثقيلة على الموقع
استخدم الكاش (Caching) بفعالية
اختبر الموقع على أدوات زي Google PageSpeed Insights و GTmetrix بانتظام

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

استخدم wp_enqueue_style و wp_enqueue_script عشان تضيف ملفات CSS و JS
خلي تحميل السكريبتات في الفوتر قدر الإمكان
حمل الملفات اللي مش مطلوبة دايمًا بشكل شرطي
دمج وتصغير ملفات CSS و JS يقلل من وقت التحميل
Lazy Load مهم جدًا للصور الثقيلة
تقدر تستخدم خاصية loading="lazy" أو مكتبة JS متقدمة زي lazysizes
ضغط الصور واستخدام CDN بيكملوا تحسين الأداء

8. أسئلة شائعة

س: هل ممكن أضيف Lazy Load على كل الصور بسهولة؟
ج: أيوه، تقدر تستخدم الكود البسيط اللي بيضيف خاصية loading="lazy" تلقائي في محتوى المقال.

س: هل تحميل JS في الفوتر يؤثر على عمل الموقع؟
ج: غالبًا لا، بس لو السكريبت بيستخدم في الهيدر لازم تشيل true عشان يشتغل صح.

س: إيه أفضل طريقة لتقليل ملفات CSS و JS؟
ج: استخدام أدوات أتمتة مثل Gulp أو إضافات مثل Autoptimize.

س: هل Lazy Load بيشتغل مع كل المتصفحات؟
ج: خاصية HTML5 loading="lazy" مدعومة في أغلب المتصفحات الحديثة، لكن ممكن تحتاج مكتبات JS للمتصفحات القديمة.

ملف archive.php

درس بناء صفحة أرشيف المقالات (archive.php) في ووردبريس

1. مقدمة عن صفحة الأرشيف في ووردبريس

لما تدخل على موقع ووردبريس وتضغط على تصنيف (Category) أو المؤلف (Author) أو حتى الوسم (Tag)، هتدخل على صفحة بتعرض كل المقالات المتعلقة بالتصنيف أو الكاتب ده. الصفحة دي اسمها صفحة الأرشيف (Archive Page).

الصفحة دي مش موجودة في القالب بشكل مباشر، بس ووردبريس بيستخدم ملف archive.php أو ملفات أرشيف خاصة زي category.php أو author.php لو موجودة، عشان يعرض المحتوى.

2. فهم مفهوم صفحة الأرشيف وأهميتها

صفحة الأرشيف بتجمع مجموعة من المقالات المرتبطة بعنوان أو موضوع معين زي:

كل المقالات في تصنيف “تسويق”
كل المقالات اللي كتبها “محمد ابوزيد”
كل المقالات اللي ليها وسم “ووردبريس”

وظيفتها تسهيل تصفح الموقع وتنظيم المحتوى، وبتأثر على تجربة الزوار وترتيب الموقع في محركات البحث.

3. إنشاء ملف archive.php في قالب ووردبريس

لو مفيش ملف archive.php موجود في القالب بتاعك، ممكن تنشئ ملف جديد بالاسم ده في فولدر القالب.

ملف archive.php هو القالب العام لكل صفحات الأرشيف لو مفيش ملفات متخصصة أكتر.

هيكل ملف archive.php الأساسي

<?php get_header(); ?>

<div class="archive-content">
    <?php if (have_posts()) : ?>
        <h1 class="archive-title">
            <?php
            if (is_category()) {
                single_cat_title();
            } elseif (is_author()) {
                the_post();
                echo 'مقالات الكاتب: ' . get_the_author();
                rewind_posts();
            } elseif (is_tag()) {
                single_tag_title();
            } else {
                echo 'أرشيف المقالات';
            }
            ?>
        </h1>

        <?php
        while (have_posts()) : the_post();
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="post-meta">
                    نُشر في: <?php the_date(); ?> | الكاتب: <?php the_author(); ?>
                </div>
                <div class="post-excerpt">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        <?php endwhile; ?>

        <div class="pagination">
            <?php
            the_posts_pagination(array(
                'mid_size' => 2,
                'prev_text' => __('« السابق'),
                'next_text' => __('التالي »'),
            ));
            ?>
        </div>

    <?php else : ?>
        <p>لا توجد مقالات في هذا الأرشيف.</p>
    <?php endif; ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

4. طريقة عرض المقالات حسب التصنيف (Category Archives)

ووردبريس بيوفر لك دالة is_category() للتحقق إذا كانت صفحة الأرشيف هي صفحة تصنيف، وبعدين تقدر تعرض عنوان التصنيف مثلاً باستخدام single_cat_title().

لو عايز تخصص شكل عرض المقالات في صفحة التصنيف، تقدر تعمل ملف باسم category.php في القالب، وهوه هيتم استخدامه بدل archive.php في صفحات التصنيفات.

مثال ملف category.php مخصص

<?php get_header(); ?>

<h1>التصنيف: <?php single_cat_title(); ?></h1>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <article>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <div>تاريخ النشر: <?php the_date(); ?></div>
        <div><?php the_excerpt(); ?></div>
    </article>

<?php endwhile; else: ?>

    <p>لا توجد مقالات في هذا التصنيف.</p>

<?php endif; ?>

<?php get_footer(); ?>

5. طريقة عرض المقالات حسب الكاتب (Author Archives)

بالنسبة لصفحة الكاتب، تقدر تستخدم is_author() عشان تتأكد، وبعدين تعرض بيانات الكاتب باستخدام دوال زي get_the_author() و the_author_meta().

مثال ملف author.php مخصص

<?php get_header(); ?>

<?php
if (have_posts()) {
    the_post();
?>
    <h1>مقالات الكاتب: <?php the_author(); ?></h1>
    <div class="author-bio">
        <?php echo get_the_author_meta('description'); ?>
    </div>
<?php
    rewind_posts();

    while (have_posts()) : the_post();
?>
        <article>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div>نُشر في: <?php the_date(); ?></div>
            <div><?php the_excerpt(); ?></div>
        </article>
<?php
    endwhile;
} else {
    echo '<p>لا توجد مقالات لهذا الكاتب.</p>';
}
?>

<?php get_footer(); ?>

6. أكواد عملية لعرض أرشيف المقالات

6.1. إضافة صورة مميزة مع المقال في صفحة الأرشيف

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php if (has_post_thumbnail()) : ?>
        <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail('thumbnail'); ?>
        </a>
    <?php endif; ?>

    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <div class="post-meta">
        بتاريخ: <?php the_date(); ?> | الكاتب: <?php the_author(); ?>
    </div>
    <div><?php the_excerpt(); ?></div>
</article>

6.2. عرض تصنيفات المقالة تحت العنوان

<div class="post-categories">
    <?php the_category(', '); ?>
</div>

6.3. استخدام Pagination بشكل متقدم

the_posts_pagination(array(
    'mid_size' => 2,
    'prev_text' => __('« السابق'),
    'next_text' => __('التالي »'),
    'screen_reader_text' => ' '
));

7. تخصيص شكل الأرشيف حسب نوع الأرشيف

ممكن تستخدم شرطيات لتغيير العنوان أو المحتوى:

<?php if (is_category()) : ?>
    <h1>تصنيف: <?php single_cat_title(); ?></h1>
<?php elseif (is_tag()) : ?>
    <h1>وسم: <?php single_tag_title(); ?></h1>
<?php elseif (is_author()) : ?>
    <?php the_post(); ?>
    <h1>مقالات الكاتب: <?php the_author(); ?></h1>
    <?php rewind_posts(); ?>
<?php else : ?>
    <h1>أرشيف الموقع</h1>
<?php endif; ?>

8. التعامل مع التمرير والصفحات المتعددة (Pagination)

لو في مقالات كتير في الأرشيف، لازم تظهر صفحات إضافية عشان تقدر تتصفح باقي المقالات.

استخدام دالة the_posts_pagination() بيخلي التنقل بين صفحات الأرشيف سهل وأنيق.

9. نصائح مهمة لتحسين صفحة الأرشيف

خليك دايمًا تستخدم have_posts() و the_post() عشان تضمن عرض المقالات بشكل صحيح
استعمل rewind_posts() لو عايز تستخدم دوال المؤلف بعد استدعاء the_post() مرة
أضف صور مصغرة عشان الأرشيف يكون جذاب وسهل التصفح
اهتم بالتصميم بحيث تكون العناوين واضحة والنصوص مختصرة
دايمًا اختبر صفحة الأرشيف على أكثر من جهاز

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

صفحة الأرشيف بتعرض مقالات بتصنيف أو كاتب معين أو وسم
الملف الرئيسي لصفحة الأرشيف هو archive.php
ممكن تخصص صفحات أرشيف لكل نوع أرشيف بملفات زي category.php و author.php
استخدام دوال ووردبريس المشهورة لعرض العناوين، التواريخ، المؤلف، والمحتوى
إضافة Pagination مهم جدًا لو في مقالات كتير
صور المقالات بتخلي الأرشيف أجمل وأسهل للزوار

11. أسئلة شائعة

س: هل لازم أعمل ملف archive.php؟
ج: مش لازم، لكن وجوده بيخلي القالب يعرض صفحات الأرشيف بشكل متناسق.

س: هل يمكنني عرض المقالات بشكل مختلف في كل تصنيف؟
ج: أيوه، بتعمل ملفات category-{slug}.php أو category-{id}.php للتخصيص.

س: إزاي أضيف صورة المقال في صفحة الأرشيف؟
ج: تستخدم دالة has_post_thumbnail() و the_post_thumbnail() داخل اللوب.

س: هل Pagination ضروري؟
ج: ضروري لو المقالات كتيرة عشان تسهل التنقل.

ملف search.php

درس صفحة نتائج البحث (search.php) في ووردبريس

1. مقدمة: أهمية صفحة نتائج البحث

صفحة نتائج البحث هي واحدة من أهم صفحات الموقع، لأن معظم الزوار ممكن يوصلوا لمحتوى معين من خلالها. تصميم الصفحة بشكل كويس بيخلي تجربة البحث سهلة وسريعة، ويخلي الزائر يلاقي اللي بيدور عليه من غير تعب.

لو الصفحة دي مش واضحة أو شكلها مش مرتب، الزوار ممكن يطلعوا بسرعة ويخسر الموقع زيارات ومتابعين.

2. كيف بيشتغل نظام البحث في ووردبريس؟

ووردبريس بيستخدم دالة get_search_query() عشان يحصل على الكلمة اللي الباحث كتبها، وبعدين يجيب المقالات أو الصفحات اللي فيها الكلمة دي في العنوان أو المحتوى.

الكود اللي بينفذ البحث بيتم في الخلفية، والنتائج بتظهر في صفحة خاصة اسمها search.php أو لو مش موجودة، بتظهر في index.php.

3. إنشاء ملف search.php في القالب

لو عايز تتحكم في شكل صفحة البحث بتاعتك، لازم تعمل ملف اسمه search.php في فولدر القالب.

هيكل ملف search.php الأساسي

<?php get_header(); ?>

<div class="search-results-container">
    <h1>نتائج البحث عن: "<?php echo get_search_query(); ?>"</h1>

    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="post-meta">
                    بتاريخ: <?php the_date(); ?> | الكاتب: <?php the_author(); ?>
                </div>
                <div class="post-excerpt">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        <?php endwhile; ?>

        <div class="pagination">
            <?php
            the_posts_pagination(array(
                'mid_size' => 2,
                'prev_text' => __('« السابق'),
                'next_text' => __('التالي »'),
            ));
            ?>
        </div>

    <?php else : ?>
        <p>عذرًا، لم يتم العثور على نتائج للبحث عن "<?php echo get_search_query(); ?>"</p>
        <p>حاول كلمات بحث مختلفة أو قم بالبحث مرة أخرى:</p>
        <?php get_search_form(); ?>
    <?php endif; ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

4. تصميم صفحة نتائج البحث بشكل جذاب

صفحة البحث لازم تكون واضحة وسهلة التصفح، وتدي الزائر كل التفاصيل اللي تساعده يختار المقال المناسب.

نصائح تصميم:

عنوان واضح: بيظهر الكلمة اللي الباحث كتبها
عرض مقتطف من المقال: يساعد في اختيار المقال المناسب
عرض التاريخ والمؤلف: لزيادة الثقة في المحتوى
استخدام ألوان متناسقة مع تصميم الموقع
ترتيب النتائج بشكل منطقي، مثلاً حسب الأحدث أو الأكثر صلة
نموذج بحث ثاني في حالة عدم وجود نتائج

5. عرض نتائج البحث مع التفاصيل

كل نتيجة بحث لازم تعرض:

عنوان المقال (رابط قابل للضغط)
تاريخ النشر
اسم الكاتب
مقتطف (Excerpt) من المقال
صورة مصغرة (لو متاحة)

كود عملي مع صورة مصغرة في صفحة البحث

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php if (has_post_thumbnail()) : ?>
        <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail('thumbnail'); ?>
        </a>
    <?php endif; ?>

    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <div class="post-meta">
        بتاريخ: <?php the_date(); ?> | الكاتب: <?php the_author(); ?>
    </div>
    <div class="post-excerpt">
        <?php the_excerpt(); ?>
    </div>
</article>

6. التعامل مع عدم وجود نتائج بحث

مهم جداً إنك تعطي الزائر رسالة واضحة لما البحث ما يطلعش على أي حاجة، وتوفر له نموذج بحث جديد.

مثال رسالة عدم وجود نتائج

<?php if (!have_posts()) : ?>
    <p>مع الأسف، ما فيش نتائج للبحث عن "<?php echo get_search_query(); ?>"</p>
    <p>جرب كلمات بحث تانية أو عدل البحث.</p>
    <?php get_search_form(); ?>
<?php endif; ?>

7. تحسين تجربة المستخدم في صفحة البحث

إضافة زر إعادة البحث
عرض كلمات مفتاحية شائعة (Popular Keywords)
توفير خيارات تصفية البحث (حسب التاريخ، التصنيف، المؤلف)
دعم البحث في أنواع منشورات مخصصة (Custom Post Types)

8. إضافة نموذج البحث في القالب

لو مش موجود عندك نموذج بحث في الهيدر أو السايدبار، تقدر تضيف النموذج باستخدام دالة ووردبريس get_search_form().

نموذج بحث بسيط داخل الهيدر

<form role="search" method="get" class="search-form" action="<?php echo home_url('/'); ?>">
    <label>
        <span class="screen-reader-text">ابحث عن:</span>
        <input type="search" class="search-field" placeholder="اكتب كلمة البحث..." value="<?php echo get_search_query(); ?>" name="s" />
    </label>
    <button type="submit" class="search-submit">بحث</button>
</form>

9. تحسين أداء البحث والفلترة

البحث في أنواع منشورات مخصصة

لو عندك أنواع منشورات مخصصة (Custom Post Types) وعايز تظهرها في نتائج البحث، لازم تعدل الاستعلام في functions.php:

function custom_search_filter($query) {
    if ($query->is_search && !is_admin()) {
        $query->set('post_type', array('post', 'page', 'your_custom_post_type'));
    }
    return $query;
}
add_filter('pre_get_posts', 'custom_search_filter');

فلترة البحث حسب التصنيف أو تاريخ النشر

تقدر تضيف فلتر في صفحة البحث باستخدام استمارة أو أكواد PHP للتحكم في نتائج البحث.

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

صفحة البحث مهمة جداً لتجربة المستخدم
ملف search.php مسؤول عن عرض نتائج البحث
لازم تعرض عنوان البحث، قائمة النتائج بشكل منظم، ونموذج بحث عند عدم وجود نتائج
استخدم صور مصغرة، تواريخ، وأسماء مؤلفين لتعزيز العرض
تحسين الاستعلام ليشمل أنواع منشورات مخصصة بيساعد في نتائج أدق
دائمًا اختبر صفحة البحث على أكثر من جهاز

11. أسئلة شائعة

س: هل ممكن أستخدم ملف index.php بدل search.php؟
ج: أيوه، لو مش عامل ملف search.php، ووردبريس هيستخدم index.php كبديل.

س: إزاي أخلي صفحة البحث تعرض فقط المقالات؟
ج: في functions.php، استخدم فلتر pre_get_posts وعدل post_type عشان تختار المقالات فقط.

س: هل ممكن أضيف فلتر للتاريخ أو التصنيف في صفحة البحث؟
ج: أيوه، ممكن تضيف استمارة فلترة مع كود PHP لتعديل الاستعلام.

س: هل يمكنني تحسين سرعة البحث؟
ج: نعم، باستخدام إضافات متخصصة للبحث، وتحسين الكود، والاعتماد على كاش (Caching).

صفحة الخطأ 404

درس صفحة الخطأ 404 (404.php) في ووردبريس

1. مقدمة: إيه هي صفحة الخطأ 404؟

لما الزائر يدخل على رابط مش موجود على موقعك، أو رابط اتغير أو اتشال، السيرفر بيظهر صفحة الخطأ 404 — معناها “الصفحة مش موجودة”.

الصفحة دي هي فرصة مهمة عشان تحافظ على الزائر، بدل ما يطلع ويترك موقعك.

2. أهمية صفحة 404 في تجربة المستخدم

لو صفحة الخطأ كانت مملة أو مفيهاش أي توجيه، الزائر هيتلخبط وممكن يطلع بسرعة. لكن لو الصفحة دي مصممة كويس، بتدي الزائر شعور إنه لسه في الموقع، وبتساعده يلاقي اللي بيدور عليه.

3. ملف 404.php ودوره في القالب

كل قالب ووردبريس بيكون فيه ملف اسمه 404.php، وده الملف المسؤول عن ظهور صفحة الخطأ 404 لما الرابط مش موجود.

لو مش موجود، ووردبريس هيرجع يظهر الصفحة الأساسية (index.php).

4. تصميم صفحة 404 بطريقة احترافية

الصفحة لازم تكون واضحة، جذابة، وتدي الزائر طرق للخروج من الموقف ده بسهولة.

عناصر التصميم:

رسالة بسيطة وواضحة
تصميم يناسب شكل الموقع العام
أزرار وروابط تساعد الزائر يطلع من الخطأ
نموذج بحث
اقتراح مقالات أو صفحات شهيرة

5. عناصر صفحة 404 الناجحة

أ. رسالة الخطأ واضحة وبسيطة

<h1>الصفحة اللي بتدور عليها مش موجودة</h1>
<p>ممكن الرابط اللي دخلته غلط أو الصفحة اتشالت.</p>

ب. نموذج بحث

<?php get_search_form(); ?>

ج. روابط مهمة

مثلاً روابط للصفحة الرئيسية، التصنيفات، أو أحدث المقالات.

6. إضافة اقتراحات وروابط مفيدة في صفحة 404

ممكن تضيف كود يعرض أحدث المقالات تلقائي:

<h2>مقالات ممكن تعجبك</h2>
<ul>
    <?php
    $recent_posts = wp_get_recent_posts(array(
        'numberposts' => 5,
        'post_status' => 'publish'
    ));
    foreach($recent_posts as $post) {
        echo '<li><a href="' . get_permalink($post['ID']) . '">' . $post['post_title'] . '</a></li>';
    }
    ?>
</ul>

7. دمج نموذج البحث في صفحة 404

النموذج بيساعد الزائر يبحث عن المحتوى اللي بيدور عليه بدل ما يطلع من الموقع:

<div class="search-404">
    <p>جرب تبحث عن حاجة تانية:</p>
    <?php get_search_form(); ?>
</div>

8. إضافة زر العودة للصفحة الرئيسية أو الصفحات المهمة

ممكن تضيف أزرار بسهولة:

<a href="<?php echo home_url(); ?>" class="btn-home">العودة للصفحة الرئيسية</a>
<a href="<?php echo get_permalink( get_option( 'page_for_posts' ) ); ?>" class="btn-blog">تصفح المدونة</a>

9. تحسين صفحة 404 لمحركات البحث (SEO)

تأكد إن الصفحة ترجع كود HTTP 404 عشان جوجل يعرف إنها صفحة خطأ فعلية.
حافظ على سرعة تحميل الصفحة.
لا تضيف روابط كثيرة تشتت المستخدم.
استخدم محتوى واضح يساعد في تحسين تجربة المستخدم.

10. أمثلة عملية وأكواد جاهزة

مثال كامل لملف 404.php بسيط وعملي

<?php get_header(); ?>

<div class="container-404">
    <h1>صفحة مش موجودة!</h1>
    <p>الصفحة اللي بتدور عليها مش متاحة دلوقتي. جرب تبحث أو ارجع للصفحة الرئيسية.</p>

    <?php get_search_form(); ?>

    <h2>مقالات مقترحة:</h2>
    <ul>
        <?php
        $recent_posts = wp_get_recent_posts(array(
            'numberposts' => 5,
            'post_status' => 'publish'
        ));
        foreach($recent_posts as $post) {
            echo '<li><a href="' . get_permalink($post['ID']) . '">' . $post['post_title'] . '</a></li>';
        }
        ?>
    </ul>

    <a href="<?php echo home_url(); ?>" class="btn-home">العودة للصفحة الرئيسية</a>
</div>

<?php get_footer(); ?>

تحسين التصميم باستخدام CSS

.container-404 {
    max-width: 800px;
    margin: 50px auto;
    text-align: center;
}
.container-404 h1 {
    font-size: 48px;
    color: #ff0000;
    margin-bottom: 20px;
}
.container-404 p {
    font-size: 18px;
    margin-bottom: 30px;
}
.btn-home {
    display: inline-block;
    padding: 12px 25px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.btn-home:hover {
    background-color: #005177;
}

11. نصائح مهمة عند تصميم صفحة 404

لا تترك الصفحة فارغة أو برسالة “خطأ فقط”.
دايمًا خلي الصفحة متناسقة مع تصميم الموقع.
وفر أكثر من خيار للزائر للخروج من الصفحة (روابط، بحث، أزرار).
اختبر الصفحة على أجهزة مختلفة.
استخدم لغة ودودة وبسيطة.

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

صفحة 404 بتحسن تجربة المستخدم وتقلل من معدل الارتداد.
ملف 404.php مسؤول عن عرض الصفحة دي في القالب.
لازم تعرض رسالة واضحة، نموذج بحث، وروابط مهمة.
التصميم لازم يكون جذاب وسهل الاستخدام.
ممكن تعرض مقالات مقترحة عشان تساعد الزائر.
راعي تحسين SEO والكود النظيف.

13. أسئلة شائعة

س: هل لازم يكون في ملف 404.php في القالب؟
ج: مش لازم، لو مش موجود، ووردبريس هيستخدم index.php. بس يفضل دايمًا تعمل ملف 404.php مخصص.

س: هل أقدر أضيف فيديو أو صور في صفحة 404؟
ج: طبعًا، ممكن تزود صور أو فيديوهات لزيادة التفاعل، بس خليك حريص على سرعة تحميل الصفحة.

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

س: هل تصميم صفحة 404 يؤثر على SEO؟
ج: أيوه، صفحة 404 محترمة تساعد جوجل تفهم إن الصفحة مش موجودة فعلاً وتحسن تجربة المستخدم.

التعامل مع إعدادات القالب (Theme )

درس التعامل مع إعدادات القالب (Theme ) في ووردبريس

1. مقدمة: إيه هو Theme Customizer؟

Theme Customizer هو أداة داخل ووردبريس بتسمح لمالك الموقع إنه يغير إعدادات شكل الموقع وتكوينه بشكل مباشر وبشكل تفاعلي.
اللي بيستخدمها بيقدر يشوف التعديلات بشكل مباشر قبل ما يحفظها.

2. أهمية Theme Customizer في تخصيص القوالب

بيخلي التخصيص سهل للمستخدم العادي من غير ما يدخل في كود.
بيمنح مرونة كبيرة في تغيير ألوان، شعارات، نصوص، خيارات بدون إعادة تحميل الصفحة.
بيساعد المطورين على إضافة إعدادات متقدمة للقالب.

3. كيف يعمل Theme Customizer؟

الـ Customizer بيشتغل باستخدام API موجود في ووردبريس، بيعتمد على إضافة إعدادات (Settings)، أقسام (Sections)، وعناصر تحكم (Controls).
كل جزء ليه وظيفته:

Setting: القيمة أو الخاصية اللي هتتحفظ.
Section: قسم من الإعدادات بيحتوي على مجموعة عناصر تحكم.
Control: العنصر اللي المستخدم بيتعامل معاه (زر، لون، نص، صورة…).

4. إضافة إعدادات (Settings) جديدة في القالب

الإعدادات دي بتكون متغيرات بتتحفظ في قاعدة البيانات عشان نستخدمها بعدين في القالب.

مثال بسيط لإضافة إعداد لون:

function mytheme_customize_register( $wp_customize ) {
    $wp_customize->add_setting('header_textcolor', array(
        'default' => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ));
}
add_action('customize_register', 'mytheme_customize_register');

5. إضافة أقسام (Sections) في الـ Customizer

الأقسام بتساعدنا ننظم الإعدادات في واجهة الـ Customizer.

مثال إضافة قسم جديد:

$wp_customize->add_section('mytheme_colors', array(
    'title' => __('ألوان الموقع', 'mytheme'),
    'priority' => 30,
));

6. إضافة عناصر التحكم (Controls) المختلفة

العناصر دي هي اللي بتظهر في الـ Customizer زي اختيار اللون، نص، اختيار صورة، … إلخ.

مثال لإضافة عنصر اختيار لون:

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor_control', array(
    'label' => __('لون عنوان الهيدر', 'mytheme'),
    'section' => 'mytheme_colors',
    'settings' => 'header_textcolor',
)));

7. حفظ واسترجاع القيم المُعدلة

عشان نستخدم القيم دي في القالب، بنستخدم الدالة get_theme_mod().

مثال:

$header_color = get_theme_mod('header_textcolor', '#000000');
echo '<style>header { color: '. esc_attr($header_color) .'; }</style>';

8. تحديث القالب تلقائياً (Live Preview)

عشان التعديلات تظهر بدون إعادة تحميل الصفحة، بنستخدم الجافاسكربت في ملف customizer.js:

( function( $ ) {
    wp.customize( 'header_textcolor', function( value ) {
        value.bind( function( newval ) {
            $('header').css('color', newval);
        } );
    } );
} )( jQuery );

9. أمثلة عملية مع كود كامل

مثال كامل لإضافة قسم ألوان للعنوان مع تحديث مباشر

في ملف functions.php:

function mytheme_customize_register( $wp_customize ) {
    // إضافة قسم
    $wp_customize->add_section('mytheme_colors', array(
        'title' => __('ألوان الموقع', 'mytheme'),
        'priority' => 30,
    ));

    // إضافة إعداد
    $wp_customize->add_setting('header_textcolor', array(
        'default' => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport' => 'postMessage',
    ));

    // إضافة عنصر التحكم
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor_control', array(
        'label' => __('لون عنوان الهيدر', 'mytheme'),
        'section' => 'mytheme_colors',
        'settings' => 'header_textcolor',
    )));
}
add_action('customize_register', 'mytheme_customize_register');

// ربط الجافاسكربت للتحديث المباشر
function mytheme_customize_preview_js() {
    wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '1.0', true );
}
add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );

وفي ملف customizer.js:

( function( $ ) {
    wp.customize( 'header_textcolor', function( value ) {
        value.bind( function( newval ) {
            $('header').css('color', newval);
        } );
    } );
} )( jQuery );

وفي ملف القالب (مثلاً header.php):

<header>
    <h1 style="color: <?php echo esc_attr(get_theme_mod('header_textcolor', '#000000')); ?>">مرحبا بك في موقعي</h1>
</header>

10. نصائح مهمة عند استخدام Theme Customizer

استخدم sanitize_callback دايمًا عشان تحمي البيانات.
استخدم خاصية transport مع القيمة 'postMessage' عشان تقدر تعمل تحديث مباشر (Live Preview).
نظّم الإعدادات في أقسام واضحة وسهلة الاستخدام.
استخدم أنواع عناصر التحكم المناسبة (ألوان، نصوص، صور، قوائم…).
اختبر التخصيص على أكثر من جهاز ومتصفح.

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

Theme Customizer أداة قوية لتخصيص القالب بسهولة.
لازم تضيف إعدادات، أقسام، وعناصر تحكم باستخدام API الخاص بووردبريس.
يمكن عرض التغييرات بشكل مباشر قبل الحفظ.
استخدم get_theme_mod() لاسترجاع القيم المعدلة.
دائما حافظ على أمان البيانات بالتنظيف (sanitize).

12. أسئلة شائعة

س: هل يمكن إضافة إعدادات غير شكلية زي إعدادات الأداء أو الوظائف؟
ج: ممكن، لكن Customizer عادة بيستخدم لإعدادات الشكل. للإعدادات المعقدة ينصح باستخدام صفحات إعدادات مخصصة (Settings Page).

س: هل لازم كل الإعدادات تظهر في واجهة المستخدم؟
ج: لأ، ممكن تستخدم إعدادات مخفية أو تستخدمها داخليًا بدون تحكم مباشر للمستخدم.

س: هل يدعم Customizer الإضافات Plugins؟
ج: نعم، الإضافات ممكن تضيف إعدادات خاصة بيها في Customizer.

س: هل التعديلات بتظهر على الموقع بدون تحديث الصفحة؟
ج: لو استخدمت خاصية transport مع postMessage وكتبت جافاسكربت مخصصة، هتظهر.

تعديل القالب من لوحة تحكم ووردبريس

1. مقدمة: إيه هي صفحة خيارات القالب؟

صفحة خيارات القالب هي صفحة خاصة تظهر في لوحة تحكم ووردبريس تحت قائمة خاصة بالقالب، بتسمح لمالك الموقع إنه يعدل إعدادات متقدمة تخص شكل أو وظائف القالب.
مثلاً: اختيار ألوان خاصة، رفع لوجو، تعديل نصوص ثابتة، تفعيل أو إيقاف مميزات معينة.

2. الفرق بين صفحة خيارات القالب وTheme Customizer

	صفحة خيارات القالب (Options Page)	Theme Customizer
المكان	لوحة تحكم ووردبريس (Backend)	واجهة التخصيص مع معاينة حية (Frontend)
الاستخدام	إعدادات متقدمة وتحكم شامل	تخصيص شكل الموقع بشكل تفاعلي
سهولة الاستخدام	أقل تفاعلية، ممكن تحتاج تحديث الصفحة	تفاعلية، معاينة مباشرة
التطبيقات	تحكم في إعدادات معقدة أو غير شكلية	تغيير ألوان، نصوص، صور، شكل

3. أهمية صفحة خيارات القالب

بتدي تحكم أكبر للمستخدم بدون الحاجة لتعديل ملفات الكود.
بتوفر واجهة سهلة لإدارة إعدادات متقدمة.
مناسبة للمطورين اللي عايزين يبنوا قوالب احترافية قابلة للتخصيص الكامل.
بتساعد على فصل الأكواد وتسهيل التعديل والصيانة.

4. إنشاء صفحة خيارات جديدة في لوحة تحكم ووردبريس

بنبدأ بإنشاء صفحة جديدة باستخدام دوال ووردبريس الخاصة بالقوائم زي add_menu_page.

5. تسجيل صفحة الخيارات باستخدام `add_menu_page` و`add_submenu_page`

add_menu_page: لإضافة قائمة رئيسية في لوحة التحكم.
add_submenu_page: لإضافة صفحة فرعية تحت قائمة موجودة.

مثال تسجيل صفحة خيارات:

function mytheme_add_admin_menu() {
    add_menu_page(
        'إعدادات القالب',  // عنوان الصفحة
        'خيارات القالب',    // عنوان القائمة
        'manage_options',   // صلاحيات المستخدم
        'mytheme_options',  // معرف الصفحة
        'mytheme_options_page',  // الدالة المسؤولة عن العرض
        'dashicons-admin-customizer',  // أيقونة القائمة
        60  // ترتيب القائمة
    );
}
add_action('admin_menu', 'mytheme_add_admin_menu');

6. إضافة حقول الإدخال المختلفة

عشان نضيف حقول متعددة، بنستخدم واجهة الـ Settings API، اللي بتسهل تسجيل الإعدادات والتحقق منها وحفظها.

خطوات استخدام Settings API:

تسجيل الإعدادات register_setting()
تسجيل القسم add_settings_section()
تسجيل الحقول add_settings_field()
كتابة دوال عرض الحقول

مثال لإضافة حقل نصي وحقل اختيار لون

function mytheme_settings_init() {
    // تسجيل الإعدادات
    register_setting('mytheme_options_group', 'mytheme_options');

    // إضافة قسم
    add_settings_section(
        'mytheme_section_general',
        __('الإعدادات العامة', 'mytheme'),
        'mytheme_section_callback',
        'mytheme_options'
    );

    // إضافة حقل نصي
    add_settings_field(
        'mytheme_text_field',
        __('نص الترحيب', 'mytheme'),
        'mytheme_text_field_render',
        'mytheme_options',
        'mytheme_section_general'
    );

    // إضافة حقل اختيار لون
    add_settings_field(
        'mytheme_color_field',
        __('لون الخلفية', 'mytheme'),
        'mytheme_color_field_render',
        'mytheme_options',
        'mytheme_section_general'
    );
}
add_action('admin_init', 'mytheme_settings_init');

function mytheme_section_callback() {
    echo __('عدل الإعدادات التالية لتخصيص القالب', 'mytheme');
}

function mytheme_text_field_render() {
    $options = get_option('mytheme_options');
    ?>
    <input type='text' name='mytheme_options[mytheme_text_field]' value='<?php echo esc_attr($options['mytheme_text_field'] ?? ''); ?>'>
    <?php
}

function mytheme_color_field_render() {
    $options = get_option('mytheme_options');
    ?>
    <input type='text' name='mytheme_options[mytheme_color_field]' value='<?php echo esc_attr($options['mytheme_color_field'] ?? '#ffffff'); ?>' class='my-color-field' >
    <script>
    jQuery(document).ready(function($){
        $('.my-color-field').wpColorPicker();
    });
    </script>
    <?php
}

7. حفظ البيانات بشكل آمن

ووردبريس بيستخدم دالة register_setting() مع خاصية التحقق من الصحة. لازم تهتم بـ sanitize و validate عشان تأمن البيانات وتحمي موقعك من إدخال بيانات خاطئة أو ضارة.

8. استرجاع وعرض البيانات في القالب

لاستعمال البيانات المحفوظة في القالب، استخدم get_option().

مثال:

$options = get_option('mytheme_options');
$welcome_text = $options['mytheme_text_field'] ?? 'أهلاً بك';
$bg_color = $options['mytheme_color_field'] ?? '#ffffff';
?>

<style>
    body { background-color: <?php echo esc_attr($bg_color); ?>; }
</style>
<div class="welcome-message"><?php echo esc_html($welcome_text); ?></div>

9. مثال عملي: بناء صفحة إعدادات بسيطة لقالب

في ملف functions.php:

function mytheme_add_admin_menu() {
    add_menu_page('إعدادات القالب', 'خيارات القالب', 'manage_options', 'mytheme_options', 'mytheme_options_page', 'dashicons-admin-customizer', 60);
}
add_action('admin_menu', 'mytheme_add_admin_menu');

function mytheme_settings_init() {
    register_setting('mytheme_options_group', 'mytheme_options', 'mytheme_options_sanitize');

    add_settings_section('mytheme_section_general', 'الإعدادات العامة', 'mytheme_section_callback', 'mytheme_options');

    add_settings_field('mytheme_text_field', 'نص الترحيب', 'mytheme_text_field_render', 'mytheme_options', 'mytheme_section_general');

    add_settings_field('mytheme_color_field', 'لون الخلفية', 'mytheme_color_field_render', 'mytheme_options', 'mytheme_section_general');
}
add_action('admin_init', 'mytheme_settings_init');

function mytheme_section_callback() {
    echo 'عدل الإعدادات التالية لتخصيص القالب';
}

function mytheme_text_field_render() {
    $options = get_option('mytheme_options');
    ?>
    <input type='text' name='mytheme_options[mytheme_text_field]' value='<?php echo esc_attr($options['mytheme_text_field'] ?? ''); ?>'>
    <?php
}

function mytheme_color_field_render() {
    $options = get_option('mytheme_options');
    ?>
    <input type='text' name='mytheme_options[mytheme_color_field]' value='<?php echo esc_attr($options['mytheme_color_field'] ?? '#ffffff'); ?>' class='my-color-field' >
    <script>
    jQuery(document).ready(function($){
        $('.my-color-field').wpColorPicker();
    });
    </script>
    <?php
}

function mytheme_options_page() {
    ?>
    <form action='options.php' method='post'>
        <h2>خيارات القالب</h2>
        <?php
        settings_fields('mytheme_options_group');
        do_settings_sections('mytheme_options');
        submit_button();
        ?>
    </form>
    <?php
}

function mytheme_options_sanitize($input) {
    $output = array();

    if (isset($input['mytheme_text_field'])) {
        $output['mytheme_text_field'] = sanitize_text_field($input['mytheme_text_field']);
    }

    if (isset($input['mytheme_color_field'])) {
        $output['mytheme_color_field'] = sanitize_hex_color($input['mytheme_color_field']);
    }

    return $output;
}

10. تحسينات إضافية وتجربة المستخدم

استخدام مكتبة jQuery UI Color Picker لتسهيل اختيار الألوان.
إضافة حقول تحميل صور باستخدام wp_enqueue_media لرفع الصور (مثلاً لوجو الموقع).
فصل الإعدادات في أقسام متعددة لتنظيم أفضل.
استخدام Ajax للحفظ بدون تحديث الصفحة (للمطورين المتقدمين).

11. نصائح مهمة عند بناء صفحة إعدادات القالب

دايمًا استخدم sanitize لتنظيف البيانات.
حدد صلاحيات المستخدمين (عادة manage_options) عشان تحمي الصفحة.
نظّم واجهة المستخدم بشكل واضح وسهل.
اختبر الصفحة على مختلف المتصفحات.
استخدم الترجمة باستخدام __() و _e() عشان تجعل القالب متعدد اللغات.

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

صفحة خيارات القالب بتسمح بتخصيص متقدم من لوحة التحكم.
استخدم دوال add_menu_page وregister_setting لإنشاء الصفحة وإعداداتها.
قم بتنظيف البيانات المدخلة قبل الحفظ.
استرجع الإعدادات في ملفات القالب باستخدام get_option.
حسّن تجربة المستخدم باستخدام أدوات مثل Color Picker وتحميل الصور.

13. أسئلة شائعة

س: هل يمكن إضافة صفحة خيارات متعددة؟
ج: نعم، تقدر تضيف أكثر من صفحة أو صفحة فرعية باستخدام add_submenu_page.

س: هل يمكن استخدام AJAX لحفظ الإعدادات؟
ج: نعم، لكنه يتطلب برمجة متقدمة خارج إطار Settings API.

س: هل يمكن استيراد وتصدير إعدادات الصفحة؟
ج: ممكن لكن يتطلب إضافات أو كود مخصص.

س: هل صفحة الخيارات تناسب القوالب فقط؟
ج: لا، ممكن تستخدمها لأي إضافة تحتاج إعدادات خاصة.

إيه هو قالب الووردبريس؟

1. مقدمة: يعني إيه قالب ووردبريس؟

2. الفرق بين القالب والإضافة

3. القالب بيتكوّن من إيه؟ (شرح مبسّط للملفات)

4. أنواع قوالب ووردبريس

5. القوالب المجانية vs القوالب المدفوعة

6. إزاي القالب بيتحكم في شكل الموقع؟

7. ليه أصلاً أعمل قالب ووردبريس؟

8. إزاي أختار القالب المناسب؟

9. أشهر أماكن تحميل القوالب

10. هل ممكن أعمل قالب بنفسي؟

11. القوالب وSEO: علاقتهم ببعض

12. القوالب و الأداء والسرعة

13. أفضل ممارسات عند تصميم قالب

14. ازاي أبدأ في تعلم بناء القوالب؟

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

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

“قالب ووردبريس: السر اللي بيغير شكل موقعك بالكامل”

شارك الدرس:

الفرق بين القالب والإضافة في ووردبريس

1. مقدمة: ليه فيه ناس بتتلخبط؟

2. القالب (Theme) مسؤول عن إيه؟

3. الإضافة (Plugin) مسؤولة عن إيه؟

4. مثال عملي: تصميم الموقع vs وظائف الموقع

5. هل ممكن القالب يضيف مميزات؟

6. هل ينفع الإضافة تغير شكل الموقع؟

7. إزاي أختار الصح؟

8. أمثلة شهيرة لقوالب وإضافات

قوالب مشهورة:

إضافات مشهورة:

9. ملخص سريع

🔗 روابط مفيدة من الكورس:

شارك الدرس:

القالب بيتكوّن من إيه؟

1. مقدمة

2. الملفات الأساسية في أي قالب ووردبريس

3. ملف style.css: قلب القالب من برّا

4. ملف index.php: لو مفيش غيره… هيشتغل لوحده

5. ملف functions.php: المُخ بتاع القالب

6. header.php و footer.php: الرأس والتذييل

7. ملفات single.php و page.php

8. ملف screenshot.png: صورة القالب

9. ملفات إضافية (اختيارية بس مفيدة)

10. Child Theme: النسخة الاحتياطية للتعديلات

11. إزاي القالب بيتفاعل مع ووردبريس؟

12. ترتيب تحميل ملفات القالب

13. أفضل طريقة لتنظيم ملفات القالب

14. أدوات هتفيدك وانت بتراجع ملفات القالب

15. ملخص الدرس

شارك الدرس:

ملفات القالب الأساسية

1. مقدمة: يعني إيه ملفات أساسية في القالب؟

2. إيه هو ملف style.css؟

3. إيه هو ملف index.php؟

4. العلاقة بين الملفين في شغل القالب

5. محتويات style.css بالتفصيل

6. محتويات index.php بالتفصيل

7. إزاي ووردبريس بيتعامل مع الملفات دي؟

8. الأخطاء الشائعة فيهم

9. ازاي تختبر الملفات دي صح؟

10. تطبيق عملي سريع لقالب بسيط

style.css:

index.php:

11. هل ممكن تشتغل من غيرهم؟

12. تأثيرهم على السيو والسرعة

13. نصايح للمبتدئين في كتابة أول قالب

14. شوية أدوات هتساعدك في كتابة الملفات دي

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

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

خلاصة الدرس: “الملفات اللي بتدي روح للقالب”

مراجعة متحيّزة إيجابية:

شارك الدرس:

ملف functions.php

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

2. الملف ده بيشتغل إزاي؟

3. الفرق بينه وبين ملفات القالب التانية

4. أهم الحاجات اللي ممكن تضيفها فيه

5. كود تهيئة القالب – أول خطوة في functions.php

6. إضافة دعم للصور المصغرة، القوائم، والـ widgets

الصور المصغرة (Thumbnails):

3. ملف `style.css`: قلب القالب من برّا

4. ملف `index.php`: لو مفيش غيره… هيشتغل لوحده

5. ملف `functions.php`: المُخ بتاع القالب

6. `header.php` و `footer.php`: الرأس والتذييل

7. ملفات `single.php` و `page.php`

8. ملف `screenshot.png`: صورة القالب

`style.css`:

`index.php`:

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

5. كود تهيئة القالب – أول خطوة في `functions.php`

11. أفضل ممارسات كتابة الكود في `functions.php`

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

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

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

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

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

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

5. الفرق بينه وبين `header.php`

10. أهمية `wp_footer()`