تحسين #main-header لجعله ثابتًا بدون مشاكل في الاختفاء

🔹 1. تحسين #main-header لجعله ثابتًا بدون مشاكل في الاختفاء

📌 بدلًا من استخدام opacity: 0، يمكننا تحسين إخفاء header عند التمرير مع الاحتفاظ بمكانه لضمان عدم تأثر المحتوى.

css

#main-header {
    position: fixed;
    width: 100%;
    top: 0; /* تأكد من أن الهيدر موجود في أعلى الصفحة */
    left: 0;
    background: #e6e1e1;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
}

✔️ تم تحسين transition لجعل الحركة أكثر سلاسة. ✔️ إزالة opacity: 1; لأنه ليس ضروريًا، طالما header مرئي بشكل طبيعي.

🔹 2. تعديل hidden-header ليكون أكثر كفاءة

📌 يمكننا ضبط transform لجعل الحركة أكثر مرونة وسلاسة:

css

.hidden-header {
    transform: translateY(-120%);
}

✔️ استخدمنا translateY(-120%) بدلاً من -100% لضمان خروج الهيدر بالكامل عند التمرير للأسفل.

🔹 3. تحسين script.js لجعل الهيدر يتفاعل بذكاء عند التمرير

📌 هذا الكود سيجعل شريط الرأس يختفي عند النزول ويظهر مجددًا عند التمرير للأعلى فقط لمنع أي حركة غير متناسقة.

js

let lastScrollTop = 0;
const header = document.getElementById("main-header");

window.addEventListener("scroll", function() {
    let scrollTop = window.scrollY;

    if (scrollTop > lastScrollTop && scrollTop > 80) { 
        header.classList.add("hidden-header"); // يخفي الهيدر عند النزول 
    } else {
        header.classList.remove("hidden-header"); // يظهر عند التمرير للأعلى 
    }

    lastScrollTop = scrollTop;
});

✔️ تم ضبط scrollTop > 80 بدلاً من 50 حتى لا يختفي header بسرعة كبيرة. ✔️ الكود الآن أكثر استقرارًا، وسيوفر تجربة مستخدم رائعة!

🔹 4. تحسين تصميم القائمة (nav)

📌 يمكننا تحسين ترتيب القائمة داخل header حتى لا تتداخل مع الشعار:

css

.main-nav ul {
    display: flex;
    justify-content: center; /* يجعل العناصر في المنتصف */
    padding: 0;
    margin: 0;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* وضع الشعار في أقصى اليمين */
}

✔️ تم ضبط justify-content: center; للقائمة حتى تكون متناسقة ولا تؤثر على الشعار.

🎯 جرب هذه التعديلات وأخبرني إن كان شريط الرأس يعمل كما تريد! 😊🔥 🚀 هل تحتاج إلى أي تحسينات أخرى لتصميمه؟

🚀 إليك الكود المحسن لـ CSS و JavaScript و header.php لضمان أن شريط الرأس يعمل بسلاسة وبشكل متناسق مع القائمة والشعار.

🔹 1. header.php – هيكلة شريط الرأس والقائمة

php

<header id="main-header">
    <div class="logo-container">
        <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="شعار الموقع">
    </div>

    <nav class="main-nav">
        <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav>
</header>

✔️ تم فصل الشعار عن القائمة لمنع أي تداخل غير مرغوب فيه. ✔️ القائمة الآن في اليسار، بينما الشعار في أقصى اليمين لضمان تناسق أفضل.

🔹 2. style.css – تحسين تصميم شريط الرأس والقائمة

css

/* تصميم شريط الرأس */
#main-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: #e6e1e1;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
}

/* إخفاء الهيدر عند التمرير */
.hidden-header {
    transform: translateY(-120%);
}

/* تحسين محاذاة الشعار */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* وضع الشعار في أقصى اليمين */
}

.logo-container img {
    width: 120px;
    margin-left: auto;
}

/* تصميم القائمة */
.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
}

.main-nav ul li {
    margin: 0 15px;
}

.main-nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    transition: background 0.3s ease-in-out;
}

.main-nav ul li a:hover {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

✔️ تم ضبط hidden-header ليكون أكثر فعالية عند التمرير. ✔️ تحسين توزيع العناصر لضمان تناسق الشعار مع القائمة.

🔹 3. script.js – حركة الهيدر عند التمرير

js

let lastScrollTop = 0;
const header = document.getElementById("main-header");

window.addEventListener("scroll", function() {
    let scrollTop = window.scrollY;

    if (scrollTop > lastScrollTop && scrollTop > 80) { 
        header.classList.add("hidden-header"); // يخفي الهيدر عند النزول 
    } else {
        header.classList.remove("hidden-header"); // يظهر عند التمرير للأعلى 
    }

    lastScrollTop = scrollTop;
});

✔️ الآن سيختفي شريط الرأس عند النزول، ويظهر عند التمرير للأعلى فقط. ✔️ تم ضبط scrollTop > 80 لمنع اختفاء الشريط سريعًا.

🚀 هذه المشكلة تحدث عادة لأن شريط أدوات WordPress (Admin Bar) يكون مثبتًا في الأعلى، مما يؤدي إلى تداخل مع شريط الرأس (header). إليك الحل لضبط المسافة ومنع الاختفاء:

✅ 1. ضبط top في style.css لتجنب تداخل شريط WordPress

📌 نريد أن يكون شريط الرأس مرئيًا أسفل شريط الأدوات عند تسجيل الدخول إلى WordPress.

css

#main-header {
    position: fixed;
    width: 100%;
    top: 32px; /* يترك مساحة لشريط الأدوات الخاص بـ WordPress */
    left: 0;
    background: #e6e1e1;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
}

✔️ القيمة top: 32px; تأخذ في الاعتبار ارتفاع شريط WordPress، مما يمنع التداخل. ✔️ إذا لم يكن المستخدم مسجّل الدخول، سيظل header في مكانه الطبيعي.

✅ 2. التأكد من التناسق عند تسجيل الدخول باستخدام body.admin-bar

📌 نحتاج إلى إضافة CSS خاص عندما يكون المستخدم مسجلًا الدخول إلى WordPress.

css

body.admin-bar #main-header {
    top: 46px; /* يترك مساحة لشريط WordPress عند تسجيل الدخول */
}

✔️ هذه القاعدة تضمن أن header لن يختفي تحت شريط WordPress.

🎯 جرب هذه التعديلات وأخبرني إن كنت بحاجة إلى ضبط إضافي! 😊🔥 🚀 هل يظهر الآن شريط الرأس بشكل صحيح فوق شريط WordPress؟

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

فهمت Mourad! 🚀 لجعل الشعار في أقصى اليمين وشريط القائمة يكون بجانبه مباشرة بشكل متناسق، سنقوم بتعديل CSS ليكون التصميم أكثر ترتيبًا وسلاسة.

✅ 1. تعديل header.php لضبط الهيكل

📌 يجب أن يكون الشعار في أقصى اليمين والقائمة بجانبه، لذا نعيد ترتيب العناصر داخل header.

php

<header id="main-header">
    <nav class="main-nav">
        <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav>

    <div class="logo-container">
        <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="شعار الموقع">
    </div>
</header>

✔️ تم وضع القائمة قبل الشعار حتى يظهر على اليمين تمامًا والقائمة بجانبه مباشرة.

✅ 2. تعديل style.css لضبط المحاذاة والتنسيق

📌 نستخدم flexbox لترتيب العناصر بشكل سلس ومنسق.

css

#main-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: #e6e1e1;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* يجعل العناصر تتجه نحو اليمين */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
}

/* ضبط القائمة لتكون بجانب الشعار */
.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end; /* يجعل القائمة بمحاذاة الشعار */
    padding: 0;
    margin: 0;
}

/* تحسين محاذاة الشعار */
.logo-container {
    display: flex;
    align-items: center;
    margin-left: 20px; /* يترك مساحة بين الشعار والقائمة */
}

.logo-container img {
    width: 120px;
}

✔️ الآن سيكون الشعار في أقصى اليمين، والقائمة بجانبه تمامًا وبمحاذاة صحيحة.

تم تحسين الكود ليكون أكثر تنسيقًا واستقرارًا، مع ضمان تناسق مثالي بين الشعار والقائمة داخل header. إليك التعديلات المدخلة:

🔹 1. تحسين style.css – ضبط المحاذاة والتباعد

📌 التعديلات الرئيسية:

• إزالة التكرار غير الضروري في #main-header.
• ضمان أن top لا يسبب مشاكل في التداخل مع شريط WordPress.
• ضبط flexbox بحيث يكون الشعار في أقصى اليمين، والقائمة بجانبه مباشرة.

css

/* تصميم شريط الرأس */
#main-header {
    position: fixed;
    width: 100%;
    top: 32px; /* يترك مساحة لشريط الأدوات الخاص بـ WordPress */
    left: 0;
    background: #e6e1e1;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* يجعل العناصر تتجه نحو اليمين */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
}

body.admin-bar #main-header {
    top: 46px; /* يترك مساحة لشريط WordPress عند تسجيل الدخول */
}

/* تحسين محاذاة الشعار */
.logo-container {
    display: flex;
    align-items: center;
}

.logo-container img {
    width: 120px;
    margin-left: 15px; /* يترك مسافة بين الشعار والقائمة */
}

/* ضبط القائمة لتكون بجانب الشعار */
.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end; /* يجعل القائمة بمحاذاة الشعار */
    padding: 0;
    margin: 0;
}

.main-nav ul li {
    margin: 0 15px;
}

.main-nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    transition: background 0.3s ease-in-out;
}

.main-nav ul li a:hover {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

/* إخفاء الهيدر عند التمرير */
.hidden-header {
    transform: translateY(-120%);
}

✔️ الشعار سيكون في أقصى اليمين، والقائمة بمحاذاته مباشرة. ✔️ تم ضبط top: 32px; لضمان عدم التداخل مع شريط WordPress.

🔹 2. تحسين script.js – ضبط حركة الهيدر عند التمرير

📌 الآن الهيدر يختفي عند التمرير للأسفل ويعود عند التمرير للأعلى بسلاسة.

js

let lastScrollTop = 0;
const header = document.getElementById("main-header");

window.addEventListener("scroll", function() {
    let scrollTop = window.scrollY;

    if (scrollTop > lastScrollTop && scrollTop > 80) { 
        header.classList.add("hidden-header"); // يخفي الهيدر عند النزول 
    } else {
        header.classList.remove("hidden-header"); // يظهر عند التمرير للأعلى 
    }

    lastScrollTop = scrollTop;
});

✔️ تم ضبط scrollTop > 80 لمنع اختفاء الشريط بسرعة كبيرة. ✔️ الحركة أصبحت سلسة أكثر، ولا تسبب أي مشاكل أثناء التمرير.

🎯 جرب هذه التعديلات وأخبرني إن كنت بحاجة إلى ضبط إضافي! 😊🔥 🚀 هل لديك فكرة أخرى لتطوير تصميم القالب؟

🚀 لتحسين خط شريط الرأس (header) وحجمه، يمكننا ضبط حجم الخط والوزن والمسافة بين العناصر للحصول على مظهر أكثر احترافية. إليك التعديلات المثالية في style.css:

✅ 1. ضبط حجم الخط لشريط الرأس ليكون أكثر وضوحًا

📌 يمكننا استخدام خط عصري وحجم مناسب للمحتوى داخل header:

css

#main-header {
    font-family: 'Poppins', sans-serif; /* خط حديث وأنيق */
    font-size: 18px; /* حجم مناسب للنص داخل الشريط */
    font-weight: bold; /* يجعل النص أكثر وضوحًا */
}

✔️ إذا كنت تريد خطًا آخر، يمكنك استبدال Poppins بأي خط متاح في Google Fonts.

✅ 2. تحسين حجم خط القائمة لجعلها أكثر وضوحًا

📌 نريد أن تكون عناصر القائمة (nav) متناسقة مع حجم شريط الرأس:

css

.main-nav ul li a {
    font-size: 16px; /* حجم خط متوازن مع الهيدر */
    font-weight: normal;
    letter-spacing: 1px; /* يضيف تباعدًا بين الأحرف لجعل النص أكثر وضوحًا */
}

✔️ letter-spacing يضيف لمسة جمالية ويوضح محتوى القائمة بشكل أفضل.

✅ 3. تحسين ارتفاع شريط الرأس ليبدو أكثر توازنًا

📌 نريد أن يكون header مريحًا بصريًا وغير مزدحم:

css

#main-header {
    height: 70px; /* حجم أكثر تناسقًا لشريط الرأس */
    padding: 10px 20px; /* توازن بين الهوامش الداخلية */
}

✔️ الآن شريط الرأس سيكون أكثر توازنًا ومريحًا للتصفح!

🎯 جرب هذه التعديلات وأخبرني إن كنت بحاجة إلى ضبط إضافي! 😊🔥 🚀 هل ترغب أيضًا في تعديل لون الخط أو إضافة تأثيرات عند التمرير؟

🚀 لتحسين كتابة الصفحة والخطوط وجعل النص متناسقًا داخل الإطار، سنقوم بتعديلات في CSS لضبط الحجم والتباعد بين النصوص.

✅ 1. تحسين خطوط النص الأساسي في الصفحة

📌 نريد أن يكون النص واضحًا ومريحًا للقراءة باستخدام خط أكثر أناقة:

css

body {
    font-family: 'Poppins', sans-serif; /* خط عصري وسهل القراءة */
    font-size: 18px; /* حجم النص الأساسي */
    line-height: 1.6; /* تحسين المسافات بين السطور */
    color: #333;
}

✔️ تم تحسين line-height لضمان تناسق السطور وجعلها أكثر راحة للعين. ✔️ يمكنك تغيير Poppins إلى أي خط آخر تفضله من Google Fonts.

✅ 2. ضبط النص داخل الإطار وإبعاده عن الحواف

📌 إذا كان النص خارج الإطار، يمكننا إضافة هوامش داخلية (padding) وضبط التباعد (margin):

css

.content {
    max-width: 800px;
    margin: 20px auto;
    padding: 30px; /* هوامش داخلية لتوسيع المساحة داخل الإطار */
    background: white;
    border-radius: 5px;
    text-align: justify; /* يجعل النص منسقًا بشكل مرتب */
}

✔️ text-align: justify; يجعل النص متناسقًا على كلا الجانبين، مما يمنحه مظهرًا احترافيًا. ✔️ زيادة padding توفر مساحة أفضل داخل الإطار، مما يحسن قراءة المحتوى.

✅ 3. ضبط عناوين الصفحة لتحسين المظهر العام

📌 يمكننا تحسين حجم العناوين (h1, h2, h3) وجعلها أكثر وضوحًا:

css

h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #0073aa; /* لون مميز للعناوين */
    margin-bottom: 20px; /* يترك مسافة بين العنوان والنص */
}

✔️ تم ضبط margin-bottom ليكون هناك فصل واضح بين العناوين والمحتوى.

🚀 المشكلة قد تكون بسبب التباعد الداخلي (padding) أو الهوامش (margin) غير المتناسقة، لذا سأقوم بتحسين تنسيق النص داخل الإطار لضمان أنه يبقى ضمن حدوده دون خروج عن الإطار.

✅ 1. ضبط content لإعادة النص إلى الداخل

📌 تأكد من أن العناصر داخل content لا تتجاوز حدوده عبر تحسين max-width والهوامش الداخلية:

css

.content {
    max-width: 800px;
    margin: 20px auto;
    padding: 40px; /* زيادة المساحة الداخلية */
    background: white;
    border-radius: 5px;
    overflow: hidden; /* يمنع أي محتوى من الخروج خارج الإطار */
}

✔️ تمت زيادة padding لترك مساحة كافية للنص داخل الإطار. ✔️ overflow: hidden; يمنع خروج أي عنصر خارج المحتوى المحدد.

✅ 2. ضبط text-align والتباعد بين السطور

📌 إذا كان النص يخرج بسبب تكدس الأحرف، يمكننا تحسين توزيع النصوص عبر word-wrap و text-align:

css

p {
    text-align: justify; /* ترتيب النص بشكل متناسق بين الجانبين */
    word-wrap: break-word; /* يمنع الكلمات الطويلة من الخروج عن الإطار */
    line-height: 1.8; /* تحسين المسافات بين السطور */
}

