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

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

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

قبل البدء في كتابة الكود، تحتاج إلى بيئة تطوير محلية. عادةً ما تتضمن هذه البيئة خادمًا محليًا (مثل XAMPP أو MAMP أو Local) بالإضافة إلى محرر كود (مثل VS Code أو PhpStorm). تأكد من أنك قمت بتثبيت لغة PHP (يُنصح باستخدام الإصدار 7.4 أو أحدث) وقاعدة بيانات MySQL في بيئتك.

موضوع ووردبريس قياسي هو مجلد يحتوي على مجموعة معينة من الملفات. أولاً، قم بتنزيل هذه الملفات إلى موقع ووردبريس المحلي الخاص بك.wp-content/themesقم بإنشاء مجلد جديد داخل المجلد الحالي، وعلى سبيل المثال، أطلق عليه اسم “new_folder”.my-first-theme。

بعد ذلك، قم بإنشاء ملفين أساسيين وضروريين:style.cssوindex.phpمن بينها،style.cssليس مجرد ملفات أنماط (style sheets)، بل هي أيضًا “بطاقة الهوية” للموضوع (theme) نفسه؛ حيث يتم استخدام كتل التعليقات الموجودة في بداية ملفات الموضوع لإعلام منصة ووردبريس (WordPress) بمعلومات الموضوع الخا

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

فيstyle.cssفي الملف، يجب أن تضيف معلومات الرأس بالتنسيق التالي:

خادم ووردبريس من شركة UltaHost
ضمان استرداد المال خلال 30 يومًا، عرض نطاق ترددي وقواعد بيانات غير محدودين، حماية مجانية ضد هجمات DDoS، خصم 50% عند الشراء لمدة 3 سنوات (السعة المتاحة: 501–4 تيرابايت).
شعار شركة UltaHost صفحة الوصول 
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

سيتم عرض هذه المعلومات في صفحة “المظهر” -> “القوالب” (Appearance -> Themes) داخل واجهة ووردبريس الخلفية.index.phpالملف هو القالب الافتراضي للقالب (theme)، ويجب أن يكون موجودًا حتى لو كان فارغًا مؤقتًا، حتى يتمكن ووردبريس (WordPress) من التعرف على أن هذا قالب صالح.

إنشاء ملف قالب أساسي

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

إنشاء قوالب للجزء العلوي (الهيدر) والجزء السفلي (الفوتر)

من أجل تحقيق إعادة استخدام الكود والتوحيد فيه، نقوم عادةً بفصل جزء الرأس (Header) وجزء القدم (Footer) من صفحات الويب عن بعضهما وتخزينهما في ملفات منفصلة. دعونا نبدأ بإنشاء هذه الملفات أولاheader.phpالملف يحتوي على رأس وثيقة HTML (الجزء العلوي من الوثيقة الذي يحتوي على معلومات حول تنسيق الوثيقة وتفاصيل أخرى).<body>التصنيفات، بالإضافة إلى المنطقة العامة في أعلى الموقع (مثل الشعار وقائمة التنقل).

أبسط شيء ممكن…header.phpقد تتضمن الأمثلة المقدمة المحتويات التالية:

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

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1003>
    <header>
        <h1><a href="/ar/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
        <p></p>
    </header>

انتبه إلى ما ورد فيه.wp_head()الدالة ضرورية للتشغيل؛ فهي تُستخدم للسماح لنواة ووردبريس (WordPress Core) والإضافات (Plugins) والقوالب (Themes) بإدراج الكود الضروري (مثل CSS وJS) في الجزء العلوي من الصفحة.

بعد ذلك، قم بإنشاءfooter.phpالملف يُستخدم للقيام بعملية الإغلاق.<body>و<html>تحتوي الصفحة على علامات تصنيف (tags)، بالإضافة إلى محتوى القائمة السفلية (footer content).

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

وبالمثل،wp_footer()الدوال أيضًا ضرورية.

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

الآن، يمكننا التحديث.index.phpالاستخدامget_header()وget_footer()استخدم دالة لإدخال هذين الجزأين:

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容将在这里显示
        endwhile;
    else :
        // 没有找到文章时的内容
    endif;
    ?>
