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

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

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

الدخول إلى عالم ووردبريس (WordPress) وتطوير قوالبك الخاصة (Themes) يعد إنجازًا مثيرًا للغاية. فهذا لا يمنحك السيطرة الكاملة على مظهر الموقع ووظائفه فحسب، بل يعتبر أيضًا أفضل طريقة لفهم الآليات الأساسية التي يعمل عليها ووردبريس بعمق. سيقوم هذا الدليل بمرافقتك خطوة بخطوة، من البداية، لبناء قالب أساسي ولكنه كامل، مع تغطية كل الخطوات الرئيسية بدءًا من هيكل الملفات وحتى القوالب الأساسية (Core Templates).

بناء بيئة التطوير وهيكل الموضوع (Developing Environment and Theme Structure Construction)

قبل البدء في كتابة الكود، من الضروري توفير بيئة تطوير مناسبة. يُنصح باستخدام برامج الخوادم المحلية مثل XAMPP أو WAMP أو MAMP، والتي تسمح بإنشاء بيئة تطوير سريعة على الكمبيوتر الشخصي تحتوي على خدمات Apache وMySQL وPHP. بالإضافة إلى ذلك، من الضروري أيضًا امتلاك محرر كود ملائم مثل Visual Studio Code أو Sublime Text أو PHPStorm.

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

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

主题信息的定义

فيstyle.cssفي بداية الملف، يجب أن تضيف كتلة تعليقات محددة لتحديد معلومات الوصف الخاصة بالموضوع.

