Posted inكيف ذالك؟

كيفيت إنشاء قالب WordPress مخصص بالكامل

Posted inكيف ذالك؟

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

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

📌 ضع هذه الملفات داخل المجلد الخاص بالقالب (/wp-content/themes/my-custom-theme/):

✅ 1. style.css – لتعريف القالب وتنسيق الموقع.

✅ 2. index.php – الملف الرئيسي لعرض الصفحات والمقالات.

✅ 3. functions.php – لإضافة ميزات مخصصة وتحميل الموارد.

✅ 4. header.php – يحتوي على رأس الصفحة والعناصر الأساسية مثل شعار الموقع.

✅ 5. footer.php – يحتوي على تذييل الموقع وروابط هامة.

✅ 6. sidebar.php – يعرض الشريط الجانبي إن كنت بحاجة إلى ذلك.

✅ 7. template-parts/ – يمكن إنشاء مجلد فرعي داخل القالب لحفظ أجزاء قابلة لإعادة الاستخدام مثل content.php.

🔹 الملفات الاختيارية (لتحسين الوظائف والتصميم)

✅ 8. single.php – عرض المقالات الفردية.

✅ 9. page.php – عرض الصفحات الثابتة مثل “من نحن”.

✅ 10. archive.php – عرض الأرشيف للمقالات القديمة.

✅ 11. search.php – صفحة نتائج البحث داخل الموقع.

✅ 12. 404.php – صفحة الخطأ عند عدم العثور على المحتوى المطلوب.

🔹 الخطوة التالية: ضبط functions.php لإضافة ميزات القالب

📌 هذا الملف هو العقل المدبر للقالب، حيث يمكنك إضافة وظائف مخصصة مثل تحميل الـ CSS و JavaScript، إضافة دعم للقوائم، وتمكين ميزات متقدمة.

✔️ 1. تسجيل ملفات الـ CSS و JavaScript لضمان تحميلها بشكل صحيح:

php

