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

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

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

التحضير: فهم بنية القالب والملفات الأساسية

قبل أن نبدأ في كتابة الشيفرة، نحتاج إلى فهم البنية الأساسية لقالب ووردبريس القياسي. أبسط قالب ووردبريس يحتاج فقط إلى ملفين:style.css و index.phpومع ذلك، فإن السمة المتكاملة الوظائف والواضحة البنية تحتاج إلى المزيد من ملفات القوالب المحددة لتعريف الأجزاء المختلفة من الموقع الإلكتروني.

تشمل ملفات القالب الأساسية:
* index.php：ملف القالب الرئيسي للسمة، وهو قالب الرجوع الافتراضي لجميع صفحات الموقع.
* style.cssورقة الأنماط الرئيسية للقالب، فهي لا تحتوي على قواعد CSS فحسب، بل إن التعليقات في رأس الملف تحدد أيضًا البيانات الوصفية للقالب، مثل اسم القالب، والمؤلف، والوصف، وغيرها، وهذا هو المفتاح الذي يعتمد عليه WordPress للتعرف على القالب.
* header.php: قالب رأس الصفحة للموقع الإلكتروني، وعادةً ما يتضمن<head>الجزء، وشعار الموقع وقائمة التنقل الرئيسية.
* footer.php：قالب تذييل الموقع، وعادةً ما يتضمن معلومات حقوق النشر ومناطق الأدوات وغيرها.
* functions.php：ملف وظائف القالب، يُستخدم لإضافة وظائف القالب، وتسجيل القوائم، ومناطق الودجات، وكذلك تضمين ملفات PHP أخرى.

بالإضافة إلى ذلك، توجد قوالب لصفحات محددة، مثل single.php（مقالة واحدة）、page.phpصفحة مستقلةarchive.php(صفحة أرشيف المقالات) وغيرها. إن فهم وظيفة هذه الملفات هو حجر الأساس لبناء القالب.

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

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

إن إعداد بيئة التطوير لا يقل أهمية. تحتاج إلى بيئة تطوير PHP محلية (مثل XAMPP أو Local by Flywheel أو DevKinsta)، ومحرر أكواد (مثل VS Code أو PhpStorm)، والتأكد من أن نسخة WordPress المثبتة محليًا لديك هي أحدث إصدار.

إنشاء ملفات القالب وبنية الدليل

أولاً، في مجلد تثبيت WordPress الخاص بك، wp-content/themes/ داخل المجلد، قم بإنشاء مجلد جديد وأطلق عليه اسم موضوعك، على سبيل المثال: my-first-themeسيتم وضع جميع ملفات السمات في هذا المجلد.

بعد ذلك، سنقوم بإنشاء أول ملف والذي هو أيضًا ضروري للغاية:style.cssفي الجزء العلوي من هذا الملف، يجب أن تضيف تعليقًا محددًا لتخبر ووردبريس أن هذا هو موضوعك (theme) الخاص.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

الآن، أنشئ الملف الإلزامي الثاني:index.phpفي المرحلة الأولية، يمكننا جعل الأمر بسيطًا للغاية، وذلك عن طريق إخراج هيكل HTML أساسي فقط.

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1002>
    <header>
        <h1>مرحبًا بكم في أول قالب ووردبريس الخاص بي!</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© جميع الحقوق محفوظة.</p>
    </footer>
    
</body>
</html>

في هذا الوقت، إذا دخلت إلى واجهة خلفية WordPress واخترت قسم “المظهر” (Appearance) ثم “القوالب” (Themes)، يجب أن تتمكن من رؤية قالبك “My First Theme” وتفعيله. بعد تفعيله وزيارة الصفحة الرئيسية للموقع، ستلاحظ أن محتوى المقالات محاط بصفحة HTML بسيطة للغاية.

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

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

إنشاء القوالب والميزات الأساسية

لجعل بنية الموضوع أكثر وضوحًا، نحتاج إلىindex.phpقسّمها إلى أجزاء أصغر قابلة لإعادة الاستخدام. أولاً، أنشئ header.php الملف، سيتم…<head>تم نقل بعض المحتوى ومحتوى رأس الصفحة إلى الداخل.

<!DOCTYPE html>
<html no numeric noise key 1012>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
</head>
<body no numeric noise key 1009>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( is_front_page() && is_home() ) :
            ?>
            <h1 class="site-title"><a href="/ar/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a></h1>
            <?php
        else :
            ?>
            <p class="site-title"><a href="/ar/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a></p>
            <?php
        endif;
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            )
        );
        ?&gt;
    </nav>
</header>

بعد ذلك، قم بإنشاء footer.php ملف.

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <p><?php echo esc_html__( '由WordPress驱动', 'my-first-theme' ); ?></p>
    </div>
</footer>

</body>
</html>

الآن، نحتاج إلى إنشاء “عقل” السمة — functions.php ملف. هنا، سنقوم بإعداد الميزات التي يدعمها القالب، وتسجيل مواقع القوائم، وإضافة أوراق الأنماط والبرامج النصية.

