كيفية إنشاء قالب طفل WordPress (2021)

هل تعرف كيف تصنع موضوع ووردبريس الطفل ؟

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

دعنا نمر بعملية إنشاء قالب تابع لـ WordPress.

لماذا يجب عليك استخدام ثيمات الأطفال في WordPress؟

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

إشعارات قبل عمل موضوع طفل

لإنشاء قالب ثانوي لـ WordPress ، يلزم وجود مهارة في البرمجة لأنك ستعمل مع HTML و CSS. معرفة ما يجب تغييره أمر مهم للغاية. إلى جانب ذلك ، ستحتاج إلى معرفة أساسية بـ PHP ، على الأقل نسخ / لصق مقتطفات التعليمات البرمجية من مصادر أخرى.

ننصح بصدق أنه يجب عليك التدرب في بيئة التطوير. هذا مكان يمكنك من خلاله القيام بذلك دون الخوف من إفساد موقعك الرئيسي. يبدو الأمر كما لو كنت تقتل عصفورين بحجر واحد: أحدهما ينقله إلى حقل الاختبار والآخر يستخدم لتطوير السمات.

شيء آخر ، يجب أن يتناسب موضوع الوالدين مع المظهر والوظائف مع أغراضك. في الواقع ، كلما قل عدد التغييرات التي تجريها ، أصبح موقعك أفضل.

في الأجزاء أدناه ، سوف نستخدم سمة LearnPress كمثال لتوضيح أفضل لموضوع إنشاء WordPress .

بناء أول موضوع طفل

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

الآن ، سنبدأ التخصيص.

باستخدام الكود

للبدء ، ستقوم بفتح / wp-content / theme / في تثبيت WordPress وإنشاء مجلد جديد لموضوع طفلك. سمها كما تريد.

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

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

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

بعد ذلك ، ستقوم بإنشاء ملف ثاني ^{لاستيراد} أوراق الأنماط من السمة الأصلية. أنشئ مستندًا جديدًا في محرر النصوص الخاص بك وانسخ هذا الرمز:

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

عند استخدام LearnPress كقالب رئيسي ، سيبدأ هذا الرمز في العمل. وبالتالي ، ستعمل معظم الموضوعات على هذا النحو. احفظ هذا الملف وسيصبح مجلد jobs.php الخاص بسمة طفلك.

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

باستخدام الإضافات

نقترح أنه يمكنك استخدام المكون الإضافي Child Theme Configurator. نظرًا لأنه لا يتطلب أي ترميز ، يمكنك بسهولة إجراء تغييرات وتخصيصات.

أولاً ، قم بتثبيت المكون الإضافي على موقعك. لمزيد من الإرشادات حول تثبيت البرنامج المساعد ، انقر هنا.

عند التنشيط ، انتقل إلى "أدوات" -> "سمات الطفل" واختر LearnPress في القائمة المنبثقة للسؤال الأصلي. اختر "تحليل" للتحقق من التوافق لتكون موضوعًا رئيسيًا. بعد ذلك ، سيتعين عليك تسمية مجلد النسق الفرعي لحفظ الملفات ومكان حفظها. في الإعداد الافتراضي ، اختر "انقر لتحرير سمات سمة الطفل". ثم سوف تفي بمعلومات موضوع الطفل.

عند إنشاء نسق فرعي يدويًا ، لن يرث النسق الفرعي القوائم والأدوات من النسق الرئيسي. لحلها ، استخدم Child Theme Configurator. أخيرًا ، اختر "Create New Theme Child" للإنهاء. في هذه الخطوة ، سيكون للقالب الفرعي الخاص بك وظيفتي function.php و style.css لمزيد من التطويرات. على ما يبدو ، تذكر معاينة المكون الإضافي لطفلك. بعد ذلك ، حددت "تنشيط ونشر" لنشر موضوع طفلك.

الآن ، سنبدأ في تخصيص سمة طفلك.

تخصيص موضوع ووردبريس الطفل

سنقوم بإنشاء قالب تابع لـ WordPress يختلف قليلاً عن القالب الأصلي عن طريق إضافة كود إلى الملف "style.css".

انسخ الرمز من Firefox / Chrome Inspector

يمكنك استخدام أدوات Inspector لمتصفح Chrome و Firefox لاكتشاف كود CSS المطلوب. بالإضافة إلى ذلك ، يمكنك استخدام هذه الأدوات للوصول إلى عناصر CSS و HTML الخاصة بكل المواقع.

