كيفية إضافة رمز مخصص إلى WooCommerce

نشرت: 2022-01-01

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

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

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

لماذا تضيف وتخصص التعليمات البرمجية في WooCommerce؟

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

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

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

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

كيفية إضافة رمز مخصص إلى WooCommerce

هناك طرق مختلفة لإضافة مقتطفات التعليمات البرمجية إلى WooCommerce :

  1. مع محرر قوالب WordPress المدمج
  2. باستخدام مكون إضافي مخصص
  3. استخدام FTP للوصول إلى ملفات السمات
  4. من خلال تكوين ملفات قالب WooCommerce
  5. عن طريق إنشاء مكون إضافي مخصص جديد

دعونا نلقي نظرة على كل طريقة خطوة بخطوة.

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

1) إضافة Custom باستخدام محرر WordPress المدمج

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

لفتح ملف function.php في محرر السمات ، انتقل إلى المظهر> محرر السمات في لوحة القيادة . ثم ، انقر فوق function.php في الشريط الجانبي لملفات السمات باتجاه اليمين.

إضافة كود مخصص إلى ووردبريس - وظائف php

إضافة كود مخصص إلى ملف jobs.php

الآن ، يمكنك إضافة رمز مخصص إلى WooCommerce من محرر السمات. بالنسبة لهذا العرض التوضيحي ، سنقوم بتغيير النص الافتراضي "لا توجد منتجات في عربة التسوق" لـ "سلة التسوق الخاصة بك فارغة حاليًا ، نوصي بمراجعة منتجاتنا المميزة!":

 remove_action ('woocommerce_cart_is_empty'، 'wc_empty_cart_message'، 10) ؛
add_action ('woocommerce_cart_is_empty'، 'quadlayers_empty_cart_message'، 10) ؛

الدالة quadlayers_empty_cart_message () {
$ html = '<div class = "col-12 offset-md-1 col-md-10"> <p class = "cart-blank">'؛
$ html. = wp_kses_post (application_filters ('wc_empty_cart_message'، __ ('سلة التسوق الخاصة بك فارغة حاليًا ، نوصي بمراجعة منتجاتنا المميزة!'، 'woocommerce'))) ؛
صدى $ html. "</p> </div>"؛
}

ما عليك سوى لصق هذا البرنامج النصي في محرر السمات وتحديث الملف لتطبيق التغييرات.

أضف رمزًا مخصصًا إلى woocommerce - لا توجد عربات في وظيفة النص

تحقق من الواجهة الأمامية وسترى شيئًا مثل هذا:

تعد إضافة الكود شيئًا واحدًا ، ولكن من المهم أيضًا فهم كيفية عمل الكود.

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

 $ html. = wp_kses_post (application_filters ('wc_empty_cart_message'، __ ('سلة التسوق الخاصة بك فارغة حاليًا ، نوصي بمراجعة منتجاتنا المميزة!'، 'woocommerce'))) ؛

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

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

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

2) إضافة رمز باستخدام الإضافات

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

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

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

إضافة رمز مخصص إلى وورد - تثبيت مقتطفات التعليمات البرمجية

بعد التنشيط ، تكون جاهزًا لإضافة رمز وتخصيص متجر WooCommerce الخاص بك. انتقل إلى Snippets> Add New لإضافة رمز جديد.

إضافة رمز مخصص إلى وورد - إضافة مقتطف جديد

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

 remove_action ('woocommerce_after_shop_loop_item'، 'woocommerce_template_loop_add_to_cart') ؛

remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_add_to_cart'، 30) ؛ 

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

وبالمثل ، يمكنك أيضًا اختيار تعيين أولوية لشفرتك وإضافة وصف مقتطف بالإضافة إلى العلامات.

أضف رمزًا مخصصًا إلى woocommerce - معلومات الرمز التجريبي

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

إذا كنت ترغب في إلغاء تنشيط التعليمات البرمجية الخاصة بك أو تنشيطها بشكل فردي ، فانتقل إلى Snippets> All Snippets ويمكنك بشكل فردي تعطيل أو تمكين أي من المقتطفات الخاصة بك.

إضافة رمز مخصص إلى ووردبرس - تمكين المقتطف تعطيل

3) إضافة رمز مخصص باستخدام عميل FTP

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

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

أولاً ، افتح FileZilla أو عميل FTP المفضل لديك وقم بتوصيله بموقعك على الويب. بعد ذلك ، حدد موقع ملفات السمات الخاصة بك في دليل موقع الويب الخاص بك. توجد هذه عادةً في دليل / wp-content / theme في الخادم الخاص بك. انقر فوق مجلد السمة الحالية الخاصة بك أو السمة الفرعية التي قد تقوم بتكوينها.

أضف كود مخصص إلى woocommerce - filezilla wp

افتح مجلد القالب الخاص بك ، وانقر بزر الماوس الأيمن على ملف function.php الموجود بداخله ، ثم اضغط على عرض / تحرير.