function my_theme_enqueue_styles() {
    wp_enqueue_style('main-style', get_stylesheet_uri());
    wp_enqueue_script('main-script', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

🔹 هذا الكود سيضمن تحميل ملف التصميم (style.css) وأي ملفات JavaScript مرفقة داخل مجلد القالب.

✔️ 2. دعم قوائم WordPress المخصصة لتمكين التنقل بسهولة:

php

function my_theme_register_menus() {
    register_nav_menus(array(
        'primary' => __('القائمة الرئيسية', 'my-custom-theme'),
    ));
}
add_action('init', 'my_theme_register_menus');

🔹 الآن يمكنك إضافة قوائم مخصصة عبر لوحة التحكم في WordPress!

📌 قم بإنشاء هذه الملفات داخل مجلد القالب (/wp-content/themes/my-custom-theme/)

🔹 1. ملف style.css (تعريف القالب وتنسيق التصميم)

css

/*
Theme Name: My Custom Theme
Theme URI: https://example.com
Author: Mourad
Description: قالب WordPress مخصص بالكامل بدون حقوق نشر.
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}

.header {
    background: #0073aa;
    padding: 20px;
    text-align: center;
    color: white;
}

.content {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: white;
    border-radius: 5px;
}

.footer {
    background: #222;
    color: white;
    text-align: center;
    padding: 10px;
}

🔹 2. ملف index.php (عرض المحتوى الرئيسي للموقع)

php

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
    <?php get_header(); ?>

    <div class="content">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <h2><?php the_title(); ?></h2>
            <p><?php the_content(); ?></p>
        <?php endwhile; endif; ?>
    </div>

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

🔹 3. ملف functions.php (إضافة ميزات مخصصة للقالب)

php

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style('main-style', get_stylesheet_uri());
    wp_enqueue_script('main-script', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

function my_theme_register_menus() {
    register_nav_menus(array(
        'primary' => __('القائمة الرئيسية', 'my-custom-theme'),
    ));
}
add_action('init', 'my_theme_register_menus');
?>

🔹 4. ملف header.php (رأس الموقع والقائمة الرئيسية)

php

<header class="header">
    <h1><?php bloginfo('name'); ?></h1>
    <nav>
        <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav>
</header>

🔹 5. ملف footer.php (تذييل الموقع)

php

<footer class="footer">
    <p>© <?php echo date('Y'); ?> - جميع الحقوق محفوظة لموقع <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

🔹 6. ملف sidebar.php (الشريط الجانبي إن كنت تحتاجه)

php

<aside class="sidebar">
    <?php if (is_active_sidebar('main-sidebar')) : ?>
        <?php dynamic_sidebar('main-sidebar'); ?>
    <?php endif; ?>
</aside>

تنفيذ شريط رأس ديناميكي (Header) بحيث يكون الشعار واسم الموقع في الأعلى، وعند التمرير للأسفل يختفي الشعار ويظهر الشريط بشكل سلس. سنستخدم HTML، CSS، وJavaScript لتحقيق ذلك.

🔹 1. هيكل header.php (HTML)

php

<header id="main-header">
    <div class="logo-container">
        <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="شعار الموقع">
        <h1><?php bloginfo('name'); ?></h1>
    </div>
    <nav class="main-nav">
        <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav>
</header>

🔹 هذا الكود يعرض الشعار واسم الموقع مع القائمة الرئيسية.

🔹 2. تنسيق style.css (CSS)

css

/* تصميم الشريط الأساسي */
#main-header {
    position: fixed;
    width: 100%;
    top: 0;
    background: white;
    padding: 15px 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

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

.logo-container img {
    width: 100px;
    transition: all 0.3s ease-in-out;
}

/* عند التمرير للأسفل */
.scrolled .logo-container img {
    width: 0px; /* يخفي الشعار */
    opacity: 0;
}

.scrolled #main-header {
    background: rgba(255, 255, 255, 0.9);
}

🔹 3. برمجة script.js (JavaScript)

js

document.addEventListener("scroll", function() {
    const header = document.getElementById("main-header");
    if (window.scrollY > 50) {
        header.classList.add("scrolled");
    } else {
        header.classList.remove("scrolled");
    }
});

📌 كيف يعمل هذا؟

✅ عندما يبدأ المستخدم بالتمرير للأسفل، يتم تطبيق كلاس scrolled على header.

✅ يؤدي ذلك إلى تصغير حجم الشعار تدريجيًا حتى يختفي، بينما يبقى الشريط الأساسي مرئيًا.

✅ عند العودة للأعلى، يعود الشعار للظهور تلقائيًا!

✅ الحل المحسّن لجعل شريط الرأس يختفي عند النزول ويظهر عند التمرير للأعلى

📌 سنعدل style.css ونستخدم خاصية position: sticky مع JavaScript لتوفير تجربة سلسة.

🔹 1. تعديل style.css

css

#main-header {
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    background: white;
    padding: 15px 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease-in-out;
}

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

✔️ التحسين هنا: نستخدم transform بدلاً من opacity لضمان انتقال أكثر سلاسة.

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

🔹 1. تحسين تصميم القائمة باستخدام CSS

📌 سنجعل القائمة ثابتة في الأعلى، مع تأثيرات انسيابية عند التفاعل.

css

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    background: #0073aa;
}

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

.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;
}

✔️ يضيف هذا التصميم تأثيرًا سلسًا عند تمرير الماوس فوق العناصر.

🔹 2. جعل القائمة ثابتة ولكن متفاعلة مع التمرير

📌 نريد أن يختفي شريط القائمة عند التمرير للأسفل، ويعود عند التمرير للأعلى.

js

let lastScrollTop = 0;
const navBar = document.querySelector(".main-nav");

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

    if (scrollTop > lastScrollTop) {
        navBar.style.transform = "translateY(-100%)"; // يخفي القائمة عند النزول
    } else {
        navBar.style.transform = "translateY(0)"; // يظهر عند التمرير للأعلى
    }

    lastScrollTop = scrollTop;
});

✔️ بهذه الطريقة، تصبح القائمة أكثر ذكاءً وتفاعلًا مع حركة المستخدم.

🔹 3. إضافة قائمة منسدلة (Dropdown) لمزيد من التفاعل

📌 يمكننا أيضًا إضافة تأثير القائمة المنسدلة ليكون التنقل أكثر احترافية.

css

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    background: white;
    display: none;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.dropdown:hover .dropdown-menu {
    display: block;
}

✔️ الآن، ستظهر القائمة المنسدلة تلقائيًا عند تمرير الماوس فوقها.

التعليقات مغلقة.