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

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

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

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

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

الملفات الأساسية هي الأساس الذي يقوم عليه كل تصميم (theme) في ووردبريس (WordPress). أي تصميم أساسي يحتاج على الأقل إلى ملفين:style.css و index.phpمن بينها،style.css ليس فقط كملف للأنماط (stylesheets)، بل الوظيفة الأكثر أهمية لهذا الملف هي أنه يعمل كـ “رأس المعلومات” (information header) للموضوع (theme)، ويُستخدم لإخبار نظام ووردبريس (WordPress) بمعلومات الموضوع الخاص بك. في هذا الملف، يجب عليك تحديد معلومات الموضوع الأساسية مثل اسم الموضوع، المؤلف، الوصف، الإصدار، و

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

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

يُنصح أيضًا باستخدام الأطراف الفرعية (Child Themes) في تطوير مواقع ووردبريس الحديثة. إنها طريقة آمنة لتخصيص الموقع وإضافة ميزات جديدة دون الحاجة إلى تعديل ملفات القالب الأصلي (Parent Theme) مباشرة. عند تحديث القالب الأصلي، سيتم الحفاظ على التعديلات التي أجريتها أنت (والمخزنة في الطرف الفرعي). لإنشاء طرف فرعي، يلزمك أيضًا إنشاء الملفين الأساسيين المذكورين أعلاه، وذلك…style.css من خلال رأس الطراز (style header)Template:يُعلن المجال (field) عن موضوعه الأب (parent topic).

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

بناء ملف القالب الأساسي للموضوع.

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

المقالات وقوالب عرض الصفحات

القالب الأساسي هو…single.phpوpage.phpتُستخدم هذه القوالب على التوالي للتحكم في عرض مقالات المدونة الفردية والصفحات المستقلة. في هذه القوالب، ستستخدم مجموعة من دوال ووردبريس الأساسية لعرض المحتوى بشكل دوري. تكون هيكلية الحلقة الأكثر أهمية عادةً كما يلي:

<h1></h1>
    <div class="entry-content">
        
    </div>

هذا الكود يتحقق مما إذا كانت هناك مقالات متوفرة، ثم يدخل في حلقة لعرض عناوين المقالات ومحتوياتها واحدًا تلو الآخر. الدالة المستخدمة هي…the_title()وthe_content()يُستخدم لعرض البيانات المقابلة.

قائمة المقالات وقوالب أرشيفة

عندما يزور المستخدمون الصفحة الرئيسية للمدونة، أو صفحات الفئات، أو صفحات أرشيف المؤلفين، يقوم ووردبريس باستخدام قوالب قوائم (list templates). أكثر قوالب القوائم شيوعًا هي…index.php(كخيار أخير للتأكد من تحقيق النتيجة المرجوة) وarchive.phpفي قوالب القوائم، تقوم الحلقات (loops) بتصفح عدة مقالات، وعادةً ما نستخدم…the_excerpt()لقد طُلب مني إخراج ملخص للمقال وليس النص الكامل.

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

// في داخل الحلقة، يتم عرض عناصر قائمة المقالات
<article>
    <h2><a href="/ar/</?php the_permalink(); ?>"></a></h2>
    
</article>

the_permalink()الدالة مستخدمة للحصول على الرابط الدائم للمقال الحالي.

المكونات العامة لأي موضوع:

من أجل تحسين إمكانية إعادة استخدام الكود وسهولة صيانته، يجب عليك فصل الأجزاء المشتركة من الصفحات عن بعضها ووضعها في ملفات قوالب منفصلة. يتم ذلك عن طريق…get_header(), get_footer(), get_sidebar()وget_template_part()يتم تنفيذ ذلك باستخدام دوال مثل…

على سبيل المثال، الخاص بك.header.phpالملف يحتوي على رأس وثيقة HTML (header of the HTML document).المنطقة المحددة، بالإضافة إلى قائمة التنقل العلوية للموقع الإلكتروني.single.phpفي هذا السياق، كل ما عليك فعله هو استدعاء الدالة في البداية.get_header()في هذه الحالة، سيقوم ووردبريس تلقائيًا بإدخال المحتوى المطلوب.header.php的内容。

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

وبالمثل، بالنسبة لكتل الكود التي تُستخدم مرارًا وتكرارًا في عدة أماكن (مثل معلومات المقالات الوصفية)، يمكنك حفظها في ملف منفصل.content.phpأوtemplate-parts/content.phpثم استخدمه في القالب الرئيسي.get_template_part('template-parts/content', get_post_format());قم بتنفيذ الدعوة. يسمح لك المعامل الثاني بتحميل ملفات متنوعة بناءً على تنسيق المقال (مثل مكتبة الصور، الاقتباسات، إلخ).content-gallery.php）。

استخدام ملفات الدوال لتعزيز وظائف الموضوع (Theme Functions)

functions.php الملف هو “مركز التحكم” للقالب (التيمة)، ويجب وضع جميع أكواد الوظائف التي لا تُعتبر جزءًا من الناتج النهائي HTML مباشرةً داخل هذا الملف. سيتم تحميل هذه الأكواد تلقائيًا بواسطة ووردبريس عند تهي