إضافة كود مخصص إلى woocommerce - وظائف بروتوكول نقل الملفات

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

 remove_action ('woocommerce_after_shop_loop_item'، 'woocommerce_template_loop_add_to_cart') ؛ 

remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_add_to_cart'، 30) ؛ 

بديل آخر مثير للاهتمام لإضافة التعليمات البرمجية هو تخصيص ملفات قالب WooCommerce.

4) أضف رمزًا عن طريق تخصيص ملفات قالب WooCommerce

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

والخبر السار هو أنه يمكنك تحرير ملفات قالب WooCommerce بشكل مشابه لما ورد أعلاه باستخدام محرر المكون الإضافي WordPress المدمج. للوصول إليه ، في لوحة تحكم المسؤول ، انتقل إلى الإضافات> محرر المكوِّن الإضافي .

بعد ذلك ، استخدم القائمة المنسدلة Select Plugins في الجزء العلوي الأيمن ، واختر WooCommerce ، وانقر فوق تحديد.

سيؤدي هذا إلى تحديث قائمة ملفات البرنامج المساعد أدناه والتي يمكنك استخدامها لتهيئة ملفات وقوالب WooCommerce. بالنسبة إلى العرض التوضيحي الخاص بنا ، سنقوم بتحرير صفحة شكرًا لك على الخروج . لذلك ضمن قائمة ملفات البرنامج المساعد ، حدد Checkout> thankyou.php .

بعد ذلك ، قم بالتمرير لأسفل وقم بتغيير نص الترتيب المستلم عن طريق استبدال النص في هذا السطر:

 <p class = "woocommerce-إشعار woocommerce-إشعار - نجاح woocommerce-thankyou-order-Received"> <؟ php echo application_filters ('woocommerce_thankyou_order_received_text'، esc_html __ ('شكرًا لك. تم استلام طلبك.'، 'woocommerce' )، باطل )؛ // phpcs: تجاهل WordPress.Security.EscapeOutput.OutputNotEscaped؟> </p>

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

 <p class = "woocommerce-إشعار woocommerce-إشعار - نجاح woocommerce-thankyou-order-Received"> <؟ php echo application_filters ('woocommerce_thankyou_order_received_text'، esc_html __ ('شكرًا لك على الشراء منا. ستتلقى البريد قريبًا بخصوص التعليمات .. '،' woocommerce ') ، خالية) ؛ // phpcs: تجاهل WordPress.Security.EscapeOutput.OutputNotEscaped؟> </p> 

أضف رمزًا مخصصًا إلى woocommerce - شكرًا لك على تحرير الصفحة

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

إذا كنت تريد معرفة المزيد حول تكوين ملفات القوالب ، فراجع دليلنا حول كيفية تخصيص ملفات قالب WooCommerce.

5) أضف رمزًا عن طريق إنشاء مكون إضافي مخصص جديد

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

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

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

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

إنشاء مجلد البرنامج المساعد الجديد لإضافة رمز مخصص إلى WooCommerce

بعد توصيل موقع الويب الخاص بك بـ FTP ، افتح مدير موقعك. ثم انتقل إلى مجلد / wp-content / plugins .

الآن ، قم بإنشاء دليل جديد في مجلد الملحقات وقم بتسميته وفقًا للكود الخاص بك وقم بتوسيعه. في العرض التوضيحي الخاص بنا ، سنطلق عليه اسم Remove-Add-To-Cart .

إضافة كود مخصص في woocommerce - إنشاء دليل

ثم ، انقر بزر الماوس الأيمن فوق المجلد للنقر فوق إنشاء ملف جديد . هنا ، تحتاج إلى إنشاء ملف .php بنفس اسم المجلد الخاص بك. لذلك ، سنقوم بتسمية ملفنا Remove-Add-to-Cart.php.

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

بعد ذلك ، سنضيف بضعة أسطر من التعليمات البرمجية لإضافة اسم البرنامج المساعد والوصف واسم المؤلف إليه:

 <؟ php
/ **
* اسم البرنامج المساعد: إزالة إضافة إلى عربة التسوق
* الوصف: إضافة إضافة إزالة إلى سلة التسوق
* المؤلف: سجال شريسثا
* الإصدار: 1.0
* /

/ * ضع مقتطفاتك أدناه هنا. * /
/ * ضع مقتطفاتك أعلاه هنا. * /
؟> 

أضف رمزًا مخصصًا في woocommerce - أضف وصفًا إلى ملف php

إضافة رمز مخصص إلى البرنامج المساعد الجديد

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

 <؟ php
/ **
* اسم البرنامج المساعد: إزالة إضافة إلى عربة التسوق
* الوصف: إضافة إضافة إزالة إلى سلة التسوق
* المؤلف: سجال شريسثا
* الإصدار: 1.0
* /

