دليل شامل: كيفية إنشاء تصميم ووردبريس مخصص من الصفر

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

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

قالب ووردبريس هو في الأساس موجود في/wp-content/themes/المجلدات الموجودة داخل الدليل… اسم هذا المجلد هو معرف الموضوع الخاص بك. يجب عليك إنشاء مجلد جديد، على سبيل المثال…my-custom-themeفي هذا المجلد، يجب أن يكون هناك على الأقل ملفان أساسيان:style.cssوindex.phpالأول يُستخدم لتخزين معلومات أنماط المواضيع وبياناتها الوصفية (metadata)، بينما الثاني هو ملف القالب الافتراضي.

ملف لفهم المعلومات الأساسية للموضوع

style.cssالملف لا يُستخدم فقط لتنسيقات CSS، بل إن الكتلة الموجودة في أعلى الملف والمليئة بالتعليقات تعتبر بمثابة “بطاقة الهوية” للقالب (التيمة). يجب عليك تحديد اسم القالب، والمؤلف، والوصف، والإصدار، وغيرها من المعلومات الأساسية هناك. ستظهر هذه المعلومات في صفحة “المظهر” -> “القوالب” داخل واجهة ووردبريس الخ

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

أساسيstyle.cssمثال على رأس الملف كالتالي:

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

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

صفحة الوصول

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个为学习目的而创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

من بينها،Text Domainمخصص للترجمة الدولية (ترجمة إلى لغات متعددة)، يجب أن يتوافق اسمه تمامًا مع اسم مجلد الموضوع الخاص بك.

بناء هيكل ملف القالب الأساسي

يستخدم ووردبريس نظام مستويات القوالب (template hierarchy) لتحديد ملف القالب الذي يتم تحميله لأنواع مختلفة من الصفحات. فهم هذا النظام وإنشاء الملفات اللازمة يعتبر أساسًا أساسيًا لبناء هيكل القوالب (templates) ال

قم بإنشاء ملفات القوالب الضرورية.

بالإضافة إلى…index.phpيجب عليك إنشاء ملفات قوالب أكثر تحديدًا تدريجيًا. على سبيل المثال،header.phpيُستخدم لتخزين جزء الرأس (HTML head) لجميع الصفحات، بالإضافة إلى تنسيق القائمة الجانبية للموقع (الناوبرة) وغيرها من المحتويات المشتركة بين جميع الصفحات.footer.phpيُستخدم لتخزين محتويات القسم السفلي (القائمة) من الصفحة.sidebar.phpمخصص للاستخدام في الشريط الجانبي (السيدار). يتم ذلك باستخدام الدوال المدمجة في ووردبريس.get_header()、get_footer()وget_sidebar()يمكنك بسهولة إدخال هذه الأجزاء إلى القوالب الأخرى.

index.phpهذا هو القالب الاحتياطي الأخير. يجب عليك إنشاء قوالب أكثر تخصيصًا لتحسين مستوى السيطرة على العمليات، مثل:
- front-page.phpيُستخدم كصفحة رئيسية ثابتة.
- home.phpعرض فهرس مقالات المدونة.
- single.phpعرض مقالة واحدة من مدونة معينة أو نوع مقالات مخصص.
- page.phpعرض صفحة واحدة فقط.
- archive.phpعرض صفحات التصنيفات، والتسميات، والمؤلفين، والتواريخ، وغيرها من معلومات الأرشيف.
- 404.phpيتم عرض صفحة “لم يتم العثور على شيء”.
- search.phpعرض نتائج البحث.

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

فهم آلية التكرار (الحلقات)

جوهر ووردبريس هو “الحلقة” (The Loop). وهي قطعة من كود PHP تُستخدم للتحقق مما إذا كانت هناك مقالات متاحة، وفي حال وجودها، تقوم بعرض محتوى كل مقالة بشكل دوري (بشرط توافر الشروط المطلوبة). إحدى أبسط هياكل الحلقات هي كما يلي، وعادةً ما توضع في…single.phpأوhome.phpالصينية:

<h2></h2>
    <div></div>

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

من بينها،the_title()وthe_content()تُستخدم علامات القوالب مثل `` و`` و`{{var}}` لعرض البيانات المحددة للمقال.

دمج الميزات الأساسية لبرنامج ووردبريس (WordPress)

يجب أن يتم دمج الموضوع المؤهل بشكل صحيح مع مختلف ميزات ووردبريس، بما في ذلك القوائم ومناطق الأدوات الإضافية وصور المقالات البارزة وميزات دعم المواضيع.

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

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

صفحة الوصول

تسجيل قائمة التنقل ومنطقة الأدوات الصغيرة

أنت بحاجة إلى استخدام…register_nav_menus()الدالة موجودة ضمن الموضوع (التطبيق أو الوثيقة).functions.phpمواقع تسجيل وحدات القائمة في الملف. على سبيل المثال، تسجيل قائمة “التنقل الرئيسي”:

function my_custom_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
        'footer'  => __( 'Footer Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

بعد ذلك، فيheader.phpفي الوسط، يتم استخدام…wp_nav_menu()دالة لاستدعاء هذا القائمة.

وبالمثل، استخدم…register_sidebar()يمكن للدوال إنشاء مناطق للأدوات الصغيرة (الشرائط الجانبية).functions.phpبعد التسجيل، سيكون بإمكانك إدارة العناصر عن طريق السحب والإسقاط في الواجهة الخلفية “المظهر” -> “الأدوات الصغيرة”، واستخدامها في القوالب.dynamic_sidebar()دالة لعرضه.

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

إضافة دعم ميزة التصنيفات (المواضيع)

من خلالadd_theme_support()يمكنك تفعيل مجموعة من الميزات الأساسية لموضوعك باستخدام الدوال المتاحة. من أكثر هذه الميزات شيوعًا:
- post-thumbnailsتفعيل ميزة استخدام الصور المميزة مع المقالات.
- title-tagدع ووردبريس يدير عناوين المستندات تلقائيًا.<title>(العلامات)، وهذه هي أفضل الممارسات في التصميمات الحديثة.
- html5قم بتفعيل دعم HTML5 للعلامات الأساسية المستخدمة في الموضوع (مثل نماذج التعليقات، نماذج البحث، إلخ).

يجب وضع الكود الخاص بتفعيل هذه الميزات في نفس المكان أيضًا.functions.phpمستنداتafter_setup_themeموجود داخل الخطاف.

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

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

صفحة الوصول

التصميم، السكريبتات، وتحسين الأداء

تتطلب المواضيع الحديثة معالجة صحيحة لتحميل ملفات CSS وJavaScript، مع الأخذ بعين الاعتبار أداء الموقع وتصميمه القابل للتكيف مع أحجام الشاشات المختلفة (التصميم الاستجابي).

إضافة CSS وJavaScript بشكل صحيح

لا تقم أبدًا بإنشاء روابط مباشرة (hard links) إلى ملفات CSS وJS داخل ملفات القوالب (template files). يجب استخدام طرق أخرى لتضمين هذه الملفات في القوالب.wp_enqueue_style()وwp_enqueue_script()الدالة، من خلالwp_enqueue_scriptsتقوم الأداة المستخدمة بإضافة هذه المكونات إلى القائمة (الطابور)، مما يضمن إدارة الاعتمادات بشكل صحيح وترتيب التحميل بشكل مناسب، وبالتالي تجنب أي تعارضات أو مشاكل.

فيfunctions.phpمثال من النص:

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

انتبه،get_stylesheet_uri()ما يتم إرجاعه هو موضوع (الموضوع الرئيسي أو الموضوع الخاص بالمحتوى).style.cssبالنسبة لملفات JS، سنقوم…trueكمعامل أخير، يُشير ذلك إلى أن المحتوى سيتم تحميله في أسفل الصفحة (في القسم السفلي من الصفحة)، مما يساعد على تحسين أداء تحميل الصفحة.

تحقيق التصميم الاستجابي (Responsive Design) والأنماط الأساسية (Basic Styles)

yoursstyle.cssيجب أن يتضمن التصميم أساسًا للتكيف مع مختلف أحجام الشاشات (تصميمًا استجابيًا). يُنصح باستخدام استراتيجية “الأولوية للأجهزة المحمولة” (Mobile First)، أي كتابة الأنماط أولاً للشاشات الصغيرة، ثم استخدام استعلامات الوسائط (Media Queries) لتكييف التصميم تدريجيًا مع الشاشات الأكبر حجمًا. بالإضافة إلى ذلك، من المهم التأكدmax-width: 100%;خاصية لمنع المحتوى من التجاوز لحدود الحاوية (العنصر الذي يحتوي على المحتوى).

الملخصات

إن إنشاء تصميم ووردبريس مخصص من الصفر يعتبر عملية تعليمية شاملة، حيث يتطلب منك فهم لغات البرمجة مثل PHP و HTML و CSS و JavaScript بالإضافة إلى واجهات برمجة التطبيقات الأساسية لـ WordPress (API). سنبدأ بالتحضيرات اللازمة للبيئة والملفات الأساسية لـ WordPress.style.cssبدأنا ببناء هيكل القوالب تدريجياً، وفهمنا آلية “التكرار” (التنفيذ المتكرر للكود). بعد ذلك، دمجنا ميزات أساسية مثل القوائم النافذة، الأدوات المساعدة، والصور المميزة، وتعلمنا كيفية إضافة ملفات الأنماط والبرمجيات بطريقة صحيحة وفعالة. اتباع هذه الخطوات وأفضل الممارسات لا يساعد فقط على إنشاء مواضيع أصلية ذات وظائف كاملة، بل يضمن أيضاً جودة الكود وسهولة الصيانة والأداء. تذكروا أن تطوير المواضيع عملية متكررة، ومن المهم جداً إجراء الاختبارات المستمرة والحصول على تعليقات في بيئة حقيقية.

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

هل يجب أن أكون خبيرًا في PHP لتطوير موضوعات WordPress؟

يجب أن يكون لديك فهم أساسي وقدرة على استخدام لغة PHP، لأن منصة WordPress مبنية بالكامل باستخدام PHP، وتتكون ملفات قوالب المواقع (theme templates) بشكل أساسي من كود PHP. يجب عليك على الأقل أن تفهم المتغيرات (variables)، الدوال (functions)، الحلقات (loops)، والجمل الشرطية (conditional statements)، بالإضافة إلى معرفة كيفية استخدام علامات ودوال ووردبريس (WordPress’s tags and functions). أما تطوير القوالب المتقدم فسيتطلب معرفة أعمق ببرمجة ووردبريس القائمة على الكائنات (WordPress’s object-oriented programming).

هل يمكن تعديل الموضوع الحالي لإنشاء موضوع جديد؟

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

ما الفرق بين ملف functions.php الخاص بالموضوع (theme) والإضافات (plugins)؟

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

كيف يمكنني أن أجعل موضوعي يدعم الترجمة متعددة اللغات؟

يجب أن تكون مستعدًا للتدويل (Internationalization، أو i18n). هذا يعني أن جميع النصوص الموجهة للمستخدمين في الموضوع يجب أن تُغلف باستخدام دوال الترجمة الخاصة بـ WordPress.esc_html_e(‘Read More’， ‘my-custom-theme’);لقد أنجزت بالفعل ما كنت مسؤولاً عنه.style.cssتم الإعلان عن ذلك في…Text Domainيجب أن تكون حقول النص المستخدمة هنا متوافقة مع هذه المتطلبات. بعد ذلك، يمكن للمترجمين استخدام ملفات `.po` و `.mo` لترجمة هذه السلاسل النصية.