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

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

قبل أن تبدأ في كتابة الكود، تحتاج إلى بيئة تطوير محلية مستقرة ومهنية. ننصح بشدة بعدم تعديل ملفات الموضوعات مباشرة على الخوادم عبر الإنترنت، حيث أن البيئة المحلية تتيح لك إجراء الاختبارات بحرية دون التأثير على الوصول الطبيعي للموقع الإلكتروني. يمكنك اختيار برامج بيئة التطوير المتكاملة مثل XAMPP أو MAMP (لنظام Mac) أو Laragon (لنظام Windows)، والتي تقوم بتثبيت وتكوين Apache وMySQL وPHP بنقرة واحدة.

يجب تثبيت برنامج WordPress نفسه أيضًا في بيئتك المحلية. قم بزيارة الموقع الرسمي لـ WordPress لتنزيل أحدث حزمة تثبيت، ثم قم بفك ضغط الملفات ووضعها في المجلد الرئيسي لموقع الويب على الخادم المحلي (مثل المجلد الرئيسي لبرنامج XAMPP). htdocs من ثم، قم بزيارة الموقع عبر المتصفح وأكمل عملية التثبيت المعروفة باسم “التثبيت في خمس دقائق”. أثناء عملية التثبيت، تذكر المعلومات التي قمت بتحديدها.

أخيرًا، تحتاج إلى محرر كود ملائم أو بيئة تطوير متكاملة (IDE). كل من Visual Studio Code وPhpStorm وSublime Text خيارات ممتازة، حيث توفر هذه الأدوات تمييزًا للغة البرمجية، واقتراحات أثناء كتابة الكود، ووظائف لإدارة الملفات، مما يساعد بشكل كبير على تحسين كفاءة عملية التطوير.

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

فهم الهيكل الأساسي لمواضيع ووردبريس (WordPress Themes)

موضوع ووردبريس (WordPress theme)، في جوهره، هو ملف أو مجموعة من الملفات تحتوي على التصميم الجمالي والخصائص الوظيفية التي تُستخدم لتخصيص مظهر وواجهة موقع ووردبريس. يتم تثبيت هذا الموضوع على موقع /wp-content/themes/ المجلدات الموجودة داخل الدليل تحتوي على مجموعة من الملفات والمجلدات التي تتبع قواعد معينة. تعمل هذه الملفات معًا لإخبار برنامج WordPress كيفية عرض مظهر الموقع ومحتواه.

خادم ووردبريس من شركة UltaHost

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

صفحة الوصول

أساسي آليته هو “مستويات القوالب” (Template Hierarchy). يقوم ووردبريس (WordPress) تلقائيًا باختيار ملف القالب المناسب بناءً على نوع الصفحة التي يتم زيارتها لعرض المحتوى. على سبيل المثال، عند زيارة مقالة في المدونة، يبحث ووردبريس أولاً عن… single.phpعند زيارة الصفحة الرئيسية للمدونة، يتم البحث عن… home.php أو index.phpيمنح هذا الآلية مرونة كبيرة للمواضيع (المحتويات).

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

تعليق رأس الموضوع النموذجي يكون كالتالي:

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的简单 WordPress 主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Text Domain يُستخدم لأغراض التدويل؛ وهو معرف يتم استخدامه عند استدعاء دوال الترجمة لاحقًا.

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

بالإضافة إلى هذين الملفين، فإن الموضوع (theme) الذي يحتوي على جميع الميزات الضرورية عادةً ما يشمل أيضًا:header.php(الجزء العلوي من الصفحة الويب)footer.php(في أسفل الصفحة)sidebar.php(الشريط الجانبي) وكذلك functions.php(ملف تحسينات وظائف الثيمات). من خلال فهم هذه البنية الأساسية، أصبحت تمتلك الإطار اللازم لتطوير الثيمات.

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

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

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

استضافة.كوم استضافة مشتركة

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

صفحة الوصول

<main>
   
    
      <article>
        <h2></h2>
        <div></div>
      </article>
    
    <p>لا يوجد محتوى حاليًا.</p>
  
</main>
؟ &gt;

يستخدم هذا الكود علامات قوالب (template tags). get_header(), get_sidebar(), get_footer(), the_title() و the_content()لكي يعمل هذا النظام، ستحتاج إلى إنشاء الملفات المناسبة للرأس (header)، والشريط الجانبي (sidebar)، والقسم السفلي (footer).

