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

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

• لا يتأثر التخصيص عند تحديث المظهر الأصلي.
• يرث ميزات موضوع الأصل.
• مرونة التخصيص دون ترميز الموضوع بالكامل.

سوف ننتقل من خلال الخطوات لإنشاء سمة Genesis child من البداية. بالطبع ، هذا ليس تدريبًا كاملاً نظرًا لاتساع نطاق WordPress ، ولكن هذه المقالة ستوجهك إلى أساس متين لبدء مشروعك على القدم الصحيحة.

ملفات موضوع الطفل سفر التكوين

أنشئ مجلدًا جديدًا داخل wp-content > theme ثم أعطه اسمًا من اختيارك. نقوم بتسمية ملفنا باسم Custom .

الآن داخل مجلد سمة الطفل ، قم بإنشاء الملفات الثلاثة الجديدة التالية:

• وظائف. php
• style.css
• الصفحة الأولى. php

1. ملف Functions.php

يحتوي هذا الملف على وظائفنا المخصصة التي سننشئها في سمة Genesis child لتعديل الوظيفة الافتراضية لـ Genesis وكذلك WordPress نفسه.

لهذا ، افتح الملف في محرر النصوص وابدأ بإضافة الوثائق القياسية في شكل كتلة doc.

 <؟ php

/ **
 * تخصيصات الموضوع
 *
 * @ حزمة مخصصة
 * @ المؤلف Ibad Rehman
 * رابط @ https://github.com/ibadrehman/custom
 * @ حقوق النشر محفوظة (c) 2018 ، عباد الرحمن
 *license GPL-2.0 +
 * /

يحتوي هذا الجزء من المستند على معلومات تتعلق باسم موضوعنا ومؤلفه والرابط الذي تمت استضافته ونوع الترخيص.

زيارة codex.wordpress للحصول على معلومات مفصلة عن ملف functions.php في وورد.

سيبدأ السطر التالي من الكود الذي نضيفه في تهيئة إطار عمل Genesis. هناك طريقتان للقيام بذلك. أولاً ، بالرجوع إلى ملف ini.php داخل ملف function.php الخاص بك والثاني الذي سنستخدمه في البرنامج التعليمي هو عن طريق ربط الكود الخاص بنا بوظيفة إعداد Genesis.

 add_action ('Genesis_setup'، 'custom_setup'، 15) ؛

ترتبط هذه الوظيفة بإعداد Genesis الذي يعد المعلمة الأولى. المعلمة التالية هي اسم الوظيفة التي سنستخدمها لتنفيذ وظائف Genesis child theme المخصصة. أخيرًا ، المعلمة الثالثة هي القيمة التي تضمن أن ملف وظيفتنا سيتم تنفيذه بعد السمة الأصلية ، لذا فقد يتجاوز وظائفنا المخصصة.

مجال النص في WordPress هو معرف يساعد WordPress على التعرّف على جميع الترجمات المحملة ومن أجل ذلك ، سنضيف وظيفة أخرى إلى ملف function.php الخاص بنا على النحو التالي:

 // تحميل مجال نص الموضوع الفرعي.
load_child_theme_textdomain ("مخصص") ؛

بالنسبة لوظيفة إعداد سمة الطفل Genesis الخاصة بنا ، سنقوم بتهيئة وظيفة غلاف مخصصة.

 الوظيفة custom_setup () {}

وداخل هذه الوظيفة سنبدأ ما يلي:

• الثوابت
• دعم الموضوع

الثوابت

الثوابت مفيدة عندما تحتاج إلى تعديل سمة Genesis الفرعية الخاصة بك. سيتم تنفيذ التغييرات التي تم إجراؤها هنا عبر الموضوع.

أضف المقتطف التالي لإضافة ثوابت.

 // تحديد ثوابت الموضوع.
تعريف ("CHILD_THEME_NAME" ، "مخصص") ؛
حدد ('CHILD_THEME_URL' ، 'https://github.com/ibadrehman/custom') ؛
حدد ('CHILD_THEME_VERSION'، '1.0.0') ؛

دعم الموضوع

بعد تحديد الثوابت ، نحن بصدد إضافة دعم موضوع لموضوع Genesis child الخاص بنا. يمكن إضافة دعم السمات إلى العديد من خيارات WordPress ، مثل القوائم والمنشورات والمعرض والتعليق والتعليقات وما إلى ذلك.

لتنفيذ ذلك ، سنستخدم وظيفة add_theme_support .

 // أضف بنية ترميز HTML5.
	add_theme_support ('html5'، array ('comment-list'، 'comment-form'، 'search-form'، 'gallery'، 'caption'))؛
	
	// إضافة علامة meta لإطار العرض لمتصفحات الجوال.
	add_theme_support ('Genesis-response-viewport') ؛
	
	// إضافة دعم موضوع لإمكانية الوصول.
	add_theme_support ('Genesis-accessibility' ، مجموعة (
		"404 صفحة" ،
		'القائمة المنسدلة'،
		"عناوين"،
		"rems"،
		'نموذج بحث'،
		"روابط التخطي"،
	)) ؛

أخيرًا ، لدعم السمات الخاصة بنا ، سنضيف أيضًا دعمًا لعناصر واجهة مستخدم التذييل الخاصة بنا.

 // إضافة دعم موضوع لأدوات التذييل.
add_theme_support ("Genesis-footer-widgets"، 3) ؛

التخلص من تخطيطات الشريط الجانبي الإضافية

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

للقيام بذلك ، قم بإضافة هذا الرمز إلى ملف function.php .

 // إلغاء تسجيل التخطيطات التي تستخدم شريطًا جانبيًا ثانويًا.