ميزة تسجيل المواضيع والقائمة

إحدى العمليات الأساسية والضرورية هي استخدام…add_theme_support() استخدم دوال لتحديد الميزات التي يدعمها موقعك الإلكتروني باستخدام ووردبريس. على سبيل المثال، تفعيل صور مميزة للمقالات، والقوائم المخصصة، ودعم علامات HTML5 هي من الممارسات الشائعة.

القراءة الموصى بها الهيكل الأساسي لووردبريس وكيفية عمله。

function my_theme_setup() {
    // 添加文章和页面特色图片支持
    add_theme_support('post-thumbnails');
    // 为导航菜单功能添加支持
    add_theme_support('menus');
    // 为评论列表、搜索表单等添加HTML5标记支持
    add_theme_support('html5', array('comment-list', 'search-form'));
}
add_action('after_setup_theme', 'my_theme_setup');

ثم، يمكنك استخدام…register_nav_menus() دالة لتحديد مواقع العناصر المتاحة في الموضوع، مثل “التنقل الرئيسي في الجزء العلوي” و“التنقل في الجزء السفلي من الصفحة”.

إدخال ملفات الأنماط (style sheets) ولغة جافاسكريبت (JavaScript)

ترتيب ملفات CSS و JavaScript بشكل صحيح في القائمة (enqueue) أمر أساسي في التطوير المهني، حيث يضمن ذلك تنفيذ الاعتمادات بشكل صحيح ويمنع حدوث تعارضات بين السكريبتات. يجب ألا تقوم أبدًا باستخدام هذه الملفات مباشرة داخل ملفات القوالب (templates).أويتم استيراد الموارد عن طريق استخدام العلامات (tags).

الاستضافة المشتركة InterServer
استضافة مشتركة $2.50 دولار أمريكي في الشهر، الشهر الأول $0.1 دولار أمريكي الرمز الترويجي tryinterserver، 461 نص برمجي للتطبيقات السحابية، تثبيت بنقرة واحدة.
انتر سيرفر LOGO صفحة الوصول 
function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件，依赖于jQuery
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

خطافwp_enqueue_scripts يُستخدم لتحميل السكريبتات والأنماط في الجزء الأمامي (الواجهة) من الموقع الإلكتروني.get_stylesheet_uri()وget_template_directory_uri() يمكن للدالة مساعدتك في الحصول على العنوان الصحيح لمجلد المواضيع.

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

توفر مناطق الأدوات (Widget Areas) الموجودة في الشريط الجانبي أو القائمة السفلية للمستخدمين القدرة على تخصيص المحتوى من خلال واجهة سهلة الاستخدام تتيح سحب العناصر ووضعها في المكان المطلوب.register_sidebar() يمكن للدالة إنشاء منطقة جديدة للأدوات الصغيرة (small tools).

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          =&gt; '主侧边栏',
        'id'            =&gt; 'sidebar-1',
        'description'   =&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_theme_widgets_init');

بعد التسجيل، ستحتاج إلى العمل على ملفات القوالب (مثل…).sidebar.phpيتم استخدامه في (المكان المحدد).dynamic_sidebar('sidebar-1');دالة لعرض هذه المنطقة.

إنشاء تصميمات وأنماط واجهات مستجيبة (Responsive Designs and Styles)

يجب أن تعرض المواقع الإلكترونية الحديثة بشكل جيد على مختلف الأجهزة. وهذا يعني أن تصميم الموقع يجب أن يكون “متجاوبًا” (Responsive)، أي أن يتكيف تلقائيًا مع حجم الشاشة ومواصفات الجهاز المستخدم. يتم تحقيق التصميم المتجاوب بشكل أساسي باستخدام استعلامات وسائط CSS (Media Queries) والتخطيط السائل (Fluid Layout

استراتيجية التصميم الموجهة نحو الأجهزة المحمولة (Mobile-First Design Strategy)

يُنصح باعتماد استراتيجية كتابة أكواد CSS “مع التركيز على الأجهزة المحمولة أولاً” (Mobile First). أي أنه يجب كتابة الأنماط الأساسية أولاً للأجهزة المحمولة (ذات الشاشات الصغيرة)، ثم استخدام استعلامات وسائط (Media Queries) لإض

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}
.article {
    font-size: 16px;
    line-height: 1.6;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* 针对桌面设备 */
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
    .article {
        font-size: 18px;
    }
}

تضمن هذه الاستراتيجية توافر المحتوى الأساسي على جميع الأجهزة، مع تحسين تجربة المستخدم تدريجياً على الشاشات الأكبر حجماً.

التعامل المرن مع الصور والوسائط

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

img,
iframe,
video {
    max-width: 100%;
    height: auto;
}

تضمن هذه القاعدة من CSS ألا يتجاوز عرض عنصر الوسائط (media element) عرض الحاوية الأم (parent container)، وفي الوقت نفسه يتم تعديل ارتفاعه تلقائيًا بشكل متناسب، مما يمنع تلف تنسيق الصفحة (layout).

استخدام الفئات والدوال المساعدة في ووردبريس (WordPress)