إنشاء header.phpيجب أن يحتوي هذا الجزء على البداية الأساسية لملف HTML، وذلك حتى بداية المحتوى الرئيسي للوثيقة.

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
</head>
<body no numeric noise key 1004>
  <header>
    <h1><a href="/ar/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
    <p></p>
    <nav>
      'primary'
        ) );
      ?&gt;
    </nav>
  </header>

هنا،wp_head() هذا هو الخيار الحاسم، فهو يسمح لنواة ووردبريس (WordPress Core) والإضافات (Plugins) والقوالب (Themes) بإدراج الكود الضروري في الجزء العلوي من الصفحة (الترويسة – Header)، مثل روابط جداول الأنماط (Style Sheets).body_class() تقوم الدالة بإخراج سلسلة من أسماء الفئات (CSS classes) ذات المعنى الواضح، مما يسهل عليك التحكم الدقيق في التصميم الخاص بالموقع.

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

إنشاء footer.php لإغلاق التبويب المفتوح:

  <footer>
    <p>©</p>
    
  </footer>
</body>
</html>

انتبه،wp_footer() إنه مع. wp_head() الخطاف الخلفي النسبي أمر ضروري أيضًا للغاية.

الاستضافة المشتركة InterServer

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

صفحة الوصول

إنشاء sidebar.phpيمكن في الوقت الحالي وضع مكالمة تحكم بسيطة واحدة فقط:

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

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

تعزيز وظائف الموضوع من خلال ملف Functions.php

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

يجب عليك إنشاء هذا الملف في المجلد الرئيسي للموضوع (theme root directory). أولاً، دعونا نضيف ملفات الأنماط (stylesheets) والبرمجيات (scripts) إلى الموضوع. الطريقة الصحيحة هي استخدام الدوال المتاحة في ووردبريس (WordPress) لإضافة هذه الملفات، بدلاً من كتابتها مباشرةً في ملف HTML. <link> العلامات (Tags).

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

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

هنا،wp_enqueue_style() و wp_enqueue_script() هذه الدالة مخصصة لإضافة الموارد بشكل آمن.get_stylesheet_uri() موجه نحو الموضوع style.css。add_action() قم بتثبيت دالتنا (mount our function). wp_enqueue_scripts على هذا الخطاف، تأكد من أنه يتم تنفيذ العملية في الوقت المناسب.

بعد ذلك، قم بتسجيل قائمة التنقل والشريط الجانبي (منطقة الأدوات الصغيرة):

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() أريد أن تظهر في واجهة “المظهر” -> “القائمة” الخاصة بالخادم خيارات لاختيار مواقع الأطباق.add_theme_support() تُستخدم الدوال لتفعيل مختلف ميزات المواضيع (themes)، وهذه هي الممارسة القياسية في تطوير المواضيع الحديثة. على سبيل المثال، لتفعيل… title-tag بعد ذلك، لن تحتاج إلى القيام بذلك مرة أخرى. header.php إخراج يدوي <title> تم وضع العلامات.

أخيرًا، قم بتسجيل منطقة أدوات الشريط الجانبي:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-first-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', 'my_first_theme_theme_widgets_init' );

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

الملخصات

استنادًا إلى إنشاء ملف يحتوي على style.css و index.php ابدأ من المجلد المحدد، واصل العمل حتى تقوم ببناء مكونات القوالب المنفصلة (separate template components).header.php, footer.phpثم إلى استخدام القدرات القوية… functions.php قمت بإنشاء قائمة تسجيل الملفات، والشريط الجانبي، وتحميل الموارد بشكل آمن، وبذلك قد أكملت الخطوات الأساسية لإنشاء تصميم موقع ووردبريس مخصص. جوهر هذه العملية يكمن في فهم واتباع هيكل القوالب ونظام الأحداث (الهوكس – hooks) في ووردبريس.

لم تعد مجرد مستخدم لهذا الموضوع، بل أصبحت مبدعه أيضًا. بعد إتقان هذه المعرفة الأساسية، يمكنك المضي قدمًا في دراسة ملفات القوالب الأكثر تعقيدًا. single.php、page.php、archive.phpاستكشف المزيد من إمكانيات الحلقات (loops) في ووردبريس، واستخدم التصنيفات الشرطية (conditional tags) مثل… is_page(), is_single()لتحقيق مزيد من التحكم الدقيق في الصفحات، فإن عالم تطوير المواضيع واسع ومثير للاهتمام، وهذا مجرد نقطة انطلاق قوية.

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

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