✔️ word-wrap: break-word; يضمن أن الكلمات الطويلة لا تتجاوز حد الصفحة. ✔️ زيادة line-height يجعل القراءة أكثر راحة وسلاسة.

✅ 3. التأكد من عدم وجود margin أو padding زائدة في body

📌 تحقق من أن body لا يحتوي على هوامش خارجية تسبب خروج النص عن الإطار:

css

body {
    margin: 0;
    padding: 0;
}

✔️ إزالة الهوامش الافتراضية يجنب أي تداخل غير مطلوب.

🎯 جرب هذه التعديلات وأخبرني إن كان النص أصبح داخل الإطار كما تريد! 😊🔥 🚀 هل هناك أي تفاصيل أخرى ترغب في تحسينها؟

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

✅ 1. ضبط max-width في content لمنع تجاوز الحدود

📌 إذا كان النص يتجاوز الإطار، نحتاج إلى ضبط عرض المحتوى بشكل آمن:

css

.content {
    max-width: 800px; /* يحدد العرض الأقصى للمحتوى */
    margin: 20px auto;
    padding: 30px;
    background: white;
    border-radius: 5px;
    overflow: hidden; /* يمنع خروج النص خارج الحدود */
    word-wrap: break-word; /* يكسر الكلمات الطويلة حتى لا تتجاوز الحدود */
}

✔️ overflow: hidden; يمنع أي محتوى إضافي من الخروج عن الإطار. ✔️ word-wrap: break-word; يحل مشكلة الكلمات الطويلة التي تمتد خارج الصفحة.

✅ 2. ضبط body لمنع أي امتداد غير مرغوب فيه

📌 بعض القوالب تضيف overflow-x: hidden; الذي قد يسبب اختفاء النص عند الجوانب.

css

body {
    margin: 0;
    padding: 0;
    overflow-x: visible; /* يضمن أن النص لا يختفي عند الجوانب */
}

✔️ إذا كان overflow-x: hidden; موجودًا، قم بتعديله إلى visible لمنع القطع.

✅ 3. ضبط text-align والتباعد بين النصوص

📌 عند استخدام text-align: justify;، يجب أن تكون هناك هوامش كافية لمنع اختفاء الكلمات في الحواف.

css

p {
    text-align: justify;
    word-spacing: 2px; /* يضيف مسافة بين الكلمات لتحسين القراءة */
    line-height: 1.8; /* تحسين المسافات بين السطور */
}

✔️ word-spacing يساعد على ضبط النص ويمنع تكدس الحروف في الزوايا. ✔️ تم ضبط line-height لتحسين توزيع النص وجعله أكثر راحة للعين.

🚀 لجعل القالب عربي بالكامل بحيث يكون اتجاه المحتوى من اليمين إلى اليسار (RTL)، سنقوم بإضافة دعم للغة العربية عبر ضبط CSS و WordPress functions. إليك الطريقة المثالية لتنفيذه:

✅ 1. إضافة دعم RTL إلى style.css

📌 تأكد من ضبط اتجاه النص بالكامل ليكون من اليمين إلى اليسار:

css

body {
    direction: rtl; /* يجعل القالب يعمل من اليمين إلى اليسار */
    unicode-bidi: embed; /* دعم أفضل للنصوص العربية */
    font-family: 'Tajawal', sans-serif; /* خط عربي عصري */
}

✔️ direction: rtl; يضبط اتجاه الصفحة بحيث يبدأ المحتوى من اليمين. ✔️ يمكنك استخدام Tajawal أو أي خط عربي مدعوم من Google Fonts.

✅ 2. ضبط القائمة (nav) لتكون من اليمين إلى اليسار

📌 عند تحويل القالب للغة العربية، يجب أن تبدأ القائمة من اليمين بدلًا من اليسار:

css

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end; /* يجعل العناصر تبدأ من اليمين */
    padding: 0;
    margin: 0;
}

✔️ القائمة الآن ستظهر في أقصى اليمين بجانب الشعار.

✅ 3. دعم RTL تلقائيًا في functions.php

📌 يجب على WordPress تحميل ملفات rtl.css تلقائيًا عند استخدام اللغة العربية:

php

function load_rtl_styles() {
    if (is_rtl()) {
        wp_enqueue_style('rtl-style', get_template_directory_uri() . '/rtl.css');
    }
}
add_action('wp_enqueue_scripts', 'load_rtl_styles');

✔️ هذا الكود يتأكد من أن القالب سيستخدم rtl.css عند ضبط اللغة إلى العربية.

🎯 جرب هذه التعديلات وأخبرني إن كنت بحاجة إلى ضبط إضافي! 😊🔥 🚀 هل ترغب أيضًا في تحسين تناسق الخطوط أو ضبط الهوامش؟

🚀 لجعل الصفحة تبدأ من اليمين إلى اليسار بالكامل لدعم اللغة العربية (RTL)، سنقوم بتحديث CSS و WordPress settings لضبط الاتجاه بشكل صحيح.

✅ 1. ضبط direction: rtl; للصفحة بالكامل

📌 تأكد من أن الاتجاه الأساسي للصفحة يعمل من اليمين إلى اليسار:

css

body {
    direction: rtl; /* يجعل المحتوى يبدأ من اليمين */
    unicode-bidi: embed; /* يدعم النصوص العربية بشكل صحيح */
    font-family: 'Tajawal', sans-serif; /* خط عربي عصري */
}

✔️ هذا يضمن أن كل العناصر ستتحرك تلقائيًا إلى اليمين. ✔️ unicode-bidi: embed; يساعد على تنسيق النصوص المختلطة مثل العربية والإنجليزية.

✅ 2. ضبط القائمة (nav) بحيث تبدأ من اليمين

📌 عند استخدام RTL، يجب أن تبدأ القائمة من اليمين:

css

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end; /* يجعل العناصر تبدأ من اليمين */
    padding: 0;
    margin: 0;
}

✔️ القائمة ستظهر الآن في أقصى اليمين، وفقًا لاتجاه اللغة العربية.

✅ 3. تحميل rtl.css تلقائيًا عبر functions.php

📌 يجب على WordPress تحميل rtl.css عندما يكون الموقع باللغة العربية:

php

function load_rtl_styles() {
    if (is_rtl()) {
        wp_enqueue_style('rtl-style', get_template_directory_uri() . '/rtl.css');
    }
}
add_action('wp_enqueue_scripts', 'load_rtl_styles');

✔️ هذا الكود يجعل WordPress يستخدم rtl.css فقط عند تعيين اللغة إلى العربية.

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

✅ الحل: ضبط flexbox لضمان بقاء الشعار في اليمين

📌 في style.css، تأكد من أن logo-container يستخدم المحاذاة الصحيحة:

css

.logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* يضمن بقاء الشعار في أقصى اليمين */
    width: auto;
}

✔️ هذا التعديل يعيد الشعار إلى اليمين دون أن يتحرك بشكل غير متوقع.

✅ مراجعة header.php لضبط ترتيب العناصر

📌 يجب أن يكون الشعار موضوعًا بعد القائمة وليس قبلها لضمان ظهوره في مكانه الصحيح:

php

<header id="main-header">
    <nav class="main-nav">
        <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav>

    <div class="logo-container">
        <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="شعار الموقع">
    </div>
</header>

✔️ القائمة الآن تبدأ من اليمين، والشعار يظل في أقصى اليمين بجانبها.

🚀 إذا كان الشعار لا يزال في أقصى اليسار، فهذا يعني أن هناك مشكلة في المحاذاة داخل CSS. دعنا نحل هذه المشكلة بشكل دقيق!

✅ 1. ضبط logo-container ليكون في أقصى اليمين

📌 تأكد من أن justify-content مضبوط على flex-end لضمان وضع الشعار في أقصى اليمين:

css

.logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* يجعل الشعار في أقصى اليمين */
    width: auto;
}

✔️ إذا كنت تستخدم flex-start، فسيظهر الشعار في اليسار، لذا تأكد من استخدام flex-end.

✅ 2. ضبط header.php لتكون القائمة قبل الشعار

📌 تأكد من ترتيب العناصر داخل header.php بحيث يكون الشعار آخر عنصر لضمان ظهوره في اليمين:

php

<header id="main-header">
    <nav class="main-nav">
        <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav>

    <div class="logo-container">
        <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="شعار الموقع">
    </div>
