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

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

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

التحضير البيئي والمفاهيم الأساسية

قبل البدء في كتابة الكود، تحتاج إلى بيئة تطوير محلية مناسبة. يُنصح باستخدام حزم برمجيات الخوادم المحلية المتكاملة مثل Local by Flywheel أو XAMPP أو MAMP. يجب أن تكون ملفات نواة ووردبريس (WordPress core files) قد تم تثبيتها بالفعل في موقعك المحلي.

يجب أن يحتوي أي تصميم (Theme) لمنصة ووردبريس (WordPress) على ملفين أساسيين على الأقل:style.css و index.php。style.css ليس فقط مجرد ملفات أنماط (style sheets)، بل هو أيضًا “بطاقة الهوية” للموضوع (theme’s identity card)، حيث يقوم بإعلام نظام ووردبريس (WordPress) بمعلومات الموضوع من خلال رأس ملف خاص (Theme Header). في الوقت نفسه،index.php هذا هو ملف القالب الافتراضي للموضوع، وهو مسؤول عن معالجة جميع طلبات الصفحات التي لم يتم تحديد قالب خاص لها.

يتبع موضوع نموذجي في هيكل المجلدات تسلسلًا هرميًا واضحًا. عادةً ما تكون ملفات القوالب الأساسية موجودة مباشرةً في المجلد الرئيسي للموضوع، بينما تُخزن ملفات CSS وJavaScript وموارد الصور في مجلدات منفصلة. /css、/js و /images في مثل هذه الدلائل الفرعية، بالنسبة للمواضيع الأكثر تعقيدًا، قد تجد أيضًا… /template-parts يُستخدم الدليل (الكاتالوج) لتخزين أجزاء القوالب (الشيفرات) القابلة لإعادة الاستخدام./inc يُستخدم المجلد لتخزين ملفات التحسينات الوظيفية.

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

فهم مستويات قوالب ووردبريس (WordPress Templates)

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

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

على سبيل المثال، عندما يزور المستخدم الصفحة الرئيسية للمدونة، يبحث ووردبريس أولاً عن ما إذا كان هناك ملف بالاسم… front-page.php ملف… إذا لم يكن موجودًا، فسوف يواصل البحث عنه. home.phpإذا لم يحدث شيء، فسوف يعود في النهاية إلى استخدام الإعدادات الافتراضية. index.phpبالنسبة لمقالة منفردة، تكون ترتيب عملية البحث في ووردبريس كالتالي:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。

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

إعلان معلومات الموضوع

style.css يجب أن يحتوي بداية الملف على قسم تمهيدي بتنسيق تعليقات CSS، وذلك لتحديد بيانات الوصف (الميتادات) الخاصة بالموضوع. فيما يلي مثال مبسط على ذلك:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是我的第一个 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

من بين هذه العناصر، “Text Domain” يُستخدم لأغراض التدويل (internationalization)، وهو معرف ضروري لاستخدامه عند استدعاء دوال الترجمة لاحقًا. رأس هذا الملف (file header) هو الأساس الوحيد الذي يستخدمه ووردبريس (WordPress) للتعرف على موضوعك وتفعيله.

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

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

دعونا نبدأ ببناء أهم ملفات القوالب. أولاً، index.php يجب كتابة الهيكل الأساسي في الملف. يجب أن يتضمن ملف القالب القياسي استدعاءات للجزء العلوي من الصفحة (الهيدر)، ومنطقة المحتوى الرئيسية، والشريط الجانبي، والقسم السفلي من الصفحة (الفوتر).

تحتوي ملفات القوالب الأساسية عادةً على الاستدعاءات التالية للدوال الأساسية في ووردبريس:get_header()、get_footer()、get_sidebar() أيضاً get_template_part()تقوم هذه الدوال بإدخال ملفات القوالب المناسبة، مما يساعد على تنظيم هيكل الصفحة بشكل معياري ومنظم.

إنشاء قالب للرأس (Header Template)

header.php يحتوي الملف على المحتوى الذي سيظهر في أعلى كل صفحة. يجب أن يحتوي على الأقل على إعلان نوع المستند وفقًا لمعايير HTML5. <!DOCTYPE html>、<head> يبدأ المحتوى الخاص بالمنطقة وجسم الصفحة من هنا. <body> 及 <header> العلامات (Tags).

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

