عندما تبدأ في تعلم تطوير ووردبريس (WordPress)، فإن إنشاء قالب (theme) خاص بك يعتبر علامة فارقة مثيرة للغاية. لا يسمح لك هذا الأمر فقط بالتحكم الكامل في مظهر الموقع ووظائفه، بل يعد أيضًا أفضل طريقة لفهم البنية الأساسية لووردبريس بشكل عميق. سيقوم هذا المقال بتوجيهك خلال العملية الكاملة، بدءًا من إعداد البيئة المناسبة وحتى إنشاء قالب أساسي، مما يساعدك على اتخاذ أول خطوة نحو أن تصبح مطورًا لووردبريس.
الاستعدادات اللازمة قبل البدء في التطوير
قبل البدء في كتابة أي كود، من الضروري جدًا إنشاء بيئة تطوير محلية فعالة. هذا سيسمح لك بإجراء الاختبارات والتصحيحات دون التأثير على الموقع الإلكتروني الحي.
بناء بيئة تنمية محلية
أولاً، نحتاج إلى تثبيت برامج الخادم المحلي. يمكنك اختيار أدوات مثل XAMPP أو MAMP أو Local by Flywheel. تحتوي هذه الحزم على خادم Apache وقاعدة بيانات MySQL ولغة PHP مجتمعة، وهي ضرورية لتشغيل موقع ووردبريس (WordPress). على سبيل المثال، بعد تثبيت XAMPP وتشغيل خدمات Apache وMySQL، يصبح جهاز الكمبيوتر الخاص بك خادمًا محليًا.
القراءة الموصى بها مقدمة في تطوير قوالب ووردبريس: ابنِ أول قالب مخصص لك من الصفر。
بعد ذلك، قم بتنزيل أحدث إصدار من WordPress، ثم قم بفك ضغط الملفات إلى المجلد الرئيسي لموقعك على الخادم المحلي (مثل المجلد الرئيسي لبرنامج XAMPP).htdocsثم، من خلال الوصول إلى المجلد…http://localhost/your-wordpress-folderلإكمال عملية التثبيت المشهورة التي تستغرق خمس دقائق، ستحتاج إلى إنشاء قاعدة بيانات، بالإضافة إلى تحديد اسم مستخدم وكلمة مرور لمسؤول الموقع الإلكتروني.
قم بتحضير محرر الكود والأدوات اللازمة.
محرر كود ممتاز يمكن أن يعزز كفاءة العمل بشكل كبير أثناء التطوير. Visual Studio Code وPhpStorm وSublime Text كلها خيارات رائعة. وبشكل خاص، Visual Studio Code يتمتع بمجموعة واسعة من الإضافات المتعلقة بـ WordPress وPHP، مثل PHP Intelephense، والتي توفر إمكانيات مثل التكملة التلقائية للكود وفحص القواعد النحوية.
بالإضافة إلى ذلك، يُنصح بتثبيت إضافة أدوات المطورين في المتصفح، مثل إضافة “Theme Check” الخاصة بووردبريس، للتحقق في مراحل متقدمة من عملية التطوير مما إذا كانت القوالب تتوافق مع المعايير المطلوبة. كما يمكنك استخدام وظيفة “فحص العناصر” (Inspect Elements) المتاحة في المتصفح لتصحيح أخطاء HTML وCSS في الوقت الفعلي.
فهم الهيكل الأساسي لمواقع ووردبريس (WordPress Themes)
أبسط تصميمات مواقع ووردبريس (WordPress) تتكون من ملفين فقط، لكن التصميمات الشاملة والمتوافقة مع المعايير تحتوي على عدة ملفات مختلفة، كل منها يؤدي وظيفة معينة.
ملفات قواعد الأنماط الأساسية
يجب أن يحتوي كل تصميم (Theme) لبرنامج ووردبريس (WordPress) على عنصر أساسي معين.style.cssملف. هذا الملف ليس مجرد ملف CSS يحدد أنماط المواضيع، بل إن كتلة التعليقات في بداية الملف تعتبر “بطاقة الهوية” للموضوع، وتحتوي على جميع المعلومات الوصفية الضرورية لكي يتعرف ووردبريس على الموضوع. يمكن أن يكون شكل كتلة التعليقات الأساسية كما يلي:
القراءة الموصى بها تطوير موضوعات ووردبريس: دليل كامل لإنشاء موضوعات مخصصة من الصفر.。
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/من بينها،Text Domainمخصص للتدويل (internationalization)، ويُستخدم لاحقًا لاستدعاء دوال الترجمة.__()أو_e()المُعرّفات المستخدمة في ذلك الوقت.
ملفات القوالب الأساسية
الملف المطلوب الآخر هوindex.phpهذا هو القالب الافتراضي للموضوع، ويتم استخدامه عندما لا يجد ووردبريس ملفات قوالب أكثر تحديدًا (مثل…).single.phpأوpage.phpعندما يتم تشغيل الموقع، يتم استخدامه لعرض الصفحة.
مع وجود هذين الملفين فقط، يمكن أن يظهر موضوعك في قائمة “المظاهر” -> “المواضيع” في واجهة ووردبريس الخلفية ويمكن تفعيله. بالطبع، هو في الوقت الحالي مجرد إطار فارغ. لكي يعمل الموضوع بشكل صحيح، نحتاج أيضًا إلى إنشاء عدة ملفات قوالب أساسية.
أولاً، قم بالإنشاء.header.phpيحتوي على الجزء العلوي (الرأس) من ملف HTML، مثل…<doctype>إعلان،<head>المنطقة (يجب استخدام…)wp_head()تقوم الدالة بإدخال ملفات الكود الأساسية والأنماط الخاصة بووردبريس (WordPress)، بالإضافة إلى علامات ترميزات رأس الصفحة (header tags) للموقع الإلكتروني.
ثانيًا، قم بالإنشاء.footer.phpيحتوي على محتوى قائمة الصفحات السفلية للموقع الإلكتروني، ويتم استدعاؤه قبل نهاية التنفيذ.wp_footer()هذه دالة ضرورية لكي تتمكن العديد من الإضافات (البرامج الإضافية) من إضافة الكود في أسفل الصفحة.
أخيرًا، قم بإنشاءfunctions.phpهذا الملف غير إلزامي، ولكنه يعتبر “العقل” الذي يدير تفاصيل الموضوع (التطبيق أو الموقع). يمكنك إضافة الميزات المتعلقة بدعم الموضوعات، وقوائم التسجيل، والشرائط الجانبية، واستيراد ملفات الأنماط والسكريبتات، بالإضافة إلى تعريف
القراءة الموصى بها كيفية تطوير قالب ووردبريس مخصص من الصفر؟。
بناء الميزات الأساسية للموضوع (Building the core features of a topic)
بعد إعداد الملفات الأساسية، يمكننا البدء في إضفاء “الحياة” على الموضوع (المحتوى الرئيسي للموقع)، مما يجعله يمتلك الوظائف الأساسية اللازمة لكي يعمل كموقع إلكتروني فعال.
تنفيذ قائمة التنقل
تحتوي المواقع الإلكترونية الحديثة عادةً على قوائم تنقل. أولاً، يجب عليك…functions.phpاستخدمه فيregister_nav_menus()دالة لتسجيل مواقع الأطباق.
function my_first_theme_setup() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '页脚菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );هذا الكود يقوم بتسجيل موقعين للقوائم الغذائية: “قائمة التنقل الرئيسية” و“قائمة القدم”. بعد ذلك، في الأماكن التي تريد فيها عرض القوائم داخل القالب (مثلاً...header.php(في النص الصيني)، استخدمwp_nav_menu()الدالة تستدعيها.
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );يمكن للمستخدمين الآن إنشاء قوائم في واجهة ووردبريس الخلفية (WordPress Admin) ضمن قسم “المظهر” (Appearance) → “القوائم” (Menus)، ثم تعيين هذه القوائم لموقع “قائمة التنقل الرئيسية” (Main Navigation Menu).
تفعيل الصور المميزة للمقالات والشريط الجانبي
تدعم العديد من المواضيع ملفات مصغرة للمقالات (صور مميزة) بالإضافة إلى شريط جانبي للأدوات الإضافية. وكذلك…functions.phpأنا أحبك، أيها الأخ الأكبر.my_first_theme_setupفي الدالة، أضف الكود التالي لتفعيل هذه الميزات:
add_theme_support( 'post-thumbnails' ); // 启用文章特色图像
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 启用HTML5标记支持لتسجيل منطقة أدوات الشريط الجانبي، استخدم…register_sidebar()دالة:
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在这里添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_first_theme_theme_widgets_init' );بعد ذلك، في ملف القالب (مثلsidebar.phpيتم استخدامه في (المكان المحدد).dynamic_sidebar( 'sidebar-1' )لعرض هذه المنطقة.
دمج القوالب مع إضافة الأنماط
الآن، سنقوم بربط أجزاء القوالب المختلفة معًا وإضافة أنماط أساسية إليها، لكي يكتسب الموقع شكلاً مرئيًا واضحًا.
استخدام القوالب لاستيراد الدوال
يوفر ووردبريس عددًا من الدوال الأساسية لاستيراد ملفات القوالب الأخرى، مما يضمن تقسيم الكود إلى وحدات منفصلة وسهولة صيانته. في موقعك…index.phpفي النص المقدم، يجب أن يكون التنسيق الهيكلي كالتالي:
<?php get_header(); ?>
<main id="main" 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(); ?>get_header(), get_sidebar(), get_footer()تقوم الدوال بإدخال ملفات القوالب المقابلة لها بشكل منفصل.get_template_part()إنها دالة أكثر مرونة، فهي تشجعك على فصل الأجزاء من النص التي يمكن إعادة استخدامها بشكل متكرر (مثل ملخصات المقالات) ووضعها في مكان منفصل.template-partsفي الملفات المستقلة الموجودة داخل المجلد، على سبيل المثال…content.php。
كتابة الأنماط الأساسية والتصميم التكيفي (Responsive Design)
الآن، قم بفتحه.style.cssابدأ في إضافة الأنماط إلى موضوعك. قم أولاً بتعيين بعض الأنماط العامة، مثل نموذج الصندوق (box model)، والخطوط (fonts)، والألوان (colors).
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}لتحقيق تصميم يتكيف مع مختلف أحجام الشاشات، يتم استخدام استعلامات الوسائط (Media Queries) لتعديل تخطيط الصفحة حسب حجم الشاشة. على سبيل المثال، يمكن أن يتم تحريك الشريط الجانبي إلى أسفل المحتوى الر
@media (max-width: 768px) {
.site-main {
width: 100%;
}
#sidebar {
width: 100%;
margin-top: 2rem;
}
}لا تنسى أن تفعل ذلك.header.phpأنا أحبك، أيها الأخ الأكبر.<head>تمت إضافة بعض علامات وصف النافذة (viewport meta tags) لضمان التمديد الصحيح على الأجهزة المحمولة:<meta name="viewport" content="width=device-width, initial-scale=1">。
الملخصات
استنادًا إلى إنشاء ملف يحتوي علىstyle.cssوindex.phpنبدأ من إنشاء مجلدات بسيطة، وصولاً إلى إنشاء مواضيع ووردبريس كاملة تحتوي على نظام تنقل (navigation)، شريط جانبي (sidebar)، وتصميم متجاوب (responsive design). هذه العملية تغطي المفاهيم الأساسية في تطوير مواضيع ووردبريس. لقد تعلمتfunctions.phpتوسيع ميزات الموضوعات (Themes)، وكيفية استخدام نظام مستويات القوالب (Template Hierarchy System) لتنظيم الكود، بالإضافة إلى كيفية تحويل التصميم إلى ملفات HTML وCSS الخاصة بالواجهة الأمامية (Frontend). هذا مجرد نقطة بداية؛ يمكنك لاحقًا استكشاف ملفات القوالب الأكثsingle.php, page.php, archive.phpيمكنك أيضًا استخدام أنواع المقالات المخصصة، وواجهات برمجة التطبيقات (APIs) لتخصيص المواضيع، بالإضافة إلى أطر عمل مثل Sass وJavaScript لبناء مواضيع أكثر تعقيدًا وحداثة. الممارسة المستمرة والرجوع إلى الوثائق الرسمية للمطورين هي أفضل الطرق لتحسين مهاراتك.
الأسئلة الشائعة الأسئلة المتداولة
هل يجب استخدام المواضيع الفرعية (subtopics) عند تطوير المواضيع الرئيسية؟
ليس بالضرورة. من الممكن تمامًا إنشاء موضوع مستقل من الصفر، وهذه أيضًا أفضل طريقة لتعلم المبادئ الأساسية. عادةً ما يكون استخدام المواضيع الفرعية (subtopics) هو الممارسة الأمثل عند الحاجة إلى تخصيص أو تعديل موضوع أصلي موجود (مثل موضوع إطار عمل شائع)، حيث يضمن ذلك عدم تغطية التعديلات الخاصة بك عند تحديث الموضوع الأصلي. أما بالنسبة لمشاريع التطوير الجديدة تمامًا، فإن إنشاء موضوع مستقل من الصفر أمر أكث
كيف يمكنني أن أجعل موضوعي يدعم لغات متعددة؟
جعل الموضوع يدعم اللغات المتعددة (التدويل) يتطلب خطوتين رئيسيتين. أولاً، يجب التأكد من أن…style.cssالرأس وfunctions.phpتم تغليف جميع النصوص التي تحتاج إلى الترجمة في النص الأصلي باستخدام دوال الترجمة الخاصة بـ WordPress، على سبيل المثال:__( ‘文本’, ‘my-first-theme’ )أو_e( ‘文本’, ‘my-first-theme’ )ثانيًا، ستحتاج إلى استخدام أداة مثل Poedit لإنشاء ما تريد..potقم بترجمة ملف القوالب، ثم قم بإنشاء نسخة مخصصة لكل لغة..poو.moالملف، وضعه ضمن موضوع…/languagesتحت القائمة.
كيف يتم نشر التطبيق بعد الانتهاء من تطوير الموضوع (المحتوى)؟
قبل النشر، يجب عليك بالتأكيد استخدام إضافة “Theme Check” لإجراء اختبارات صارمة على موضوعك للتأكد من أنه يتوافق مع جميع معايير الترميز ومتطلبات الأمان المطلوبة في مجلد مواضيع ووردبريس. قم بحذف جميع أكواد التصحيح والتعليقات غير الضرورية. بعد ذلك، يمكنك اختيار إرسال الموضوع إلى المجلد الرسمي لمواضيع ووردبريس (WordPress.org) للمراجعة، أو تعبئته في ملف ZIP وتقديمه مباشرةً للعملاء أو توزيعه على موقعك الخاص. إذا قررت توزيعه بنفسك، تأكد من توفير تعليمات تثبيت واضحة ووثائق شاملة.
لماذا اختفت الأنماط المخصصة الخاصة بي بعد تحديث النظام في الخلفية؟
من المحتمل جدًا أن يكون السبب في ذلك هو تعديلك المباشر لملفات الموضوع الأصلي (الموضوع الرئيسي) الذي تستخدمه. عندما يتم تحديث هذا الموضوع الأصلي من خلال واجهة ووردبريس الخلفية، يتم استبدال جميع الملفات الأساسية بالإصدار الجديد، مما يؤدي إلى فقدان التعديلات التي أجريتها. لهذا السبب، يُنصح بشدة باستخدام المواضيع الفرعية (السبيكات) في أي عمليات تطوير مخصصة. تتم تحميل أنماط ودوال الموضوع الفرعي بشكل مستقل عن الموضوع الأصلي، لذا حتى عند تحديث الموضوع الأصلي، ستظل ملفات الموضو
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- دليل تطوير مواقع ووردبريس: بناء مواقع مخصصة من الصفر
- دليل شامل لتطوير مواقع ووردبريس: دورة عملية من الصفر إلى الاحتراف
- دليل شامل لتطوير مواضيع ووردبريس: بناء قوالب مواقع إلكترونية محترفة من الصفر
- تطوير مواقع ووردبريس الاحترافية: بناء مواقع شركات استجابية من الصفر
- بناء قوالب ووردبريس بدون كود: دليل شامل من الصفر إلى الاحتراف
العربية