كيفية إنشاء قالب فرعي في WordPress (خطوة بخطوة)

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

هيا بنا نذهب!

ما هو موضوع ووردبريس الطفل

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

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

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

إنشاء قالب فرعي (خطوة بخطوة)

قبل المتابعة ، تأكد من:

• لديك حق الوصول إلى ملفات موقع الويب الخاص بك عبر عميل FTP (مثل WinSCP أو Filezilla)
• لديك محرر نصوص متاح (مثل notepad ++).

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

الآن دعونا ننشئ وننشط موضوع طفل "Twenty Twenty".

أضف الدليل

أولاً ، علينا إنشاء دليل جديد لـ "twentytwenty-child" داخل / wp-content / theme. لاحظ أنه يمكن تسمية المجلد الفرعي بأي شيء تريده طالما أنك لا تستخدم مسافات أو علامات ترقيم.

أضف ملف style.css

بعد ذلك ، يتعين علينا إنشاء ملف style.css وإضافة رؤوس السمات المناسبة. قبل المتابعة ، دعونا نلقي نظرة على style.css للموضوع الأصلي .

دعونا نرى أين تنعكس هذه المعلومات في منطقة الإدارة.

أولاً ، افتح تفاصيل السمة في المظهر> السمات وألق نظرة فاحصة على العمود الأيمن.

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

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

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

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

بمجرد تنشيط السمة الفرعية ، ما ستراه في الواجهة الخلفية هو هذا:

يمكنك أيضًا إدخال المعلومات الاختيارية التالية:

• الإصدار (إصدار السمة)
• يتطلب على الأقل (الحد الأدنى من إصدار WP المطلوب حتى يعمل السمة بشكل صحيح)
• يتطلب PHP (الحد الأدنى من إصدار WP PHP لكي يعمل السمة بشكل صحيح)
• الوصف (التفاصيل المتعلقة بالموضوع)
• العلامات (علامات السمات)
• المؤلف (اسم مطور الثيم)
• إلخ.

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

هذا أمر طبيعي تمامًا لأن ورقة الأنماط (style.css) التي يشير إليها WordPress الآن أصبحت الآن من السمة الفرعية وورقة الأنماط هذه فارغة ، وشريط المعلومات التي أدخلتها أعلاه. يمكنك إما بدء النمط الخاص بك من البداية أو تحميل نمط القالب الأصلي والبدء من هناك. إذا كنت ترغب في استيراد ورقة أنماط النسق الأصل ، يمكنك القيام بذلك بإحدى طريقتين.

الخيار الأول: استيراد ورقة النمط الأصلي بالطريقة الكلاسيكية

كل ما عليك فعله هو ببساطة إضافة هذا السطر إلى ملف style.css للثيم الفرعي الخاص بك:

 @import url('../twentytwenty/style.css');

يخبر هذا الأمر WordPress بمكان البحث لاسترداد ملف CSS الأصلي منه. الآن إذا قمت بتحديث صفحتك الرئيسية ، فستبدو وكأنها تعود إلى وضعها الطبيعي. كل ما تضيفه الآن في style.css سيتجاوز النمط الأصلي الذي تم استيراده. حاول على سبيل المثال إضافة حجم خط مختلف لعنوان h2 "Hello world!".

قم بتحديث الصفحة وإلقاء نظرة على مفتش العناصر في علامات تبويب المطور.

ستلاحظ أن القيمة المضافة محسوبة وأن القيمة الافتراضية (النمط الأصلي) "font-size: 6.4rem؛" تم تجاوزه.

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

لهذا السبب ، لم يعد من المستحسن استيراد ملف style.css الأصلي بهذه الطريقة.

الخيار الثاني: استيراد ورقة الأنماط الأصلية بالطريقة الصحيحة

من أجل استيراد ملف style.css الأصل "بالطريقة الصحيحة" نحتاج إلى إضافة ملف functions.php الفارغ داخل مجلد القالب الفرعي الخاص بك.

