أساسيات تطوير قوالب ووردبريس وإعداد البيئة.
قبل أن تبدأ في كتابة الكود، من الضروري أن تفهم المكونات الأساسية لموضوع (Theme) في ووردبريس. الموضوع، في جوهره، عبارة عن مجلد يحتوي على مجموعة من الملفات المكتوبة بلغات برمجية مثل PHP وCSS وJavaScript بالإضافة إلى الصور، وهذه الملفات معًا تحدد مظهر الموقع الإلكتروني وبعض وظائفه. يجب أن يكون هذا المجلد موجودًا داخل مجلد تثبيت ووردبريس.wp-content/themesموجود في الدليل. كل موضوع يحتاج إلى ملف أنماط أساسي (core style file).style.cssوملف قالب أساسي.index.phpهذه هي المتطلبات الأساسية الدنيا لبدء أي مشروع تطوير مواضيع (topics).
من أجل إجراء عمليات التطوير بكفاءة عالية، ننصح بشدة بإنشاء بيئة تطوير محلية. هذا سيتيح لك اختبار التطبيقات بحرية دون التأثير على الموقع الإلكتروني الأصلي. يمكنك استخدام مجموعات أدوات مثل XAMPP، MAMP، Local by Flywheel، أو DevKinsta، والتي تسمح بتثبيت Apache/Nginx، PHP، وMySQL بنقرة واحدة. بالإضافة إلى ذلك، ستحتاج إلى محرر كود مثل VS Code،PhpStorm، أو Sublime Text؛ حيث أن ميزات التمييز اللوني والتلميحات المتعلقة بلغات PHP، HTML، وCSS ستساعدك كثيرًا في تحسين كفاءة عملية البرمجة.
بعد الانتهاء من الاستعدادات، ستحتاج إلى…wp-content/themesقم بإنشاء مجلد جديد داخل المجلد الحالي، على سبيل المثال:my-first-themeبعد ذلك، سنقوم بإنشاء أول ملف ضروري.
القراءة الموصى بها إتقان تطوير مواقع ووردبريس من الصفر: أفضل الممارسات والإرشادات لبناء مواقع إلكترونية مخصصة。
إنشاء ملفات أنماط أساسية (Core Style Files)
داخل مجلد المواضيع، قم بإنشاء ملف جديد باسم…style.cssهذا الملف مسؤول ليس فقط عن تحديد شكل وتصميم موقع الويب، بل إن رأس التعليقات (Header) الواقع في بدايته هو الطريقة الوحيدة التي يمكن لبرنامج ووردبريس (WordPress) من خلالها التعرف على القالب (Theme) المستخدم. يحتوي رأس التعليقات على معلومات مهمة مثل اسم القالب، واسم
فيما يلي:style.cssمثال قياسي لرأس الملف:
/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 一个用于学习WordPress主题开发的简洁入门主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 博客, 简洁, 响应式
Text Domain: my-first-theme
*/ بعد بداية رأس الملف، يمكنك البدء في إضافة قواعد التنسيق لعناصر موقعك الإلكتروني تمامًا كما تقوم عادةً بكتابة أكواد CSS العادية. (Text Domain)my-first-themeهذا هو المعرف المخصص لتدويل المواضيع (internationalization of topics)، ويجب أن يكون متوافقًا مع اسم مجلد الموضوع نفسه.
إنشاء ملف قالب أساسي للموضوع
ملفات القوالب (templates) هي الهيكل الأساسي لمواقع ووردبريس (WordPress themes)، وهي تحدد كيفية تنظيم وعرض أنواع مختلفة من المحتويات. تتكون هذه الملفات بشكل أساسي من كود PHP مع إضافة علامات HTML. أبسط ملف قالب موجود في ووردبريس هو…index.phpإنه القالب البديل لجميع الصفحات، ويتم استخدامه عند عدم توافر قالب أكثر تحديدًا (مثل…).single.phpأوpage.phpعندما تقوم بتحميل صورة جديدة إلى موقعك على الويب، يستخدمها ووردبريس تلقائيًا.
إنشاء ملف فهرس أساسي
قم بإنشاء ملف في مجلد المواضيع.index.phpأبسط نسخة ولكنها مكتملة الوظائف…index.phpيمكن أن يتضمن ذلك دورة ووردبريس (WordPress Loop)، وهي الآلية الأساسية المستخدمة لاسترجاع محتويات المقالات من قاعدة البيانات وعرضها.
القراءة الموصى بها تطوير مواقع ووردبريس من المبتدئين إلى المحترفين: دليل شامل لبناء مواقع إلكترونية مخصصة بنفسك。
مصغرindex.phpمثال على ذلك كالتالي:
<!DOCTYPE html>
<html no numeric noise key 1017>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1014>
<header>
<h1><a href="/ar/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>
<main>
<article>
<h2><a href="/ar/</?php the_permalink(); ?>"></a></h2>
<div></div>
</article>
<p>لا توجد مقالات حاليًا.</p>
</main>
<footer>
<p>©</p>
</footer>
</body>
</html> يحتوي هذا الملف على عدة أجزاء رئيسية:wp_head()وwp_footer()الخطافات (Hooks) تسمح لنواة ووردبريس (WordPress Core) والإضافات (Plugins) والسكريبتات الأخرى بإدراج الكود الضروري قبل بداية الصفحة وبعد نهايتها (مثل CSS وJS).the_post()تُستخدم الدالة داخل الحلقة لتعيين بيانات المقالة الحالية، ثم…the_title()وthe_content()مجرد استخدام علامات القوالب المناسبة سيؤدي إلى عرض المحتوى المطلوب.
إدخال الأنماط والبرامج النصية (Styles and Scripts)
فقطstyle.cssالملفات ليست كافية؛ يجب عليك إخبار ووردبريس عبر دالة معينة متى يجب تحميل هذا الملف. ولتحقيق ذلك، يتعين عليك إنشاء ملف آخر ضروري للغاية داخل مجلد القوالب (theme folder).functions.phpهذا ليس ملف قالب، بل هو “مكتبة وظائف” للموضوع (theme functionality library)، تُستخدم لتعزيز ميزات الموضوع، وإدارة القوائم (menus)، والشرائط الجانبية (sidebars)، بالإضافة إلى إدخال ملفات الأنماط (stylesheets) والبرمجي
توسيع وظائف الموضوعات وتحميل الأنماط
functions.phpالملف هو “غرفة المحركات” للموضوع (المحتوى الرئيسي للصفحة)، ويجب وضع جميع أكواد PHP التي لا تتعلق مباشرة بإخراج الصفحات في هذا الملف. في هذا الملف، يجب أن تستخدم…add_action()تقوم الدالة بتثبيت كودك على خطافات (hooks) معينة في نظام ووردبريس (WordPress)، لضمان تنفيذه في الأوقات المناسبة.
تحميل ملفات الأنماط بشكل آمن
الطريقة الصحيحة ليست استخدام العلامات مباشرةً داخل ملفات القوالب.style.cssبل من خلال…wp_enqueue_style()تم تصميم هذه الدالة لتنظيم عملية تحميل المكونات بشكل منظم. فهي تتبع آلية إدارة الاعتمادات (dependencies) الخاصة بووردبريس (WordPress)، مما يساعد على تجنب تحميل نفس المكونات مرارًا وتكرارًا.
فيfunctions.phpأضف الكود التالي إلى المكان المناسب:
القراءة الموصى بها دليل شائع لعام 2026: كيفية إنشاء موضوع ووردبريس الخاص بك الأول من الصفر。
<?php
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 可以在此加载其他样式或脚本,例如:
// wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' ); هنا،get_stylesheet_uri()ستحصل الدالة تلقائيًا على موضوع (theme) المطلوب.style.cssمسار الملف.add_action( 'wp_enqueue_scripts', ... )تأكد من أن دالة التحميل الخاصة بنا تتم استدعاؤها عندما يقوم ووردبريس بتحضير السكريبتات والأنماط الخاصة بالواجهة الأمامية.
تفعيل ميزة الثيمة الأساسية
فيfunctions.phpفي هذا الإطار، يمكننا أيضًا تفعيل بعض الميزات الضرورية للمواقع الإلكترونية الحديثة. على سبيل المثال، تفعيل دعم الصور المميزة (ملفات الصور المصغرة للمقالات) للمقالات والصفحات، بالإضافة إلى إضافة مواقع قوائم المطا
// 启用文章特色图像
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
// 为WordPress生成的标签添加title属性支持
add_theme_support( 'title-tag' ); add_theme_support()تُستخدم الدوال لتحديد الميزات المختلفة التي يدعمها الموضوع (التطبيق أو النظام).register_nav_menus()هذا يعني أنه تم تحديد المواقع التي يمكن تخصيص القوائم فيها من خلال الواجهة الخلفية لـ WordPress، تحت قسم “المظهر” (Appearance) ثم “القوائم” (Menus).
إنشاء قوالب ومواضيع مخصصة للاختبار
مع تحسين الميزات الأساسية للموضوع، أصبح من الممكن…index.phpلم تعد الملفات قادرة على تلبية احتياجات عرض جميع أنواع الصفحات. تسمح بنية مستويات القوالب في ووردبريس بإنشاء ملفات قوالب مخصصة للصفحة الرئيسية، والمقالات الفردية، والصفحات العامة، وصفحات الأرشيف، وما إلى ذلك، مما يوفر تحكمًا أدق في ت
إنشاء قالب لصفحة واحدة للمقالات
عندما يقوم المستخدم بالنقر لقراءة المقال بالكامل، سيتم توجيهه إلى صفحة المقال الفردية. قم بإنشاء شيء يسمى…single.phpملف خاص يُستخدم للتحكم في طريقة عرض المحتوى. عادةً ما يحتوي هذا الملف على معلومات أكثر شمولاً عن المقال، مثل التصنيفات والتعليقات والمؤلف وغيرها.
<main>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
<h1></h1>
<div class="meta">
تم النشر في: | الكاتب:
</div>
<div class="featured-image">
<?php the_post_thumbnail(); ?>
</div>
<div class="content">
</div>
<div class="taxonomies">
分类:
<br>
标签:
</div>
</article>
</main>
؟ > هذا القالب يستخدم دالة قالب جديدة:get_header(), get_sidebar()وget_footer()سيتم تحميلها بشكل منفصل تحت أسماء…header.php、sidebar.phpوfooter.phpملفات مكونات القوالب. هذه الطريقة تعمل على تقسيم هيكل الصفحة إلى وحدات منظمة، مما يساعد على تجنب تكرار الكود. يتعين عليك إنشاء هذه الملفات المناسبة وإدخال المحتوى اللازم إليها.index.phpالكود المقابل للجزء العلوي والسفلي والشرائط الجانبية في الصفحة.
اختبر وصحح موضوعك.
بعد إكمال إنشاء القالب الأساسي، قم بتسجيل الدخول إلى واجهة خلفية WordPress الخاصة بك، ثم اذهب إلى قسم “المظهر” (Appearance) → “القوالب” (Themes). يجب أن ترى قالب “My First Theme” موجودًا في قائمة القوالب. قم بتفعيله، ثم قم بزيارة الصفحة الرئيسية للموقع وصفحة المقال الفردي على التوالي، وتحقق من أن جميع العناصر (العنوان، المحتوى، القائمة، القائمة السفلية) تظهر كما هو متوقع.
استخدم أدوات مطوري المتصفحات للتحقق من صحة هيكل HTML ومن أن أكواد CSS تعمل بشكل صحيح. حاول إنشاء عدة مقالات تجريبية تحتوي على صور مميزة وتصنيفات وتسميات (tags)، وتأكد من أن كل هذه العناصر يتم استدعاؤها وعرضها بشكل صحيح داخل القوالب. هذه هي الطريقة الأفضل لاكتشاف وإصلاح المشاكل المحتملة.
الملخصات
تهانينا على إكمالك الخطوات الأساسية لبناء أول قالب (Theme) لموقع ووردبريس (WordPress). من خلال هذا الدليل، تعلمت كيفية إنشاء مجلد القالب من الصفر، وكتابة الكود الضروري لتشغيله بشكل صحيح.style.cssوindex.phpالملفات، وكيفية استخدامهاfunctions.phpالعملية الكاملة تبدأ بتعزيز الوظائف وتحميل الموارد، ثم إنشاء ملفات قوالب مخصصة والقيام بالتطوير المعياري (المعتمد على الوحدات). هذا مجرد نقطة البداية في عالم تطوير المواقع؛ بعد ذلك، يمكنك استكشاف المزيد من ملفات القوالpage.php、archive.phpتشمل الميزات المتقدمة مثل مناطق الأدوات الصغيرة (widgets)، وأنواع المقالات المخصصة (custom article types)، بالإضافة إلى إمكانية تحسين هيكل الكود وتصميم الموقع باستمرار.
الأسئلة الشائعة الأسئلة المتداولة
لماذا لا يتم عرض موضوعي في الخلفية (الواجهة الخفية للنظام)؟
عادةً ما يكون السبب في ذلك هو…style.cssالسبب هو أن تنسيق رأس تعليق الموضوع في الملف غير صحيح أو غير موجود. يرجى التأكد من أن الملف موجود في المجلد الرئيسي لمجلدات المواضيع (theme folder)، وأن معلومات رأس التعليق كاملة ومنسقة بشكل صحيح. سبب آخر محتمل هو مشكلة في صلاحيات الملف؛ تأكد من أن ووردبريس (WordPress) لديه الصلاحيات اللازمة لقراءة مجلدات المواضيع الخ
هل ملف functions.php ضروري؟
من الناحية التقنية، كيان يحتوي فقط على…style.cssوindex.phpالموضوع المذكور أيضًا يمكن أن يعمل. ولكن…functions.phpإنه أمر ضروري لتحقيق أي وظائف تتجاوز مجرد النتائج الأساسية للHTML (مثل قوائم التسجيل، إضافة الشرائط الجانبية، تحميل السكريبتات والأنماط بشكل آمن). إنه الطريقة القياسية لتوسيع وتخصيص وظائف المواضيع، ولذلك فهو ضروري لأي موضوع عملي.
كيف يمكنني إضافة شريط جانبي (sidebar) إلى موقعي الإلكتروني؟
أولاً، في…functions.phpاستخدمه فيregister_sidebar()تقوم الدالة بتسجيل منطقة أو أكثر للأدوات الصغيرة (الشرائط الجانبية). بعد ذلك، في ملف القالب الذي ترغب في عرض الشريط الجانبي فيه…index.phpأوsingle.phpفي هذا البرنامج، يتم استخدامdynamic_sidebar()يتم استدعاء هذه الدالة لتنفيذ المهمة المطلوبة. وأخيرًا، يمكن للمستخدمين سحب الأدوات (التطبيقات الإضافية) ووضعها في هذه المنطقة من خلال الذهاب إلى صفحة “المظهر” -> “الأدوات” في واجهة ووردبر
ما هي الاعتبارات الأمنية التي يجب مراعاتها عند تطوير المواضيع؟
لا تثق أبدًا بشكل مباشر في البيانات المدخلة من قبل المستخدمين أو البيانات المأخوذة من قواعد البيانات. عند عرض أي محتوى ديناميكي على الصفحة، يجب استخدام دوال التهريب (escaping functions) المتوفرة في ووردبريس بالesc_html()、esc_url()وwp_kses_post()عند إضافة ميزات مخصصة أو نماذج إلى الموضوع، يجب الالتزام بآليات التحقق من صحة الطلب (nonce) والتحكم في الصلاحيات الخاصة بووردبريس (WordPress).wp_enqueue_style()وwp_enqueue_script()يتم استخدام هذا الأسلوب لتحميل الموارد، بدلاً من تضمينها بشكل ثابت في الكود أو استخدام علامات معينة.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- تطوير مواقع ووردبريس من المبتدئين إلى الخبراء: دليل شامل لبناء مواقع إلكترونية مخصصة
- تطوير مواقع ووردبريس من الصفر: إنشاء واجهات مواقع فريدة ومميزة
- دليل تطوير مواقع ووردبريس: بناء مواقع مخصصة من الصفر
- دليل شامل لتطوير مواقع ووردبريس: دورة عملية من الصفر إلى الاحتراف
- دليل شامل لتطوير مواضيع ووردبريس: بناء قوالب مواقع إلكترونية محترفة من الصفر