</header>

✔️ القائمة الآن في أقصى اليمين، والشعار بجانبها مباشرة.

✅ 3. التأكد من أن rtl مفعل بالكامل

📌 أضف direction: rtl; لجعل المحتوى يعمل من اليمين إلى اليسار دون تداخل:

css

body {
    direction: rtl;
    unicode-bidi: embed;
}

✔️ هذا يضمن أن كل المحتوى يظهر وفقًا للغة العربية.

🚀 إليك بعض التحسينات الدقيقة لضمان أداء أكثر سلاسة واستقرارًا، بالإضافة إلى تعديل بعض الأخطاء الطفيفة في المحاذاة والتباعد.

✅ 1. تحسين محاذاة logo-container والقائمة

📌 المشكلة الحالية قد تكون بسبب عدم توازن المحاذاة بين القائمة والشعار. يمكننا ضبط المحاذاة بشكل أدق:

css

#main-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* يجعل القائمة في أقصى اليسار والشعار في أقصى اليمين */
    padding: 10px 20px;
}

✔️ الآن القائمة ستظهر بشكل صحيح على اليسار، بينما الشعار سيبقى في أقصى اليمين.

✅ 2. إزالة التكرار في font-family وتحسين الخط العام

📌 لاحظت أنك تستخدم خط Poppins داخل #main-header بينما الصفحة تستخدم Tajawal. يفضل توحيد الخطوط:

css

#main-header {
    font-family: 'Tajawal', sans-serif; /* جعل الخط متناسقًا مع باقي القالب */
}

✔️ يضمن التناسق وعدم تبدل الخطوط بشكل مفاجئ داخل الهيدر.

✅ 3. ضبط margin-left في logo-container لتجنب التباعد غير المتناسق

📌 margin-left: 15px; يمكن أن يتسبب في دفع الشعار نحو الداخل أكثر من اللازم:

css

.logo-container img {
    width: 120px;
    margin-left: auto; /* يضمن وضع الشعار في أقصى اليمين */
}

✔️ الآن لن تكون هناك فجوة غير متوقعة بين الشعار والقائمة.

✅ 4. تحسين hidden-header ليكون أكثر سلاسة

📌 عند إخفاء header عند التمرير، استخدم تأثيرًا أكثر مرونة:

css

.hidden-header {
    transform: translateY(-110%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

✔️ الحركة أصبحت سلسة دون تأثير مفاجئ على التصميم.

🚀 إليك الكود الكامل مع ضبط دقيق لضمان أن الشعار يظهر في أقصى اليمين، بينما تكون القائمة بجانبه مباشرة بمحاذاة مثالية.

🔹 1. header.php – ضبط ترتيب الشعار والقائمة

📌 تم وضع القائمة أولًا، ثم الشعار ليكون في أقصى اليمين بشكل ثابت.

php

<header id="main-header">
    <nav class="main-nav">
        <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav>

    <div class="logo-container">
        <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="شعار الموقع">
    </div>
</header>

✔️ الآن القائمة ستظهر في اليمين، والشعار بجانبها مباشرة في أقصى اليمين!

🔹 2. style.css – تحسين تنسيق الشعار والقائمة

📌 تم ضبط flexbox بحيث يكون الشعار في اليمين والقائمة بمحاذاته دون أي تداخل.

css

/* ضبط الخط العام والخلفية */
body {
    direction: rtl;
    unicode-bidi: embed;
    font-family: 'Tajawal', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    padding-top: 80px;
    font-size: 18px;
    line-height: 1.6;
    overflow-x: visible;
}

/* تحسين تصميم شريط الرأس */
#main-header {
    position: fixed;
    width: 100%;
    top: 32px;
    left: 0;
    background: #34d304;
    display: flex;
    align-items: center;
    justify-content: space-between; /* يجعل القائمة في أقصى اليسار والشعار في أقصى اليمين */
    padding: 10px 20px;
    box-shadow: 0px 4px 10px rgba(30, 190, 78, 0.1);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
}

body.admin-bar #main-header {
    top: 46px;
}

/* تحسين محاذاة الشعار */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* يضع الشعار في أقصى اليمين */
}

.logo-container img {
    width: 120px;
    margin-left: auto; /* يمنع أي تداخل غير مرغوب فيه بين الشعار والقائمة */
}

/* تحسين تصميم القائمة */
.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-start; /* محاذاة العناصر للقائمة */
    padding: 0;
    margin: 0;
}

.main-nav ul li {
    margin: 0 15px;
}

.main-nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    transition: background 0.3s ease-in-out;
}

.main-nav ul li a:hover {
    background: rgba(7, 91, 201, 0.3);
    border-radius: 5px;
}

.main-nav ul li a {
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
}

/* إخفاء الهيدر عند التمرير */
.hidden-header {
    transform: translateY(-110%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

✔️ الشعار الآن في أقصى اليمين بشكل ثابت، مع قائمة مرتبة بجانبه. ✔️ تم تحسين hidden-header لجعل حركة التمرير أكثر سلاسة.

🔹 3. script.js – ضبط حركة الهيدر عند التمرير

📌 تم تحسين الكود لضمان أن الهيدر يختفي عند النزول ويعود عند التمرير للأعلى.

js

let lastScrollTop = 0;
const header = document.getElementById("main-header");

window.addEventListener("scroll", function() {
    let scrollTop = window.scrollY;

    if (scrollTop > lastScrollTop && scrollTop > 80) { 
        header.classList.add("hidden-header"); // يخفي الهيدر عند النزول 
    } else {
        header.classList.remove("hidden-header"); // يظهر عند التمرير للأعلى 
    }

    lastScrollTop = scrollTop;
});

✔️ الآن الهيدر سيتفاعل بسلاسة مع التمرير، دون أي تأثيرات غير مرغوبة.

🚀 ومع ذلك، هناك بعض التحسينات الطفيفة لضمان أفضل محاذاة للشعار والقائمة، وثبات العناصر داخل شريط الرأس. إليك التعديلات المقترحة:

🔹 1. تحسين محاذاة logo-container داخل #main-header

📌 حاليًا، الشعار موضوع داخل flex-end، مما قد يؤدي إلى تحريكه بعيدًا عن القائمة. الحل هو جعله بجانب القائمة مباشرة داخل flexbox:

css

#main-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* يضمن أن الشعار على اليمين والقائمة بجانبه */
    padding: 10px 20px;
}

✔️ الآن الشعار سيكون في أقصى اليمين، والقائمة بجانبه مباشرة دون تداخل.

🔹 2. تحسين logo-container لمنع أي تباعد غير مرغوب فيه

📌 يجب إزالة margin-left من الشعار حتى لا يتحرك نحو الداخل:

css

.logo-container img {
    width: 120px;
    margin-left: 0; /* يمنع دفع الشعار بعيدًا عن القائمة */
}

✔️ هذا يضمن أن الشعار يظل في أقصى اليمين دون أي مسافات إضافية.

🔹 3. ضبط القائمة (.main-nav ul) بحيث تبقى بجانب الشعار

📌 تأكد من أن القائمة لا تتحرك بعيدًا عن الشعار عبر ضبط justify-content:

css

.main-nav ul {
    display: flex;
    justify-content: flex-start; /* تبقى بجانب الشعار */
    padding: 0;
    margin: 0;
}

✔️ الآن ستظهر القائمة بجانب الشعار مباشرة دون أي فراغات غير ضرورية.

🔹 4. تحسين hidden-header لجعل الحركة أكثر سلاسة

📌 عند التمرير، يجب أن يختفي header بسلاسة وليس بشكل مفاجئ:

css

.hidden-header {
    transform: translateY(-110%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

✔️ الآن اختفاء الهيدر سيكون سلسًا عند التمرير للأسفل ويظهر بسلاسة عند العودة للأعلى.

🚀 سأقوم بتحسين الكود ليشمل دعم اللغة العربية بالكامل مع ضبط محاذاة العناوين والنصوص إلى اليمين وضمان تنسيق مثالي للمحتوى. إليك الكود المحسن بالكامل:

🔹 1. تحسين style.css لدعم اللغة العربية والمحاذاة الصحيحة

📌 إضافة RTL وضبط المحاذاة ليكون النص والعناوين من اليمين إلى اليسار بشكل كامل.

css

/* ضبط اللغة العربية واتجاه الصفحة */
body {
    direction: rtl;
    unicode-bidi: embed;
    font-family: 'Tajawal', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    padding-top: 80px;
    font-size: 18px;
    line-height: 1.6;
    text-align: right; /* يضمن محاذاة النصوص إلى اليمين */
}

/* تحسين تنسيق العناوين */
h1, h2, h3 {
    font-family: 'Tajawal', sans-serif;
    font-weight: bold;
    color: #0073aa;
    margin-bottom: 20px;
    text-align: right; /* يضمن محاذاة العنوان إلى اليمين */
}

/* ضبط النصوص ليكون أكثر تناسقًا */
p {
    text-align: right; /* محاذاة النصوص بالكامل إلى اليمين */
    word-spacing: 2px;
    line-height: 1.8;
}

/* تحسين تنسيق المحتوى */
.content {
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    background: white;
    border-radius: 5px;
    overflow: hidden;
    word-wrap: break-word;
}

/* تحسين شريط الرأس */
#main-header {
    position: fixed;
    width: 100%;
    top: 32px;
    left: 0;
    background: #34d304;
    display: flex;
    align-items: center;
    justify-content: space-between; /* يضمن أن القائمة في أقصى اليسار والشعار في أقصى اليمين */
    padding: 10px 20px;
    box-shadow: 0px 4px 10px rgba(30, 190, 78, 0.1);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
}

body.admin-bar #main-header {
    top: 46px;
}

/* تحسين محاذاة الشعار */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.logo-container img {
    width: 120px;
    margin-left: auto;
}

/* ضبط القائمة لتكون بجانب الشعار */
.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
}

