الاستعدادات: إنشاء بيئة التطوير المحلية الخاصة بك
قبل البدء في كتابة أي كود، من الضروري وجود بيئة تطوير محلية مستقرة وفعالة. هذا يتيح لك إجراء الاختبارات والتصحيحات بحرية دون التأثير على الموقع الإلكتروني عبر الإنترنت. في الوقت الحالي، أكثر الخيارات شيوعًا هي استخدام حزم برمجية للخوادم المحلية مدمجة مع Apache/Nginx وMySQL/MariaDB وPHP، مثل Local by Flywheel أو XAMPP أو MAMP. تأكد من أن إصدار PHP الخاص بك لا يقل عن 7.4، وقم بتفعيل الإضافات الضرورية مثل MySQLi أو PDO.
بعد ذلك، ستحتاج إلى تثبيت نسخة جديدة كاملة من ووردبريس على جهازك المحلي. قم بتنزيل أحدث حزمة تثبيت من موقع ووردبريس الرسمي (WordPress.org)، ثم قم بفك ضغط الملفات إلى المجلد الرئيسي لموقعك على الخادم المحلي (مثل المجلد htdocs أو www). بعد ذلك، قم بزيارة العنوان المحلي من خلال متصفح الويب.http://localhost/your-siteقم بإكمال الإعدادات وفقًا لعملية التثبيت المشهورة التي تستغرق خمس دقائق. تذكر اسم قاعدة البيانات الخاصة بك، واسم المستخدم، وكلمة المرور؛ هذه المعلومات ستكون مطلوبة لاحقًا.wp-config.phpموجود في الملف.
أخيرًا، ستحتاج إلى محرر كود مناسب أو بيئة تطوير متكاملة (IDE). تعتبر أدوات مثل Visual Studio Code وPhpStorm وSublime Text خيارات ممتازة، حيث توفر دعمًا قويًا للغة PHP وHTML وCSS وJavaScript من خلال تمييز الكود بشكل بصري، وعرض اقتراحات أثناء الكتابة، وإمكانيات التصحيح. تأكد من تثبيت الإضافات (plugins) المتعلقة بـ WordPress في محرر الكود الخاص بك، فهي ستساعدك كثيرًا في تحسين كفاءة عملية التطوير.
القراءة الموصى بها دليل شامل لتطوير مواقع ووردبريس: كيفية إنشاء مواقع إلكترونية مخصصة من الصفر。
فهم الهيكل الأساسي لمواقع ووردبريس والملفات الأساسية
موضوع WordPress الأساسي هو، في الأساس، ملف يقع فيwp-content/themes/المجلدات الموجودة داخل الدليل تحتوي على مجموعة من الملفات التي تمتلك وظائف محددة. تعمل هذه الملفات معًا لتوضيح لبرنامج ووردبريس (WordPress) كيفية عرض محتوى موقعك الإلكتروني. دعونا نبدأ بملفين ضروريين للغاية.
الأول هوstyle.cssهذا الملف ليس مجرد قائمة أنماط الثيمة الخاصة بك، بل هو أيضًا “بطاقة الهوية” الخاصة بها. يحتوي قسم التعليقات في بداية الملف على جميع المعلومات الوصفية الضرورية التي يحتاجها ووردبريس لتعرف على هذه الثيمة. وهذا أمر أساسي للغ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
License: GPL v2 or later
Text Domain: my-first-theme
*/ الملف الضروري الثاني هوindex.phpهذا هو الملف الرئيسي لقالب الموضوع (theme template file)، وعندما لا يجد ووردبريس ملف قالب أكثر تحديدًا، يستخدمه بشكل افتراضي لعرض الصفحة. حتى لو كان يحتوي في البداية فقط على الجملة البسيطة “Hello World”, فيجب أن يكون موجودًا بالتأكيد.
بالإضافة إلى هذين الملفين، يتضمن الموضوع الكامل من الناحية الوظيفية عادةً ما يلي:
* header.phpتُعرف المنطقة العلوية (الهيدر) لصفحة الويب بأنها الجزء الذي يحتوي عادةً على:<head>أجزاء من المحتوى، عناوين المواقع الإلكترونية، وقائمة التنقل الرئيسية.
* footer.phpتحديد منطقة القائمة السفلية للصفحة الويب، والتي تحتوي على معلومات حقوق النشر والبرمجيات وغيرها.
* sidebar.phpتعريف منطقة الشريط الجانبي.
* functions.phpهذا ملف قوي للغاية، يُستخدم لإضافة ميزات إلى المواضيع، وتسجيل القوائم، وإدارة الشرائط الجانبية، بالإضافة إلى إدخال سكريبتات وجداول أنماط أخرى.
* page.phpيُستخدم لتقديم الصفحات الثابتة (الغير متغيرة).
* single.phpيُستخدم لعرض مقال بلوج واحد فقط.
* archive.phpيُستخدم لعرض تصنيفات المقالات والتصنيفات الفرعية (العلامات) وغيرها من صفحات الأرشيف.
بناء قالب أساسي للموضوع من الصفر
الآن، دعونا نبدأ في إنشاء الهيكل الأساسي للموضوع. أولاً،wp-content/themes/قم بإنشاء مجلد جديد داخل المجلد الحالي، وأطلق عليه الاسم التالي:my-first-themeثم، قم بإنشاء ما ذكر أعلاه داخله.style.cssوindex.phpملف.
القراءة الموصى بها دليل أساسي لبناء مواقع الويب الحديثة: العملية الكاملة من التخطيط إلى الإطلاق والحيل العملية。
إنشاء قوالب للرأس (header) والقدم (footer)
تقسيم هيكل الصفحة الويب إلى مكونات قابلة لإعادة الاستخدام هو مفتاح العمل الفعال في التطوير. لقد قمنا بإنشاء…header.phpالملف مسؤول عن إنتاج الجزء الأول من وثيقة HTML. في هذا الملف، يجب عليك استخدام…wp_head()الدالة (Function) هي خاصية مهمة للغاية، حيث تسمح لنواة ووردبريس (WordPress Core) والإضافات (Plugins) وقوالبك (Themes) بإدراج الكود الضروري في هذا المكان (مثل روابط الجداول الطرازية، والتعليمات الوصفية الميتا – meta tags).
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1003>
<header id="masthead">
<h1><a href="/ar/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header> وبالمثل، قم بالإنشاء.footer.phpاستخدم ملفًا لإغلاق الصفحة. يجب أن تقوم بالاستدعاء هنا بالتأكيد.wp_footer()الخطافات (hooks) ضرورية للغاية لكي تعمل العديد من الإضافات (plugins) بشكل صحيح، خاصة تلك المخصصة لتحليل الكود.
<footer id="colophon">
<p>© . جميع الحقوق محفوظة.</p>
</footer>
</body>
</html> تجميع ملف الفهرس الرئيسي
بعد أن أصبح لديك رأس وقدم الصفحة، سيكون لديك الآن مستند HTML كامل.index.phpتصبح الملفات بسيطة وفعالة عند استخدام هذه الطريقة.get_header()وget_footer()استخدم دوال القوالب (template functions) لاستيرادها.
<main id="primary">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
<h2><a href="/ar/</?php the_permalink(); ?>"></a></h2>
<div class="entry-content">
</div>
</article>
<?php
إنهاء بينما;
آخر :
صدى '<p>لا توجد مشاركات في هذا الوقت. </p>';
endif;
? >
</main> هذا الكود يشكل دورة رئيسية (main loop) نموذجية؛ حيث يتم التحقق مما إذا كانت هناك مقالات متوفرة، ثم يتم تصفح كل مقال على حدة لعرض العنوان (مع رابط للنص الكامل) والملخص.
تعزيز الموضوع من خلال ملفات الوظائف
functions.phpهذا هو “مركز التحكم” الخاص بموضوعك. من خلاله، يمكنك تعديل سلوك ووردبريس الافتراضي بشكل آمن، دون الحاجة إلى تغيير الملفات الأساسية للنظام.
تسجيل قائمة التنقل والشريط الجانبي
لكي تتيح موضوعك دعم القوائم المخصصة، ستحتاج إلى استخدام…register_nav_menus()هذه الدالة مخصصة لتسجيل مواقع الأطباق. عادةً ما يتم استخدامها في…functions.phpتم إنجاز ذلك داخل دالة موجودة في الملف، وقد قامت هذه الدالة بذلك عن طريق…after_setup_themeتنفيذ الخطوة المحددة (الخطاف).
القراءة الموصى بها بناء المواقع الإلكترونية من المبتدئين إلى الخبراء: دليل شامل لإنشاء مواقع عالية الأداء。
function my_first_theme_setup() {
// 注册一个主导航菜单
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' ); بعد التسجيل، ستتمكن من…header.phpاستخدمه فيwp_nav_menu( array( 'theme_location' => 'primary' ) )لعرض هذا القائمة.
وبالمثل، يمكنك أيضًا استخدام…register_sidebar()الدالة جاهزة لإنشاء منطقة الأدوات الصغيرة (الشريط الجانبي).
إدخال السكريبتات والأنماط بشكل صحيح
لا تقم أبدًا بإنشاء روابط ثابتة (hard links) مباشرة إلى ملفات CSS أو JavaScript داخل ملفات القوالب (template files). الطريقة الصحيحة هي استخدام مكتبات أو مكونات مخصصة لدمج هذه الملفات داخل القوالب بشكل منظم وقابل لwp_enqueue_scriptsخطاف، استخدمه.wp_enqueue_style()وwp_enqueue_script()تم استخدام دوال لتنظيم عملية تحميل المكونات بشكل منظم. هذا يضمن أن تكون العلاقات التابعة بين المكونات صحيحة، ويمنع تحميل نفس المكونات مرارًا وتكرارًا.
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );
// 引入一个自定义JavaScript文件
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' ); الملخصات
إن إنشاء أول موضوع (Theme) لـ WordPress يُعد عملية تدريجية تبدأ بإعداد البيئة المناسبة، وفهم الهيكل الأساسي للنظام، ثم كتابة ملفات القوالب الأساسية بنفسك، وأخيرًا إضافة الميزات والوظائف إلى الموضوع عبر ملفات الإعدادات المخصصة. المفتاح هنا يكمن في فهم هيكل ملفات القوالب (أي كيف يقوم نظام WordPress باختيار الملفات المناسبة لعرض الصفحات المختلفة)، بالإضافة إلى كيفية استغلال هذه الملفات بشكل فعfunctions.phpوتتوفر أنواع مختلفة من “الخطافات” (hooks) لتوسيع الوظائف. على الرغم من أن الموضوع الأساسي يبدو بسيطًا، إلا أنه يغطي جميع المفاهيم الأساسية. بمجرد إتقانك لهذه المفاهيم، ستتمكن من مواصلsingle.php、page.phpيمكنك أيضًا استخدام أنواع المقالات المخصصة وواجهات برمجة التطبيقات (APIs) لمحررات التخصيصات الموضوعية وميزات أخرى متقدمة، لإنشاء مواضيع شخصية ذات وظائف متنوعة وتصميم جذاب.
الأسئلة الشائعة الأسئلة المتداولة
هل يلزم الإلمام التام بلغة PHP لإنشاء قوالب (Themes) لموقع ووردبريس (WordPress)؟
لا يلزم أن تصل إلى مستوى الإتقان التام، ولكن يجب أن تمتلك المعرفة الأساسية بلغة PHP. يجب أن تفهم كيفية استخدام المتغيرات (variables)، المصفوفات (arrays)، الجمل الشرطية (conditional statements)، الحلقات (loops)، والدوال (functions)، لأن علامات قوالب ووردبريس (WordPress templates) في جوهرها هي دوال PHP. مع تقدم عملية التطوير، ستتقن المزيد من مهارات لغة PHP تدريجياً.
لماذا لا يتم عرض موضوعي في الواجهة الخلفية (الخادم)؟
السبب الأكثر شيوعًا هو…style.cssتنسيق المعلومات الوصفية (metadata) الموجودة في تعليقات بداية الملف غير صحيح، أو تم إغفال بعض البنود الإلزامية (مثل…).Theme Nameيرجى مراجعة هذا الملف بعناية للتأكد من أن صيغة التعليقات صحيحة وأن المعلومات كاملة. بالإضافة إلى ذلك، يجب أن توضع مجلدات المواضيع مباشرة في المكان المحدد.wp-content/themes/لا يجوز وجود تداخل متعدد الطبقات (متعدد المستويات) داخل المجلدات.
ما الفرق بين ملف functions.php والإضافات (plugins)؟
functions.phpهذه الوظائف جزء من الموضوع (theme) الحالي المفعّل، وتعمل بالتزامن مع خصائص هذا الموضوع. عند تغيير الموضوع، فإن هذه الوظائف عادةً ما تتوقف عن العمل. أما الوظائف التي توفرها الإضافات (plugins)، فهي مستقلة عن الموضوعات المستخدمة، وتظل نشطة في جميع الأوقات. عادةً ما تكون الوظائف المتعلقة ارfunctions.phpالميزات العامة والمستقلة (مثل نماذج الاتصال وتحسينات تصميم المواقع لجذب الزوار – SEO) مناسبة أكثر أن تُصنع على شكل إضافات (plugins).
كيف يمكنني جعل موقعي الإلكتروني يدعم عدة لغات (التدويل)؟
يجب عليك استخدام دوال الترجمة الدولية (i18n) في ووردبريس لتغليف جميع النصوص الموجهة للمستخدمين. في الكود، قم بتطبيق الخطوات التالية:__( ‘文本’, ‘my-first-theme’ )أو_e( ‘文本’, ‘my-first-theme’ )Please provide the text you would like to have translated.my-first-themeهذا هو نطاق النص الخاص بك (Text Domain)، ويجب أن يتطابق مع…style.cssيتوافق ذلك مع ما تم الإعلان عنه في الوثائق. بعد ذلك، يمكنك استخدام أدوات مثل Poedit لإنشاء المحتوى المطلوب..potقم بترجمة ملفات القوالب و….po/.moملفات اللغة.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- كيفية اختيار وتخصيص قالب ووردبريس (WordPress Theme) يناسب موقعك الإلكتروني: من المبتدئين إلى المحترفين
- دليل نهائي لخوادم VPS: إنشاء مواقع إلكترونية شخصية وخوادم من الصفر
- 10 مهارات أساسية: إنشاء قوالب ووردبريس احترافية وفعالة
- كيفية اختيار وتخصيص موضوع WordPress الخاص بك: دليل شامل من البداية إلى الاحتراف
- دليل بناء مواقع الويب الحديثة: العملية الكاملة من البداية حتى الإطلاق، بالإضافة إلى اختيار مكدس التقنيات المناسب