شكل البداية/المتعلقة بالمعرفة/ووردبريس/تفاصيل المحتوى

دليل البدء في تطوير مواقع ووردبريس: كيفية بناء أول موضوع خاص بك من الصفر

قراءة 4 دقائق
2026-03-16
2026-06-04
2,804
أنا أحصل على عمولة عند التسوق عبر الروابط أدناه، ولا يُضاف أي تكلفة عليك.

الاستعدادات وإعداد البيئة.

قبل البدء في كتابة الكود، تحتاج إلى بيئة تطوير مناسبة. تشمل هذه البيئة خادمًا محليًا (مثل XAMPP أو MAMP أو Local by Flywheel)، ومحرر كود (مثل VS Code أو PhpStorm)، بالإضافة إلى إعداد جديد لنظام ووردبريس (WordPress). تأكد من أن نسخة ووردبريس الخاصة بك هي الأحدث، حتى تتمكن من استخدام أحدث الميزات وواجهات برمجة التطبيقات (APIs).

بعد ذلك، ستحتاج إلى القيام ببعض الخطوات في ووردبريس (WordPress):wp-content/themesقم بإنشاء مجلد جديد داخل المجلد الرئيسي، ويجب أن يكون اسم هذا المجلد هو نفس اسم “السليغ” (slug) الخاص بموضوعك، على سبيل المثال:my-first-themeسيصبح هذا المجلد المكان الذي ستُخزن فيه جميع ملفات مواضيع ووردبريس الخاصة بك. أساسيًا، يحتوي ملف موضوع ووردبريس على ملفين فقط:index.phpوstyle.cssمن بينها،style.cssليس مجرد ملف أنماط (style sheet)، بل هو أيضًا “ملف رأس” (header file) يحتوي على بيانات الوصف (metadata) الخاصة بالقالب (theme). المعلومات الموجودة في تعليقات هذا الملف ضرورية للغاية لكي يتعرف نظام ووردبريس (WordPress) ع

إنشاء شيء أساسي…style.cssيجب أن تتضمن تعليقات الجزء العلوي من الملف المعلومات التالية:

القراءة الموصى بها إنشاء موضوع WordPress مثالي: دليل تطوير كامل من الصفر إلى الخبرة.。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Text Domainيُستخدم هذا الملف لأغراض التدويل (internationalization)، ويجب أن يتوافق اسمه مع اسم مجلد الموضوع الخاص بك. بالإضافة إلى ذلك، قم بإنشاء أبسط نسخة ممكنة من هذا الملف.index.phpالملف يحتوي فقط على جملة واحدة.<?php get_header(); ?>ومع شخص ما.<h1>مرحبًا بالعالم!</h1>في هذا الوقت، يجب أن تتمكن من رؤية موضوعك في قسم “المظهر” -> “المواضيع” (Appearance -> Themes) في واجهة خلفية ووردبريس (WordPress Dashboard) وتتمكن من تفعيله. على الرغم من أنه لا يعرض أي شيء حاليًا (لأننا لم نقم بعد بإنشاء المحتوى اللازم له).header.php)، ولكن هذا يعني أنك قد خطوت الخطوة الأولى بنجاح.

خادم ووردبريس من شركة UltaHost
ضمان استرداد المال خلال 30 يومًا، عرض نطاق ترددي وقواعد بيانات غير محدودين، حماية مجانية ضد هجمات DDoS، خصم 50% عند الشراء لمدة 3 سنوات (السعة المتاحة: 501–4 تيرابايت).
شعار شركة UltaHost صفحة الوصول

فهم ملفات القوالب الأساسية ومستويات القوالب (Understanding Core Template Files and Template Hierarchy)

يستخدم ووردبريس نظامًا ذكيًا يُعرف باسم “مستويات القوالب” (Template Hierarchy) لتحديد الملف القالب المناسب لعرض المحتوى استجابةً لطلبات الصفحات المحددة. فهم هذه المستويات أمر أساسي في تطوير القوالب الخاصة بالمواقع الإلكترونية. يبدأ النظام بالبحث عن الملف القالب الأكثر تحديدًا، وإذا لم يتم العثور عليه، فإنه يعود إلى ملف أكثر عمومية.

تشمل الملفات القالبية الأساسية ما يلي:
* index.phpالقالب النهائي الاحتياطي: يتم استخدامه في جميع الطلبات التي لا يتم العثور على قالب أكثر تحديدًا لها.
* header.phpيحتوي على المستندات.<head>بعض الأجزاء ومنطقة العنوان الرئيسي للموقع الإلكتروني. من خلال…get_header()إدخال الدوال (Function Introduction).
* footer.phpيحتوي على منطقة قائمة الصفحة السفلية للموقع الإلكتروني.get_footer()إدخال الدوال (Function Introduction).
* sidebar.phpيحتوي على مكونات الشريط الجانبي. من خلال…get_sidebar()إدخال الدوال (Function Introduction).
* functions.phpهذا ليس ملف قالب، بل هو “مكتبة الميزات” الخاصة بموضوعك، والتي تُستخدم لإضافة الميزات وتسجيل القوائم والأدوات الإضافية، وما إلى ذلك.

