كيفية تخصيص قوالب WooCommerce برمجيًا

هل تريد تحرير القوالب على موقعك؟ سيوضح لك هذا الدليل كيفية تخصيص قوالب WooCommerce برمجيًا باستخدام الخطافات والكتابة عليها .

لماذا تقوم بتحرير قوالب WooCommerce؟

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

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

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

كيفية تخصيص قوالب WooCommerce برمجيًا

هناك طريقتان رئيسيتان لتخصيص قوالب WooCommerce برمجيًا:

1. مع خطافات
2. الكتابة فوق القوالب

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

الكتابة فوق ملفات القوالب أو استخدام الخطافات؟

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

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

على سبيل المثال ، دعنا نحصل على ملف single-product.php لنرى كيف يتم إنشاء الخطافات. لاحظ أيضًا مكان الخطافات قبل الحلقة وبعدها.

 إذا (! المعرفة ("أبسبات")) {
        خروج؛ // خروج إذا تم الوصول إليها مباشرة
 }
 get_header ("متجر") ؛ ؟>
 <؟ php
                / **
                 * ربط woocommerce_before_main_content.
                 *
                 *hooked woocommerce_output_content_wrapper - 10 (نواتج تفتح divs للمحتوى)
                 *hooked woocommerce_breadcrumb - 20
                 * /
                do_action ('woocommerce_before_main_content') ؛
        ؟>
                <؟ php while (have_posts ()):؟>
                        <؟ php the_post ()؛ ؟>
                        <؟ php wc_get_template_part ('content'، 'single-product')؛ ؟>
                <؟ php end while؛ // نهاية الحلقة. ؟>
        <؟ php
                / **
                 * ربط woocommerce_after_main_content.
                 *
                 *hooked woocommerce_output_content_wrapper_end - 10 (مخرجات تغلق divs للمحتوى)
                 * /
                do_action ('woocommerce_after_main_content') ؛
        ؟>
        <؟ php
                / **
                 * ربط woocommerce_sidebar.
                 *
                 *hooked woocommerce_get_sidebar - 10
                 * /
                do_action ('woocommerce_sidebar') ؛
        ؟>
 <؟ php
 get_footer ("متجر") ؛

إذا ألقيت نظرة على البرنامج النصي ، فسترى كيف نقوم بإنشاء الخطافات على do_action('name-of-the-hook'); خطوط.

لنفترض أن لديك الرابط التالي في ملف function.php لموضوع طفلك:

 add_action ('woocommerce_after_main_content'، function () {echo “custom content after single product template file”؛})؛

يمكنك تكرار نفس المحتوى مباشرة في ملف القالب على النحو التالي:

 <؟ php end while؛ // نهاية الحلقة. ؟>
        <؟ php
 صدى "محتوى مخصص بعد ملف قالب منتج واحد" ؛
                / **
                 * ربط woocommerce_after_main_content.
 do_action ('woocommerce_after_main_content') ؛

ومع ذلك ، من خلال القيام بذلك ، فإن do_action ('woocommerce_after_main_content') ؛ ستصبح الوظيفة عديمة الفائدة نظرًا لأنك أضفت التعليمات البرمجية الخاصة بك هناك بدلاً من سحبها باستخدام الخطاف. لذلك قد ترغب في إزالة جميع الخطافات غير الضرورية في الملف مع حذف do_action ('name-of-the-hook') ؛ أقسام.

ضع في اعتبارك أنه إذا كنت تستخدم woocommerce_after_main_content() الخطاف في مكان آخر على موقع الويب الخاص بك وقمت بإزالة do_action( 'name_of_your_hook' ); في هذا الملف ، لن يعمل الخطاف بعد الآن.

بعد إزالة الخطافات وعلامات PHP غير الضرورية ، يجب أن يبدو ملفك كما يلي:

 إذا (! المعرفة ("أبسبات")) {
 خروج؛ // خروج إذا تم الوصول إليها مباشرة
 }
 get_header ("متجر") ؛
 بينما (have_posts ()):
 المنشور()؛
 wc_get_template_part ('محتوى'، 'منتج واحد')؛
 في غضون ذلك // نهاية الحلقة.
 do_action ('woocommerce_sidebar') ؛
 get_footer ("متجر") ؛

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

تخصيص ملفات قالب WooCommerce والكتابة عليها

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

أشياء يجب وضعها في الاعتبار عند الكتابة فوق القوالب

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

الكتابة فوق قوالب WooCommerce مشابهة للكتابة فوق ملف functions.php . الاختلاف الرئيسي هو أنك تقوم بتحرير ملفات القوالب الخاصة بـ WooCommerce بدلاً من ملفات السمات الخاصة بك.

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

