فهم الهيكل الأساسي لمواضيع ووردبريس (WordPress Themes)
قبل البدء في كتابة الكود، من الضروري فهم أساسيات أي قالب ووردبريس: ملفات القوالب (templates) وملفات الأنماط (style sheets). يقوم ووردبريس بعرض أجزاء مختلفة من الموقع عن طريق استدعاء مجموعة من الملفات المحددة مسبقًا، وتتبع هذه الملفات اتفاقيات تسمية موحدة. يحتاج القالب الأبسط إلى ملفين فقط:index.php(الملفات الرئيسية للقوالب) وstyle.css(ملفات الأنماط الأساسية ومعلومات الثيمات)، ولكن من أجل بناء موقع إلكتروني ذو وظائف متنوعة، نحتاج إلى المزيد.
style.cssالملف لا يحتوي فقط على قواعد CSS، بل يحتوي أيضًا على كتل تعليقات في بداية الملف تحدد بيانات الوصف (metadata) الخاصة بالقالب (theme)، مثل اسم القالب ومؤلفه ووصفه وإصداره. هذا هو الطريقة التي يتعرف بها ووردبريس (WordPress) على القوالب. على سبيل المثال، يمكن أن يكون شكل كتلة التعليقات ال
/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/ بالإضافة إلى الملفات الأساسية، تشمل هيكلية الموضوع النموذجية أيضًا:header.php(يومئ برأسه)footer.php(في أسفل الموقع)sidebar.php(الشريط الجانبي) وfunctions.php(ملفات دوال وظائف الموضوع). فهم كيفية استخدام هذه الملفات من خلال علامات القوالب (مثل…)get_header(), get_footer()التجميع بطريقة معيارية (معيارية) هو مفتاح التطوير الفعال.
القراءة الموصى بها دليل للبدء في تطوير تصاميم مواقع ووردبريس: كيفية إنشاء واجهة موقعك الخاصة من الصفر。
إنشاء ملفات موضوعية ومجلدات
أولاً، نحتاج إلى الوصول إلى المجلد الرئيسي لتثبيت WordPress.wp-content/themes/قم بإنشاء مجلد جديد في الموقع المحدد. يجب أن يكون اسم هذا المجلد هو معرف موضوعك، ويُنصح باستخدام أحرف صغيرة وأرقام وعلامات الربط (-)، على سبيل المثال:my-first-themeسيتم وضع جميع ملفات السمات هنا.
إنشاء ملف قائمة الأنماط الأساسية (Core Style Sheet File)
كما تم التأكيد مسبقًا،style.cssإن ذلك ضروري. قم بإنشاء هذا الملف داخل مجلد المواضيع (theme folder) واملأ بيانات رأس الموضوع (theme header) بشكل كامل. بعد ذلك، يمكنك البدء في كتابة أكواد CSS الأساسية لتحديد مظهر الموقع الإلكتروني. ولتجنب تداخل أنماط المتصفحات الافتراضية، من الشائع البدء بإعادة ضبط أنم
/* 在 style.css 的头部注释块之后 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
} إنشاء ملف القالب الرئيسي
بعد ذلك، قم بالإنشاء.index.phpهذا هو الملف القالب الافتراضي والأكثر أهمية. يجب أن تتضمن هيكليته الأساسية استدعاءات للجزء العلوي (الheader)، وحلقة المحتوى (content loop)، والجزء السفلي (footer). علامات القوالب (template tags) هي دوال مدمجة في ووردبريس تُستخدم لإدراج المحتوى الدين
منتج بسيط للغايةindex.phpقد تكون النسخة الأولية كالتالي:
<main id="primary" class="site-main">
<?php
if (have_posts()) :
while (have_posts()) : the_post();
// 文章内容将在这里输出
the_title('<h2>', '</h2>');
the_content();
endwhile;
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main>
؟ > تفكيك القالب: الجزء العلوي، الجزء السفلي، والشريط الجانبي
من أجل إعادة استخدام الكود وجعله أكثر وضوحًا، تقوم مواضيع ووردبريس عادةً بفصل الأجزاء العامة من الصفحات عن بعضها وتخزينها في ملفات منفصلة.
تنفيذ قالب رأس الموقع (Site Header Template)
إنشاءheader.phpيحتوي هذا الملف على رأس وثيقة HTML (header of the HTML document).إلىجزء تفعيل العلامات (tags)، بالإضافة إلى منطقة التنقل في أعلى الموقع الإلكتروني. تشمل علامات القوالب الرئيسية (key template tags):bloginfo()يُستخدم للحصول على معلومات الموقع، بالإضافة إلى…wp_head()الخطاف (Hook) يسمح للإضافات (Plugins) والثيمات (Themes) بإدخال كود في أجزاء معينة من الموقع.
أساسيheader.phpمثال على ذلك:
القراءة الموصى بها دليل شامل لتطوير مواقع ووردبريس: بناء مواقع مخصصة من الصفر。
<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body no numeric noise key 1005>
<header class="site-header">
<div class="site-branding">
<h1 class="site-title"><a href="/ar/</?php echo esc_url(home_url('/')); ?>"></a></h1>
<p class="site-description"><?php bloginfo('description'); ?></p>
</div>
<nav class="main-navigation">
'primary',
'menu_id' => 'primary-menu',
));
?>
</nav>
</header> تنفيذ قالب أسفل الموقع (Site Bottom Template)
إنشاءfooter.phpيحتوي على جميع المحتويات التي تأتي بعد نهاية المنطقة الرئيسية للمحتوى، مثل معلومات حقوق النشر في القسم السفلي من الصفحة، بالإضافة إلى معلومات حيوية ومهمة جدًا.wp_footer()الاستدعاءات عبر “الخطافات” (hooks) ضرورية للعمل السليم للعديد من الإضافات (مثل تلك المستخدمة في تحليل الكود).
<footer class="site-footer">
<p>© . All rights reserved.</p>
</footer>
</body>
</html> تحسين الوظائف الموضوعية والتخصيص.
functions.phpهذا الجزء من النص يشير إلى “الدماغ” الخاص بموضوعك (theme)، والذي يُستخدم لإضافة الميزات المختلفة، وتسجيل الخصائص مثل قوائم التنقل ومناطق الأدوات الصغيرة (widgets)، بالإضافة إلى تنسيق الأكواد البر
الوظائف التي يدعمها موضوع التسجيل.
فيfunctions.phpفي هذا السياق، يمكنك استخدام…add_theme_support()تُستخدم الدوال لتحديد الميزات المدعومة من قبل الموضوع (التصميم الخاص بالموقع). على سبيل المثال، تفعيل ملفات الملخصات للمقالات (الصور الرمزية) وإمكانية تخصيص الشعارات هي ميزات شائعة في المواضيع الحديث
<?php
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support('title-tag');
// 启用文章和评论的RSS feed链接
add_theme_support('automatic-feed-links');
// 启用文章特色图像
add_theme_support('post-thumbnails');
// 注册一个主菜单
register_nav_menus(array(
'primary' => __('主菜单', 'my-first-theme'),
));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?> إدراجها في جدول الأنماط والسكريبتات
الطريقة الصحيحة لتحميل الأنماط والسكريبتات هي استخدام…wp_enqueue_style()وwp_enqueue_script()الوظائف، وتثبيتها علىwp_enqueue_scriptsموجود على الخطاف (hook). هذا يضمن إدارة العلاقات التابعة (dependencies) بشكل صحيح ويمنع تكرار عمليات التحميل (loading).
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'); الملخصات
من إنشاء مجلد المواضيع و…style.cssبدء، وصولاً إلى البناء.index.phpتم تفكيكها إلى أجزاء.header.phpوfooter.phpانتظر ملفات القوالب، ثم انتقل إلى الخطوة التالية…functions.phpتضيف الملفات الميزات الأساسية والموارد اللازمة لموضوعك، وتشكل هذه العملية الإطار الأساسي لتطوير مواضيع ووردبريس. يركز كل خطوة على مفهوم هيكل قوالب ووردبريس وأفضل الممارسات، مثل استخدام علامات القوالب والخطافات (hooks) بشكل صحيح. بمجرد إتقان هذه الأساسيات، ستكون لديك نقطة انطلاق قوية لتخصيص وتوسيع أي ميزة لتلبية احتياجات المشاريع المختلفة.
الأسئلة الشائعة الأسئلة المتداولة
###: كم عدد الملفات الأقل التي يحتاجها موضوع ووردبريس (WordPress)؟
يحتاج موضوع ووردبريس قابل للعمل إلى ملفين على الأقل:index.phpوstyle.cssمن بينها،style.cssيجب أن يكون مكتوب بلوغ في أعلى الملف موجودًا ويحتوي على معلومات الموضوع الصحيحة، وهذا شرط ضروري لكي يتعرف ووردبريس على الموضوع.
القراءة الموصى بها من الصفر إلى الواحد: الدليل الشامل والكتاب التعليمي العملي لتطوير مواقع ووردبريس。
كيف يمكنني إضافة منطقة أدوات صغيرة إلى موضوعي؟
أنت بحاجة إلى المرور عبر…functions.phpاستخدم الملف لتسجيل المكونات الإضافية (الشريط الجانبي).register_sidebar()قم بتعريف الدالة وحدد معاملاتها، مثل الاسم والمعرف (ID) والوصف. بعد ذلك، يمكنك استخدام هذه المعلومات في الملفات القالبية المناسبة (مثل…).sidebar.phpيتم استخدامه في (المكان المحدد).dynamic_sidebar()يتم استدعاء الدالة لتنفيذ مهمتها.
لماذا لا يتم عرض قائمة التنقل المخصصة الخاصة بي؟
عادةً ما يكون السبب في ذلك عدم قيامك بـ…functions.phpتم تسجيل موقع وحدة الطعام بشكل صحيح. يرجى التأكد من أنك استخدمت البيانات الصحيحة أثناء عملية التسجيل.register_nav_menus()الدالة مخصصة لتسجيل موقع لوحة الطعام (مثل ‘primary’)، وذلك…header.phpيتم استدعاء الدالة main() في السطر 10.wp_nav_menu()في ذلك الوقت،‘theme_location’قيم الإعدادات المحددة مطابقة تمامًا لتلك المسجلة أثناء عملية التسجيل. وأخيرًا، من الضروري أيضًا تعيين قائمة معينة إلى هذا الموقع في إعدادات “المظهر > القوائم” (Appearance > Menus) داخل واجهة ووردبريس
我应该在什么时候使用get_template_part()函数?
get_template_part()الدوال تُستخدم لتنظيم أجزاء الكود المتكررة وتحويلها إلى وحدات قابلة لإعادة الاستخدام، وهي مفيدة بشكل خاص عند إنتاج محتوى بتنسيقات مختلفة ضمن دورات متكررة في المقالات. على سبيل المثال، يcontent.phpيتم استخدام ملف لتحديد الهيكل الHTML العام لكل مقالة، ثم…index.phpيتم استخدام ذلك داخل حلقة (loop).get_template_part(‘content’)للاتصال به. هذا يزيد من إمكانية إعادة استخدام الكود وسهولة صيانته، كما يساعد في إنشاء قوالب أكثر احترافية (مثل)...content-page.phpأصبح ذلك ممكنًا.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- تطوير مواقع ووردبريس من الصفر: إنشاء واجهات مواقع فريدة ومميزة
- دليل تطوير مواقع ووردبريس: بناء مواقع مخصصة من الصفر
- دليل شامل لتطوير مواقع ووردبريس: دورة عملية من الصفر إلى الاحتراف
- دليل شامل لتطوير مواضيع ووردبريس: بناء قوالب مواقع إلكترونية محترفة من الصفر
- تطوير مواقع ووردبريس الاحترافية: بناء مواقع شركات استجابية من الصفر