لأنواع مختلفة من الصفحات، توجد قوالب أكثر تحديدًا:
* 单篇文章：查找顺序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php(قالب مخصص) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
قائمة المقالات (صفحة البداية للمدونة، صفحات التصنيفات، إلخ): ترتيب البحث هو…home.php(يُستخدم في صفحات قوائم مقالات المدونة) -> front-page.php(يُستخدم عند تعيين صفحة ثابتة كالصفحة الرئيسية) -> index.php。

إنشاء قوالب للرأس (Header) والقدم (Footer) للصفحات

أولاً، قم بالإنشاء.header.phpيجب أن يبدأ ب…<!DOCTYPE html>ابدأ، واحتوي على استدعاءات الدوال الرئيسية في ووردبريس (WordPress)، مثل…wp_head()。

القراءة الموصى بها موضوعات WordPress متقدمة مخصصة: دليل شامل للتصميم والتطوير والتحسين.。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/ar/</?php echo esc_url(home_url('/')); ?>"></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

وبالمثل، إنشاءfooter.phpوتأكد من استدعاء…wp_footer()دالة.

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    
</body>
</html>

الآن، يمكنك تحديث ما لديك.index.phpاستخدم هذه المكونات القالبية.

<main>
    <h1>مرحبًا من قسم “الرئيسي”… هذه هي رسالة “Hello World”!</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

؟ &gt;

تعزيز وظائف الموضوع من خلال ملف functions.php

functions.phpالملفات هي “الدماغ” الذي يحتوي على محتويات موضوعك. من خلالها، تقوم بإضافة الميزات المختلفة، وتسجيل مكونات نواة ووردبريس الأساسية مثل القوائم ومناطق الأدوات الإضافية، بالإضافة إلى تنسيق ملفات

استضافة.كوم استضافة مشتركة
أداء عالٍ مع وحدات المعالجة المركزية AMD EPYC، ووحدات تخزين NVMe SSD وLiteSpeed، ودعم داخلي متخصص على مدار الساعة طوال أيام الأسبوع، وتدابير أمنية متقدمة بما في ذلك SSL، وقوة الغاشمة، والحماية من البرامج الضارة والحماية من DDoS، وتوفير ما يصل إلى 731 تيرابايت 4 تيرابايت
شعار الاستضافة.كوم صفحة الوصول

إضافة دعم للمواضيع وقائمة تنقل للتسجيل

أولاً، دعونا نفعّل بعض الميزات الأساسية للتصميم (التي تتعلق بالتخطيط العام للصفحة). استخدم…add_theme_support()الدالة تُستخدم لتحديد الميزات التي يدعمها الموضوع (الموقع أو النظام).

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

بعد ذلك، قم بتسجيل موقع عنصر قائمة التنقل. هذا يسمح للمستخدمين بتكوين القائمة في الجزء الخلفي من النظام تحت خيار “المظهر” -> “القوائم”， ثم استخدامها في القوالب.wp_nav_menu()الدالة تستدعيها.

function my_first_theme_menus() {
    register_nav_menus(array(
        'primary' => __('Primary Menu', 'my-first-theme'),
        'footer'  => __('Footer Menu', 'my-first-theme'),
    ));
}
add_action('init', 'my_first_theme_menus');

إدراجها في جدول الأنماط والسكريبتات

الطريقة الصحيحة لتحميل الأنماط والسكريبتات هي من خلال…wp_enqueue_style()وwp_enqueue_script()الوظائف، وتقوم بتثبيتها علىwp_enqueue_scriptsعلى الخطاف.