يقوم ووردبريس نفسه بإنتاج العديد من الفئات (classes) CSS المفيدة، ويمكنك استخدامها للتحكم في التصميم بدقة أكبر. على سبيل المثال،سيتم إضافة فئات تحدد نوع الصفحة أو المقال إلى العلامات (tags)، مثل….page, .single-post)، بالإضافة إلى فئات معرفات المقالات (مثل.postid-123) خلال دورة عرض قائمة المقالات،post_class()تقوم الدالة بإخراج سلسلة من أسماء الفئات (مثل تنسيق المقال، التصنيف، إلخ) لكل عنصر يحتوي على مقال، مما يوفر راحة كبيرة في تصميم الأنماط بدقة عالية.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- 文章内容 -->
</article>

في ملفات الأنماط (style sheets)، يمكنك تحديد المواقع (positions) بالطريقة التالية:

/* 为所有文章添加通用样式 */
article {
    margin-bottom: 2em;
}
/* 仅为“引语”格式的文章添加特殊样式 */
.format-quote {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding-left: 1em;
}

الملخصات

تطوير مواقع ووردبريس (WordPress themes) يعتبر عملية تجمع بين الإبداع، وتقنيات الواجهة الأمامية (HTML، CSS، JavaScript)، وتقنيات الواجهة الخلفية (PHP). يبدأ العملية بإنشاء قاعدة أساسية تحتوي على…style.cssوindex.phpابدأ من المجلد الأساسي، وتعلم تدريجياً كيفية إنشاء نظام مستويات القوالب (template hierarchy system)، ثم قم بتقسيم الصفحات إلى مكونات قوالب قابلة لإعادة الاستخدام. هذا هو الجزء الأساسي.functions.phpالملف هو المكان الذي تقوم فيه بتوسيع وظائف موضوعك، وتسجيل القوائم والسكريبتات الخاصة به. وأخيرًا، من خلال تصميم CSS استجابي، تضمن أن موضوعك يوفر تجربة تصفح ممتازة على جميع الأجهزة، من الهواتف المحمولة إلى أجهزة الكمبيوتر المكتبية. اتبع أفضل الممارسات، مثل استخدام المواضيع الفرعية لإجراء التعديلات، وترتيب السكريبتات والأنماط بشكل صحيح، مما سيجعل موضوعك أكثر احترافية وأم

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

هل يمكن تطوير تخصيصات ( Themes ) لموقع ووردبريس ( WordPress ) دون امتلاك أساسيات في لغة PHP؟

مع أنه من الناحية النظرية يمكن تعديل مظهر الموضوع الحالي فقط عن طريق تغيير ملفات HTML و CSS، إلا أنه لتطوير موضوع جديد من الصفر ويتوافق مع معايير WordPress، فإن معرفة لغة PHP أمر ضروري للغاية. يجب أن تفهم أساسيات لغة PHP وكيفية استدعاء الدوال، بالإضافة إلى علامات القوالب (Templates) الخاصة بـ WordPress ونظام الخطافات (Hooks). ننصحك بتعلم أساسيات لغة PHP وعلامات القوالب الخاصة بـ WordPress أولاً.

بعد الانتهاء من تطوير الموضوع، كيف يمكن نشره ليستخدمه الآخرون؟

قبل نشر الموضوع في الدليل الرسمي لمواضيع ووردبريس أو بيعه تجاريًا، من الضروري إجراء اختبارات صارمة والتأكد من أنه يتبع معايير الكود الموجودة في “دليل تطوير مواضيع ووردبريس”. وهذا يشمل مراجعة الكود من ناحية الأمان، والتأكد من أن الموضوع يتمتع بالتكيف التلقائي مع مختلف أحجام الشاشات (التصميم الاستجابي)، بالإضافة إلى الاستعداد للترجمة (الدعم الدولي – i18n) باستخدام دوال الترجم__()و_e()ثم قم بإزالة جميع أكواد التصحيح (الديباجينج – debugging code). بعد ذلك، يمكنك اختيار إرسال الملفات إلى الدليل الرسمي، أو توزيعها من خلال موقعك الإلكتروني الخاص.

ما هي العلاقة بين تحديثات الأفكار الفرعية (المواضيع الفرعية) وتحديثات الأفكار الرئيسية (المواضيع الأم)؟

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

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

لإضافة صفحات خيارات مخصصة للمواضيع المتقدمة، يتم عادةً استخدام واجهة برمجة التطبيقات (API) الخاصة بإعدادات ووردبريس (Settings API) أو من خلال دمج إطار عمل شائع لإدارة الخيارات (مثل Redux أو Kirki أو مكتبة Carbon Fields). واجهة برمجة التطبيقات الخاصة بإعدادات ووردبريس توفر مجموعة من الواجهات الموحدة لإنشاء وتحقق من صحة الخيارات وحفظها بشكل آمن. بالنسبة للمبتدئين، استخدام إطار عمل مثبت يمكن أن يساعد في بناء واجهة خيارات سهلة الاستخدام بشكل أسرع، لكن ذلك قد يزيد من تعقيد الموضوع وحجم ملفاته.

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

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

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

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

الوسوم