في <head> في هذه المنطقة، من الضروري للغاية استخدام… wp_head() خطاف (Hook). يسمح هذا الخطاف لنواة ووردبريس (WordPress Core) والإضافات (Plugins) وموضوعك نفسه بإدراج الكود الضروري في الجزء العلوي من الصفحة، مثل روابط الجداول الطرازية (Style Sheets) والتعليمات الوصفية (Meta Tags) والبرامج النصية (Scripts). مثال بسيط على قالب الجزء العلوي

<!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 id="masthead" class="site-header">
    <h1 class="site-title"><a href="/ar/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>

body_class() تقوم الدالة بإخراج سلسلة من أسماء الفئات CSS المتعلقة بنوع الصفحة الحالي، مما يوفر راحة كبيرة في التحكم بالتصميم (الأسلوب).

إنشاء حلقة رئيسية وعرض المحتوى

يستخدم ووردبريس “الحلقة الرئيسية” (The Loop) لتصفح وعرض قائمة المقالات المستعادة حاليًا. تعتبر هذه الحلقة الجزء الأساسي في ملفات القوالب (templates)، وعادةً ما تظهر في… index.php、single.php أو archive.php الوسط.

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

هيكل الحلقة الرئيسية النموذجي كالتالي:

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

    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>

داخل الحلقة، يمكنك استخدام مجموعة من علامات القوالب التي تبدأ بـ “the_”. the_title()、the_content()、the_excerpt() و the_post_thumbnail()لقد طلبت مني ترجمة النص إلى اللغة العربية، ولكن لم تُقدم لي أي معلومات حول هيكل النص أو أجزائه التي تريد ترجمتها بالتحديد. إذا كان لديك نص كامل وتريد تقسيمه إلى أجزاء معينة، فيمكن

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

إضافة الأنماط والميزات

يتم التحكم في العرض البصري للمواضيع عن طريق لغة CSS. بالإضافة إلى ذلك… style.css بالإضافة إلى كتابة الأنماط مباشرةً في الكود، هناك طريقة أكثر احترافية وهي استخدام أدوات أو مكتبات متخصصة في إدارة الأنماط وتنسيق المحتوى. functions.php تُستخدم الملفات لتنظيم ترتيب تحميل جداول الأنماط (stylesheets) والسكريبتات (scripts)، من أجل ضمان تطبيق العلاقات التابعة (dependencies) بشكل صحيح والحفاظ على ترتيب التحميل المناسب.

functions.php الملف هو “مُحسّن الوظائف” (Function Enhancer) الخاص بموضوعك. إنه ليس ملف قالب (template file)، بل هو ملف PHP يتم تحميله تلقائيًا عند تهيئة الموضوع (theme initialization)، ويُستخدم لتعريف الدوال (functions)، الفئات (classes)، الخطافات (hooks)، والمرشحات (filters).

إدخال الأنماط (styles) والسكريبتات (scripts) بشكل صحيح

يجب أن تستخدم… wp_enqueue_style() و wp_enqueue_script() هناك دوال مخصصة لإضافة الموارد (resources). يجب تثبيت (mounting) هذه الدوال على النظام أو البيئة المناسبة لكي تعمل بشكل صحيح. wp_enqueue_scripts هذا الإجراء مرتبط بخاصية “الخطافات” (hooks) في نظام ووردبريس (WordPress). الفائدة من ذلك هي أن ووردبريس يمكنه إدارة الموارد بشكل موحد، مما يساعد على تجنب تكرار عمليات التحميل والتعارضات في الاعتمادات بي

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载一个自定义的 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

قائمة التسجيل والشريط الجانبي

يجب أولاً إعداد القوائم والشرائط الجانبية (مناطق الأدوات الإضافية) في ووردبريس. functions.php يجب أولاً إجراء عملية “التسجيل”، ثم يمكن عرض المحتوى في ملف القالب المناسب.

الاستفادة من register_nav_menus() دالة لتسجيل مواقع الأطباق:

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

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