هناك العديد من ملفات قوالب WooCommerce وكل واحد منهم مسؤول عن مهمة واحدة. يمكنك التحقق من القائمة الكاملة لملفات القوالب التي يمكنك تحريرها بالإضافة إلى الدلائل الفرعية وهيكل المجلد في هذا الارتباط.

كما ترى ، هناك بعض الملفات في مجلد القالب الجذر بالإضافة إلى العديد من الدلائل الفرعية. يمكنك تخصيص الملفات داخل أي دليل فرعي بنفس طريقة تحرير الملفات الرئيسية مثل archive-product.php أو single-product.php أو content-single-product.php . وبالمثل ، يمكنك أيضًا تخصيص الملفات في سلة التسوق ، أو حسابي ، أو رسائل البريد الإلكتروني ، أو مجلدات الخروج إذا كنت تتبع نفس أسماء المجلدات والهيكل كما هو الحال في القالب الفرعي الخاص بك.

لذلك إذا كنت ترغب في تخصيص بعض هذه الملفات ، فإن المظهر الفرعي الخاص بك سيبدو كما يلي:

بعد قولي هذا ، دعنا نلقي نظرة على بعض الأمثلة على الأشياء التي يمكنك القيام بها لتخصيص قوالب WooCommerce.

1. أضف الرموز القصيرة إلى قالب WooCommerce

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

على سبيل المثال ، سيتضمن النص البرمجي التالي لوحة معلومات الحساب في جميع صفحات المنتج الفردية. تذكر أن تقوم بلصقه في ملف single-product.php الذي قمت بإنشائه في المظهر الفرعي الخاص بك.

 <؟ php
 إذا (! المعرفة ("أبسبات")) {
 خروج؛ // خروج إذا تم الوصول إليها مباشرة
 }
 get_header ("متجر") ؛
 بينما (have_posts ()):
 المنشور()؛
 wc_get_template_part ('محتوى'، 'منتج واحد')؛
 في غضون ذلك // نهاية الحلقة.
 do_action ('woocommerce_sidebar') ؛
 $ t = '<div> <h4> حسابي </ h4>'؛
 $ t. = do_shortcode (" [ woocommerce_my_account ] ") ؛
 $ t. = "</div>"؛
 صدى $ ر؛
 get_footer ("متجر") ؛

وهذه هي النتيجة على صفحة المنتج الحية:

2. عرض المحتوى للعملاء الذين اشتروا هذا المنتج من قبل

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

سيعرض البرنامج النصي التالي المحتوى على صفحة المنتج للعملاء العائدين الذين اشتروا نفس المنتج في الماضي. مرة أخرى ، نقوم بتحرير ملف single-product.php :

 get_header ("متجر") ؛
 بينما (have_posts ()):
 المنشور()؛
 wc_get_template_part ('محتوى'، 'منتج واحد')؛
 في غضون ذلك // نهاية الحلقة.
 $ current_user = wp_get_current_user () ،
 if (wc_customer_bought_product ($ current_user-> user_email، $ current_user-> ID، $ product-> get_id ())):
 صدى '<div class = "المستخدم-اشترى"> & هارتس؛ مهلا ' . $ current_user-> first_name. ، لقد اشتريت هذا من قبل. شراء مرة أخرى باستخدام هذه القسيمة: <b> PURCHASE_AGAIN_21 </b> </div> '؛
 إنهاء إذا؛
 get_footer ("متجر") ؛ 

3. إزالة زر الإضافة إلى عربة التسوق بناءً على كمية المنتج والسعر الإجمالي لسلة التسوق

مثال آخر مثير للاهتمام إذا كنت ترغب في تخصيص قوالب WooCommerce برمجيًا هو إضافة زر عربة التسوق اعتمادًا على عدد العناصر التي يشتريها العميل بالإضافة إلى السعر الإجمالي لعربة التسوق.