/ * ضع مقتطفاتك أدناه هنا. * /

remove_action ('woocommerce_after_shop_loop_item'، 'woocommerce_template_loop_add_to_cart') ؛

remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_add_to_cart'، 30) ؛
/ * ضع مقتطفاتك أعلاه هنا. * /
؟> 

بعد ذلك ، احفظ ملفك وسترى أن المكون الإضافي مدرج في WP Admin Dashboard ضمن صفحة الملحقات .

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

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

ما الطريقة التي يجب أن تستخدمها لإضافة رمز مخصص؟

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

هذه الطريقة أقل خطورة بكثير ويمكن أن يكون لها مزايا إضافية مثل:

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

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

أفضل الممارسات عند إضافة كود مخصص إلى WooCommerce

1) استخدام ثيمات الطفل

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

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

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

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

إنشاء قالب فرعي باستخدام ملحق

يعد إنشاء قالب فرعي باستخدام مكون إضافي عملية مباشرة وسهلة الاستخدام للمبتدئين. هناك العديد من المكونات الإضافية التي يمكنك استخدامها. في هذا العرض التوضيحي ، سنستخدم Child Theme Wizard .

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

إضافة رمز مخصص إلى ووردبريس - تثبيت معالج موضوع الطفل

يمكنك بعد ذلك الوصول إلى ميزات البرنامج المساعد بالنقر فوق أدوات> معالج موضوع الطفل.

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

ثم أضف تفاصيل مثل العنوان والوصف وعنوان URL والمزيد. بمجرد الانتهاء ، انقر فوق Create Child Theme ويجب أن تكون قد انتهيت.

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

أضف رمزًا مخصصًا إلى woocommerce - تنشيط السمة التابعة

هذا هو! يمكنك الآن إضافة التعليمات البرمجية المخصصة الخاصة بك بحرية إلى ملف function.php الخاص بك ضمن السمة الفرعية التي تم إنشاؤها حديثًا.

2) استخدام إضافات WordPress Backup وإعداد النسخ الاحتياطية

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

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

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

3) التعرف على كيفية عمل الكود وكيفية استخدام وظائف ووظائف WooCommerce

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

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

 add_action ('woocommerce_before_single_product'، 'quadlayers_add_message') ؛
add_filter ('woocommerce_is_purchasable'، 'quadlayers_block_admin_purchase') ؛
الدالة quadlayers_block_admin_purchase ($ block) {
إذا (is_user_logged_in ()): إرجاع صحيح ؛
آخر: إرجاع خطأ ؛
إنهاء إذا؛
}

وظيفة quadlayers_add_message () {
if (! is_user_logged_in ()): echo '<H2> الرجاء تسجيل الدخول لشراء هذا المنتج </ h2>'؛
إنهاء إذا؛
}

هذه هي الطريقة التي تعمل بها خطاطيف WooCommerce هنا:

  • يتم استخدام خطاف الإجراء لطباعة رسالة باستخدام وظيفة QuadLayers_add_message وظيفة بينما يستخدم خطاف المرشح وظيفة quadlayers_block_admin_purchase لتعطيل زر Add to Cart
  • يتم استخدام عبارة IF في كلتا الوظيفتين للتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول أم لا
  • يتم تطبيق الخطاف woocommerce_is_purchasable إذا كانت عبارة IF الشرطية ترجع صحيحًا
  • لقد طبقنا أيضًا بعض CSS الإضافية لتغيير نمط نص الرسالة بالإضافة إلى إضافة ألوان مخصصة

دعنا نمضي قدمًا ونضيف هذا إلى ملف function.php لموضوعنا الفرعي:

هذا يعطينا هذه النتيجة في الواجهة الأمامية:

إذا كنت تريد معرفة كيفية عمل كود WooCommerce المخصص ، فراجع دليلنا حول كيفية استخدام خطافات WC.

استنتاج

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

في هذا الدليل ، رأينا طرقًا مختلفة لإضافة مقتطفات التعليمات البرمجية:

  • باستخدام محرر السمات المدمج لتحرير ملف jobs.php
  • مع مكون WordPress الإضافي المخصص لإضافة مقتطفات التعليمات البرمجية المخصصة
  • استخدام FTP للوصول إلى ملف function.php يدويًا
  • استخدام محرر البرنامج المساعد لتحرير قوالب WooCommerce يدويًا
  • استخدام FTP لإنشاء مكون إضافي جديد برمز مخصص.

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

هل أضفت مقتطفات إلى متجر WooCommerce الخاص بك؟ ما الطريقة التي استخدمتها؟ هل تعرف أي طرق أخرى يجب أن نضيفها؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!

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

  • كيفية تحرير صفحة منتج WooCommerce برمجيًا
  • تحرير WooCommerce My Account Page برمجيًا
  • كيفية تحرير صفحة WooCommerce Shop برمجيًا