قوالب ووردبريس المخصصة: دليل شامل لإنشاء مظهر موقعك الخاص من الصفر

مظهر الموقع الإلكتروني هو الانطباع الأول الذي يتركه لدى الزوار، وهو أيضًا الوسيلة الأساسية لتمثيل الهوية البراندية للشركة. استخدام قوالب ووردبريس (WordPress themes) الجاهزة قد يكون مريحًا، لكنه غالبًا ما يكون غير كافٍ لتلبية الاحتياجات الشخصية لكل موقع. من خلال تصميم قالب خاص بك من الصفر، يمكن للمطورين الحصول على سيطرة كاملة على مظهر الموقع ووظائفه. سيقوم هذا المقال بتوجيهك خلال كل خطوة رئيسية في هذه العملية، بدءًا من التحض

الاستعدادات وإعداد البيئة.

قبل البدء في كتابة الكود، من الضروري للغاية إنشاء بيئة تطوير فعالة وآمنة. هذا لا يساعد فقط على تحسين كفاءة التطوير، ولكنه أيضًا يضمن أن يكون الكود منظمًا وسهل الصيانة.

إعداد بيئة التطوير المحلية.

أولاً، يجب عليك إنشاء بيئة تشغيل لبرنامج WordPress على جهاز الكمبيوتر الخاص بك. يُنصح باستخدام حزم برمجيات الخوادم المحلية المتكاملة، مثل Local by Flywheel أو XAMPP أو MAMP. تسمح هذه الأدوات بتثبيت برامج PHP وMySQL وخوادم Apache/Nginx بنقرة واحدة. على سبيل المثال، بعد تثبيت Local، قم بإنشاء موقع WordPress جديد، واختر إصدار PHP الذي تفضله، وتأكد من تفعيل وضع التصحيح (debugging mode).

القراءة الموصى بها دليل تطوير موضوعات ووردبريس: دليل عملي كامل من المبتدئين إلى الخبراء.。

بعد ذلك، قم بالدخول إلى الموقع المذكور.wp-content/themesالمحتويات. هنا، ستقوم بإنشاء مجلد خاص بمواضيعك. أطلق عليه اسمًا فريدًا مكونًا من أحرف صغيرة فقط ومفصولة بعلامات الربط (-)، مثل…my-custom-themeهذا المجلد هو المجلد الرئيسي (الجذري) لموضوعك.

خادم ووردبريس من شركة UltaHost

ضمان استرداد المال خلال 30 يومًا، عرض نطاق ترددي وقواعد بيانات غير محدودين، حماية مجانية ضد هجمات DDoS، خصم 50% عند الشراء لمدة 3 سنوات (السعة المتاحة: 501–4 تيرابايت).

صفحة الوصول

إنشاء ملفات أساسية للموضوع

يجب أن يحتوي كل تصميم (Theme) لووردبريس (WordPress) على ملفين أساسيين:style.cssوindex.phpقم بإنشاء الملف داخل مجلد المواضيع.style.cssقم بتحميل الملفات، وأضف تعليقات تحتوي على معلومات الموضوع في بداية كل ملف. هذه المعلومات ضرورية لكي يتمكن نظام ووردبريس (WordPress) من التعرف على الموضوعات المستخدمة في الموقع.

/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: A custom WordPress theme built from scratch.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

Text Domainيُستخدم هذا الملف لأغراض التدويل (internationalization)، ويجب أن يتوافق اسمه مع اسم مجلد الموضوع الخاص بك. بعد ذلك، قم بإنشاء الملف الأساسي (الأبسط) الخاص بالتدويل.index.phpالملف، في الوقت الحالي، يمكن أن يحتوي فقط على هيكل HTML بسيط وكود لاستدعاء دوال الرأس (header) والتذيل (footer) الخاصة بـ WordPress.

إنشاء هيكل الموضوع وملفات القوالب