بمجرد القيام بذلك ، افتحه باستخدام المحرر الخاص بك وأضف علامة PHP افتتاحية (<؟ php) ، وبعد ذلك يمكنك إضافة كود PHP التالي:

 function twentytwenty_scripts() { wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', twentytwenty_scripts);

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

بعض الملاحظات الإضافية حول كود PHP:

• 'parent-theme-style' هو اسم المقبض ويجب أن يكون فريدًا
• get_template_directory_uri() . '/style.css' يخبر get_template_directory_uri() . '/style.css' WordPress بالموقع المصدر لموقع style.css الأصل
• get_template_directory_uri() دليل النموذج URI لموضوعنا الرئيسي. في حالتنا ، يتم إخراج "http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty"

أضف وظائف إلى موضوع طفلك

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

وظائف موضوع الطفل. php

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

على سبيل المثال ، دعنا نرى كيف يمكننا تغيير نص "قراءة المزيد" لعرض المشاركات:

الخطوة الأولى: إنشاء فئة منشور اختبار:

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

في هذا المثال ، نريد تغيير نص "متابعة القراءة" المعروض في الزر الذي يقوم بتحميل المنشور بالكامل.

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

في هذا المثال للحصول على ما نريد ، يتعين علينا تخصيص مرشح "the_content_more_link" الذي تم تقديمه في البداية في ملف wp-include / post-template.php الأساسي في السطر 369 مثل هذا:

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

تم تجاوز هذا حاليًا بواسطة القالب الرئيسي العشرين في ملف function.php (السطر 571) بواسطة هذا الجزء من الكود:

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

لذلك ، إذا كنت تريد تغيير نص "متابعة القراءة" في الزر ، فيمكن تجاوز ذلك في functions.php قالب طفلك. php إذا أضفت هذا الجزء من الكود:

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

يعتبر ربط '' the_content_more_link '' شائعًا بين تلك الملفات وفي هذه الحالة يسود خطاف الطفل دائمًا.

ثم قم بتحديث الصفحة وفويلا:

كيفية تخصيص قوالب PHP

تُظهر لقطة الشاشة أعلاه محتوى قالب قالب عشرين عشرون لعرض فئة المنشور. إذن ، كيف يمكننا تغيير تصميمه أو إضافة / إزالة المعلومات باستخدام السمة الفرعية؟

إليك كيف يمكنك القيام بذلك:

1. ابحث عن ملف php ذي الصلة
2. انسخ الملف المناسب إلى مجلد القالب الفرعي وقم بتحريره
3. قم بتخصيصها على النحو الذي تراه مناسبًا

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

باختصار ، الملفات الوحيدة التي تتطلبها سمة WordPress فعليًا هي ملفات index.php و style.css. الملفات والمجلدات الإضافية هي في الواقع ملفات يتم استدعاؤها من داخل index.php . إنها أجزاء مما ستراه في النهاية كمخرج لملف index.php .

فيما يتعلق بموضوع Twenty Twenty ، إذا استعرضنا ملف index.php الخاص به ، فيمكننا أن نرى في السطر 79 أنه عندما يكون المحتوى منشورًا واحدًا أو أكثر ، يتم استخدام ملفات php الموجودة في template-parts / directory.

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

في حالتنا ، سيتعين علينا نسخ ملف content.ph p من داخل المجلد الفرعي لسمة أجزاء القالب.

تأكد أيضًا من نسخ ملفات PHP التي تخطط لتخصيصها فقط. لا تنسخ كل ملف PHP في النسق الرئيسي.

ملاحظة: يجب أن تكون بنية المجلد هي نفسها في النسق الفرعي حتى تنعكس التغييرات على الواجهة الأمامية.

لذلك ، نقوم أولاً بإنشاء المجلد الفرعي "أجزاء القالب" ووضع نسخة من content.php فيه.

يمكنك الآن فتح الملف في المحرر الخاص بك وتخصيصه.

حاول تغيير شيء تافه في البداية للتأكد من أن كل شيء يعمل بشكل جيد ، على سبيل المثال ، قم بتغيير فئة div وتحديث الواجهة الأمامية للتحقق من النتائج.

تخصيص قالب فئة المنشور

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

يمكنك الآن تعديل ملف content.php وتغيير عرض فئة المنشور إلى أسلوبك الخاص. كتلميح ، ابحث عن مراجع الملفات الإضافية المضمنة كما في السطر 23:

 get_template_part( 'template-parts/featured-image' );

هذا يعني أن الملف الذي ينتج الصورة المميزة هو template-parts/featured-image.php

لذلك ، يمكنك نسخ الملف في دليل القالب الفرعي الخاص بك وتحريره. جميل!

استنتاج

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