القراءة الموصى بها تحليل شامل لتطوير مواقع ووردبريس: دليل عملي من المبتدئين إلى المحترفين。

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入自定义JavaScript文件
    wp_enqueue_script('my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

إنشاء حلقات تكرارية وقوالب للمحتوى

“الدورة” (Cycle) هي هيكلية كود PHP المستخدمة في ووردبريس لاسترجاع المقالات من قاعدة البيانات وعرضها. إنها جوهر معظم ملفات القوالب (templates).

فهم هيكل الحلقة الرئيسية

فيما سبق…index.phpفي المثال، رأينا بالفعل دورة أساسية. دعونا نفككها:

الاستضافة المشتركة InterServer
استضافة مشتركة $2.50 دولار أمريكي في الشهر، الشهر الأول $0.1 دولار أمريكي الرمز الترويجي tryinterserver، 461 نص برمجي للتطبيقات السحابية، تثبيت بنقرة واحدة.
انتر سيرفر LOGO صفحة الوصول 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/ar/</?php the_permalink(); ?>"></a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                
            </div>
        </article>
    
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>

إنشاء قالب لمقال واحد

الآن، دعونا ننشئ قالبًا مخصصًا لعرض مقال واحد فقط.single.phpهذا أكثر تفصيلاً من الدورة (التكرار) في صفحة القوائم.

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1></h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

؟ &gt;

الملخصات

من خلال هذا الدليل، لقد أكملت رحلتك الأساسية في بناء قالب ووردبريس (WordPress) من الصفر. بدأنا بإنشاء بيئة التطوير والملفات الأساسية، ثم تعمقنا تدريجياً في فهم نظام مستويات القوالب في ووردبريس، والذي يعتبر الأساس الذي يبنى عليه إنشاء قوالب مرنة وقابلة للتكرار. لقد تعلمت كيفية إنشاء قوالب يمكن إعادة استخدامها في مشاريع ووردبريس المختلفة.header.phpوfooter.phpقطع النموذج (Template Components)، ومن خلال القدرات القوية…functions.phpأضاف الملف دعمًا للميزات الرئيسية لموضوعك، مثل قائمة التنقل وتحميل الأنماط. وأخيرًا، استكشفنا آلية “التكرار” (Looping) في ووردبريس (WordPress)، وقمنا بإنشاء قوالب لعرض قوائم المقالات والمقالات الفردية.

هذا مجرد نقطة بداية. بعد ذلك، يمكنك استكشاف إمكانيات إنشاء المزيد من القوالب المخصصة (مثل…).page.php, archive.phpمنطقة تسجيل الأدوات الصغيرة (Widgets)، إضافة أنواع المقالات المخصصة وأنظمة التصنيف، بالإضافة إلى تحقيق تصميمات استجابية أكثر تطورًا وتفاعلات باستخدام لغة JavaScript. تذكر أن الرجوع إلى الوثائق الرسمية للمطورين والممارسة المستمرة هي أفضل الطرق لتحسين مهاراتك.

الأسئلة الشائعة الأسئلة المتداولة

ماذا أفعل إذا ظهرت شاشة بيضاء فارغة عندما تم تفعيل موضوعي على الموقع الإلكتروني؟

عادةً ما يكون السبب في ذلك خطأ فادحًا في لغة PHP. يرجى التحقق أولاً من كودك للبحث عن أي أخطاء محتملة.functions.phpهل يحتوي الملف على أخطاء نحوية، مثل نقص علامات الفاصلة أو الأقواس؟ قم بفتح ملف WordPress…WP_DEBUGيمكن للوضع (الوضع/النمط) أن يساعدك في رؤية معلومات الخطأ المحددة.wp-config.phpفي الملف، سيتم…define('WP_DEBUG', false);التغيير إلىdefine('WP_DEBUG', true);。

كيف يمكنني إضافة ميزة الشعار المخصص (Custom Logo) إلى موضوعي (Theme)؟

في ما يخصك…functions.phpمستنداتadd_theme_support"جزء من المحتوى، أضف سطرًا جديدًا:"add_theme_support('custom-logo');يمكنك أيضًا تمرير معلمة عبارة عن مصفوفة لتحديد حجم الشعار وما إذا كان ارتفاعه قابلًا للتعديل أم لا. بعد ذلك، يمكن للمستخدمين تحميل الشعار من خلال الذهاب إلى “المظهر” -> “مخصص” -> “هوية الموقع”， ثم استخدامه في القوالب.the_custom_logo();الدالة تستدعيها.

لماذا لا يتم عرض قائمة التنقل التي قمت بتسجيلها في الواجهة الخلفية؟

يرجى مراجعة النقاط التالية: أولاً، تأكد من أن رمز التسجيل الخاص بك صحيح وساري المفعول.functions.phpوقد تم تثبيته بشكل صحيح أيضًا.initحافة أوafter_setup_themeعلى الخطاف… ثانيًا، تأكد من أنك قد حددت بشكل صحيح ما تريد.theme_location(على سبيل المثال'primary') أثناء الاستدعاءwp_nav_menu()يجب أن يتطابق الوقت تمامًا مع المواعيد المحددة. ثالثًا، بعد إنشاء القائمة، يجب تعيينها إلى الموقع الذي قمت بتسجيله في الخلفية، من خلال الذهاب إلى قسم “المظهر” -> “القوائم” -> “إدارة المواق

كيف أنشئ منطقة أدوات صغيرة (شريط جانبي)؟

أولاً، في…functions.phpاستخدمه فيregister_sidebar()تقوم الدالة بتسجيل منطقة أدوات صغيرة (widget area). يتطلب منك توفير معلمة عبارة عن مصفوفة لتحديد معرف المنطقة (ID)، واسمها، ووصفها، وغيرها من الخصائص. بعد ذلك، يتم استخدام هذه المعلومات في ملsidebar.phpفي هذا البرنامج، يتم استخدامdynamic_sidebar()استخدم الدالة وأرسل معها معرف الأداة الصغيرة (ID) لتنفيذها. وأخيرًا،index.phpأوsingle.phpفي قوالب الانتظار (waiting templates)، يتم استخدام…<?php get_sidebar(); ?>إضافة قالب الشريط الجانبي.

ما التالي، ما التالي؟

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

القراءة الموسعة والمعرفة العملية

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

الوسوم