يستخدم WordPress نظام مستويات القوالب (template hierarchy) لتحديد ملف القالب الذي يتم تحميله لأنواع الصفحات المختلفة. فهم هذا النظام وبناؤه هو جوهر تطوير القوالب (theme development).

ملف القالب الأساسي

منذ الإنشاء…header.php、footer.phpوsidebar.php(إذا كنت بحاجة إلى شريط جانبي)، دعونا نبدأ. تحتوي هذه الملفات على الأجزاء المشتركة للموقع الإلكتروني.header.phpيجب أن يتضمن ذلك بالتأكيد…wp_head()استدعاء الدوال (Function Calls) يسمح للإضافات (Plugins) والمواضيع (Themes) بإدخال كود إلى الجزء العلوي من الصفحة (Page Header).footer.phpفي النص، من الضروري أيضًا تضمين…wp_footer()دالة.

القراءة الموصى بها دليل شامل لإنشاء تصميمات مميزة لمواقع ووردبريس: من التصميم والتطوير إلى نشرها على الإنترنت。

ثم، قم بالتعديل.index.phpالاستخدامget_header()、get_footer()وget_sidebar()تم استخدام دالة لاستيراد هذه المكونات القالبية. بعد ذلك، تم إنشاؤها.front-page.phpكقالب للصفحة الرئيسية الثابتة، أو للإنشاء…home.phpكقالب لصفحة فهرس مقالات المدونة.single.phpيُستخدم لعرض مقال واحد فقط.page.phpيُستخدم لعرض صفحة واحدة فقط.archive.phpيُستخدم لعرض صفحات التصنيفات، العلامات، وغيرها من الصفحات المرتبطة بأرشيف المحتوى.

استخدام مكونات القوالب (Template Components)

للتصاميم الأكثر تعقيدًا، يمكنك استخدام ميزة “المكونات القابلة للتخصيص” (Template Components) في ووردبريس. قم بإنشاء ملف في المجلد الرئيسي للقالب (theme folder) لتخزين هذه المكونات.partsأوtemplate-partsمجلدات: استخدمها لتخزين أجزاء الكود القابلة لإعادة الاستخدام، مثل ملخصات المقالات، ومعلومات المقالات، ونماذج التعليقات. على سبيل المثال، قم بإنشاء مجلد خاص لهذه الأغراض.template-parts/content.phpيتم استخدام الملفات لتحديد طريقة عرض محتوى المقالات. ثم…index.phpأوsingle.phpفي الوسط، يتم استخدام…get_template_part('template-parts/content')استخدموه للاتصال به… هذا يعزز بشكل كبير قابلية إعادة استخدام الكود وسهولة صيانته.

الدورات (Cycles) والاستعلام الرئيسي (Main Query)

جوهر ووردبريس يكمن في “الحلقات” (loops)، وهي أجزاء من كود PHP تُستخدم لعرض المقالات على الصفحات. في ملفات القوالب الرئيسية، من الضروري استخدام الحلقات في جميع الأحيان. هيكل الحلقة القياسي كالتالي:

استضافة.كوم استضافة مشتركة

أداء عالٍ مع وحدات المعالجة المركزية AMD EPYC، ووحدات تخزين NVMe SSD وLiteSpeed، ودعم داخلي متخصص على مدار الساعة طوال أيام الأسبوع، وتدابير أمنية متقدمة بما في ذلك SSL، وقوة الغاشمة، والحماية من البرامج الضارة والحماية من DDoS، وتوفير ما يصل إلى 731 تيرابايت 4 تيرابايت

صفحة الوصول

<!-- 在这里输出文章内容，例如： -->
    <h2></h2>
    <div></div>

    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>

الفهمWP_Queryالفئات (Classes) أيضًا مهمة للغاية، فهي تسمح لك بإنشاء استعلامات مخصصة للحصول على قوائم معينة من المقالات، مثل عرض أحدث المقالات في الشريط الجانبي.

