تطوير قالب ووردبريس مخصص هو أفضل طريقة لفهم إطار عمل ووردبريس بعمق وتحسين مهارات التطوير الأمامي. على عكس استخدام القوالب الجاهزة، فإن البدء من الصفر يمنحك السيطرة الكاملة، مما يتيح لك إنشاء موقع إلكتروني فريد ومتوافق تمامًا مع متطلبات مشروعك. سيقوم هذا المقال بتوجيهك خلال العملية الكاملة لبناء قالب ووردبريس بسيط ولكنه متكامل الوظائف.
إعداد بيئة التطوير وهيكل الموضوعات (Development Environment and Theme Structure Configuration)
قبل البدء في كتابة الكود، تحتاج إلى بيئة تطوير محلية. عادةً ما تتضمن هذه البيئة مجموعة خادمات محلية (مثل XAMPP أو MAMP أو Local by Flywheel)، ومحرر كود (مثل VS Code)، بالإضافة إلى أحدث إصدارات منصة ووردبريس (WordPress).
أولاً، في ووردبريس… <code>wp-content/themes</code> داخل المجلد، قم بإنشاء مجلد جديد لموضوعك الجديد، على سبيل المثال: <code>my-custom-theme</code>يحتاج أي تصميم أساسي لموقع ووردبريس (WordPress) إلى ملفين أساسيين على الأقل.
القراءة الموصى بها برنامج تعليمي كامل عن تطوير قوالب ووردبريس: بناء قوالب مخصصة من الصفر。
إنشاء ملف قائمة الأنماط (Style Sheet File)
الملف الأول الضروري هو… style.cssهذا الملف لا يحدد فقط أنماط تصميم الموضوع، بل تحتوي تعليقات رأس الملف أيضًا على بيانات الوصف (metadata) الخاصة بالموضوع لـ WordPress. يرجى إضافة التعليقات التالية في بداية الملف:
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/“يتم استخدام ”Text Domain” لأغراض التدويل (internationalization)، ويجب أن يتطابق اسمه مع اسم مجلد الموضوع (theme folder) الخاص بك. بعد ذلك، يمكنك كتابة جميع قواعد CSS (Cascading Style Sheets) داخل هذا الملف.
Create a core function file
الملف الثاني الضروري هو: functions.phpهذا هو “الدماغ” الخاص بالموضوع (theme’s “brain”)، ويُستخدم لتضمين ملفات الأنماط (style sheets) وملفات جافاسكريبت (JavaScript)، وتسجيل القوائم (menus) والشرائط الجانبية (sidebars) وغيرها من الميزات، بالإضافة إلى إضافة د
أساسي functions.php عادةً ما يبدأ الأمر كما يلي، وذلك لإضافة ملفات الأنماط (style sheets) إلى قائمة الانتظار (queue):
<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );في هذا الوقت، على الرغم من عدم وجود أي ملفات قوالب بعد، إلا أن موضوعك يمكن أن يظهر في قائمة “المظاهر” -> “المواضيع” في واجهة ووردبريس الخلفية ويتم تفعيله. بعد التفعيل، ستظهر صفحة فارغة في واجهة الموقع الأمامية، وذلك بسبب عدم وجود ملفات قوالب لتحديد هيكل الصفحة.
القراءة الموصى بها دليل عملي للبدء في تطوير مواقع ووردبريس: إنشاء هيكل وقوالب مواقع مخصصة من الصفر。
إنشاء ملف قالب أساسي
تتحكم ملفات القوالب في طريقة عرض أجزاء مختلفة من الموقع الإلكتروني. يقوم ووردبريس بتحديد الملف القالب الذي يجب استخدامه للطلب الحالي من خلال هيكلية الملفات القالبية.
إنشاء الجزء العلوي والسفلي للموقع الإلكتروني بأكمله
أفضل الممارسات هي فصل الكود الخاص بالجزء العلوي (الheader) والجزء السفلي (الfooter) العام عن بقية أجزاء الموقع. header.php ملف، وعادةً ما يحتوي على تعريف نوع المستند، المنطقة، بالإضافة إلى تفعيلها. العلامات التوضيحية والتنقل الرئيسي.
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1004>
<header>
<h1><a href="/ar/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
<nav>
'primary' ) ); ?>
</nav>
</header>
<main>وبناءً على ذلك، أنشئ footer.php لإغلاق… header.php الحاوية الرئيسية والعلامات (tags) المفتوحة في الوسط.
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>wp_head() و wp_footer() هذه الخيوط (الـ “hooks”) الحاسمة تسمح لنواة ووردبريس (WordPress core) والإضافات (plugins) والقوالب (themes) نفسها بإدراج الكود الضروري في هذه المواقع (مثل الأنماط والبرامج النصية).
إنشاء فهرس وقوالب المقالات
index.php هذا الملف هو الملف النهائي لهيكل القوالب (template hierarchy)، وفي الوقت نفسه نقطة البداية لموضوعنا (our theme). يتم استخدامه… get_header() و get_footer() لإدخال الوحدات المنفصلة.
<article>
<h2><a href="/ar/</?php the_permalink(); ?>"></a></h2>
<div></div>
</article>
<p>لا توجد مقالات حاليًا.</p>لعرض مقال واحد بشكل منفصل، قم بالإنشاء… single.phpتتميز بنيتها بأنها… index.php مشابه، ولكن باستخدام… the_content() لعرض النص الكامل.
القراءة الموصى بها الشروع في تطوير قوالب ووردبريس - أنشئ أول قالب مخصص لك من الصفر!。
<article>
<h1></h1>
<div></div>
</article>تحسين وظائف المواضيع (Enhancing Topic Features)
بعد إنشاء الهيكل الأساسي، نقوم بـ functions.php لإضافة المزيد من الميزات العملية، لجعل الموضوع أكثر احترافية وسهولة في الاستخدام.
تسجيل قائمة التنقل والشريط الجانبي
في functions.php أضف الكود التالي لتسجيل منطقة القائمة الرئيسية للتنقل ومنطقة الشريط الجانبي (منطقة الأدوات الصغيرة):
// 注册导航菜单
function my_custom_theme_register_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );
// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' );بعد التسجيل، ستحتاج إلى استخدامها داخل القوالب (templates). على سبيل المثال، في… header.php لقد استخدمنا ذلك بالفعل في الصين. wp_nav_menu تم استدعاء قائمة “القائمة الرئيسية” (Primary Menu). إذا كنت ترغب في عرض الأدوات الإضافية (Widgets) في الشريط الجانبي (Sidebar)، يمكنك القيام بذلك عن طريق… sidebar.php قم بإنشاء قالب للشريط الجانبي (sidebar)، وفي… index.php أو single.php استخدمه في get_sidebar() إدخال.
إضافة دعم لميزة إنشاء المواضيع (Themes).
يوفر ووردبريس العديد من الميزات الجاهزة، ولكن يتطلب الأمر الإعلان عن دعم هذه الميزات بشكل صريح حتى يمكن استخدامها في القوالب (الثيمات). على سبيل المثال، دعم إضافة ملصقات للمقالات (الصور الرئيسية)، ودعم تخصيص الشعار (اللوغو)، ودعم علامات HTML5.
// 添加主题功能支持
function my_custom_theme_setup() {
// 支持文章缩略图
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 对搜索表单、评论表单等使用HTML5标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 在管理后台提供<title>标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );بعد إضافة دعم “post-thumbnails”， أصبح بإمكانك استخدامها في دورة عرض المقالات. the_post_thumbnail() تم استخدام دالة لعرض الصور المميزة.
تصميم الأنماط والتخطيط التكيفي (Responsive Layout)
من المهم جدًا أن يكون لديك تصميم جميل وقابل للتكيف مع أجهزة مختلفة. يمكنك… style.css تم كتابة جميع الأنماط داخل الكود. يُنصح باعتماد استراتيجية تركز على تجربة المستخدم على الأجهزة المحمولة أولاً (mobile-first strategy).
الأنماط الأساسية وتنسيق النصوص
أولاً، قم بتعيين بعض أنماط الإعادة الضبط والتنسيق الأساسي لضمان أداء موحد في مختلف متصفحات الويب.
/* 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;
background-color: #fff;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: #f8f9fa;
padding: 2rem 0;
border-bottom: 1px solid #dee2e6;
}
/* 导航菜单样式 */
.main-navigation ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
.main-navigation a {
text-decoration: none;
color: #007bff;
}تحقيق التصميم التكيفي (Responsive Design)
استخدم استعلامات الوسائط (Media Queries) لتعديل تخطيط الصفحة حسب أحجام الشاشات المختلفة. على سبيل المثال، عندما تصبح الشاشة أصغر، قم بتغيير ترتيب قائمة التنقل لتكون عمودية.
/* 移动端样式 */
@media (max-width: 768px) {
.main-navigation ul {
flex-direction: column;
gap: 0.5rem;
}
.container {
padding: 0 15px;
}
article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
}تأكد من أن الصور أيضًا تتكيف مع أحجام الشاشات المختلفة (تكون “متجاوبة” معها).
img {
max-width: 100%;
height: auto;
}الملخصات
من خلال الخطوات أعلاه، قمت بنجاح بإنشاء قالب ووردبريس مخصص يحتوي على جميع الميزات الضرورية. لقد بدأنا بتهيئة بيئة التطوير ومن ثم إنشاء أساسيات القالب. style.css مع functions.php بدأت الوثيقة ببناء ملفات القوالب الأساسية تدريجياً.header.php, footer.php, index.php, single.phpتم تحسين واجهة الموضوع من حيث الشكل والمظهر، كما تمت إضافة ميزات عملية مثل قائمة التسجيل والشريط الجانبي بالإضافة إلى دعم للصور المميزة. وأخيرًا، تم تطبيق أنماط أساسية وتصميم متجاوب على الموضوع لضمان عرضه بشكل جيد على أجهزة مختلفة. هذا مجرد نقطة بداية؛ يمكنك الاستمرار في التطوير وإنشاء قوالب صفpage.phpقوالب الأرشيف (Archive Templates)archive.phpقوالب البحث (Search Templates)search.php)، بل ويمكن استخدام المواضيع الفرعية (subtopics) للتخصيص، مما يساعد على إنشاء مواقع إلكترونية أكثر قوة واحترافية.
الأسئلة الشائعة الأسئلة المتداولة
ما هي التقنيات الأساسية التي يجب إتقانها لتطوير مواقع ووردبريس (WordPress)؟
لتطوير قالب أساسي لووردبريس (WordPress Theme)، من الضروري إتقان لغات البرمجة HTML وCSS وPHP. تُستخدم لغة HTML لبناء هيكل الصفحات، بينما تُستخدم لغة CSS لتصميم الأنماط وتنسيق العرض، أما لغة PHP فهي الأساس لتشغيل المحتوى الديناميكي في ووردبريس. بالإضافة إلى ذلك، فإن معرفة أساسيات لغة JavaScript تساعد في إضافة وظائف تفاعلية إلى القالب. من المهم أيضًا فهم المفاهيم الأساسية لووردبريس مثل هيكل القوالب (Templates)، والحلقات (The Loop)، والخطافات (Hooks)، والدوال (Functions)، وهي عوامل أساسية لنجاح تطوير القوالب.
ما هو الدور الذي تلعبه ملف functions.php الموجود في الموضوع (topic)؟
functions.php الملف هو المركز الرئيسي لوظائف قوالب ووردبريس (WordPress themes). تشمل الوظائف الرئيسية لهذا الملف ما يلي: إضافة ملفات CSS وJavaScript إلى قائمة المهام (queue)، تسجيل قوائم التنقل ومناطق الأدوات الجانبية، تحديد الميزات التي يدعمها القالب (مثل ملفات ملخص المقالات، الشعار المخصص)، تعريف دوال مخصصة، بالإضافة إلى تعديل السلوك الافتراضي لووردبريس من خلال خطافات الإجراءات (action hooks) وخطافات المرشحات (filter hooks). يتيح لك ذلك توسيع وتخصيص وظائف القالب بشكل كبير دون الحاجة إلى تعديل ملفات ووردبريس الأساسية نفسها.
كيف يمكنني جعل موقعي الإلكتروني يدعم عدة لغات؟
جعل الموضوع يدعم عدة لغات (التدويل) يتطلب خطوتين رئيسيتين. أولاً، style.css يجب استخدام نفس “نطاق النص” (Text Domain) في جميع الأماكن التي تتم فيها استخدام دوال الترجمة، وعادةً ما يكون هذا النطاق مطابقًا لاسم مجلد الموضوع (Theme Folder). بالإضافة إلى ذلك، عند إعداد السلاسل النصية التي سيتم ترجمتها، يجب استخدام دوال ترجمة ووردبريس (WordPress's translation functions). __()、_e() أو _x()ثم، يمكنك استخدام أدوات مثل Poedit لإنشاء ما تحتاجه. .pot ملفات القوالب (template files)، وإنشاء المحتوى المقابل لها. .po و .mo قم بترجمة الملفات، ثم ضع الملفات المترجمة في المجلد المخصص للموضوع (theme folder). /languages في المجلد، سيقوم ووردبريس (WordPress) تلقائيًا بتحميل الملفات بناءً على إعدادات اللغة للموقع.
ما هي المزايا المقارنة بين إنشاء موضوع فرعي (sub-topic) بدلاً من تعديل الموضوع الرئيسي (parent-topic) مباشرةً؟
إن إنشاء مواضيع فرعية (subtopics) يعتبر من أفضل الممارسات لتعديل أو توسيع وظائف الموضوع الأصلي (parent topic). الميزة الرئيسية لهذا الأسلوب تكمن في تحسين الأمان: عندما يتم إصدار تحديث للموضوع الأصلي، يمكنك تحديثه بشكل آمن، دون أن تفقد التعديلات التي أجريتها على الموضوع الفرعي (مثل التصاميم، الوظائف، القوالب، إلخ). يح style.css وواحد اختياري functions.php الملف يمكن أن يعمل بشكل صحيح. في الفرع الفرعي (الsubtopic)… style.css في الوسط، من خلال… @import أو يمكنك استخدام طريقة ترتيب أفضل لتطبيق أنماط الموضوع الرئيسي (parent theme)، ثم إضافة قواعد CSS الخاصة بك لتغييرها. functions.php سيتم تحميل الملف الذي يحمل نفس الاسم مثل الموضوع الأب، بدلاً من استبداله، مما يسمح لك بإضافة ميزات جديدة بأمان.
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- دليل شامل لتعلم CSS من Tailwind: بناء مواقع ويب حديثة ومتجاوبة من الصفر
- 10 مهارات أساسية: إنشاء قوالب ووردبريس احترافية وفعالة
- دليل بناء مواقع الويب الحديثة: العملية الكاملة من البداية حتى الإطلاق، بالإضافة إلى اختيار مكدس التقنيات المناسب
- تحليل العمليات الأساسية والتقنيات الرئيسية في بناء المواقع الإلكترونية
- دليل نهائي لاختيار القالب المثالي لووردبريس: تحليل شامل من الإطارات الأساسية إلى التخصيصات الفردية
العربية