الاستفادة من register_sidebar() دالة لتسجيل منطقة الأدوات الصغيرة:

دالة my_first_theme_theme_widgets_init() {
    تسجيل_شريط جانبي( مصفوفة(
        
        'المعرف' =&gt; 'الشريط الجانبي-1',
        'الوصف' =&gt; __( 'إضافة عناصر واجهة مستخدم هنا.'، 'my-first-theme' )، 'قبل_القطعة' _ =&gt;( 'إضافة عناصر واجهة مستخدم هنا.
        '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 في الوسط، يتم استخدام… dynamic_sidebar() دالة لاستدعاء هذه المنطقة.

اختبار الموضوع ونشره

بعد الانتهاء من التطوير، يجب إجراء اختبارات شاملة. وهذا يشمل التحقق من طريقة عرض التصميم في متصفحات مختلفة (Chrome، Firefox، Safari، Edge) وعلى أحجام أجهزة متنوعة (أجهزة سطح المكتب، أجهزة اللوحي، الهواتف المحمولة). يجب التأكد من أن جميع الروابط صالحة للعمل، وأن وظائف النماذج تعمل بشكل صحيح، وأن القوائم تستجيب بشكل مناسب على الشاشات الصغيرة.

تفعيل وضع التصحيح (Debug Mode)

أثناء عملية التطوير، يُنصح بشدة بتفعيل وضع التصحيح (Debugging Mode) في ووردبريس. هذا الوضع يساعدك على اكتشاف أخطاء PHP وتحذيراتها والرسائل المتعلقة بها بسرعة. wp-config.php في الملف، ابحث عن السطر التالي وقم بتعديله:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误

يفتح WP_DEBUG_LOG يمكن تسجيل رسائل الخطأ في ملفات السجلات (log files)، لتجنب الكشف المباشر عن المعلومات الحساسة أمام زوار الموقع.

فحص معايير المواضيع

قبل النشر أو الاستخدام، يجب أن يتبع موضوعك قدر الإمكان معايير تطوير مواضيع ووردبريس (WordPress Theme Development Guidelines). ويشمل ذلك، ولكن لا يقتصر على: التأكد من أن جميع البيانات المعروضة على الصفحة تم تهريبها بشكل صحيح (using appropriate escaping methods). esc_html()、esc_url() (مثل الدوال…)، يتم استخدام جميع النصوص القابلة للترجمة. __() أو _e() تم تغليف الدالة، ولا يحتوي الكود الرئيسي على أي عناوين URL مكتوبة بشكل ثابت (hardcoded URLs).

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

جاهز للنشر.

بعد الانتهاء من تطوير الموضوع واختباره ومراجعته، يمكنك اختيار نشره في دليل المواضيع الرسمي لـ WordPress.org، أو تعبئته للاستخدام الشخصي أو للعملاء. يجب أن يحتوي حزمة النشر فقط على المجلدات والملفات الضرورية للموضوع، ويجب إزالة جميع ملفات نظام التحكم في الإصدارات (version control files). .gitأيضًا، تأكد من إعداد أدوات التطوير وملفات النسخ الاحتياطي. style.css المعلومات الرئيسية المتعلقة بالموضوع مكتملة ودقيقة، وقد تم إعداد صورة واضحة لها. screenshot.png(1200×900 بكسل) كصورة مصغرة للموضوع.

الملخصات

منذ إنشاء المحتوى الذي يحتوي على… style.css و index.php نبدأ من المجلد الأساسي، ثم نفهم مستويات القوالب، ونقوم ببناء ملفات القوالب الأساسية، ونستخدم الحلقة الرئيسية لعرض المحتوى، ومن ثم… functions.php إضافة الأنماط (styles) والسكريبتات (scripts) والميزات (features)، ثم إجراء اختبارات دقيقة وفحوصات للتوحيد (standardization checks)، هذه هي الخطوات الكاملة لبناء قالب (theme) أساسي لووردبريس (WordPress). هذه العملية لا تمنحك فقط قالبًا قابلًا للاستخدام، بل الأهم من ذلك، أنها تساعدك على فهم هيكلية قوالب ووردبريس بشكل عميق. انطلاقًا من هنا، يمكنك استكشاف قوالب أكثر تقدمًا، مثل أنواع المقالات المخصصة (custom article types)، وواجهة برمجة التطبيقات لتخصيص القوالب (theme customizer API)، ودعم محرر الكتل (Gutenberg)، وغيرها، وبالتدريج تصبح مطور قوالب ووردبريس محترفًا.

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

ما هي الحد الأدنى لعدد الملفات المطلوبة لموضوع (theme) في ووردبريس (WordPress)؟

يجب أن يحتوي الموضوع الذي يمكن لـ WordPress التعرف عليه وتفعيله على ملفين على الأقل:style.css و index.phpمن بينها،style.css يجب أن يتضمن الترجمة الصحيحة تعليقات الرأس الخاصة بمعلومات الموضوع.

لماذا لم تتم تطبيق الأنماط المخصصة التي قمت بإعدادها؟

عادةً ما يحدث هذا بسبب عدم كفاية أولوية محددات CSS أو عدم تحميل ملفات الأنماط بشكل صحيح. أولاً، قم بفحص أدوات المطور في المتصفح للتأكد من أن ملفات الأنماط قد تم تحميلها بنجاح، ومن أن قواعد CSS الخاصة بك لم تتم تغطيتها بقواعد أخرى ذات أولوية أعلى. ثانيًا، تأكد من أنك استخدمت الطريقة الصحيحة لتطبيق أنماط CSS على functions.php أنا أحبك، أيها الأخ الأكبر. wp_enqueue_style() استخدم دوالًا لتحميل الأنماط، بدلاً من كتابتها مباشرةً داخل ملف HTML. <link> العلامات (Tags).

كيف يمكن إضافة قالب صفحة مخصص لموضوع معين؟

قم بإنشاء ملف PHP جديد، على سبيل المثال: page-fullwidth.phpفي أعلى الوثيقة، أضف التعليق التالي بلغة PHP لتحديد اسم القالب:<?php /* Template Name: 全宽页面 */ ?>ثم، يمكنك كتابة محتوى مختلف عن القالب الافتراضي للصفحة في هذا الملف. page.php تم تصميم تنسيق الصفحة وكودها بشكل متناسق. عند إنشاء أو تعديل صفحة، يمكنك اختيار هذا القالب الجديد من خلال وحدة “خصائص الصفحة”.

ما الفرق بين ملف functions.php والإضافات (plugins)؟

functions.php هذا جزء من الموضوع الرئيسي، ووظيفته مرتبطة ارتباطًا وثيقًا بالموضوع الحالي. إذا قمت بتغيير الموضوع، فإن…functions.php الكود الموجود في الموقع لن يعمل بعد الآن. والوظائف التي يوفرها الإضافة (الplugins) مستقلة عن التصميم الخاص بالموقع (الthememes)؛ أي أنها متاحة دائمًا طالما كانت الإضافة مفعلة، بغض النظر عن التصميم المستخدم. عادةً ما تُضمن الوظائف المرتبطة ارتباطًا وثيقًا بالمظهر البصري للموقع ضمن التص

كيف يمكنني جعل موقعي الإلكتروني يدعم عدة لغات (التدويل)؟

عليك القيام بشيئين: التحضير وتحميل ملفات الترجمة. أولاً، في الكود، يجب تغيير جميع النصوص الموجهة للمستخدمين (مثل… ('Read More', 'my-first-theme')يجب استخدام أدوات أو طرق مماثلة في جميع الحالات. () أو _e() قم بتغليف هذه دالة الترجمة، واجعل المعامل الثاني (مجال النص) جزءًا من العملية. style.css يجب أن يكون “نطاق النص” (Text Domain) المذكور متوافقًا مع ما هو محدد في الوثائق. بعد ذلك، يمكن استخدام أدوات مثل Poedit لإنشاء الملفات اللازمة. .pot ملف القالب (Template File)، وترجمة النص المطلوب إلى اللغة المستهدفة. .po و .mo مستندات. وأخيرًا، في functions.php استخدمه في load_theme_textdomain() دالة لتحميل ملفات الترجمة.

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

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

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

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

الوسوم