إضافة خيارات الميزات والتصاميم (Adding Features and Theme Options)

موضوع كامل لا يحتاج فقط إلى قوالب خارجية (تصميمية)، بل يحتاج أيضًا إلى ملفات وظيفية (functional files) لتعزيز قدراته، وقد يوفر خيارات للتخصيص (customization options).

ملف وظائف الموضوع (Theme Function File)

قم بإنشاء الملف في المجلد الرئيسي للموضوع (المجلد الذي يحتوي على جميع ملفات الموضوع).functions.phpملف. هذا الملف ليس ملف قالب، بل يُستخدم لإضافة ميزات الموضوع (theme features)، وقوائم التسجيل (registration menus)، ومناطق الأدوات الصغيرة (toolbars), وتحميل ملفات الأنماط (style sheets)، والسكريبتات (scripts)، وما إلى ذلك. يمكن اعتباره بمثابة “إضافة” (plugin) لموضوعك. أولاً، يجب عليك إضافة الميزات التي ت

القراءة الموصى بها دليل كامل لتطوير مواضيع WordPress: من البداية إلى الإتقان في إنشاء مواضيع مخصصة.。

<?php
function my_custom_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
        'footer'  => __( 'Footer Menu', 'my-custom-theme' ),
    ) );
    // 添加对古腾堡编辑器的宽对齐和颜色支持
    add_theme_support( 'align-wide' );
    add_theme_support( 'editor-color-palette', array( /* 颜色数组 */ ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );
?>

تحميل الأنماط والسكريبتات بشكل متتابع (Queued Loading of Styles and Scripts)

لا تقم أبدًا بإنشاء روابط ثابتة (hard links) مباشرة إلى ملفات CSS وJS داخل ملفات القوالب (template files). الطريقة الصحيحة هي…functions.phpاستخدمه فيwp_enqueue_style()وwp_enqueue_script()تم إنشاء دالة لـ “ترتيب” عملية تحميل الموارد. تتبع هذه الدالة نظام إدارة الاعتمادات (dependencies) الخاص بووردبريس (WordPress)، وتضمن تحميل الموارد بالترتيب الصحيح، مما يمنع حدوث أي تعارضات بينها.

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 加载自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

مكونات التخصيص وإطار الخيارات (Customizers and Option Framework)

لكي يتمكن مديرو المواقع الإلكترونية من تعديل تصميم الموقع (مثل تغيير الألوان أو الشعار) دون الحاجة إلى تعديل الكود، يمكنك استخدام واجهة برمجة التطبيقات (API) الخاصة بأداة تخصيصات ووردبريس (WordPress Customizer).wp_customizeيمكنك إضافة الإعدادات والعناصر التحكمية والأجزاء المختلفة إلى لوحة المخصصات (Customizer Panel). بالنسبة للمتطلبات الأكثر تعقيدًا، يمكنك أيضًا النظر في استخدام أطر عمل مثل Kirki، والتي تسهل عملية توسيع المخصصات وتوفر مجموعة أوسع من أنواع العناصر التحكمية.

الاستضافة المشتركة InterServer

استضافة مشتركة $2.50 دولار أمريكي في الشهر، الشهر الأول $0.1 دولار أمريكي الرمز الترويجي tryinterserver، 461 نص برمجي للتطبيقات السحابية، تثبيت بنقرة واحدة.

صفحة الوصول

تحسين الأداء وجاهزية الإصدار

بعد الانتهاء من تطوير الموضوع، يجب إجراء عمليات تحسين واختبار لضمان أن أداءه جيد، وأنه آمن، وأنه يتوافق مع المعايير المطلوبة.

تحسين الكود والأمان

تأكد من أن جميع البيانات المُعرضة بشكل ديناميكي تم تهريبها (escaping) بشكل صحيح. استخدم الدوال المتاحة في ووردبريس مثل…esc_html()、esc_attr()、esc_url()وwp_kses_post()لمنع هجمات XSS. بالنسبة لسلاسل النصوص المراد ترجمتها، يتم استخدام…__()、_e()قم بتنفيذ الدوال المطلوبة، وتأكد من أن كل شيء يعمل كما هو متوقع.Text Domainصحيح. يجب إزالة جميع أكواد التصحيح (debugging codes)، مثل…var_dump()أوprint_r()。

من ناحية الأداء، يجب التأكد من أن أحجام الصور مناسبة، والنظر في استخدام الصور المتكيفة مع أحجام الشاشات المختلفة (الصور الريسبونسيفية). كما يجب فحص ملفات CSS وJavaScript وتقليل حجمها إلى الحد الأدنى (ويمكن القيام بذلك أثfunctions.phpيتم تحميل النسخة المصغرة مباشرة من الموقع (النسخة المخفضة في الحجم). يتم الاستفادة من ذاكرة التخزين المؤقتة للمتصفح، ويجب التأكد من أن التصميم الخاص بالموقع (الثيم) يدعم التحميل المتأخر (الت

اختبار المواضيع ومراجعتها

تم إجراء الاختبارات في بيئات متنوعة (إصدارات مختلفة من PHP وإصدارات مختلفة من WordPress) بالإضافة إلى متصفحات متعددة. تم استخدام بيانات اختبار وحدات الثيمات (Theme Unit Test Data) المقدمة رسميًا من WordPress لاستيراد المحتوى المطلوب للاختبار، وذلك لفحص أداء الثيمة في مختلف السيناريوهات (مثل العناوين الطويلة، عدم وجود صور مميزة، التعليقات المتداخلة، إلخ). كما تم تشغيل إضافة Theme Check، وهي خطوة ضرورية للتأكد من أن الثيمة تتوافق مع أحدث المعايير وأفضل الممارسات المتبعة في مجلد ثيمات WordPress. تم إصلاح جميع المشاكل ذات الدرجة “الضرورية” والموصى بها.

أخيرًا، قم بإنشاء شيء واضح ومفهوم.readme.txtالملف يشرح ميزات الموضوع، خطوات التثبيت، الإضافات الاختيارية، وغيرها. قم بإنشاء لقطة شاشة جميلة لموضوعك وأطلق عليها اسمًا مناسبًا.screenshot.pngويتم وضعه في المجلد الرئيسي للموضوع (المجلد الأصلي للمحتوى المتعلق بذلك الموضوع).

الملخصات

تخصيص موضوع WordPress من الصفر يعتبر مشروعًا منهجيًا يتطلب من المطورين امتلاك مهارات في كل من الجانب الأمامي (HTML، CSS، JavaScript) والجانب الخلفي (PHP)، بالإضافة إلى فهم عميق للمفاهيم الأساسية لـ WordPress مثل هياكل القوالب (templates)، الحلقات (loops)، الأدوات المساعدة (hooks)، وواجهات برمجة التطبيقات (APIs). من خلال اتباع عملية تطوير منظمة تشمل إنشاء البيئة المناسبة، بناء القوالب، إضافة الميزات، وأخيرًا تحسين واختبار الموضوع، ستتمكن من إنشاء موضوع خاص بك يلبي احتياجاتك بشكل كامل، ويتمتع بأداء عالٍ وأمان ممتاز. هذه العملية لا تمنح الموقع مظهرًا فريدًا فحسب، بل تمنحك أيضًا فهمًا عميقًا لكيفية عمل WordPress من الداخل، وهو ميزة لا يمكن مقارنتها بأي موضوع جاهز متاح.

الأسئلة الشائعة الأسئلة المتداولة

ما هي المعرفة الأساسية التي أحتاجها لبدء تخصيص مواقع ووردبريس (WordPress)؟

يجب أن تتقن HTML و CSS بشكل جيد، فهما الأساس الذي يبنى عليه مظهر صفحات الويب. بالإضافة إلى ذلك، من الضروري أن تمتلك معرفة أساسية بلغة PHP، نظرًا لأن منصة WordPress وتصاميمها تعتمد بشكل أساسي على هذه اللغة. سيكون من المفيد أيضًا أن يكون لديك فهم معين للغة JavaScript، حيث يمكن استخدامها لإضافة وظائف تفاعلية إلى المواقع. الأهم من ذلك كله، أن تكون لديك فهم واضح للهيكل الأساسي لمنصة WordPress، مثل المقالات (Articles)، الصفحات (Pages)، التصنيفات (Categories)، العلامات (Tags)، القوائم (Menus)، والأدوات الإضافية (Plugins) وغيرها من المفاهيم الأس

ما الفرق بين تطوير المواضيع المخصصة (Custom Themes) وتطوير المواضيع الفرعية (Sub-Themes)؟

التخصيص يعني إنشاء موضوع جديد ومستقل من الصفر، مع هيكل ملفات كامل، كما هو موضح في هذا المقال. أما تطوير المواضيع الفرعية (السبونات) فهو يعتمد على موضوع أصلي موجود بالفعل؛ حيث يتم إنشاء دليل مواضيع جديد وتحميل أنماط ووظائف الموضوع الأصلي، مع تغيير الأجزاء التي تحتاج إلى تعديل فقط. تُستخدم المواضيع الفرعية عند الحاجة إلى إجراء تعديلات بسيطة أو تخصيصات على الموضوع الأصلي، وعادةً ما يتم الحفاظ على التعديلات التي قمت بها عند تحديث الموضوع الأصلي. التخصيص من الصفر يوفر أقصى مرونة وسيطرة، لكنه يتطلب المزيد من العمل في التطوير.

كيف يمكنني جعل موضوعي يدعم محرر غوتنبرغ (Gutenberg Editor)؟

لكي يدعم الموضوع محرر غوتنبرغ (Gutenberg Editor) بشكل أفضل، يجب عليك…functions.phpاستخدمه فيadd_theme_supportتعلن الدالة عن مجموعة من الخصائص. على سبيل المثال، باستخدام…add_theme_support('editor-styles')للسماح بتحميل أنماط المحرر، ثم استخدمها.add_editor_style()توجد دالة لتحديد ملف CSS الذي يستخدمه المحرر. كما يمكنك إضافة دعم لميزات مثل محاذاة الكتلة الأفقية، ولوحة ألوان الكتلة، وحجم خطوط الكتلة، وما إلى ذلك. هذا يضمن أن يكون شكل المقالات كما يظهر في المتصفح متطابقًا إلى حد كبير مع الشكل الذي يتم تحريره في محرر

بعد الانتهاء من تطوير الموضوع، كيف يمكن تقديمه إلى الدليل الرسمي للمواضيع في ووردبريس (WordPress Official Themes Directory)؟

يتطلب تقديم الموضوع إلى الدليل الرسمي للمواضيع على موقع WordPress.org مراجعة صارمة. أولاً، يجب التأكد من أن الموضوع 100% يجتاز اختبارات إضافة Theme Check ويتوافق مع جميع متطلبات “دليل مراجعة المواضيع”. بعد ذلك، قم بإنشاء حساب على موقع WordPress.org وقم بتحميل حزمة الموضوع المضغوطة باستخدام نموذج “تقديم الموضوع”. سيقوم فريق المراجعة بمراجعة الموضوع يدويًا، وقد يستغرق هذا العملية عدة أسابيع. سيتم فحص جودة الكود، والأمان، واتفاقيات الترخيص، ودعم الترجمة، وتنفيذ الميزات، وغيرها. قم بإجراء التعديلات اللازمة بناءً على التعليقات حتى يتم الموافقة على الموضوع للنشر.