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

كيفية تطوير قالب ووردبريس مخصص من الصفر؟

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

فهم الهيكل الأساسي لمواقع ووردبريس والملفات الأساسية

موضوع ووردبريس مخصص في جوهره عبارة عن مجلد يحتوي على ملفات معينة، ويقع في…/wp-content/themes/هذه الملفات موجودة داخل المجلد. تتبع هذه الملفات نظام المستويات القياسي لقوالب ووردبريس (WordPress’s template hierarchy)، وهو النظام الذي يحدد كيفية عرض المحتوى الموجود في قاعدة البيانات (مثل المقالات والصفحات) للزوار على الموقع الإلكتروني. فهم دور كل ملف وكيفية تعاونها مع بعضها البعض هو الخطوة الأولى في عملية

الملفات الضرورية للموضوع وهيكل المجلدات

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

/*
Theme Name: 我的自定义主题
Author: 开发者名称
Description: 这是一个用于演示如何从零开发的自定义WordPress主题。
Version: 1.0.0
Text Domain: my-custom-theme
*/

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

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

مستويات القوالب ووظيفة ملفات القوالب

نظام مستويات القوالب في ووردبريس (WordPress) يعتمد على مجموعة من القواعد الذكية لاختيار القوالب المناسبة. يقوم بتحديد ملف القالب الأنسب تلقائيًا بناءً على نوع الصفحة التي يزورها المستخدم (مثل الصفحة الرئيسية، صفحة المقال، صفحة التصنيفات، إلخ). على سبيل المثال، عند زيارة مقال منفرد، يقوم ووردبريس بالبحث عن القالب المناسب وفقًاsingle-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php –> ثم بعد ذلك فقط index.php。

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

بالإضافة إلى الملفين الضروريين المذكورين أعلاه، يحتوي موضوع (theme) كامل الوظائف عادةً أيضًا على:
* header.php: تعريف رأس المستند، الذي يحتوي على<head>المنطقة، شعار الموقع الإلكتروني، والتنقل الرئيسي.
* footer.phpتعريف قسم قاعدة الصفحة (footer) للوثيقة، والذي يحتوي على معلومات حقوق النشر، وروابط مساعدة، وغيرها.
* functions.phpهذا هو “الدماغ” الخاص بالموضوع (theme)، ويُستخدم لتحميل أنماط السكريبتات (scripts)، وتسجيل القوائم والأدوات الإضافية (tools), وتعريف الميزات المدعومة من قبل الموضوع نفسه (theme-supported features), وغيرها.
* single.phpيُستخدم لعرض مقال واحد فقط.
* page.phpيُستخدم لعرض صفحة واحدة فقط.

بناء الميزات الأساسية والقوالب للموضوع (Building the core features and templates for a topic)

بعد إنشاء هيكل الملفات الأساسي، التالي هو ملء محتويات هذه الملفات القالبية، واستخدام الدوال الأساسية لـ WordPress و“الحلقة الرئيسية” (main loop) لعرض البيانات بشكل ديناميكي.

في ملف functions.php، قم بتهيئة وظائف الموضوع (theme functions).

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