</main>

<?php get_footer(); ?>

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

فيما سبق…index.phpفي هذا المثال، رأينا جوهر ووردبريس: “The Loop” (الحلقة التكرارية). تُستخدم هذه الحلقة لتصفح جميع المقالات الموجودة على الصفحة الحالية (أو مقال واحد فقط). ومن أجل تحسين هيكل محتوى المقالات، نقوم عادةً بفصل منطق عرض كل مقال عن باقي المقالات ووضعه في ملف منفصل.

إنشاءcontent.phpأوtemplate-parts/content.phpالملف، ثم في الحلقة (loop) يتم التعامل معه…get_template_part()الدالة تستدعيها.

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

// 在 index.php 的循环中
while ( have_posts() ) : the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

ثم قم بالإنشاء.template-parts/content.php：

<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
    <h2><a href="/ar/</?php the_permalink(); ?>"></a></h2>
    <div class="entry-meta">
        by
    </div>
    <div class="entry-content">
        
    </div>
</article>

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

الاستضافة المشتركة InterServer
استضافة مشتركة $2.50 دولار أمريكي في الشهر، الشهر الأول $0.1 دولار أمريكي الرمز الترويجي tryinterserver، 461 نص برمجي للتطبيقات السحابية، تثبيت بنقرة واحدة.
انتر سيرفر LOGO صفحة الوصول

إدخال الأنماط والبرامج النصية (Styles and Scripts)

أي تصميم حديث لا يمكن أن يتم بدون استخدام CSS و JavaScript. يوفر WordPress دوالًا قياسية لتنظيم ملفات الأنماط (stylesheets) والبرمجيات النصية (scripts) بشكل آمن، بحيث يتم إضافتها إلى قائمة الانتظار (queue) قبل استخدامها، بدلاً من استخدامها مباشرة داخل القوالب (templates).<link>أو<script>العلامات (Tags).

قائمة أنماط رئيسية لعمليات التسجيل والانتظار في الطابور

على الرغم من أننا نمتلك بالفعل…style.cssلكن عادةً ما نقوم بذلك من خلال…functions.phpلتحميل الملف، قم أولاً بإنشائه في المجلد الرئيسي للموضوع (المجلد الذي يحتوي على جميع ملفات الموضوع).functions.phpملف.

ثم، استخدم…wp_enqueue_style()نحتاج إلى دالة لتحميل ملفات الأنماط (style sheets).functions.phpقم بإنشاء دالة في الكود، ثم قم بربطها (hooking it) بالنظام أو الواجهة المطلوبة.wp_enqueue_scriptsفي هذا الإجراء…

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载Google Fonts示例
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()ستقوم الدالة تلقائيًا بالحصول على موضوع (theme) المطلوب.style.cssمسار الملف.

إضافة سكريبت لقائمة التنقل التفاعلية (المتكيفة مع أحجام الشاشة)

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

أولاً، قم بإنشاء…js/navigation.jsالملف… ثم،functions.phpفي نفس الدالة، يتم استخدام…wp_enqueue_script()لتحميله.

function my_first_theme_scripts() {
    // ... 之前的样式代码 ...

// 加载导航脚本
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}

المعلمة الأخيرة.trueيعني ذلك وضع السكريبت في أسفل الصفحة (أي في الجزء السفلي من المحتوى المعروض على الصفحة).</body>(قبل وضع العلامات)، وهذا عادة ما يساعد على تحسين أداء تحميل الصفحة.

تنفيذ الميزات الأساسية للموضوع

functions.phpهذا الجزء يُعتبر “الدماغ” الخاص بالموضوع (theme)، ويُستخدم لإضافة مختلف الميزات والوظائف الداعمة. بالإضافة إلى تحميل الموارد اللازمة، نحتاج أيضًا إلى تحديد الميزات التي يدعمها الموضوع في ه

إضافة دعم لميزة إنشاء المواضيع (Themes).