<?php
// 添加主题功能支持
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus(
        array(
            'menu-1' => esc_html__( '主导航', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册前端样式表
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' );

أخيرًا، قم بإعادة هيكلة ما لديك. index.php، استخدم وسوم قوالب ووردبريس لإدراج الترويسة والتذييل.

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

الآن وقد اكتمل الهيكل الأساسي للموضوع، فقد حان الوقت لإضافة الأنماط والتفاعلات إليه. أولاً، فيstyle.cssبعد تعليق رأس الملف، أضف بعض CSS الأساسية لتجميل قالبك.

الاستضافة المشتركة InterServer
استضافة مشتركة $2.50 دولار أمريكي في الشهر، الشهر الأول $0.1 دولار أمريكي الرمز الترويجي tryinterserver، 461 نص برمجي للتطبيقات السحابية، تثبيت بنقرة واحدة.
انتر سيرفر LOGO صفحة الوصول 
/* 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}
.site-header {
    background: #fff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    margin-left: 1.5rem;
}
.site-main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.site-footer {
    text-align: center;
    padding: 2rem;
    color: #666;
    border-top: 1px solid #eee;
}

لمعالجة التنقل على الأجهزة المحمولة، يمكننا إنشاء ملف JavaScript بسيط. في الدليل الجذر للقالب، قم بإنشاء /js/navigation.js。

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

// 简单的移动端菜单切换示例
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.createElement('button');
    menuToggle.textContent = '菜单';
    menuToggle.classList.add('menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');
    if (primaryMenu) {
        primaryMenu.parentNode.insertBefore(menuToggle, primaryMenu);
        menuToggle.addEventListener('click', function() {
            primaryMenu.classList.toggle('show');
        });
    }
});

وأضف الأنماط المقابلة في CSS:

.menu-toggle {
    display: none;
    background: #007cba;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .main-navigation ul.show {
        display: flex;
    }
}

الملخصات

من خلال الخطوات المذكورة أعلاه، أكملنا قالب ووردبريس أساسيًا لكنه متكامل البنية. بدأنا بفهم الملفات الأساسية للقالب، ثم أنشأنا تدريجيًاstyle.cssوindex.phpثم من خلال فصلheader.php、footer.phpوقويfunctions.phpالملفات، مما يجعل بنية السمة معيارية وقابلة للصيانة. وأخيرًا، أضفنا الأنماط الأساسية وتفاعلات JavaScript البسيطة لتحسين تجربة المستخدم.

يتمتع هذا القالب بالميزات الأساسية لقوالب WordPress الحديثة: يدعم وسم العنوان، والصورة البارزة، وقوائم التنقل، ويملك ملامح أولية لتصميم متجاوب. انطلاقًا من ذلك، يمكنك مواصلة استكشاف إنشاءsingle.php、page.phpملفات قوالب إضافية، وإدخال أطر CSS أكثر تعقيدًا (مثل Bootstrap)، أو استخدام واجهة REST API الخاصة بووردبريس لبناء واجهة أمامية أكثر ديناميكية. إن عالم تطوير القوالب واسع وممتع، والمفتاح يكمن في التطبيق العملي والتكرار المستمر.

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

لماذا لا يظهر موضوعي في قائمة “المواضيع” في الواجهة الخلفية؟

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

كيف يمكنني إضافة منطقة الأدوات (Widget) إلى موضوعي؟

أنت بحاجة إلى...functions.phpتم استخدام الملف في العملية.register_sidebar()استخدم الدالة لتسجيل منطقة الأدوات المصغّرة. بعد التسجيل، يمكنك في ملفات القالب المقابلة (مثلsidebar.phpأوfooter.phpيتم استخدامه في (المكان المحدد).dynamic_sidebar()استدعِها بواسطة دالة. هذه هي الطريقة القياسية لتوسيع وظائف الشريط الجانبي أو التذييل في القالب.

函数 get_template_part() 有什么用？

get_template_part()هذه علامة قالب قوية جدًا، تُستخدم لتحميل أجزاء من الكود قابلة لإعادة الاستخدام داخل الموضوع (التطبيق أو الصفحة). على سبيل المثال، يمكن استخدامها لاستدعاء كود داخل حلقة (loop).get_template_part( 'template-parts/content', get_post_type() );سيحاول تحميل أولاً.template-parts/content-post.php(بافتراض أن نوع المقال هوpost)، وإذا فشل فقم بالتحميلtemplate-parts/content.phpوهذا يحسن إلى حد كبير وحداتية الشفرة وقابليتها للصيانة.

عند تطوير قالب، كيف تضمن أنه يتوافق مع معايير ترميز ووردبريس؟

وضعت ووردبريس معايير ترميز مفصلة لكل من PHP وHTML وCSS وJavaScript. يُنصح بتثبيت أدوات linting المناسبة في محرر الشيفرة لديك (مثل PHP_CodeSniffer مع قواعد معايير ترميز ووردبريس، وESLint وغيرها). وفي الوقت نفسه، ارجع بانتظام إلى وثائق معايير الترميز في الدليل الرسمي لووردبريس، وطبّق هذه المعايير بشكل إلزامي أثناء تطوير الفريق لضمان جودة الشيفرة واتساقها.

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

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

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

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

الوسوم