Genesis_unregister_layout ('content-sidebar-sidebar') ؛
Genesis_unregister_layout ('sidebar-content-sidebar') ؛
Genesis_unregister_layout ('sidebar-sidebar-content') ؛

  // إلغاء تسجيل الشريط الجانبي الثانوي.
unregister_sidebar ('sidebar-alt') ؛

2. ملف Style.css

سنبدأ في تصميم ملف CSS عن طريق إضافة نص العنوان القياسي الذي يحتوي على معلومات حول اسم الموضوع والمؤلف والإصدار والوصف والقالب وما إلى ذلك.

تنسيق HTML

نحتاج الآن إلى إضافة دعم لـ HTML5 Reset وعناصر HTML5 الافتراضية. بالنسبة للمبتدئين ، يقوم HTML5 بإعادة تعيين أي تصميم افتراضي للمتصفح وضمان عرض أفضل لعناصر HTML5.

تضيف عناصر HTML5 الافتراضية نمطًا للعناصر الأساسية مثل العناوين والقائمة والأزرار والفقرات وما إلى ذلك.

هيكل موضوع التصميم

بعد ذلك ، سنضيف CSS المطلوبة لهيكل موضوع Genesis التابع لنا. في هذا القسم ، نعتزم تصميم رأس وقسم وتذييل موقعنا وفئاتهم الخاصة هي:

• site_header
• site_inner
• site_footer

التصميم الملاحة موضوع

للمضي قدمًا ، سنضيف نمطًا إلى التنقل بالمظهر الخاص بنا. في هذا الموضوع الفرعي المعين ، سيكون لدينا شريط تنقل صلب مركزي في الجزء العلوي من صفحتنا.

إذا وجدت نفسك تائهًا أثناء تصميم سمة طفلك ، يمكنك الرجوع إلى نموذج بنية سمة Genesis. له هيكل بسيط ورمز سهل المتابعة.

إضافة الخطوط

عنصر مهم في تصميم السمة هو الخط المستخدم للعناوين والنص الأساسي. من أجل إضافة الخطوط إلى المظهر الفرعي الخاص بنا ، سنستخدم خطوط Google. للقيام بذلك ، نحتاج إلى تحرير ملفين: function.php و style.css على التوالي.

في ملف functions.php ، سنستخدم الدالة wp_enqueue_style داخل الوظيفة المخصصة لدينا.

 وظيفة custom_equeue_styles () {

	wp_enqueue_style ('google-Fonts'، '//fonts.googleapis.com/css؟family=Roboto:400،400italic،700،700italic|Lobster') ؛

}

كما ترى من خلال النظر إلى عنوان URL ، فقد استخدمنا خطين شائعين ؛ Roboto للنص الأساسي وجراد البحر للعناوين.

الآن علينا أيضًا إضافة إجراء لربط خطوطنا بموضوعنا الفرعي.

 // أضف ورقة أنماط خط Google.
add_action ('wp_enqueue_scripts'، 'custom_equeue_styles') ؛

3. Front-page.php ملف

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

دعنا نمضي قدمًا وننشئ صفحة جديدة داخل الدليل الجذر ونطلق عليها اسم الصفحة الأولى . تمامًا مثل ملفات style.css و function.php ، سنضيف هنا أيضًا مجموعة مستندات توثيق بعد علامة البداية لـ PHP.

 <؟ php

/ **
 * تخصيصات الموضوع
 *
 * @ حزمة مخصصة
 * @ المؤلف Ibad Rehman
 * رابط @ https://github.com/ibadrehman/custom
 * @ حقوق النشر محفوظة (c) 2018 ، عباد الرحمن
 *license GPL-2.0 +
 * /

بعد ذلك ، سنقوم بتهيئة وظيفة ستزيل المشاركات التي يتم عرضها على صفحتنا.

 وظيفة custom_home_page_setup () {

	// إزالة المشاركات.
	remove_action ('Genesis_loop'، 'Genesis_do_loop') ؛
}

ستكون هذه الوظيفة عديمة الفائدة إذا لم نحدد إجراء WordPress لتحديد موضع موضوعنا.

 add_action ('Genesis_meta'، 'custom_home_page_setup') ؛

أخيرًا ، سنقوم بتهيئة إطار عمل Genesis.

منشأ()؛ (مطلوب لأي قالب نقوم بإنشائه)

بيانات العينة

حاليًا ، موضوعنا خام ولا يبدو جذابًا. لذلك ، لإضفاء الإثارة على الأمور ، يمكننا استخدام عينات من البيانات المتاحة بواسطة WordPress وتحميل نماذج من الصفحات والتعليقات والمنشورات.

اذهب إلى WordPress theme unit ، صفحة الاختبار وانقر على git repository لتنزيل ملف xml. بمجرد التنزيل ، انتقل إلى لوحة تحكم WordPress ، ضمن الأدوات ، انقر فوق استيراد > تشغيل المستورد الموجود أسفل WordPress مباشرة لبدء عملية الاستيراد.

تغليف!

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

كود المصدر: https://github.com/ibadrehman/custom

تحد

بعد إنشاء السمة الفرعية ، تقدمنا ​​إلى الأمام وأنشأنا بعض الحاجيات المخصصة للأطفال لموضوع Genesis child الخاص بنا.

هذه هي الطريقة التي يبدو بها موضوع genesis child الخاص بنا بعد إضافة عناصر واجهة المستخدم المخصصة.

قم بإنشاء سمة فرعية من Genesis باتباع هاتين المقالتين وشارك منتجك النهائي. حظا طيبا وفقك الله!