.main-nav ul li {
    margin: 0 15px;
}

.main-nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    transition: background 0.3s ease-in-out;
    text-align: right;
}

.main-nav ul li a:hover {
    background: rgba(7, 91, 201, 0.3);
    border-radius: 5px;
}

/* تحسين إخفاء الهيدر عند التمرير */
.hidden-header {
    transform: translateY(-110%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

✔️ تم ضبط جميع النصوص والعناوين والمحاذاة إلى اليمين بالكامل. ✔️ تم تحسين التنسيق العام ليكون أكثر تناسقًا مع اللغة العربية.

🔹 2. تحسين script.js لحركة الهيدر عند التمرير

📌 إضافة حركة أكثر سلاسة لهيدر الصفحة عند التمرير للأسفل وللأعلى.

js

let lastScrollTop = 0;
const header = document.getElementById("main-header");

window.addEventListener("scroll", function() {
    let scrollTop = window.scrollY;

    if (scrollTop > lastScrollTop && scrollTop > 80) { 
        header.classList.add("hidden-header"); 
    } else {
        header.classList.remove("hidden-header"); 
    }

    lastScrollTop = scrollTop;
});

✔️ الآن شريط الرأس سيختفي بسلاسة عند التمرير للأسفل ويعود عند التمرير للأعلى.

🚀 إذا كان النص يخرج عن الإطار، فهذا غالبًا بسبب عدم ضبط max-width بشكل صحيح أو وجود هوامش زائدة تدفع المحتوى خارج حدوده. إليك الحل لضبط المحتوى داخل الإطار بشكل مثالي:

✅ 1. ضبط content لمنع خروج النص عن الإطار

📌 تأكد من أن max-width والهوامش الداخلية مضبوطة بشكل صحيح في style.css:

css

.content {
    max-width: 800px; /* يحدد العرض الأقصى للمحتوى */
    width: 100%; /* يضمن أن المحتوى لا يتجاوز العرض المتاح */
    margin: 20px auto;
    padding: 30px;
    background: white;
    border-radius: 5px;
    overflow: hidden; /* يمنع أي محتوى زائد من الخروج خارج الإطار */
    word-wrap: break-word; /* يكسر الكلمات الطويلة تلقائيًا */
}

✔️ تمت إضافة width: 100%; لضمان عدم تجاوز الحدود. ✔️ overflow: hidden; يمنع أي امتداد غير مرغوب فيه للمحتوى خارج الإطار.

✅ 2. ضبط body لمنع التمدد غير المتوقع

📌 بعض القوالب تضيف overflow-x: hidden; مما قد يؤدي إلى قطع النصوص عند الجوانب:

css

body {
    margin: 0;
    padding: 0;
    overflow-x: auto; /* يسمح بتحريك الصفحة عند الحاجة دون إخفاء المحتوى */
}

✔️ overflow-x: auto; يتيح تمرير النص عند الحاجة بدلاً من قصه.

✅ 3. ضبط text-align والتباعد لضمان أن النص يبقى داخل الإطار

📌 عند استخدام text-align: justify;، تأكد من إضافة هوامش كافية بحيث لا يتم دفع النص خارج الإطار:

css

p {
    text-align: justify;
    word-spacing: 1px;
    line-height: 1.8;
    margin-right: 10px; /* يضيف مساحة على اليمين لتجنب خروج النص */
    margin-left: 10px; /* يضيف مساحة على اليسار للتوازن */
}

✔️ تمت إضافة margin-right و margin-left لضبط النص داخل الإطار بشكل أفضل.

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

✅ 1. ضبط content بشكل مثالي لمنع خروج النص

📌 تأكد من أن max-width مضبوطة بشكل صحيح مع وجود هوامش داخلية مناسبة:

css

.content {
    max-width: 800px; /* يحدد العرض الأقصى للمحتوى */
    width: 90%; /* يضمن أن المحتوى لا يتجاوز حدود الصفحة */
    margin: 20px auto;
    padding: 30px;
    background: white;
    border-radius: 5px;
    overflow: hidden; /* يمنع أي محتوى زائد من الخروج خارج الإطار */
    word-wrap: break-word; /* يكسر الكلمات الطويلة تلقائيًا */
}

✔️ تم ضبط width: 90%; لضمان أن المحتوى لا يمتد إلى خارج الصفحة. ✔️ إضافة overflow: hidden; يمنع أي تجاوز غير متوقع في العرض.

✅ 2. تحسين ضبط body لضمان ثبات المحتوى

📌 بعض القوالب تضيف overflow-x: hidden; مما يؤدي إلى اختفاء جزء من النص، لذا تأكد من تغييره إلى التالي:

css

body {
    margin: 0;
    padding: 0;
    overflow-x: auto; /* يسمح بتحريك النص دون فقدانه */
}

✔️ هذا يضمن عدم قص النص عند الجوانب، مما يسمح بتحريكه إذا كان طويلًا جدًا.

✅ 3. تحسين text-align والتباعد بين النصوص

📌 عند استخدام text-align: justify; يجب إضافة هوامش لضبط المحتوى داخل الإطار:

css

p {
    text-align: justify;
    word-spacing: 1px;
    line-height: 1.8;
    padding-right: 15px; /* يضمن عدم اقتراب النص من الحافة اليمنى */
    padding-left: 15px; /* يضمن عدم خروج النص في الحافة اليسرى */
}

✔️ إضافة padding-right و padding-left يضمن أن النص يبقى داخل الإطار دون تمدد غير متوقع. ✔️ word-spacing يجعل الكلمات أكثر وضوحًا وتنظيمًا دون تداخل.

🔹 1. تحديد هيكلة الدروس داخل القالب

📌 يجب أن يكون لكل درس:

• عنوان ووصف واضح
• محتوى الدرس (نص، فيديو، ملفات قابلة للتحميل)
• نظام تتبع التقدم بحيث يعرف المستخدم الدروس التي أكملها
• زر الانتقال إلى الدرس التالي بعد تحقيق شروط معينة (مثل إنهاء الفيديو أو اجتياز اختبار)

🔹 2. اختيار التكنولوجيا المناسبة

📌 بما أنك تتقن PHP و WordPress، يمكننا بناء النظام باستخدام:

• Custom Post Types في WordPress لتنظيم الدروس
• AJAX لتحديث التقدم دون إعادة تحميل الصفحة
• LocalStorage أو قاعدة بيانات MySQL لتتبع تقدم المستخدم
• إضافة اختبار قصير في نهاية كل درس لضمان الفهم قبل الانتقال للخطوة التالية

🔹 3. إنشاء كود أساسي لنقل المستخدم إلى الدرس التالي

📌 يمكننا استخدام JavaScript و AJAX لجعل النظام أكثر تفاعلية:

js

document.getElementById("next-lesson-btn").addEventListener("click", function() {
    let currentLesson = parseInt(localStorage.getItem("currentLesson")) || 1;
    currentLesson++;
    localStorage.setItem("currentLesson", currentLesson);
    
    window.location.href = `lesson-${currentLesson}.php`;
});

✔️ هذا الكود يقوم بتخزين تقدم المستخدم، ثم ينقله إلى الدرس التالي تلقائيًا. ✔️ إذا أردنا استخدام قاعدة بيانات، يمكننا حفظ التقدم هناك بدلاً من localStorage.

🎯 هل تود إضافة ميزات مثل تقييم الأداء أو منح شهادات بعد إنهاء الدورات؟ 😊🔥 🚀 أخبرني إن كنت ترغب في تخصيص القالب ليكون أكثر تفاعلية!

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

🔹 1. إنشاء ملف PHP خاص واستدعاؤه في القالب

📌 مثلاً، يمكنك إنشاء ملف lesson-functions.php يحتوي على وظائف خاصة بالدروس:

php

<?php
// ملف خاص بوظائف الدروس
function get_next_lesson_link($currentLesson) {
    $nextLesson = $currentLesson + 1;
    return "lesson-$nextLesson.php";
}
?>

✔️ الآن يمكنك استدعاء هذا الملف داخل أي صفحة باستخدام require_once:

php

<?php require_once 'lesson-functions.php'; ?>
<a href="<?php echo get_next_lesson_link(1); ?>">انتقل إلى الدرس التالي</a>

🔹 2. إنشاء ملف CSS منفصل واستدعاؤه في الصفحة

📌 مثلاً، يمكنك إنشاء custom-style.css وإضافة التنسيقات الخاصة به:

css

.lesson-container {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 5px;
    text-align: right;
}

✔️ ثم استدعاؤه داخل header.php أو أي صفحة أخرى:

html

<link rel="stylesheet" href="custom-style.css">

🔹 3. إنشاء ملف JavaScript منفصل

📌 مثلاً، يمكنك إنشاء lesson-script.js لإضافة وظيفة تفاعل:

js

document.getElementById("next-lesson-btn").addEventListener("click", function() {
    alert("انتقل إلى الدرس التالي!");
});

✔️ ثم استدعاؤه داخل الصفحة أو footer.php:

html

<script src="lesson-script.js"></script>

🚀 يمكنك إنشاء ملف خاص بالدورة بحيث يحتوي على جميع الدروس، المحتوى، والوظائف الخاصة بها، ثم استدعاؤه داخل صفحات WordPress بطريقة منظمة. إليك الطريقة العملية لتنفيذ ذلك:

🔹 1. إنشاء ملف خاص بالدورة (مثلاً course.php)

📌 هذا الملف يمكن أن يحتوي على هيكلة الدورة وجميع الدروس:

php

<?php
// تحميل WordPress ليكون جزءًا من النظام
require_once("wp-load.php");

// تعريف بيانات الدورة
$course_title = "دورة تطوير الويب";
$lessons = array(
    "درس 1 - HTML الأساسي",
    "درس 2 - CSS والتنسيق",
    "درس 3 - JavaScript والتفاعلية",
    "درس 4 - PHP والتطوير الديناميكي"
);
?>

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title><?php echo $course_title; ?></title>
    <link rel="stylesheet" href="custom-style.css">
</head>
<body>

    <div class="course-container">
        <h1><?php echo $course_title; ?></h1>
        <ul>
            <?php foreach ($lessons as $lesson): ?>
                <li><?php echo $lesson; ?></li>
            <?php endforeach; ?>
        </ul>
    </div>

</body>
</html>

✔️ هذا الملف يستعرض الدورة والدروس تلقائيًا. ✔️ يمكنك تعديله ليكون أكثر تفاعلية حسب الحاجة.

🔹 2. استدعاء ملف الدورة داخل WordPress

📌 إذا كنت تريد إدراج الدورة داخل صفحات WordPress، يمكنك استخدام:

php

<?php include("course.php"); ?>

✔️ هذا يدمج الدورة داخل أي قالب أو صفحة بسهولة.

✅ 1. تأكد من أن course.php موجود في المسار الصحيح

📌 تحقق من أن ملف course.php موجود داخل مجلد القالب وليس في مكان آخر. 🔹 إذا كنت تستخدم WordPress، ضع الملف داخل wp-content/themes/Schwila-WP/.

✅ 2. استخدم require_once بدلاً من include

📌 بعض الأحيان لا يتم تحميل الملف بسبب مشاكل في المسارات، لذا جرب استدعاءه هكذا:

php

<?php require_once get_template_directory() . '/course.php'; ?>

✔️ يضمن أن الملف يتم تحميله من مجلد القالب بشكل صحيح.

✅ 3. تأكد من أن ملف course.php يحتوي على HTML واضح

📌 أضف بعض النصوص التجريبية للتأكد من أن الملف يتم تحميله:

php

<?php
echo "تم تحميل ملف الدورة بنجاح!";
?>

✔️ إذا ظهر هذا النص، فهذا يعني أن الملف يعمل، وإلا فقد يكون هناك مشكلة في المسار.

✅ 1. إذا كنت تستخدم ملفات PHP مستقلة

📌 يمكنك إنشاء مجلد داخل القالب باسم lessons ووضع كل درس فيه:

/wp-content/themes/Schwila-WP/lessons/

ثم إنشاء ملفات لكل درس مثل:

lesson-1.php
lesson-2.php
lesson-3.php

✔️ يمكنك استدعاء كل درس داخل course.php باستخدام:

php

<?php include get_template_directory() . '/lessons/lesson-1.php'; ?>

✅ 2. إذا كنت تريد إدارة الدروس داخل WordPress

📌 استخدم Custom Post Types لإنشاء “دروس” داخل لوحة التحكم في WordPress. ✔️ أضف هذا الكود إلى functions.php لإنشاء نوع مخصص للدروس:

php

function create_lessons_post_type() {
    register_post_type('lesson',
        array(
            'labels' => array(
                'name' => __('الدروس'),
                'singular_name' => __('درس')
            ),
            'public' => true,
            'has_archive' => true,
            'supports' => array('title', 'editor', 'thumbnail'),
            'rewrite' => array('slug' => 'lessons'),
        )
    );
}
add_action('init', 'create_lessons_post_type');

✔️ يمكنك الآن إضافة كل درس كمقال داخل WordPress!

🎯 هل تفضل طريقة الملفات المستقلة أم نظام WordPress؟ 😊🔥 🚀 أخبرني إن كنت بحاجة إلى ضبط إضافي!

اين اضع هدا الرابط <?php include get_template_directory() . ‘/lessons/lesson-1.php’; ?>

يمكنك وضع هذا الكود داخل أي قالب أو صفحة PHP داخل WordPress حيث تريد أن يظهر محتوى الدرس. إليك بعض الأماكن المناسبة لوضعه:

✅ 1. داخل single.php أو page.php إذا كنت تريد عرضه في صفحات معينة

📌 إذا كنت تريد أن يظهر محتوى الدرس في صفحات WordPress، ضع الكود داخل page.php:

php

<?php include get_template_directory() . '/lessons/lesson-1.php'; ?>

✔️ هذا سيعرض محتوى الدرس داخل كل صفحة مخصصة له في القالب.

✅ 2. داخل template-parts/ لإنشاء تصميم مخصص للدروس

📌 يمكنك إنشاء قالب مخصص للدروس داخل template-parts/lesson.php ثم استدعاؤه داخل single-lesson.php:

php

<?php get_template_part('template-parts/lesson', 'lesson-1'); ?>

✔️ هذا يتيح لك إدارة محتوى الدروس بشكل منفصل ضمن القالب.

✅ 3. داخل functions.php إذا كنت تريد تضمينه برمجيًا

📌 إذا كنت تريد إضافة الدرس تلقائيًا إلى صفحات معينة، يمكنك استدعاؤه داخل functions.php:

php

function load_lesson_template() {
    include get_template_directory() . '/lessons/lesson-1.php';
}
add_action('wp_head', 'load_lesson_template');

✔️ هذا يضمن تحميل الدرس داخل رأس الصفحة دون الحاجة لإضافته يدويًا.

✅ 1. تعديل course.php ليشمل جميع الدروس

📌 يمكنك استخدام مصفوفة array لتحديد الدروس وجعلها تظهر تلقائيًا داخل الصفحة:

php

<?php
require_once("wp-load.php");

// تعريف بيانات الدورة
$course_title = "دورة تطوير الويب";
$lessons = array(
    "lesson-1.php" => "درس 1 - HTML الأساسي",
    "lesson-2.php" => "درس 2 - CSS والتنسيق",
    "lesson-3.php" => "درس 3 - JavaScript والتفاعلية",
    "lesson-4.php" => "درس 4 - PHP والتطوير الديناميكي"
);
?>

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title><?php echo $course_title; ?></title>
    <link rel="stylesheet" href="custom-style.css">
</head>
<body>

    <div class="course-container">
        <h1><?php echo $course_title; ?></h1>
        <ul>
            <?php foreach ($lessons as $lesson_file => $lesson_title): ?>
                <li><a href="?lesson=<?php echo $lesson_file; ?>"><?php echo $lesson_title; ?></a></li>
            <?php endforeach; ?>
        </ul>

        <div class="lesson-content">
            <?php
            if (isset($_GET['lesson']) && array_key_exists($_GET['lesson'], $lessons)) {
                include "lessons/" . $_GET['lesson'];
            } else {
                echo "<p>اختر درسًا للبدء!</p>";
            }
            ?>
        </div>

    </div>

</body>
</html>

✔️ الآن سيتم تحميل الدرس المحدد داخل course.php عند النقر عليه. ✔️ يمكنك إضافة أي عدد من الدروس داخل المصفوفة.

✅ 2. كيف يعمل الكود؟

📌 عند نقر المستخدم على أي درس، يتم تمرير اسم الملف عبر GET وعرض محتوى الدرس داخل course.php مباشرة. ✔️ إذا لم يتم اختيار أي درس، ستظهر رسالة “اختر درسًا للبدء”. ✔️ كل درس يتم تحميله بدون الحاجة لإعادة تحميل الصفحة بأكملها.

🔹 1. إنشاء ملف lesson-1.php

📌 هذا الملف سيعرض الدرس الأول مع محتوى تفاعلي:

php

<?php
session_start();
$_SESSION['lesson_completed'] = true;
?>

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>درس 1 - أساسيات HTML</title>
    <link rel="stylesheet" href="../custom-style.css">
</head>
<body>

    <div class="lesson-container">
        <h1>🔹 درس 1 - أساسيات HTML</h1>
        <p>HTML هي لغة بناء هيكل صفحات الويب. في هذا الدرس سنتعلم:</p>
        <ul>
            <li>ما هي HTML؟</li>
            <li>كيفية إنشاء صفحة HTML</li>
            <li>العناصر الأساسية مثل العناوين والفقرات والروابط</li>
        </ul>

        <h2>🎥 فيديو تعليمي:</h2>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe>

        <h2>📜 تمرين عملي:</h2>
        <p>قم بإنشاء صفحة HTML تحتوي على عنوان وفقرة ونص رابط.</p>

        <form method="POST">
            <button type="submit" name="complete_lesson">✅ أنهيت الدرس!</button>
        </form>

        <?php
        if (isset($_POST['complete_lesson'])) {
            echo '<a href="?lesson=lesson-2.php" class="next-button">➡️ انتقل إلى الدرس التالي</a>';
        }
        ?>

    </div>

</body>
</html>

✔️ يتضمن الدرس محتوى تعليمي، فيديو، وتمرين عملي. ✔️ عند الضغط على “✅ أنهيت الدرس!” يظهر زر للانتقال إلى الدرس التالي.

🔹 2. ضبط الدورة لاستدعاء الدروس داخل course.php

📌 في ملف course.php تأكد من أن الدروس يتم تحميلها ديناميكيًا:

php

<?php
if (isset($_GET['lesson']) && file_exists("lessons/" . $_GET['lesson'])) {
    include "lessons/" . $_GET['lesson'];
} else {
    echo "<p>اختر درسًا للبدء!</p>";
}
?>

✔️ الآن سيتم تحميل أي درس بناءً على اختيار المستخدم.

🔹 course.php – نظام الدروس المتدرج

📌 تم تحسين الكود ليشمل:

• ✅ تحميل الدروس ديناميكيًا
• ✅ حفظ تقدم المستخدم
• ✅ إظهار رسالة عند إكمال الدرس
• ✅ تحسين التنسيق العام للعرض

php

<?php
require_once("wp-load.php");
session_start();

// تعريف بيانات الدورة
$course_title = "دورة تطوير الويب";
$lessons = array(
    "lesson-1.php" => "🔹 درس 1 - أساسيات HTML",
    "lesson-2.php" => "🔹 درس 2 - CSS والتنسيق",
    "lesson-3.php" => "🔹 درس 3 - JavaScript والتفاعلية",
    "lesson-4.php" => "🔹 درس 4 - PHP والتطوير الديناميكي"
);

// حفظ تقدم المستخدم عند انتهاء الدرس
if (isset($_POST['complete_lesson']) && isset($_GET['lesson'])) {
    $_SESSION['completed_lessons'][] = $_GET['lesson'];
}
?>

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title><?php echo $course_title; ?></title>
    <link rel="stylesheet" href="custom-style.css">
</head>
<body>

    <div class="course-container">
        <h1><?php echo $course_title; ?></h1>
        <p>📚 اختر درسًا للبدء:</p>
        <ul>
            <?php foreach ($lessons as $lesson_file => $lesson_title): ?>
                <li>
                    <a href="?lesson=<?php echo $lesson_file; ?>"
                       class="<?php echo in_array($lesson_file, $_SESSION['completed_lessons'] ?? []) ? 'completed' : ''; ?>">
                        <?php echo $lesson_title; ?>
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>

        <div class="lesson-content">
            <?php
            if (isset($_GET['lesson']) && array_key_exists($_GET['lesson'], $lessons)) {
                include "lessons/" . $_GET['lesson'];
                echo '<form method="POST"><button type="submit" name="complete_lesson">✅ أنهيت الدرس!</button></form>';
            } else {
                echo "<p>🎯 اختر درسًا للبدء في التعلم!</p>";
            }
            ?>
        </div>

    </div>

</body>
</html>

✅ التحسينات المضافة

✔️ تم تحسين طريقة عرض الدروس بحيث يظهر لكل درس رابط واضح ✔️ عند انتهاء الدرس، يتم حفظ تقدمه في $_SESSION بحيث يعرف المستخدم أي درس أكمله ✔️ يتم تغيير لون الرابط للدروس المكتملة (completed) ليتم تمييزها ✔️ تم تحسين تنسيق المحتوى بحيث يكون أكثر سهولة للقراءة

🚀 إذا كان ملف course.php لا يتم تحميله عبر include، فقد يكون السبب في ذلك أحد الأخطاء التالية:

1️⃣ المسار غير صحيح – تأكد من أن course.php موجود في نفس المجلد الذي يحتوي على الملف الذي يستدعيه. 2️⃣ خطأ في الإعدادات – تحقق من إعدادات PHP include_path. 3️⃣ عدم تحميل WordPress – إذا كنت تستخدم WordPress، تأكد من require_once("wp-load.php"); داخل course.php. 4️⃣ مشاكل التصاريح – تأكد من أن الملف لديه إذن للقراءة (644).

🔹 الحل: جرب استدعاء الملف باستخدام get_template_directory() إذا كنت داخل قالب WordPress:

php

<?php include get_template_directory() . '/course.php'; ?>

✔️ هذا يضمن تحميل الملف بشكل صحيح من مجلد القالب.

🔹 استخدام المصفوفات في PHP لاستدعاء الملفات بشكل ديناميكي 🔹 اختصارات WordPress (Shortcodes) داخل المحتوى 🔹 استدعاء بيانات JSON أو API

✔️ في PHP يمكنك تمرير الملفات داخل مصفوفة مثل:

php

$files = ["lesson-1.php", "lesson-2.php", "lesson-3.php"];
include "lessons/" . $files[0]; // تحميل أول درس

✔️ في WordPress Shortcodes يمكنك إنشاء كود مختصر يستخدم [shortcode]:

php

function custom_lesson_shortcode($atts) {
    return "<h2>🎓 درس خاص: " . esc_html($atts['title']) . "</h2>";
}
add_shortcode('lesson', 'custom_lesson_shortcode');

ثم استدعاؤه داخل الصفحة هكذا:

html

[lesson title="أساسيات PHP"]

✅ 1. استخدام [ ] مع Shortcodes في WordPress

📌 إذا كنت تريد استدعاء ملف درس معين داخل صفحات WordPress، يمكنك إنشاء كود مختصر:

php

function load_lesson_shortcode($atts) {
    $lesson = isset($atts['file']) ? $atts['file'] : 'lesson-1.php';
    ob_start();
    include get_template_directory() . "/lessons/" . $lesson;
    return ob_get_clean();
}
add_shortcode('lesson', 'load_lesson_shortcode');

✔️ يمكنك الآن إدراج الدرس داخل أي صفحة WordPress هكذا:

html

[lesson file="lesson-2.php"]

🔥 سيتم تحميل محتوى الدرس تلقائيًا داخل الصفحة!

✅ 2. استخدام [ ] مع مصفوفات PHP

📌 يمكنك تخزين أسماء ملفات الدروس داخل مصفوفة واستدعائها باستخدام [ ]:

php

$lessons = ["lesson-1.php", "lesson-2.php", "lesson-3.php"];
include "lessons/" . $lessons[0]; // تحميل الدرس الأول

✔️ يمكنك تغيير [0] إلى [1] أو [2] حسب الدرس المطلوب.

✅ 1. أين تضع الكود؟

📌 ضع الكود داخل ملف:

wp-content/themes/Schwila-WP/functions.php

ثم أضف هذا الكود داخل الملف:

php

function load_lesson_shortcode($atts) {
    $lesson = isset($atts['file']) ? $atts['file'] : 'lesson-1.php';
    ob_start();
    include get_template_directory() . "/lessons/" . $lesson;
    return ob_get_clean();
}
add_shortcode('lesson', 'load_lesson_shortcode');

✔️ الآن يمكنك إدراج [lesson file="lesson-2.php"] داخل أي صفحة WordPress وسيتحمل الدرس تلقائيًا! 🔥

✅ 2. كيف تستخدمه داخل صفحة WordPress؟

📌 داخل صفحة WordPress عادية، ضع هذا الكود:

html

[lesson file="lesson-1.php"]

وسيتم تحميل محتوى الدرس داخل الصفحة تلقائيًا 🎯

✅ 1. تأكد من أن المسار صحيح

📌 تحقق مما إذا كان lesson.php موجود بالفعل داخل المجلد lessons عبر C:\Users\Rach\Local Sites\2025\app\public\wp-content\themes\schwilaWp\lessons\. ✔️ إذا كان الملف غير موجود، قم بإنشائه أو تأكد من أن الاسم مكتوب بشكل صحيح.

✅ 2. استخدم get_template_directory() لاستدعاء الملف

📌 بدلًا من include()، استخدم الكود التالي داخل functions.php لضمان تحميل الملف من القالب الصحيح:

php

include get_template_directory() . '/lessons/lesson.php';

✔️ هذا يضمن أن WordPress يحدد مسار القالب تلقائيًا.

✅ 3. تحقق من صلاحيات الملف

📌 تأكد من أن الملف lesson.php لديه صلاحيات قراءة (644 أو 755)، خاصة إذا كنت تعمل ضمن Local Sites أو خادم محلي مثل XAMPP. ✔️ إذا كنت تستخدم Local by Flywheel، فقد تحتاج إلى ضبط التصاريح يدويًا داخل إعدادات app/public.

✅ 1. تأكد من أن المسار صحيح

📌 يجب أن يكون المسار مضبوطًا بدقة وفقًا لموقع ملف lesson.php. جرب هذا الكود داخل functions.php:

php

include get_template_directory() . '/lessons/lesson.php';

✔️ هذا يضمن أن WordPress يحدد المسار الصحيح للقالب تلقائيًا.

✅ 2. تحقق من وجود الملف

📌 تأكد من أن الملف lesson.php موجود بالفعل في المسار:

C:\Users\Rach\Local Sites\2025\app\public\wp-content\themes\schwilaWp\lessons\

✔️ إذا كان الملف غير موجود، قم بإنشائه أو تأكد من أن الاسم مكتوب بشكل صحيح.

✅ 3. مراجعة صلاحيات الملف

📌 في بعض الأحيان، يكون الملف غير قابل للقراءة بسبب إعدادات التصاريح. ✔️ تأكد من أن الملف لديه تصريح 644 أو 755 حتى يمكن قراءته.

✅ 4. تأكد من إعدادات PHP include_path

📌 إذا كنت تعمل على خادم محلي، يمكنك تعطيل القيود الخاصة بـ include_path عبر:

php

ini_set('include_path', get_template_directory() . '/lessons/');

✔️ هذا يجعل PHP يبحث عن الملفات داخل المجلد الصحيح.

🎯 جرب هذه الحلول وأخبرني إن كان الملف يتم تحميله الآن! 😊🔥 🚀 هل ترغب أيضًا في تحسين بنية الدروس داخل القالب؟

ضبط التصاريح يدويًا داخل إعدادات app/public.

لفهم كيفية ضبط التصاريح يدويًا داخل app/public، اتبع هذه الخطوات:

✅ 1. ضبط التصاريح عبر File Explorer (إذا كنت تستخدم Windows)

📌 انتقل إلى المسار التالي داخل Local Sites:

C:\Users\Rach\Local Sites\2025\app\public\

✔️ انقر بزر الفأرة الأيمن على lessons أو lesson.php، ثم اختر “Properties” → “Security”. ✔️ تأكد من أن المستخدم لديه تصاريح Read & Execute و Read و Write. ✔️ إذا كانت التصاريح مفقودة، اضغط على “Edit” وقم بتفعيلها.

✅ 2. ضبط التصاريح يدويًا عبر Terminal أو CMD

📌 استخدم هذا الأمر لمنح التصاريح الصحيحة داخل app/public:

sh

chmod -R 755 /Users/Rach/Local Sites/2025/app/public/wp-content/themes/schwilaWp/lessons

✔️ يمنح هذا التصريح القدرة على القراءة والتنفيذ داخل المجلد والدروس. ✔️ إذا لم ينجح ذلك، جرب chmod -R 644 لضبط التصاريح للملفات.

✅ 3. ضبط التصاريح داخل Local by Flywheel (إذا كنت تستخدمه)

📌 داخل إعدادات Local: ✔️ انتقل إلى Settings > Advanced ✔️ ابحث عن File Permissions واضبطها على 755 للمجلدات و644 للملفات.

✅ 1. تأكد من أن الملف موجود فعليًا

📌 تحقق مما إذا كان lesson.php موجود داخل المجلد /lessons/ عبر فتح المسار التالي:

C:\Users\Rach\Local Sites\2025\app\public\wp-content\themes\schwilaWp\lessons\

✔️ إذا لم يكن موجودًا، قم بإنشائه أو تأكد من أن الاسم مكتوب بشكل صحيح.

✅ 2. استخدم get_template_directory() لتحديد المسار

📌 داخل functions.php، جرب استدعاء الملف بشكل صحيح:

php

include get_template_directory() . '/lessons/lesson.php';

✔️ هذا يجعل WordPress يبحث عن الملف داخل مجلد القالب تلقائيًا.

✅ 3. تأكد من التصاريح (Permissions)

📌 في بعض الأحيان، يكون الملف غير قابل للقراءة بسبب التصاريح. جرب:

sh

chmod -R 755 /Users/Rach/Local Sites/2025/app/public/wp-content/themes/schwilaWp/lessons

✔️ هذا يمنح الملف الإذن المطلوب للقراءة والتنفيذ.

✅ 4. معالجة include_path في PHP

📌 إذا كنت تستخدم إعدادات Local by Flywheel أو XAMPP، قد تحتاج إلى تحديث include_path داخل functions.php:

php

ini_set('include_path', get_template_directory() . '/lessons/');

✔️ هذا يسمح لـ PHP بالبحث عن الملفات داخل المجلد الصحيح.