يوفر ووردبريس مجموعة من “ميزات الثيمات” (theme features)، ويجب عليك الإعلان صراحةً عن دعمك لها لكي تتمكن من استخدامها. تشمل الميزات الأساسية مثل ملفات ملخص المقالات (الصور الرئيسية)، القوائم المخصصة، ودعم علامات HTML5.

فيfunctions.phpأضف الكود التالي إلى المكان المناسب:

function my_first_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接自动添加到head中
    add_theme_support( 'automatic-feed-links' );
    // 让文章和页面支持“特色图像”
    add_theme_support( 'post-thumbnails' );
    // 启用对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 启用标题标签支持，WordPress会自动管理文档标题
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

after_setup_themeهذا هو خطاف إجراء (action hook) يتم تنفيذه عند تهيئة الموضوع (theme initialization)، وهو المكان القياسي لتعيين وظائف الموضوع (theme functions).

قائمة التنقل للتسجيل

معظم المواقع الإلكترونية تحتاج إلى قوائم تنقل (navigation menus). يسمح نظام القوائم في ووردبريس (WordPress) للمستخدمين بتخصيص عناصر القائمة من خلال الذهاب إلى قسم “المظهر” (Appearance) ثم “القوائم” (Menus) في الواجهة الخلفية. قبل ذلك، يجب علي

فيما حدث للتو…my_first_theme_setupفي الدالة، استمر في إضافة الكود التالي:

function my_first_theme_setup() {
    // ... 之前的 add_theme_support 代码 ...

// 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}

بعد التسجيل، سيكون بإمكانك استخدام ملفات القوالب (مثل…)header.phpيتم استخدامه في (المكان المحدد).wp_nav_menu()تم استخدام دالة لعرض هذا القائمة:

<nav>
    <?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
    ) );
    ?>
</nav>

إنشاء شريط جانبي ومنطقة للأدوات الصغيرة

الأدوات الصغيرة (Widgets) هي ميزة قوية أخرى في ووردبريس (WordPress). لاستخدامها، يجب عليك أولاً تسجيل منطقة جانبية (sidebar)، حيث سيتم عرض الأدوات الصغيرة فيها.

فيfunctions.phpقم بإنشاء دالة جديدة في الكود، واربطها بالأجزاء الأخرى من البرنامج بحيث تعمل بشكل صحيح.widgets_initمن الناحية العملية:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_theme_widgets_init' );

بعد التسجيل، يمكنك رؤية منطقة “الشريط الجانبي الرئيسي” في قسم “المظهر” -> “الأدوات” في الواجهة الخلفية، ويمكنك سحب الأدوات إلى هذه المنطقة. لعرضها في الموضوع الخاص بك، يجب أن تقوم بذلك في الsidebar.phpتُستدعى الدالة `fib` في السطر 8.dynamic_sidebar( 'sidebar-1' )دالة.

الملخصات

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

هذا مجرد نقطة انطلاق. على أساس هذه النقطة، يمكنك الاستمرار في إنشاء ملفات قوالب أكثر احترافية.single.php、page.php、archive.phpستتمكن من استكشاف واجهات برمجة التطبيقات (APIs) الأكثر تعقيدًا الخاصة بـ WordPress، مثل واجهات برمجة التطبيقات المتعلقة بأنواع المقالات المخصصة، والتصنيفات، وأداة المعدلات (Customizer)، وما إلى ذلك. وبذلك، ستتمكن من إنشاء قوالب مواقع إلكترونية فريدة من نوعها

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

ما هي التقنيات الأساسية التي يجب إتقانها لتطوير مواقع ووردبريس (WordPress)؟

لتطوير قوالب ووردبريس (WordPress themes)، من الضروري إتقان عدة تقنيات أساسية. أولاً، لغة PHP، حيث أن ووردبريس مكتوب بلغة PHP، وجميع ملفات القوالب والمنطق الوظيفي يعتمد عليها. يجب أن تفهم المصطلحات الأساسية في لغة PHP، بالإضافة إلى الدوال (functions)، والحلقات (loops)، وجمل الشروط (conditional statements).