في هذه الحالة ، سنصل إلى حلقة WooCommerce باستخدام ملف موجود داخل مجلد الحلقة في دليل القوالب. ما عليك سوى إنشاء ملف add-to-cart.php ضمن مجلد يسمى loop ، ضمن مجلد woocommerce لموضوع طفلك ، والصق هذا البرنامج النصي:

 إذا (! المعرفة ("أبسبات")) {
 خروج؛
 }
 منتج $ عالمي؛
 $ count = WC () -> cart-> get_cart_contents_count () ؛
 total_price = WC () -> عربة التسوق-> get_cart_total () ؛
 preg_match_all ('! \ d +!'، $ total_price، $ مباريات) ؛
 $ to_int = intval ($ تطابق [0] [1]) ؛
 إذا ($ to_int> 500) {
 صدى "تجاوز الحد الأقصى لإجمالي سلة التسوق" ؛
 }
 elseif ($ count <10) {
 صدى application_filters (
 'woocommerce_loop_add_to_cart_link' ، // WPCS: XSS حسنًا.
 سبرينتف (
 "<a href="٪s" data-quantity="٪s" class="٪s" ٪s>٪ s </a> '،
 esc_url ($ product-> add_to_cart_url ()) ،
 esc_attr (isset ($ args ['quantity'])؟ $ args ['quantity']: 1) ،
 esc_attr (isset ($ args ['class'])؟ $ args ['class']: 'button')،
 isset ($ args ['attributes'])؟ wc_implode_html_attributes ($ args ['attributes']): ''،
 esc_html ($ product-> add_to_cart_text ())
 )، $ product، $ args)؛
 }
 آخر{
 صدى "تجاوز حد الكمية" ؛
 }

في هذه الحالة ، نضيف منطق if() الشرطي للتحقق مما إذا كان هناك أكثر من 10 عناصر مضافة إلى سلة التسوق ، والسعر الإجمالي للعربة لا يزيد عن 500 دولار.

كما ترى ، نحن ندخل في نطاق فئة WooCommerce ندعو كائن WooCommerce بهذه الطريقة: WC()->cart . بهذه الطريقة ، يمكنك استرداد بعض المعلومات لإضافة زر عربة التسوق إلى صفحة المتجر أم لا ، بناءً على الشروط الخاصة بك.

هذه هي النتيجة عند تطبيق كلا التقييد الشرطي:

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

4. تحرير ملفات قوالب البريد الإلكتروني WooCommerce

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

سنضيف الرابط إلى رأس تخطيط البريد الإلكتروني ، لذلك نحتاج إلى نسخة من ملف email-header.php ، الموجود في مجلد البريد الإلكتروني الخاص بالدليل الفرعي للقوالب في WooCommerce.

قم بإنشاء مجلد جديد على نسق الطفل الخاص بك وقم بلصق الملف هناك بنفس الاسم. سترى علامتي البداية <! - header–> و <! - end header–> ، وهنا ستضيف الارتباط:

 <! - رأس ->
 <table border = "0" cellpadding = "0" cellspacing = "0" width = "100٪">
 <tr>
 <td>
 <h1> <؟ php echo $ email_heading؛ ؟> </h1>
 <h3>
 <؟ php echo '<span class = "my-link"> <a href="#login-URL"> تسجيل الدخول إلى حسابك </a> </span>'؛؟>
 </h3>
 </td>
 </tr>
 </table>
 <! - رأس النهاية →

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

لمعاينة القوالب ، نوصيك باستخدام مكون إضافي لمعاينة البريد الإلكتروني. ستجد هنا بعض مكونات البريد الإلكتروني الإضافية التي يمكنك استخدامها.

5. كيفية تطبيق نمط CSS على قوالب البريد الإلكتروني لـ WooCommerce

بديل آخر مثير للاهتمام هو تخصيص نمط قوالب WooCommerce برمجيًا. بمجرد تحرير ترميز HTML ، يمكنك إضافة بعض أنماط CSS إلى قوالب البريد الإلكتروني. بالنظر إلى أن CSS المضمنة ليست ممارسة موصى بها ، سنحتاج إلى استخدام ملف email-styles.php . هذا هو الملف الذي يتعامل مع CSS لقوالب البريد الإلكتروني.

لتطبيق رمز CSS مخصص على رسائل البريد الإلكتروني ، انسخ هذا الملف من مجلدات البرنامج المساعد WooCommerce والصقه في مجلد WooCommerce الخاص بك. هذا ملف PHP ، لذا ستتمكن من استخدام المتغيرات والوظائف وبناء بيان المنطق الخاص بك وتطبيقها على الأنماط:

 أ {
 اللون: <؟ php echo esc_attr ($ link_color)؛ ؟>؛
 وزن الخط: عادي ؛
 زخرفة النص: تسطير ؛
 }

وهذا هو محدد الارتباط المخصص:

 .my-link> a: nth-child (1) {
 اللون الابيض؛
 حجم الخط: 14 بكسل ؛
 }

استنتاج

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

هناك طريقتان رئيسيتان لتخصيص قوالب WooCommerce برمجيًا:

• مع خطافات
• الكتابة فوق القوالب

لقد قمنا بمقارنة كلتا الطريقتين وعرضنا لك عدة أمثلة. يمكنك استخدام البرامج النصية كقاعدة واللعب لتخصيصها وتطبيقها على متجرك.

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