需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。

لماذا يجب استخدام دالتي `wp_head()` و `wp_footer()`؟

هاتان الدالتان هما من الخيوط الأساسية (core hooks) في ووردبريس (WordPress).wp_head() يقع في </head> قبل وضع العلامات، يسمح هذا النظام لنواة ووردبريس (WordPress Core) والإضافات (Plugins) والقوالب الخاصة بك بإدراج الكود الضروري في الجزء العلوي من الصفحة، مثل روابط جداول أنماط CSS والعلامات الوصفية (Meta Tags) ومتغيرات JavaScript وغيرها.wp_footer() يقع في </body> تُستخدم هذه العلامات (tags) عادةً قبل المحتويات لإدراج أكواد تحليلية أو ملفات JavaScript التي يتم تحميلها بشكل متأخر. إذا كانت هذه العلامات غائبة، فلن تتمكن العديد من الإضافات (plugins) من العمل بشكل صحيح، وقد تظهر أيضًا مشاكل في بعض ميزات ووردبريس نفسه.

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

قم بإنشاء ملف PHP جديد، على سبيل المثال: page-fullwidth.phpفي الجزء العلوي من هذا الملف، يجب أن تضيف كتلة تعليقات تحتوي على اسم القالب المحدد. على سبيل المثال:

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

ثم، يمكنك كتابة شيء مختلف داخل هذا الملف. page.php الهيكل HTML، مثل الحذف… get_sidebar() بعد الحفظ، عندما تقوم بتعديل الصفحة في واجهة خلفية ووردبريس (WordPress Backend)، سيظهر خيار “صفحة بعرض كامل” (Full Width Page) ضمن قائمة الاختيارات المتاحة تحت خانة “القوالب” (Templates) ضمن “خصائص الصفحة” (Page Properties).

ما هي أفضل الممارسات عند التعامل مع CSS و JavaScript أثناء تطوير المواقع الإلكترونية؟

أفضل الممارسات هي استخدام ما يوفره ووردبريس (WordPress). wp_enqueue_style() و wp_enqueue_script() الدالة، في… functions.php تم تثبيته/توصيله بـ… wp_enqueue_scripts استخدم الخطافات لإضافة الموارد. تتيح هذه الطريقة ما يلي: 1) تنفيذ المعالجة الصحيحة للتبعيات (على سبيل المثال، اعتماد البرنامج النصي على jQuery)؛ 2) تجنب تحميل نفس المورد مرارًا وتكرارًا؛ 3) تسهيل إدارة الإضافات وشفرة المظاهر الأخرى؛ 4) الامتثال لمعايير الترميز الخاصة بـ WordPress. يجب تجنب استخدام ملفات القالب مباشرةً. <link> أو <script> تم ترميز موارد العلامات (tags) بشكل ثابت (hard-coded).

كيف يمكنني تحقيق دعم لعدة لغات (التدويل) لموضوعي؟

عليك القيام بشيئين. أولاً، style.css عند ترجمة النصوص الموجودة داخل التعليقات العلوية أو الدوال المستدعاة، يجب استخدام “نطاق النص” (Text Domain) الصحيح. كما هو موضح في الدليل، يتم تحديد ذلك عند تعريف المتطلبات الخاصة بالترجمة. Text Domain: my-first-themeثانيًا، في… functions.php في جميع ملفات القوالب، يجب استخدام دوال الترجمة الخاصة بـ WordPress لتغليف جميع النصوص الموجودة في واجهة المستخدم التي تحتاج إلى ترجمة. أكثر هذه الدوال شيوعًا هي… __()（العودة إلى السلسلة المترجمة） و _e()(يتم عرض النص المترجم مباشرةً دون أي تعديلات.) مثال:<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>بعد ذلك، يمكنك استخدام أدوات مثل Poedit لإنشاء المحتوى المطلوب. .pot ملفات القوالب، المخصصة لمترجمين لإنشاء نسخ بلغات مختلفة. .po و .mo ملف.