لبدء تطوير قالب ووردبريس، فإن جهاز كمبيوتر مهيأ ببيئة PHP محلية هو الشرط الأول. يمكنك اختيار أدوات مثل XAMPP و MAMP و Local by Flywheel وغيرها لإعداده بسرعة. بعد ذلك، تحتاج بعد ذلك إلى محرر أكواد، مثل Visual Studio Code أو PHPStorm أو Sublime Text، والذي يمكن أن يوفر لك تسليط الضوء على بناء الجملة وتلميحات الأكواد وغيرها من الميزات لتحسين كفاءة التطوير بشكل كبير. وأخيراً، تأكد من تثبيت أحدث إصدار من ووردبريس وتفعيله.
قبل البدء في الترميز، من الضروري فهم بنية الدليل لقالب ووردبريس. يتطلب القالب الأساسي ملفين على الأقل:style.cssوindex.php. ومع ذلك، في التطوير الحقيقي، نحتاج عادةً إلى المزيد من الملفات لفصل الوظائف. قد تبدو بنية القالب الحديث النموذجي كما يلي:
your-theme/
├── style.css # 主题样式和基本信息
├── index.php # 主模板文件
├── header.php # 头部模板
├── footer.php # 底部模板
├── sidebar.php # 侧边栏模板
├── functions.php # 功能和特性定义
├── page.php # 页面模板
├── single.php # 文章模板
└── assets/
├── css/
├── js/
└── images/ إنشاء ملف الموضوعات الأساسية
في هذه الخطوة، سننشئ في هذه الخطوة الركائز الأساسية للقالب. تحدد هذه الملفات الهوية والهيكل الأساسي للقالب.
القراءة الموصى بها الدليل النهائي لتطوير موضوعات WordPress: بناء موضوع مخصص من الصفر إلى واحد.。
تحديد معلومات القالب وأوراق الأنماط الرئيسية
style.cssالملف ليس مجرد ورقة أنماط، بل هو “معرِّف” القالب. تحتوي كتلة التعليق الموجودة في الجزء العلوي منه على جميع المعلومات الوصفية التي يحتاجها ووردبريس للتعرف على القالب. يظهر تعليق الرأس الأساسي أدناه:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始构建的简单自定义主题,用于学习WordPress主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/ من بينها،Text Domainيستخدم للتدويل، وهو معرف رئيسي للاستدعاءات اللاحقة لدوال الترجمة. بعد كتلة التعليق، يمكنك إضافة أنماط إلى قالبك كما لو كنت تكتب CSS عادي.
قالب هيكلي لبناء سمة
index.phpهو القالب الرئيسي الافتراضي للقالب والقالب الاحتياطي لجميع الصفحات. من الممارسات الجيدة استخدام وظائف القالب في ووردبريس لتقديم أقسام معيارية بدلاً من تكديس كل الشيفرة في ملف واحد. قالب بسيط ولكن منظم بشكل جيدindex.phpقد يكون الأمر كما يلي:
<main id="primary" class="site-main">
<?php
إذا ( have_posts() ) :
بينما ( have_posts() )؛ .
the_posts();
// عرض محتوى المنشور
the_content();
إنهاء بينما.
تنتهي بينما؛ غير ذلك :
صدى '<p>لا يوجد محتوى في هذا الوقت. </p> ''؛ endif؛ إنتهاء؛ آخر : echo '<p>لا يوجد محتوى في هذا الوقت.
endif;
? >
</main>
؟ > قوالب منفصلة للرأس والتذييل
header.phpيحتوي الملف عادةً على رأس مستند HTML حتى قبل بدء منطقة المحتوى مباشرةً. يجب أن يحتوي علىإعلان،التسميات,المنطقة (الاستخدام)wp_head()الخطافات) بالإضافة إلى عنوان الموقع والتصفح الرئيسي. الوظائف الرئيسية هيwp_head()فهو يسمح للإضافات والقوالب بإدخال التعليمات البرمجية اللازمة (مثل CSS وJS) في الترويسة.
footer.phpثم يحتوي الملف بعد ذلك على كل شيء بعد نهاية منطقة المحتوى، مثل منطقة أداة التذييل ومعلومات حقوق النشر وما إلى ذلك. يجب أن يبدأ بـwp_footer()استدعاء نهاية الدالة، وهو أمر ضروري لكي تعمل العديد من المكونات الإضافية (على سبيل المثال، تحليل الشيفرة البرمجية) بشكل صحيح.
القراءة الموصى بها إنشاء مواقع ويب احترافية: دليل كامل لإنشاء قوالب ووردبريس مخصصة من الصفر。
تقديم الميزات وتحسين السمات
functions.phpالملف هو “مركز التحكم” لقالبك، وهو ليس ملف قالب، ولكنه ملف PHP يتم تحميله تلقائيًا عند تهيئة القالب. إنه ليس ملف قالب، ولكنه ملف PHP يتم تحميله تلقائياً عند تهيئة القالب. هنا يمكنك إضافة دعم القالب، وقوائم التسجيل، وأوراق الأنماط، والبرامج النصية، بالإضافة إلى تحديد التخصيصات المختلفة.
تمكين وظائف القالب الأساسي
من خلالadd_theme_support()وظائف، يمكنك إعلان دعم بعض ميزات ووردبريس الأساسية لقالبك. على سبيل المثال، يعد تمكين الصور المصغرة للمقالات (الصور المميزة) ودعم ترميز HTML5 قياسيًا في القوالب الحديثة:
<?php
function my_theme_setup() {
// 启用文章和评论的HTML5标记支持
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 启用文章缩略图功能
add_theme_support( 'post-thumbnails' );
// 设置默认缩略图尺寸
set_post_thumbnail_size( 800, 400, true );
// 启用标题标签支持(由WordPress自动生成<title>标签)
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' ); قائمة التسجيل وتحميل الموارد
يسمح تسجيل مواضع قوائم التنقل للمستخدمين بإدارتها في الواجهة الخلفية “المظهر” -> “القوائم”. استخدامregister_nav_menus()تنفيذ الوظيفة:
function my_theme_menus() {
register_nav_menus(
array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '页脚菜单', 'my-first-theme' ),
)
);
}
add_action( 'after_setup_theme', 'my_theme_menus' ); يعد تحميل ملفات CSS و JavaScript بالطريقة الصحيحة ضمانًا للأداء الجيد. يجب عليك استخدامwp_enqueue_style()وwp_enqueue_script()الوظائف، وتثبيتها علىwp_enqueue_scriptsخطاف عليها. يضمن ذلك صحة التبعيات وتجنب الأحمال المكررة.
إنشاء قوالب خاصة بالصفحة
يتبع WordPress نظام التسلسل الهرمي للقوالب، مما يعني أنه يبحث تلقائيًا عن ملف القالب الأكثر تطابقًا بناءً على نوع الصفحة التي يتم عرضها حاليًا. إن إنشاء قوالب متخصصة لأنواع مختلفة من الصفحات يسمح بمزيد من الدقة في التخطيط وعرض المحتوى.
تصميم قوالب للمقالات الفردية والصفحات المستقلة
single.phpيُستخدم القالب لعرض مقالة واحدة. إنه مشابه لـindex.phpالحلقات متشابهة، ولكنها عادةً ما تحتوي على معلومات تعريفية أكثر اكتمالاً مثل التصنيفات والوسوم والمؤلفين وأوقات النشر ومناطق التعليقات.
القراءة الموصى بها برنامج تعليمي كامل عن تطوير قوالب ووردبريس: بناء قوالب مخصصة من الصفر。
page.phpيستخدم القالب لعرض الصفحات الثابتة المستقلة. وهو عادةً لا يعرض البيانات الوصفية للمقالة (على سبيل المثال، الفئات ووقت النشر) ويحتوي على حلقة أبسط تركز على عرض محتوى محرر الصفحة.
إنشاء قوالب لقوائم المقالات وصفحات الأرشيف
archive.phpيُستخدم القالب لعرض الصفحات المؤرشفة مع الفئات والعلامات والمؤلفين والتواريخ وما إلى ذلك. يحتوي عادةً على عنوان (مثل “الفئة: التكنولوجيا”) وقائمة بالمقالات.
home.phpأوfront-page.phpيُستخدم لتخصيص الصفحة الرئيسية للمدونة. إذا كان هناكfront-page.php، ستكون بمثابة الصفحة الرئيسية للموقع؛ إذا كانت موجودةhome.phpوالتي ستكون بمثابة صفحة فهرس المقالات.
تنفيذ بحث مخصص مع 404 صفحات 404
search.phpيُستخدم لعرض نتائج البحث. يمكنك استخدامthe_search_query()لإخراج مصطلحات بحث المستخدم.
404.phpثم يتم عرضها عند زيارة المستخدم لعنوان غير موجود. يجب أن تحتوي صفحة 404 الجيدة على نصائح ودية ومربع بحث وروابط لصفحات رئيسية.
تكامل الأدوات المصغّرة مع الأشرطة الجانبية الديناميكية
الأدوات المصغّرة هي ميزة في ووردبريس توفر للمستخدمين المرونة لإضافة كتل من المحتوى (مثل قائمة بأحدث المقالات، وكتالوج الفئات، ومربع بحث، وما إلى ذلك). لجعل قالبك يدعم الأدوات، تحتاج إلى تسجيل “شريط جانبي” واحد أو أكثر (وهي في الواقع مناطق جاهزة للأدوات) ثم عرضها في القالب.
تسجيل المنطقة الجاهزة للتسجيل
الاستفادة منregister_sidebar()لتسجيل شريط جانبي. يمكنك تسجيل شريط جانبي فيfunctions.phpتحديد أشرطة جانبية متعددة للشريط الجانبي الرئيسي ومنطقة التذييل وما إلى ذلك في
الدالة my_theme_theme_widgets_init() {
تسجيل_شريط جانبي(
مصفوفة (
'name' => __( 'الشريط الجانبي الرئيسي'، 'my-first-theme' ),
'المعرف' => 'الشريط الجانبي-1',
'الوصف' => __( 'إضافة أداة الشريط الجانبي الرئيسي هنا'. ، 'my-first-theme' ),
'قبل_القطعة' => '<section id="%1$s" class="widget %2$s">',
'ما بعد_القطعة' => '</section>',
'قبل_العنوان' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'my_theme_widgets_init' ); استدعاء الشريط الجانبي في القالب
بعد التسجيل، تحتاج إلى استخدام ملف القالب في ملفdynamic_sidebar()لإخراج هذه المنطقة. على سبيل المثال، الدالةsidebar.phpالصينية:
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php endif; ?> بعد ذلك، فيindex.php、single.phpوالقوالب الأخرى التي تتطلب شريطًا جانبيًا، استخدمget_sidebar()مقدمة الوظيفةsidebar.phpالشريط الجانبي الرئيسي متاح الآن للمستخدمين لإضافة أدوات إلى الشريط الجانبي الرئيسي. يمكن للمستخدمين الآن إضافة الأدوات الذكية إلى الشريط الجانبي الرئيسي عن طريق سحبها وإفلاتها من صفحة المظهر -> الأدوات الذكية في الواجهة الخلفية لوردبريس.
الملخصات
إن بناء قالب مخصص في ووردبريس من الصفر هو عملية تعلم منهجية تبدأ بفهم بنية الملف الأساسية وتتقدم إلى التسلسل الهرمي للقالب وتحسينات الميزات ومجالات المحتوى الديناميكي. يكمن في جوهرها إتقانstyle.css、index.php、header.php、footer.phpوfunctions.phpماذا تفعل هذه الملفات الأساسية وكيف تتم كتابتها. بواسطةadd_theme_support()تمكين الوظيفة لإنشاء قوالب صفحات مستهدفة من خلال التسلسل الهرمي للقالب ثم من خلالregister_sidebar()دمج عناصر واجهة المستخدم، وسيتشكل قالب كامل الميزات ومنظم بشكل واضح. هذا ليس مجرد تنفيذ تقني فحسب، بل أيضاً فهم عميق لمنطق إدارة محتوى ووردبريس.
الأسئلة الشائعة الأسئلة المتداولة
هل يجب عليَّ استخدام قالب فرعي قبل تطوير القالب؟
ليس بالضرورة. إذا كنت تنشئ قالبًا من الصفر تمامًا، يمكنك إنشاء القالب الأصل مباشرةً. أفضل سيناريو لاستخدام الثيمات الفرعية هو عندما تريد تخصيص ثيم موجود (الثيم الأصل) وتعديله وتريد أن تكون قادرًا على تحديث الثيم الأصل بأمان في المستقبل دون فقدان تغييراتك المخصصة. يعد تعلم التطوير من الصفر وإنشاء القالب الأصل مباشرةً أفضل لفهم البنية بأكملها.
لماذا لا يظهر القالب الخاص بي في الواجهة الخلفية “المظهر”؟
عادةً ما يكون السبب في ذلك هو…style.cssكتلة التعليق على معلومات الموضوع في أعلى الملف منسقة بشكل غير صحيح أو مفقودة أو بها خطأ في بناء الجملة يسبب ذلك. يُرجى التحقق مرة أخرى من أن كتلة التعليق في بداية الملف مكتوبة بدقة وفقًا للتنسيق، على وجه الخصوصTheme Name:يجب أن يكون هذا السطر موجوداً وصحيحاً. تأكد أيضًا من أن مجلد القالب الخاص بك قد تم وضعه فيwp-content/themes/تحت القائمة.
ما الفرق بين ملف functions.php والإضافات (plugins)؟
functions.phpيرتبط الكود الموجود في الملف ارتباطًا وثيقًا بالقالب الخاص بك، وعند تبديل القوالب، عادةً ما يتم تعطيل هذه الميزات. وهي مناسبة لتخزين الشيفرة المرتبطة مباشرة بمظهر القالب وتخطيطه ووظائف القالب. من ناحية أخرى، تُستخدم الإضافات لتوفير وظائف مستقلة عن القوالب يمكن استخدامها عبر القوالب. هناك قاعدة بسيطة هي: إذا كانت الوظيفة شيئًا يؤثر على مظهر أو تخطيط الموقع، فضعها في القالب فيfunctions.phpفي؛ إذا كانت تضيف منطق عمل مستقل (مثل نماذج جهات الاتصال، وتحسين محركات البحث)، فيجب تحويلها إلى إضافة.
كيف يمكنني أن أجعل موضوعي يدعم لغات متعددة؟
يتضمن جعل الموضوع يدعم تعدد اللغات (التدويل والتوطين) خطوتين رئيسيتين. أولاً، يقومstyle.cssوكتلة التعليقات الخاصة بـfunctions.phpفي جميع السلاسل التي تحتاج إلى الترجمة، باستخدام سلسلة مثل__( ‘文本’, ‘my-first-theme’ )يتم تغليف دالة ترجمة مثل هذه الدالة، حيث يتم تغليف‘my-first-theme’هو مجال النص الخاص بك. بعد ذلك، تحتاج إلى استخدام أداة مثل Poedit لفحص ملف القالب لإنشاء.potملفات القوالب، وإنشاء ملفات القوالب.poو.moقم بترجمة المستندات وضعها تحت الموضوع المناسب./languages/تحت القائمة.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- تطوير مواقع ووردبريس من الصفر: إنشاء واجهات مواقع فريدة ومميزة
- دليل تطوير مواقع ووردبريس: بناء مواقع مخصصة من الصفر
- دليل شامل لتطوير مواقع ووردبريس: دورة عملية من الصفر إلى الاحتراف
- دليل شامل لتطوير مواضيع ووردبريس: بناء قوالب مواقع إلكترونية محترفة من الصفر
- تطوير مواقع ووردبريس الاحترافية: بناء مواقع شركات استجابية من الصفر