فهم الهيكل الأساسي لمواقع ووردبريس (WordPress Themes)
قبل البدء في كتابة الكود، من المهم جدًا فهم مكونات قالب ووردبريس (WordPress theme). في الأساس، قالب ووردبريس عبارة عن مجلد يحتوي على مجموعة من الملفات بتنسيقات معينة، وهذه الملفات معًا تحدد مظهر الموقع ووظائفه. أبسط القوالب تحتاج فقط إلى ملفين:style.cssوindex.php。
ملف قائمة الأنماط الأساسية
style.cssالملف ليس مجرد مكان لتخزين أنماط CSS، بل هو أيضًا “بطاقة الهوية” للموضوع (theme). يجب أن يحتوي الجزء العلوي من هذا الملف على كتلة تعليقات محددة، وهي “رأس قائمة الأنماط” (style sheet header)، والتي تُستخدم لإعلان معلومات الموضوع لنظام WordPress مثل اسم الموضوع، والمؤلف، والوصف، والإصدار، وغيرها من المعلومات الوصفية. بدون هذا الجزء العلوي، لن يتمكن نظام WordPress من التعرف على أن هذا الملف يمثل موضوعًا صالحًا.
أبسط شيء على الإطلاق…style.cssمثال على رأس الملف كالتالي:
القراءة الموصى بها تطوير مواضيع ووردبريس: بناء موضوعك المخصص الأول من الصفر。
/*
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
*/ ملف القالب الأساسي
index.phpهذا هو الملف القياسي لقوالب المواقع، وهو أيضًا الأكثر أهمية. عندما لا يتمكن ووردبريس من العثور على ملف قالب أكثر تحديدًا للصفحة المطلوبة، فإنه يلجأ إلى استخدام هذا الملف القياسي.index.phpهذا البرنامج مسؤول عن استرجاع المحتوى من قاعدة البيانات وعرضه في شكل هيكل HTML داخل المتصفح. أبسط نموذج لهذا البرنامج يمكن تصوره كالتالي:index.phpقد يحتوي الملف فقط على هيكل HTML أساسي وكود PHP الذي يستدعي الدوال الأساسية لبرنامج WordPress.
بالإضافة إلى هذين الملفين الأساسيين، يتضمن الموضوع الذي يحتوي على جميع الميزات الضرورية عادةً ما يلي:
* header.phpالجزء العلوي من صفحة الموقع الإلكتروني.
* footer.phpقسم القائمة السفلية (Footer) للموقع الإلكتروني.
* functions.phpيُستخدم لتعزيز وظائف الموضوعات، وقوائم التسجيل، والشرائط الجانبية، وما إلى ذلك.
* page.phpيُستخدم لعرض صفحة واحدة فقط.
* single.phpيُستخدم لعرض مقال بلوج واحد فقط.
إنشاء بيئة تطوير محلية وإنشاء أول موضوع (theme)
تطوير المواضيع مباشرة على الخوادم الحقيقية أمر خطير وغير فعال. أفضل الممارسات هي إنشاء بيئة تطوير محلية تشبه بيئة الخادم الحقيقي على جهاز الكمبيوتر الخاص بك. يمكنك استخدام أدوات مثل XAMPP، MAMP، Local by Flywheel، أو DevKinsta، والتي تسمح بتثبيت PHP وMySQL وخادم الويب بنقرة واحدة.
إنشاء مجلدات مواضيع وملفات
أولاً، في دليل تثبيت WordPress الخاص بك على الجهاز المحلي، ابحث عن…wp-content/themes/المسار: قم بإنشاء مجلد جديد هنا، واختر له اسم يعكس موضوعك. يُنصح باستخدام أحرف صغيرة وعلامات الربط (-)، مثلاً…my-first-theme。
ثم، قم بإنشاء الملفين الأساسيين المذكورين سابقًا داخل هذا المجلد:style.cssوindex.phpقم بنسخ كود رأس جدول الأنماط إلى المكان المطلوب.style.cssقم بوضع المعلومات الخاصة بك في المكان المناسب، ثم قم بتعديلها لتتوافق مع بياناتك الشخصية.
القراءة الموصى بها دليل البدء في تطوير مواضيع ووردبريس: بناء أول تصميم (ستايل) لموقعك الإلكتروني من الصفر。
إعداد ملف قالب أساسي
بعد ذلك،index.phpأدخل الكود الأساسي التالي، والذي يحتوي على علامات القوالب الضرورية لـ WordPress:
<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1008>
<header>
<h1><a href="/ar/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
_e( '抱歉,没有找到任何内容。', 'my-first-theme' );
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
</body>
</html> بعد إكمال الخطوات أعلاه، ادخل إلى واجهة ووردبريس الخاصة بك من خلال لوحة التحكم الخلفية، ثم انتقل إلى قسم “المظهر” (Appearance) → “القوالب” (Themes). يجب أن ترى القالب الذي أطلقت عليه اسم “My First Theme” موجودًا هناك. قم بتفعيله، ثم قم بزيارة الصفحة الرئيسية لموقعك، وستلاحظ أن عناوين المقالات ومحتواها قد تم عرضه
استخدم مستويات القوالب والدوال الأساسية.
يستخدم WordPress نظامًا ذكيًا لـ “مستويات القوالب” (Template Hierarchy) لتحديد ملف القالب الذي يتم استخدامه لكل نوع من طلبات الصفحات (مثل الصفحة الرئيسية، صفحات المقالات، صفحات التصنيفات). فهم هذا النظام أمر أساسي لتطوير القوالب (Themes).
فهم ترتيب تحميل القوالب (Templates)
على سبيل المثال، عند زيارة مقالة في مدونة، يقوم WordPress بالبحث عن ملفات القوالب (templates) بالترتيب التالي:single-post.php -> single.php -> singular.php -> index.phpسيستخدم أول ملف يتم العثور عليه. هذا التصميم يتيح لك إنشاء تخطيطات مخصصة للغاية لأنواع مختلفة من الصفحات، مع الحفاظ على وحدة التصميم بينها.index.phpكخيار أخير واحتياطي.
استخدام الحلقات (loops) وعلامات القوالب (template tags)
فيindex.phpالكود PHP الذي رأيته هو ما يُعرف بـ “حلقة ووردبريس (WordPress Loop)”. وهي جزء أساسي من جميع ملفات القوالب (templates)، وتُستخدم لتصفح المقالات أو المحتويات التي يجب عرضها على الصفحة الحالية وعرضها بشكل مناسب.
الموجود داخل الحلقة (In the loop)the_title()、the_content()、the_excerpt()تُعرف الدوال مثل هذه بـ “علامات القوالب” (template tags). وظيفتها هي عرض بيانات المقالات المقابلة بشكل آمن. دالة أخرى مهمة جدًا هي…the_post()يتم استدعاؤه في كل تكرار دورة (iteration)، ويُستخدم لتعديل القيم العالمية (global variables).$postيتم تعيين الكائن ببيانات المقال الحالي، ثم يتم الانتقال إلى المقال التالي.
القراءة الموصى بها إتقان المهارات الأساسية: إنشاء موضوع ووردبريس الخاص بك الأول من الصفر。
تقسيم هيكل الصفحة إلى وحدات معينة (modularization) هو طريقة فعالة لتحسين قابلية صيانة الكود. هذا بالضبط ما يجب القيام به.header.phpوfooter.phpمكان لإظهار المهارات والقدرات.
فصل الجزء العلوي (الرأس) عن الجزء السفلي (القدم) من الصفحة
سوفindex.phpأنا أحبك، أيها الأخ الأكبر.<head>الجزء والكل<header>قم بقص الجزء المطلوب من المنطقة، ثم انسخه ولصقه في ملف جديد.header.phpموجود في الملف. وبالمثل، يتم…<footer>تم قص جزء منه…footer.phpالوسط.
ثم، في المكان الأصلي…index.phpفي الوسط، يتم استخدام…get_header()وget_footer()استخدم هذين علامتي القالبين لإدخالهما.
<main>
<?php the_title( '<h2>', '</h2>' ); ?>
<p><?php _e( '抱歉,没有找到任何内容。', 'my-first-theme' ); ?></p>
</main> بهذه الطريقة، يمكن لجميع قوالب الصفحات مشاركة نفس الجزء العلوي (الهيدر) والجزء السفلي (الفوتر)، وعند الحاجة إلى تعديلها، يكفي تغيير ملف واحد فقط.
تعزيز وظائف الموضوع من خلال ملف Functions.php.
functions.phpالملف هو “مركز التحكم” الخاص بموضوعك. إنه ليس ملف قالب، بل مكتبة دوال تتم تحميلها تلقائيًا عند تهيئة الموضوع. يمكنك إضافة ميزات جديدة أو تعديل السلوك الافتراضي من خلال هذا الملف، دون الحاجة إلى تعديل ملفات ووردبريس الأساسية.
الوظائف التي يدعمها موضوع التسجيل.
فيfunctions.phpفي هذا السياق، يمكنك استخدام…add_theme_support()استخدم دوال لتحديد الميزات التي يدعمها موقعك الويب باستخدام نظام ووردبريس (WordPress). على سبيل المثال، تفعيل ملفات الصور المصغرة للمقالات (الصور الرئيسية) وإعداد القوائم المخصصة هي من العمليات الشائعة.
<?php
function my_theme_setup() {
// 添加对文章缩略图的支持
add_theme_support( 'post-thumbnails' );
// 添加对自定义菜单的支持
add_theme_support( 'menus' );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' ); إضافة الأنماط والبرمجيات
الطريقة الصحيحة لإضافة CSS و JavaScript هي من خلال:wp_enqueue_style()وwp_enqueue_script()الوظائف، وتثبيتها علىwp_enqueue_scriptsعلى الخطاف. هذا يضمن أن العلاقات التبعية صحيحة ولن يتم تحميلها بشكل متكرر.
function my_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
// 引入自定义的JavaScript文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' ); بعد إكمال هذه الخطوات، ستتمكن من…header.phpاستخدمه فيwp_nav_menu()هناك دالة مخصصة لعرض القوائم التي قمت بتسجيلها، ويتم استخدامها ضمن حلقة تكرار المقالات (article loop).the_post_thumbnail()لقد حان الوقت لعرض الصور المميزة.
الملخصات
تطوير مواقع ووردبريس (WordPress themes) هو عملية تدريجية تبدأ من الهيكل وتنتهي بالتفاصيل. أولاً، يجب أن تفهم المكونات الأساسية التي يتكون منها نموذج الموقع (theme)، بالإضافة إلى الطريقة التي تتفاعل هذهstyle.cssوindex.phpتشكل هذه الأجزاء الجوهر الأساسي لعملية التطوير، ومن ثم يتم إنشاء بيئة التطوير المحلية بشكل صحيح. بعد ذلك، ستتقن نظام مستويات القوالب ومفهوم “التكرار” (الحلقات المتكررة في الكود)، مما يمheader.phpوfooter.phpالتقسيم إلى وحدات معيارية (التعريفة المعيارية) سيجعل كودك أكثر وضوحًا وسهولة في الصيانة. وأخيرًا،functions.phpفتحت لك الملفات باب التوسعات الوظيفية؛ من قائمة التسجيل إلى تحميل الموارد بشكل آمن، حيث تحولت الثيمات من قوالب ثابتة إلى أشكال ديناميكية وقوية لمواقع الويب. اتبع هذا المسار، واستمر في الممارسة واستكشاف ملفات القوالب الأكثر تفصيلاً (مثل…).single.php、page.php、archive.phpبهذه الطريقة، يمكنك بناء موقع ووردبريس مخصص يتمتع بوظائف كاملة وتصميم فريد تدريجياً.
الأسئلة الشائعة الأسئلة المتداولة
ما هي المعرفة المسبقة المطلوبة لتطوير قوالب ووردبريس (WordPress themes)؟
ستحتاج إلى إتقان أساسيات لغات HTML و CSS لبناء هيكل وتصميم صفحات الويب. بالإضافة إلى ذلك، من المهم أن تكون لديك معرفة أساسية بلغة PHP، نظرًا لأن ملفات قوالب ووردبريس تتكون في الأساس من كود PHP وتُستخدم لتوليد المحتوى بشكل ديناميكي. إتقان لغة JavaScript سيمكنك من إضافة وظائف تفاعلية إلى المواقع، وهو أمر غير ضروري في المراحل الأولى، ولكنه سيكون مهمًا لاحقًا.
لماذا لا يتم عرض موضوعي في الواجهة الخلفية (الخادم)؟
السبب الأكثر شيوعًا هو…style.cssتنسيق رأس معلومات الموضوع في الملف غير صحيح أو غير موجود. يرجى التأكد من وجود كتلة تعليقات كاملة ومتوافقة مع المتطلبات النصية في بداية الملف. بالإضافة إلى ذلك، تحقق من أن مجلد المواضيع موجود في المكان الصحwp-content/themes/الملفات موجودة داخل المجلد، وأسماء المجلدات لا تحتوي على أي أحرف خاصة.
كيف يمكنني إضافة منطقة الأدوات (الشريط الجانبي) إلى موقعي الإلكتروني؟
You need to do the following first:functions.phpاستخدمه فيregister_sidebar()تقوم الدالة بتسجيل منطقة أو أكثر للأدوات الإضافية (التطبيقات الصغيرة). بعد ذلك، في ملفات القوالب المناسبة (مثل…).sidebar.phpفي هذا البرنامج، يتم استخدامdynamic_sidebar()استخدم دالة لاستدعاء هذا المحتوى وعرضه. وأخيرًا، قم بذلك في قالب الصفحة.get_sidebar()قم بإدخال هذا الملف.
ماذا أفعل إذا تسبب تعديل ملف functions.php في ظهور شاشة بيضاء عند تصفح الموقع الإلكتروني؟
عادةً ما يكون السبب في ذلك…functions.phpتوجد أخطاء في صيغة اللغة PHP داخل الملف. نظرًا لأن هذا الملف يتم تنفيذه في بداية تحميل الموضوعات، فإن هذه الأخطاء قد تتسبب في توقف عمل الموقع بأكمله. الحل هو استخدام برنامج FTP أو مدير الملفات المتاح في لوحة تحكم المضيف لحذف الملف المعطfunctions.phpإعادة التسمية (مثل تغييره إلى…)functions.php.bakسيتم تجاهل هذا الملف بواسطة ووردبريس (WordPress)، وسيتم استعادة الوصول إلى الموقع الإلكتروني، ثم يمكنك بعد ذلك تحميل النسخة المصححة مرة أخرى.
كيف يمكنني أن أجعل موضوعي يدعم الترجمة متعددة اللغات؟
عليك القيام بشيئين. أولاً، استخدم دالات الترجمة المتاحة في ووردبريس في جميع أماكن إخراج النصوص المتعلقة بالموضوع.__()、_e()وحدد مواقعهم بالنسبة لها.style.css“النطاق النصي (Text Domain)” المحدد في الجزء العلوي من الملف. بعد ذلك، استخدم أداة مثل Poedit لمسح ملفات القوالب (theme files) وإنشاء المحتوى المطلوب..potملفات القوالب، وبناءً عليها يتم إنشاء اللغات المقابلة (مثل…).zh_CN.poو.moقم بترجمة ملفات الترجمة المطلوبة وضعها في الموضوع المناسب./languages/تحت القائمة.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- دليل تطوير مواقع ووردبريس: بناء مواقع مخصصة من الصفر
- دليل شامل لتطوير مواقع ووردبريس: دورة عملية من الصفر إلى الاحتراف
- دليل شامل لتطوير مواضيع ووردبريس: بناء قوالب مواقع إلكترونية محترفة من الصفر
- تطوير مواقع ووردبريس الاحترافية: بناء مواقع شركات استجابية من الصفر
- بناء قوالب ووردبريس بدون كود: دليل شامل من الصفر إلى الاحتراف