&lt;?php
// 主题初始化设置
function mytheme_setup() {
    // 让WordPress管理<title>标签
    add_theme_support( 'title-tag' );
    // 启用文章特色图像（缩略图）支持
    add_theme_support( 'post-thumbnails' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个主菜单位置
    register_nav_menus( array(
        'menu-1' =&gt; esc_html__( '主菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

// 注册小工具侧边栏
function mytheme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; esc_html__( '侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; esc_html__( '在此添加小工具。', 'my-custom-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', 'mytheme_widgets_init' );

// 加载主题的样式表和脚本
function mytheme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 加载导航脚本（如果有的话）
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?&gt;

استخدم الحلقة الرئيسية (The Loop) لعرض المحتوى.

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

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

<?php if ( have_posts() ) : ?>
    <div class="posts-container">
        <?php while ( have_posts() ) : the_post(); ?>
            <article no numeric noise key 1009>
                <h2 class="entry-title">
                    <a href="/ar/</?php the_permalink(); ?>"></a>
                </h2>
                <div class="entry-meta">
                    تم النشر في:
                </div>
                <div class="entry-summary">
                    
                </div>
            </article>
        
    </div>
    
    <p><?php esc_html_e( '很抱歉，没有找到符合条件的内容。', 'my-custom-theme' ); ?></p>

في هذا القطعة من الكود،have_posts()وthe_post()الدوال تتحكم في الحلقات (التكرارات في البرمجة)، و…the_title()、the_permalink()、the_excerpt()تُستخدم علامات القوالب (template tags) لعرض المحتوى المحدد.

تحقيق تصميم يتكيف مع الشاشات المختلفة (التصميم التفاعلي) وميزات المواضيع المتقدمة.

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

دمج تصميم متجاوب (يتكيف مع أحجام الشاشات المختلفة) مع تحسينات مواتية للأجهزة المحمولة.

لضمان أن موقعك يعمل بشكل جيد على جميع أنواع الأجهزة، من الضروري التأكد من أن تصميمه متجاوب (responsive)، وهذا يتطلب العمل على كل من HTML وCSS. أولاً، فيما يتعلق بـ HTML:header.phpمستندات<head>داخل المنطقة المحددة، يجب التأكد من تضمين علامات وصف النافذة (viewport meta tags).

استضافة.كوم استضافة مشتركة
أداء عالٍ مع وحدات المعالجة المركزية AMD EPYC، ووحدات تخزين NVMe SSD وLiteSpeed، ودعم داخلي متخصص على مدار الساعة طوال أيام الأسبوع، وتدابير أمنية متقدمة بما في ذلك SSL، وقوة الغاشمة، والحماية من البرامج الضارة والحماية من DDoS، وتوفير ما يصل إلى 731 تيرابايت 4 تيرابايت
شعار الاستضافة.كوم صفحة الوصول 
<meta name="viewport" content="width=device-width, initial-scale=1">

ثانيًا، فيما يتعلق بما ذكرت…style.cssفي هذا المثال، يتم استخدام استعلامات الوسائط (Media Queries) لتعديل التخطيط والأنماط بناءً على عرض الشاشة. على سبيل المثال، يتم إخفاء الشريط الجانبي للأجهزة المحمولة:

@media screen and (max-width: 768px) {
    #secondary-sidebar {
        display: none;
    }
    .site-main {
        width: 100%;
    }
}

إنشاء قوالب صفحات مخصصة ومواضيع فرعية (Subtopics)

لتلبية متطلبات التصميم الفريدة لصفحة واحدة، يسمح لك ووردبريس (WordPress) بإنشاء قوالب صفحات مخصصة. على سبيل المثال، يمكنك إنشاء قالب صفحة بعرض كامل الشاشة بدون شريط جانبي، وتسميته…template-fullwidth.phpوأضف التعليق التالي في بداية الملف:

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的页面模板。
 */

ثم، عند تعديل الصفحة في واجهة ووردبريس الخلفية، يمكنك اختيار هذا القالب “قالب الصفحة بعرض كامل” من خلال قسم “خصائص الصفحة”.

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

لحماية التعديلات المخصصة الخاصة بك من أن تتم مسحها عند تحديث الموضوع الرئيسي، ننصح بشدة باستخدام المواضيع الفرعية (subtopics) أثناء عملية التطوير. يجب أن يحتوي كل موضوع فرعي على عنصر واحد فقط…style.cssوواحد اختياريfunctions.phpالفرعيstyle.cssيجب أن يتم الإعلان عن الموضوع الأب في الجزء العلوي من الصفحة.

/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/

تدويل المواضيع، تحسينها، والاستعداد لنشرها

عندما يقترب موعد الانتهاء من التطوير، يجب التأكد من أن الموضوع سهل الاستخدام من قبل المستخدمين في جميع أنحاء العالم، وأن أداء التطبيق جيد، ثم الاستعداد للإطلاق النهائي.

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

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

التدويل (Internationalization) هو عملية جعل موضوعك (theme) قابلاً للترجمة إلى لغات أخرى. في ووردبريس (WordPress)، يتم تحقيق ذلك بشكل أساسي من خلال دالتين:__()والتي تُستخدم لإرجاع السلسلة المترجمة._e()للاستخدام في الطباعة المباشرة للنص المترجم. يجب استخدامها في جميع الأماكن التي تحتاج إلى الترجمة، وتحديد مكان ذلك.style.cssحقل النص المعرف في الجزء العلوي من الصفحة (Text Domain defined in the upper part of the page).

<h2><?php esc_html_e( '最新文章', 'my-custom-theme' ); ?></h2>
<p><?php echo esc_html__( '这是一段示例文本。', 'my-custom-theme' ); ?></p>

بعد ذلك، يمكن استخدام أدوات مثل Poedit لإنشاء المحتوى المطلوب..potقم بترجمة ملفات القوالب وحزم اللغات المحددة (مثل…).zh_CN.poو.mo(التوثيق).

إجراء تحسينات على الأداء ومراجعة الكود

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

الملخصات

تطوير تصميم ووردبريس مخصص من الصفر يعتبر عملية تعلم منهجية تشمل فهم هيكل الملفات الأساسية، واستخدام مستويات القوالب والحلقات الرئيسية (main loops)، وصولاً إلى إضافة الميزات والتخصيصات اللازمة لتحسين أداء الموقfunctions.phpتمكنت شركة “زونغجي” (Zhongji) من تطوير وظائف متقدمة في مواقعها الإلكترونية، وتحقيق تصميمات تتكيف مع أجهزة المستخدمين المختلفة (تصميمات استجابية – responsive designs)، ومن ثم توسعت لتشمل الجوانب الدولية وتحسينات إضافية. وقد اتبعت الشركة مبدأ “البدء بالبساطة والتطوير التدريجي”، حيث بدأت بإنشاء قالب أساسي (theme) بأدنى مستوى من الوظائف ممكن، ثم أضافت تدريجياً ملفات قوالب ووظائف جديدة. بعد إتقان هذه المهارات، ستتمكن من إنشاء مواقع إلكترونية فريدة تلبي احتياجاتك أو

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

هل يتطلب تطوير قوالب ووردبريس (WordPress themes) معرفة عميقة بلغة PHP؟

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

لماذا لا يظهر موضوعي المخصص في الخلفية؟

السبب الأكثر شيوعًا هو…style.cssتنسيق التعليقات في رأس الملف غير صحيح، أو هناك نقص في المعلومات. يرجى التأكد من ملء الحقول مثل “Theme Name” و“Author” بدقة، وأن التنسيق صحيح تمامًا. سبب آخر هو أن مجلد الموضوع (Theme Folder) قد تم وضعه في المجلد الخاطئ؛ يجب أن يكون موجودًا في المكان المناسب.wp-content/themes/تحت ذلك.

كيف يمكنني جعل موضوعي يدعم محرر غوتنبرغ (Gutenberg)؟

لكي يتناسب موضوعك بشكل أفضل مع محرر غوتنبرغ (Gutenberg Editor)، ستحتاج إلى…functions.phpيجب إضافة بيانات دعم المواضيع المناسبة إلى النص. وهذا يشمل دعم التنسيق العريض (wide alignment) وقوائم أنماط المحرر (editor style sheets)، وما إلى ذلك. على سبيل المثال:

add_theme_support( 'align-wide' ); // 支持宽和全宽对齐
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' ); // 加载一个用于编辑器的专属样式表

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

كيف يمكنني اختبار موضوعي (theme) الخاص؟

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

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

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

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

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

الوسوم