لمشاهدة ملف CSS لمنشور أو موقع ، انقر بزر الماوس الأيمن واختر "فحص". سيتم تقسيم شاشتك إلى نصفين ويمكنك رؤية CSS و HTML للصفحة. عند تحريك الماوس فوق خطوط HTML ، ستظهر لك أداة المفتش في النافذة العلوية. كما يفعل قواعد CSS.

سيكون هناك تغيير مؤقت في اللون في الخلف. لجعله دائمًا ، انسخ سطر قاعدة CSS والصقه في ملف style.css للقالب الفرعي:

 1 body { 2 background-color: #fdf8ef; 3 )

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

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

انسخ الرمز من ملف style.css للقالب الرئيسي

كما ترى ، من الممكن النسخ من ملف التصميم الرئيسي "style.css" ولصقه في القالب الفرعي وتخصيصه.

على سبيل المثال ، رمز لون خلفية الصفحة هو:

 1 background-color: var(--global--color-background);

"– global – color-background" هو متغير يستخدم في أماكن الموضوع المختلفة. سيكون عليك تغيير قيمة المتغير إذا كنت بحاجة إلى تغيير اللون في تلك الأماكن في نفس الوقت. انتقل إلى / wp-content / theme / learnpress في مجلد تثبيت WordPress وافتح الملف style.css في محرر النصوص للبحث عن مكان الخلفية الملونة العالمية. يمكن تغيير هذا المتغير مع متغير آخر. يمكنك العثور على مجموعة كبيرة من متغيرات الألوان في ملف style.css الخاص بالنسق الأصل. بعد تحديد خيارات الألوان المناسبة ، يمكنك نسخ ولصق سطر الكود هذا في ملف style.css للقالب الفرعي ، واستبدال القديمة بأخرى جديدة تم اختيارها لميل لونك. بعد ذلك ، سيتم تقسيم الألوان بناءً على أنظمة الألوان المخطط لها. ستجعل هذه العملية مخططات الألوان متسقة ويتم تحريرها بسرعة.

تخصيص ملفات القوالب

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

لتخصيص قالب ، ابحث عن هذا الملف في النسق الأصلي وانسخه إلى القالب الفرعي. ثم افتحه في محرر النصوص وابدأ في تعديله.

سنعرض لك برنامجًا تعليميًا لهذه العملية باستخدام ملف footer.php. انسخه إلى مجلد النسق الفرعي وافتحه في محرر نص عادي. على سبيل المثال ، لنحذف رابط "Proudly powered by WordPress" في التذييل ونضيف إشعارًا بحقوق النشر. للبدء ، احذف الكل بين علامات <div class = ”powered-by”>.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

ثم ستقوم بلصق الكود الذي تجده أسفل تلك العلامات في المثال أدناه.

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

اختر "حفظ التغييرات" وعندما تعود إلى الموقع ، سترى إشعار حقوق النشر الجديد.

إضافة وظائف إلى موضوع WordPress Child الخاص بك

لتغيير أو إضافة وظيفة إلى موقعك ، سيتعين عليك البحث عن ملف jobs.php. يستخدم هذا الملف كود PHP لتشغيل هذه العملية.

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

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

احفظ وانتقل إلى "Appearance" -> "Widgets" لرؤية الأداة الجديدة. بالإضافة إلى ذلك ، يمكنك البحث عن مزيد من المعلومات حول إضافة منطقة وظيفة. يمكنك إضافة الكثير من الميزات عن طريق إضافة مقتطفات التعليمات البرمجية إلى ملف jobs.php الخاص بموقعك.

هذا كل شيء عن كيفية إنشاء قالب فرعي في WordPress . دعنا ننتقل إلى جزء خطأ الإصلاح.

إصلاح الأخطاء

يمكنك مواجهة أي مشكلة في إنشاء موضوع فرعي في أي لحظة. لذلك لا تستسلم بسهولة.

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

كيف تصنع موضوعًا فرعيًا لـ WordPress: الخاتمة

نأمل أن تتمكن من اكتساب المعرفة حول جعل موضوع الطفل من خلال مقالتنا. شكرا على قراءاتك!

اقرأ المزيد: كيفية إصلاح خطأ HTTP 500 WordPress (2021)