خادم ووردبريس من شركة UltaHost
ضمان استرداد المال خلال 30 يومًا، عرض نطاق ترددي وقواعد بيانات غير محدودين، حماية مجانية ضد هجمات DDoS، خصم 50% عند الشراء لمدة 3 سنوات (السعة المتاحة: 501–4 تيرابايت).
شعار شركة UltaHost صفحة الوصول 
/*
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
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

من بينها،Theme NameوText Domainهذا الحقل إلزامي. يُستخدم مجال النصوص للترجمات الدولية، وعادةً ما يكون مطابقًا لاسم مجلد الموضوع (theme folder).

إنشاء ملف القالب الأساسي (Core Template File)

index.phpهذا هو القالب الافتراضي للموضوع، وفي الوقت نفسه هو القالب الأساسي للاستخدام في حالات الطوارئ (عندما لا يتمكن WordPress من العثور على ملف قالب أكثر تحديدًا).single.php, page.phpعند الحاجة إلى ذلك، سيتم استخدامه. يمكنك وضع الهيكل الأساسي للـ HTML بالإضافة إلى بعض دوال ووردبريس (WordPress functions) داخله للحصول على المحتوى وعرضه.

ملف القالب الأساسي والحلقات (Core Template File and Loops)

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

المفهوم الأساسي هو “حلقة ووردبريس” (WordPress Loop). وهي هيكل كود بلغة PHP يُستخدم لاسترجاع المقالات (Posts) من قاعدة البيانات وعرضها واحدة تلو الأخرى. تقريبًا جميع ملفات القوالب (templates) المستخدمة لعرض المحتوى تعتمد على هذه الحلقة.

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

بناء قالب الصفحة الرئيسية

index.phpيجب أن يحتوي الملف على الهيكل الكامل للـ HTML بالإضافة إلى الحلقات (loops). مثال بسيط على ذلك كالتالي:

<!DOCTYPE html>
<html no numeric noise key 1021>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1018>
    
    <header>
        <h1><a href="/ar/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
        <p></p>
    </header>
    <main>
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
                    <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>
        
    </main>
    <footer>
        <p>©</p>
    </footer>
    
</body>
</html>

يحدد هذا الملف الهيكل الأساسي للصفحة الويب، ويستخدم حلقات لعرض قائمة المقالات داخل المنطقة الرئيسية. الدوال المستخدمة في ذلك…the_title()、the_excerpt()يُستخدم لعرض محتوى المقالات.wp_head()وwp_footer()هذه خاصية حيوية للغاية، فهي تسمح لنواة ووردبريس (WordPress Core) والإضافات (Plugins) والسكريبتات الأخرى بإدراج الكود الضروري.

المقالات وقوالب الصفحات

single.phpيُستخدم لعرض مقال واحد فقط.page.phpتُستخدم لعرض صفحة واحدة فقط. تكون هياكلها متشابهة، ولكن عادةً ما…single.phpسيتضمن عناصر مثل التصنيفات والتسميات، وغيرها.page.phpإذًا، يمكن تبسيط الأمر أكثر. يمكنك البدء بنسخ المحتوى المطلوب.index.phpابدأ في إنشاؤها، ثم قم بتغيير المحتوى الموجود داخل الحلقة إلى ما تريده.the_content()لعرض النص الكامل.

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

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

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

إنشاء ملفات الدوال واستخدامها

أنت بحاجة إلى إنشاء شيء يُسمى…functions.phpهذا الملف ليس ملف قالب (template file)، بل هو ملف خاص بـ “تعزيز الوظائف” (feature enhancement file) للموضوع (theme)، ويُستخدم لإضافة ميزات جديدة، تفعيل خصائص معينة، أو تعديل السلوك الافتراضي لبرنامج ووردبريس (WordPress). نقوم هنا بتسجيل الجداول النمطية (style sheets) والبر

إدراج الموارد بشكل آمن

فيfunctions.phpفي الوسط، يتم استخدام…wp_enqueue_style()وwp_enqueue_script()الدالة: إحدى الطرق القياسية هي إنشاء دالة، ثم استخدامها لتنفيذ المهام المطلوبة.wp_enqueue_scriptsهذا خطاف الإجراء (action hook) يُستخدم لاستدعائه.

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

<?php
function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入自定义CSS文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 引入JavaScript文件
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

يضمن هذا الكود تحميل ملفات CSS و JS في الوقت المناسب.get_stylesheet_uri()الدالة ستعيد موضوع (المحتوى الرئيسي للموضوع).style.cssمسار الملف.get_template_directory_uri()إذا كان الأمر كذلك، فسيتم إرجاع عنوان URL لديركتوريا المواضيع (المحتويات المتعلقة بموضوع معين).

مكونات القوالب وميزات التصميم (Template Components and Theme Features)

عندما تصبح المواضيع أكثر تعقيدًا، فإن تقسيم أجزاء الكود المكررة إلى وحدات منفصلة يعتبر ممارسة جيدة للغاية. يوفر ووردبريس ميزتي “أجزاء القوالب” (Template Parts) و“قوائم التنقل” (Navigation Menus) لمساعدتك في تنظيم وإدارة هذه الأجزاء بشكل أفضل.

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

إنشاء مكونات قوالب قابلة لإعادة الاستخدام

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

<?php get_header(); ?>
<?php get_footer(); ?>

يمكنك أيضًا إنشاء مكونات أكثر عمومية (أي قابلة للاستخدام في مجالات متعددة)، مثل…content.phpأوpost-item.phpاستخدم ذلك داخل الحلقة.get_template_part()تم استخدام دوال لعملية التحميل، مما ساهم بشكل كبير في تحسين إمكانية إعادة استخدام الكود.

تفعيل القائمة النافذة للتنقل المخصصة

نظام القوائم في ووردبريس قوي للغاية. أولاً، من الضروري…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()دالة لإخراجه.

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

الآن، يمكن للمستخدمين إنشاء القوائم في واجهة ووردبريس الخلفية (WordPress Admin) ضمن قسم “المظهر” (Appearance) → “القوائم” (Menus)، ثم تعيينها لتظهر في موقع “القائمة الرئيسية” (Primary Menu).

الملخصات

من خلال هذا الدليل، أكملت العملية بأكملها من مجرد مجلد فارغ إلى موضوع ووردبريس (WordPress) يحتوي على الميزات الأساسية. لقد تعلمت كيفية إنشاء الملفات الضرورية.style.cssوindex.phpلقد فهمت الدور الأساسي للحلقات (loops) في ووردبريس (WordPress)، وقمت ببناء (أي: قمت بتطوير أو إنشاء شيء ما باستخدام هذه الحلقات).single.phpوpage.phpلقد أتقنت أيضًا كيفية القيام بذلك من خلال…functions.phpإضافة الأنماط والبرامج النصية بشكل آمن، بالإضافة إلى كيفية استخدام مكونات القوالب وأنظمة القوائم النافذة لتنظيم الكود وتحسين وظائف الموضوع (theme)، هي مجرد نقطة بداية. بعد ذلك، يمكنك استكشاف ميزات أكثر تقدمًا مثل الشرائط الجانبية (sidebars)، مناطق الأدوات (toolbars)، أنواع المقالات المخصصة، وواجهة برمجة التطبيقات (API) لتخصيص المواضيع

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

هل يجب أن يبدأ تطوير المواضيع من الصفر دائمًا؟

ليس بالضرورة. بالنسبة للمبتدئين، البدء من الصفر هو أفضل طريقة للتعلم. ولكن في المشاريع العملية، يمكنك اختيار استخدام قوالب رسمية فارغة (مثل Underscores)، أو أطر عمل (مثل Genesis)، أو قوالب مخصصة للمبتدئين (مثل _s) كنقطة انطلاق. هذه القوالب تحتوي بالفعل على هياكل كودية متينة، مما يسمح لك بالتركيز أكثر على تصميم الموقع وتطوير المنطق التجاري.

هل ملف index.php ضروري؟

نعم.index.phpهذا ملف قالب ضروري لمواقع ووردبريس (WordPress). يعتبر الخط الدفاعي الأخير في هيكلية ملفات القوالب؛ فإذا فشلت ملفات القوالب الأكثر تحديدًا (مثل…).archive.php, search.phpإذا لم يتم العثور على هذا الملف، فسوف يقوم ووردبريس باستخدام الإعدادات الافتراضية.index.phpلعرض الصفحة بشكل صحيح، يجب التأكد من أن الموقع الإلكتروني يقوم دائمًا بتقديم محتوى.

كيف يمكنني تصحيح المشاكل التي أواجهها أثناء تطوير مواقع الويب؟

أولاً، تأكد من أنك قمت بتنفيذ الخطوات اللازمة في…wp-config.phpتم تفعيل وضع WP_DEBUG في الملف.define( ‘WP_DEBUG’, true );تم تعيين هذا الخيار إلى "true". سيؤدي ذلك إلى عرض أخطاء PHP وتحذيرات WordPress مباشرة على الصفحة، مما يسهل عليك تحديد المشكلات. بالإضافة إلى ذلك، من المهم جدًا استخدام أدوات المطور في المتصفح (يمكن فتحها باستخدام زر F12) لفحص أخطاء CSS وJavaScript.

هل يمكنني القيام بأي شيء في ملف functions.php الخاص بالموضوع (theme)؟

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

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

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

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

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

الوسوم