الاستعدادات وتكوين البيئة
قبل البدء في كتابة الكود، تحتاج إلى بيئة تطوير مناسبة. تسمح لك بيئة التطوير المحلية بإجراء الاختبارات والتصحيحات دون التأثير على الموقع الإلكتروني الحي. يُنصح باستخدام حزم برمجية متكاملة مثل XAMPP أو MAMP أو Local by Flywheel، والتي تقوم بتثبيت Apache وMySQL/MariaDB وPHP بنقرة واحدة.
تأكد من أن إصدار PHP الخاص بك هو 7.4 أو أعلى، وهو الإصدار الأدنى الموصى به رسميًا من قبل ووردبريس. بالإضافة إلى ذلك، ستحتاج إلى محرر كود، مثل Visual Studio Code أو Sublime Text أو PHPStorm، حيث يوفر كل منها ميزات تمييز الصيغة النصية والاقتراحات التلقائية للكود، مما يساعد كثيرًا في تحسين كفاءة عملية التطوير.
إنشاء الهيكل الأساسي لموضوع WordPress
موضوع ووردبريس (WordPress theme)، في جوهره، هو ملف أو مجموعة من الملفات تحتوي على التصميم الجمالي والخصائص الوظيفية التي تُستخدم لتخصيص مظهر وواجهة موقع ووردبريس. يتم تثبيت هذا الموضوع على موقع wp-content/themes/ المجلد الموجود داخل الدليل… اسم هذا المجلد يجب أن يكون مؤشراً على موضوعك، ويُفضل استخدام أحرف صغيرة وأرقام وعلامات الربط (-)، ولا يجوز أن يحتوي على مسافات. على سبيل المثال، يمكنك إنشاء مجلد باسم… my-first-theme المجلد.
في هذا المجلد، يجب أن يكون هناك على الأقل ملفان أساسيان:style.css و index.php。style.css ليس فقط كملفات أنماط (style sheets)، بل الدور الأكثر أهمية لها هو توفير معلومات فوقية (metadata) عن الموضوع (theme)، وهذه المعلومات تظهر في صفحة “المظهر” (Appearance) → “المواضيع” (Themes) داخل واجهة ووردبريس الخلفية (WordPress backend).
كتابة رأس معلومات الموضوع (Subject Information Header)
في style.css في بداية الملف، يجب أن تضيف كتلة تعليقات محددة لتحديد معلومات الموضوع. إليك مثالاً:
/*
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.0
License: GPL v2 or later
Text Domain: my-first-theme
*/من بينها،Text Domain يُستخدم للتدعيم الدولي (دعم اللغات المتعددة)، ويجب أن يتطابق اسمه مع اسم مجلد الموضوع الخاص بك.index.php الملف هو قالب افتراضي للموضوع، وهو القالب الاحتياطي لجميع الصفحات. في البداية، يمكنك كتابة هيكل HTML بسيط داخله للتجربة.
ملفات القوالب الأساسية وهيكل التسلسلي للقوالب
يستخدم ووردبريس مجموعة من القواعد تُعرف باسم “هيكلية القوالب” (Template Hierarchy) لتحديد الملف القالب الذي يجب استخدامه لعرض صفحة معينة. فهم هذه الهيكلية أمر أساسي لتطوير القوالب الخاصة بموقعك. المفهوم الأساسي هو أن ووردبريس يبدأ البحث عن الملف القالب المناسب من أكثر الملفات تحديدًا، وإذا لم يجد الملف المطلوب، فإنه يعود إلى ملف أكثر عمومية، وإذا لم يجد حتى ذلك، فإنه يعود إلى الملف الأساسي الذي يحتوي على جم index.php。
القراءة الموصى بها مقدمة في تطوير قوالب ووردبريس: ابنِ أول قالب مخصص لك من الصفر。
ملفات القوالب الشائعة الاستخدام واستخداماتها
header.phpيحتوي الجزء العلوي من الموقع الإلكتروني عادةً على منطقة العنوان، وشعار الموقع، والقائمة الرئيسية للتنقل.footer.phpعادةً ما يحتوي قسم القائمة السفلية للموقع الإلكتروني على معلومات حقوق النشر وروابط مساعدة وغيرها.sidebar.phpمنطقة الشريط الجانبي.index.phpالقالب الرئيسي، يعتبر الخيار الاحتياطي النهائي لجميع الصفحات.single.phpيُستخدم لعرض مقال بلوج واحد فقط.page.phpيُستخدم لعرض صفحة واحدة معينة، مثل “نبذة عنا” أو “اتصل بنا”.archive.phpيُستخدم لعرض قوائم أرشيف المقالات (مثل التصنيفات، العلامات، المؤلفين، تواريخ الأرشيف).front-page.phpيُستخدم لتحديد الصفحة الرئيسية للموقع الإلكتروني (في حال تم تعيين صفحة ثابتة كصفحة رئيسية).home.phpيُستخدم لعرض صفحة فهرس مقالات المدونة (إذا تم تعيين صفحة رئيسية ثابتة، فإن هذا القالب يعرض قائمة بأحدث المقالات).404.phpيُستخدم لعرض صفحة الخطأ “404: لم يتم العثور على المطلوب”.search.phpيُستخدم لعرض نتائج البحث.functions.phpهذا ليس ملف قالب، بل هو ملف وظيفي خاص بالموضوع (theme)، يُستخدم لإضافة الميزات (features)، تسجيل القوائم (menus)، الشرائط الجانبية (sidebars)، وغيرها.
علامات القالب والحلقات.
في ملفات القوالب، ستستخدم بشكل متكرر “علامات القوالب” (template tags). وهي دوال PHP مقدمة من ووردبريس تُستخدم لعرض المحتوى الديناميكي، مثل… bloginfo('name') عنوان الموقع الإلكتروني:the_title() عنوان المقال:
المفهوم الأساسي هو “حلقة ووردبريس” (WordPress Loop). وهي هيكل كود بلغة PHP يُستخدم للتحقق مما إذا كانت هناك مقالات (أو قوائم المقالات) على الصفحة الحالية تحتاج إلى عرض، ثم يتم عرض هذه المقالات بشكل دوري. إحدى أبسط أشكال الحلقات هي كالتالي:
<h2></h2>
<div class="entry-content">
</div>
<p><?php _e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。
تكامل ميزات الموضوعات مع الأنماط
functions.php هذا هو “الدماغ” الخاص بموضوعك؛ يجب إضافة جميع الميزات التي لا تنتمي إلى الوظائف الأساسية لتقنية عرض القوالب (template rendering) إلى هذا الملف. يتم تحميل هذا الملف تلقائيًا عند تهيئة الموضوع (theme initialization).
ميزة تسجيل المواضيع
في functions.php في ووردبريس، يمكنك توسيع وظائف الموقع من خلال مجموعة متنوعة من “الخطافات” (Hooks) المتاحة، مثل خطافات الإجراءات (Action Hooks) وخطافات المرشحات (Filter Hooks). أولاً، عادةً ما يلزم تحديد ما إذا كان الموضوع يدعم بعض الميزات أم لا. على سبيل المثال، لإضافة ملصقات للمقالات (صور مميزة) ودعم القوائم:
<?php
function my_first_theme_setup() {
// 让主题支持文章和页面使用“特色图像”
add_theme_support( 'post-thumbnails' );
// 注册导航菜单位置
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-first-theme' ),
'footer' => __( 'Footer Menu', 'my-first-theme' ),
) );
// 让 WordPress 管理文档标题标签
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>`add_action()` 将你的函数 my_first_theme_setup مُثبت على ووردبريس (Mounted on WordPress). after_setup_theme تأكد من أن هذا الحلقة الزنبركية تعمل بشكل صحيح، حتى تتم تنفيذ العملية في الوقت المناسب.
إدخال الأنماط والبرامج النصية (Styles and Scripts)
يجب على المواقع ذات الطابع الحديث أن تقوم بتضمين ملفات أنماط (CSS) وملفات جافا سكريبت (JavaScript) بشكل صحيح، بحيث يتم تطبيق الأنماط على الصفحات بشكل صحيح وأن تعمل وظائف جافا سكريبت كما wp_enqueue_style() و wp_enqueue_script() يتم إضافة الدوال إلى القائمة (queue) بدلاً من كتابتها مباشرةً داخل ملفات القوالب باستخدام علامات `` أو `` أو `{{var}}`. الفائدة من ذلك هي إدارة الاعتمادات (dependencies) بشكل أفضل، تجنب التحميل المتكرر للمحتوى، والالتزام بأفضل ممارس
function my_first_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 引入自定义 JavaScript 文件
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );الدالة `getstylesheet_uri()` تشير إلى مسار ملف القالب (الستايل شيت) الخاص بموقعك. style.css الملف `get_template_directory_uri()` يعيد عنوان URL لمجلد القوالب (templates) الخاص بالموضوع (theme) الحالي.
القراءة الموصى بها دليل البدء في تطوير مواضيع ووردبريس: كيفية بناء موضوعك المخصص من الصفر。
إنشاء تخطيط الصفحة ومكونات القوالب
عادةً ما تتكون صفحة الويب القياسية من الرأس (header)، والمحتوى الرئيسي (body content)، والقدم (footer). يشجعك ووردبريس (WordPress) على تقسيم الأجزاء التي يمكن إعادة استخدامها إلى ملفات منفصلة، ثم إدخالها إلى القالب الرئيسي (main template) باستخدام دوال معينة
تقسيم مكونات القالب (Splitting template components)
إنشاء header.php、footer.php و sidebar.php. في header.php في هذا المثال، يجب أن تتضمن "القسم" بالكامل، وتنتهي بحاوية رأس واضحة (مثل العلامة
). footer.php عادةً ما تنتهي في النصوص بعلامتي `` و ``. الاستضافة المشتركة InterServer استضافة مشتركة $2.50 دولار أمريكي في الشهر، الشهر الأول $0.1 دولار أمريكي الرمز الترويجي tryinterserver، 461 نص برمجي للتطبيقات السحابية، تثبيت بنقرة واحدة. تجميع الصفحة بالكامل
في قوالب الصفحات (مثل…) index.php、single.phpفي هذا السياق، يمكنك استخدام الدوال التالية لإدخال هذه المكونات:
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
// 这里放置 WordPress 循环
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 内容输出
endwhile;
endif;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php الملف: إذا لم يكن موجودًا، يتم تحميله. template-parts/content.phpهذا يعزز بشكل كبير قابلية إعادة استخدام الكود وسهولة صيانته.
الملخصات
بناء تصميم ووردبريس (WordPress theme) من الصفر يعتبر عملية تعليمية منهجية. أولاً، يجب عليك إنشاء بيئة تطوير محلية صحيحة وفهم هيكل الملفات الأساسية للتصميم. الأمر الأكثر أهمية هو إتقان هيكل القوالب (templates) في ووردبريس، حيث يتم تحديد كيفية عرض المحتويات المختلفة. functions.php يمكنك إضافة ميزات وخصائص قوية إلى الموضوع (theme) الخاص بك، واتباع أفضل الممارسات لإدارة الأنماط (styles) والسكريبتات (scripts). وأخيرًا، من خلال تقسيم الصفحة إلى أجزاء مثل الرأس (header)، والقدم (footer)، والشريط الجانبي (sidebar)، واستخدام الدوال المتاحة في ووردبريس (WordPress) لتجميع هذه الأجزاء معًا، يمكنك إنشاء كود للموضوع يتميز بتنظيم واضح وسهولة في الصيانة. باتباع هذه الخطوات، لن تتمكن فقط من إنشاء موضوعك الأول، بل ستضع أيضًا أساسًا متينًا لتطوير مشاريع أكثر تعقيدًا واحترافية في المستقبل.
القراءة الموصى بها دليل البدء في تطوير مواضيع ووردبريس: بناء موضوعك المخصص الأول من الصفر。
الأسئلة الشائعة الأسئلة المتداولة
هل يجب إتقان لغة PHP لتطوير قوالب (Themes) لمنصة ووردبريس (WordPress)؟
نعم، PHP هي لغة البرمجة الأساسية لـ WordPress. ملفات قوالب الثيمات (مثل…) index.php、page.php) وملفات الوظائف (functions.phpكل هذه الملفات هي ملفات PHP. يجب أن تتقن الجزء الأساسي من لغة PHP، مثل القواعد النحوية، والتحكمات الشرطية، والحلقات، واستخدام الدوال، حتى تتمكن من عرض البيانات ومعالجتها بشكل ديناميكي في WordPress.
في عملية تطوير المواقع الإلكترونية، ما الفرق بين ملفي `page.php` و `front-page.php`؟
page.php يُستخدم لعرض الصفحات الفردية المنشأة في ووردبريس، مثل “نبذة عنا”، “جهات الاتصال”، وما إلى ذلك. front-page.php هذا القالب مخصص لعرض “الصفحة الرئيسية” للموقع الإلكتروني. في واجهة ووردبريس الخلفية، ضمن قسم “الإعدادات” -> “القراءة”، إذا اخترت خيار “صفحة ثابتة” وحددت “الصفحة الرئيسية” كصفحة معينة، فسوف يقوم ووردبريس باستخدام تلك الصفحة بشكل افتراضي عند عرض الصفحة الرئيسية للزوار. front-page.php لعرض هذه الصفحة، إذا… front-page.php إذا لم يكن موجودًا، فسيتم استخدامه. page.php。
为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？
الاستفادة من wp_enqueue_style() إنها الطريقة التي يوصي بها موقع ووردبريس (WordPress) رسميًا. فهي تضمن تحميل ملفات الأنماط (style sheets) مرة واحدة فقط، حتى عندما يقوم عدة إضافات (plugins) أو مواضيع (themes) بالاستشهاد بنفس الملف. كما أنها تسهل التعامل مع العلاقات التابعة بين ملفات الأنماط (مثلاً، إذا كان أسلوب تصميمك يعتمد على إطار عمل أساسي معين). بالإضافة إلى ذلك، فإنها تتوافق بشكل أفضل مع آليات التخزين المؤقت (caching) والإضافات، وتسمح للم
كيف يمكنني جعل موقعي الإلكتروني يدعم عدة لغات (التدويل)؟
جعل الموضوع يدعم عدة لغات يتطلب خطوتين رئيسيتين. أولاً، في جميع سلاسل النصوص داخل الموضوع، يجب استخدام دوال الترجمة المتوفرة في ووردبريس، مثل… ()、_e() أو esc_html()وحدد مواقعهم بالنسبة لها. style.css مُعرّفة في C#. Text Domainعلى سبيل المثال:_e( 'Hello World', 'my-first-theme' )ثانيًا، استخدم أدوات مثل Poedit لمسح كود موضوعك وإنشاء… .pot ملفات القوالب؛ يمكن للمترجمين استخدامها لإنشاء نسخ بلغات مختلفة من المحتوى. .po والمُجمَع (المُترجم) بعد عملية التجميع (الترجمة). .mo الملفات: يجب وضع ملفات اللغة في مجلد الموضوع (theme folder). /languages/ في المجلد المحدد، سيقوم ووردبريس (WordPress) تلقائيًا بتحميل الترجمات المناسبة بناءً على إعدادات اللغة للموقع.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- تطوير مواقع ووردبريس من المبتدئين إلى الخبراء: دليل شامل لبناء مواقع إلكترونية مخصصة
- تطوير مواقع ووردبريس باستخدام القوالب (Themes): دليل شامل من البداية إلى الاحتراف مع النصائح والتقنيات العملية
- الشروع في تطوير قوالب ووردبريس: دليل تقني لبناء مواقع ويب احترافية من الصفر
- إنشاء موقع إلكتروني مثالي: الدليل الشامل لبناء تصميمات مخصصة لمنصة WordPress من الصفر
- ماهي موضوعات ووردبريس؟
العربية