ثانيًا، هناك HTML و CSS، واللذان يُستخدمان لبناء هيكل وتصميم صفحات الويب. من المهم جدًا فهم مبادئ تصميم الصفحات الويب التفاعلية وتقنيات التخطيط الحديثة في CSS مثل Flexbox و Grid. وأخيرًا، من الضروري امتلاك معرفة أساسية بلغة JavaScript لتنفيذ وظائف التفاعل على جانب العميل (client-side). كما أن الإلمام بدوال PHP الخاصة بنظام WordPress ونظام الخطافات (Hooks) أمر أساسي لتطوير القوالب بكفاءة عالية.

أي من ملفي style.css و functions.php أكثر أهمية؟

تلعب هاتان الملفتان دورين مختلفين تمامًا في تطوير مواقع ووردبريس، ولكن كلاهما بالغ الأهمية للغاية، ولا يمكن مقارنة أي منهما بالآخر من حيث الأهمية ببساطة.style.cssالملف هو “الهوية” الخاصة بالقالب (التصميم الخاص بالموقع)، وكتلة التعليقات الموجودة في بداية الملف ضرورية لكي يتمكن نظام ووردبريس (WordPress) من التعرف على القالب. بدونها، لن يتم عرض القالب في قائمة القوالب الموجودة في الواجهة الخ

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

لماذا يجب استخدام دالتي `wp_head()` و `wp_footer()`؟

wp_head()وwp_footer()هذا هو الحلقة الرئيسية (hook) التي تسمح بالتواصل بين جوهر WordPress والقوالب (themes) والإضافات (plugins).header.phpأنا أحبك، أيها الأخ الأكبر.</head>الاستدعاء قبل العلامةwp_head()هذا هو الطريقة القياسية التي تسمح لبرنامج ووردبريس نفسه، والإضافات (البرامج الإضافية) التي قمت بتثبيتها، بالإضافة إلى أجزاء أخرى من قالب الموقع الخاص بك، بإدراج الكود الضروري في الجزء العلوي من الصفحة (مثل علامات الميتا، روابط جداول الأنماط، مراجع البرمجيات، البيانات المهي

وبالمثل،footer.phpأنا أحبك، أيها الأخ الأكبر.</body>الاستدعاء قبل العلامةwp_footer()تُستخدم هذه الدوال لإدراج السكريبتات التي يجب تحميلها في أسفل الصفحة (مثل كود التحليل، أو الـ JS المُحمّل بشكل متأخر) أو أي نصوص HTML أخرى. إذا تم إغفال هذه الدوال، فقد يؤدي ذلك إلى عدم عمل الإضافات بشكل صحيح، أو عدم ظهور شريط الأدوات الإداري، بالإضافة إلى مشاك

كيف يمكنني جعل موضوعي يتوافق مع المعايير الرسمية لووردبريس (WordPress)؟

لضمان أن موضوعك يتوافق مع المعايير الرسمية لووردبريس ويتمتع بجودة عالية، يجب عليك اتباع “دليل تطوير مواضيع ووردبريس” (WordPress Theme Development Guide) ومتطلبات مراجعة المواضيع (Theme Review Requirements). ويشمل ذلك استخدام ممارسات البرمجة الآمنة، وتطبيق دوال التهريب (escaping functions) على جميع البيانات المُنتجة ديناميكيًا.esc_html(), esc_url())، واستخدم دوال الترجمة الدولية (مثل…) لجميع سلاسل النصوص المراد ترجمتها.__(), _e()) وتحميل حقل النص.

يجب أن يكون التصميم الخاص بالقالب (الثيم) متجاوبًا (responsive)، بحيث يظهر بشكل جيد على جميع أنواع الأجهزة. يجب أن يكون الكود واضحًا ومشروحًا بشكل جيد، وأن يتبع معايير ترميز ووردبريس (WordPress coding standards). بالإضافة إلى ذلك، يجب أن يوفر القالب خيارات تخصيص واسعة من خلال أداة تخصيصات ووردبريس (WordPress Customizer)، وأن يقوم بتنفيذ جميع وظائف ووردبريس الأساسية والمكونات الإضافية (plugins/hooks) بشكل صحيح. من العادات الجيدة استخدام إضافة Theme Check لإجراء اختبارات قبل نشر القالب.

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

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

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

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

الوسوم