WooCommerce: استكشاف Codebase

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

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

إذا كان بإمكانك كتابة القليل من PHP (معظم Business Bloomer مصنوع من PHP Snippets) ، فأنت بالتأكيد بحاجة إلى البحث في النواة بين الحين والآخر. خلاف ذلك ، لن يكون Stackoverflow كافياً من تلقاء نفسه.

إذا حدث أن رأيت واستخدمت أدلة WooCommerce Visual Hook مثل تلك الخاصة بصفحة المنتج الفردي ، حسنًا ، يتم إنشاؤها (يدويًا ...) من الكود نفسه عن طريق تنفيذ العديد من عمليات البحث في PHP. أنا شخصياً احتفظ بنسخة من أحدث ملفات المكونات الإضافية في تنزيلات جهاز الكمبيوتر الخاص بي ، بحيث يمكنني دائمًا البحث فيها عند البحث عن خطاف أو وظيفة معينة.

لذا ، تابع معي في هذه المقالة بينما نستكشف قاعدة بيانات WooCommerce ، وكيف يتم هيكلتها ، وبعض أسرارها الداخلية!

أين تجد الرمز

لاستكشاف قاعدة بيانات WooCommerce ، لديك عدة بدائل ، بخلاف تنزيل ملفات المكونات الإضافية من https://wordpress.org/plugins/woocommerce

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

هذه الطريقة رائعة لعمليات البحث السريع عن التعليمات البرمجية ووضع إشارة مرجعية على ملفات التعليمات البرمجية للرجوع إليها في تاريخ لاحق. يمكنك أيضًا وضع إشارة مرجعية على رقم سطر معين. على سبيل المثال ، للارتباط بطريقة العرض الخاصة بكتلة Checkout Gutenberg (والتي تبدأ في السطر 66) ، يمكنك استخدام عنوان URL هذا: https://plugins.trac.wordpress.org/browser/woocommerce/trunk/packages/woocommerce-blocks/src /BlockTypes/Checkout.php#L66

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

للقيام بذلك ، ستحتاج إلى استخدام سطر الأوامر لتنزيل مستودع WooCommerce وإدارته. إذا كنت تستخدم نظام تشغيل macOS أو Linux ، فيمكنك استخدام تطبيق Terminal المدمج. يعد Git Bash اختيارًا ممتازًا لمستخدمي Windows.

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

 بوابة استنساخ https://github.com/woocommerce/woocommerce.git

يمكنك إما استنساخه مباشرة في دليل إضافات WordPress المحلية (الموجود في / wp-content / plugins /) ، أو بدلاً من ذلك ، استنساخ WooCommerce إلى مجلد عام على جهاز الكمبيوتر الخاص بك وربطه برمز إلى مجلد ملحقات WordPress المحلي. ميزة هذه الطريقة هي أنه يمكنك بسهولة إضافة / إزالة WooCommerce من مثيل WordPress محلي معين. إنه ليس مرتبطًا بواحد محدد.

بمجرد استنساخ الريبو ، تأكد أيضًا من تشغيل الأمر التالي لتثبيت تبعيات البرنامج المساعد والحزم الخارجية.

 تثبيت npm && composer install

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

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

هيكل الكود

تم تنظيم البرنامج المساعد WooCommerce في عدة مجلدات من المستوى الأعلى:

• /أصول
• / i18n
• /يشمل
• / ليب
• / الحزم
• / عينة البيانات
• / src
• / قوالب
• /بائع

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

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

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

الجوهر الرئيسي لوظيفة البرنامج المساعد موجود في مجلدات include و lib والحزم و src . على وجه الخصوص ، يحتوي المجلد include على القائمة الرئيسية لفئات مكونات PHP الإضافية لمجموعة متنوعة من ميزات WooCommerce.

أيضًا ، توجد جميع تعريفات كتلة Gutenberg المتوفرة في WooCommerce في مجلد الحزم.

استكشاف الكود

ملف البرنامج المساعد الرئيسي في المجلد الجذر هو woocommerce.php . يعمل هذا على تمهيد أداة التحميل التلقائي والحزم.

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

بمجرد تحميل جميع التعليمات البرمجية التي تم تحميلها تلقائيًا ، يتم تضمين فئة WooCommerce الرئيسية وإنشاء مثيل لها عبر:

 WooCommerce :: مثيل ()

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

البحث في Codebase

توفر معظم برامج تحرير التعليمات البرمجية الحديثة وظائف بحث قوية لتتمكن من التنقل في قاعدة التعليمات البرمجية. بالنسبة للأمثلة الموضحة أدناه ، فإننا نستخدم VS Code ولكن لا يهم كثيرًا لأن جميع المحررين تقريبًا يوفرون وظائف بحث مماثلة.

يمكننا معرفة الكثير عن مصدر الشفرة من خلال إجراء بعض عمليات البحث الأساسية. على سبيل المثال ، إذا بحثنا عن الخطافات المتوفرة ، فإن البحث عن " add_filter " يؤدي إلى إرجاع حوالي 380 خطاف مرشح!

قارن ذلك بخطافات الإجراء التي ترجع أكثر في حوالي 618 تطابقًا لمصطلح البحث " add_action ".

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

على سبيل المثال ، تعرض نتيجة البحث التالية مطابقات لـ " WooCommerce " حيث تكون كلمة كاملة وحساسة لحالة الأحرف وموجودة فقط في ملف PHP (يتم تجاهل أنواع الملفات الأخرى).

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

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

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

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

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

على سبيل المثال ، من السهل البحث عن أسماء الفئات التي تحتوي على "WC" في البداية (مثل "WC_Structured_Data"). ولكن ماذا عن الفئات التي تحتوي على كلمة "WC" في أي مكان في اسم الفصل؟ لذلك ، مطلوب Regex لأنك تحتاج إلى البحث عن السلسلة "class" متبوعة بمسافة ، والتي تليها سلسلة تحتوي على "WC" في أي مكان بالداخل.

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

مثال سريع على تخصيص WooCommerce

لنفترض أنك بحاجة إلى تخصيص صفحة Checkout ، وتحتاج تحديدًا إلى عرض عنوان فرعي تحت عنوان "تفاصيل الفوترة".

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

حصلت على نتيجتين بحث ، لكن واحدة فقط ذات صلة بصفحة الخروج. لذلك ، أفتح هذا الملف المحدد (form-billing.php) ، في هذا السطر المحدد (28):

... ولاحظ أن هناك إجراء () مباشرة بعد العنوان!

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

/**
 * @snippet       Add Subtitle Below Billing Heading @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_before_checkout_billing_form', 'bbloomer_billing_details_subtitle' );

function bbloomer_billing_details_subtitle() {
   echo '<h4>This is a subtitle</h4>';
}

وإليك "بعد":

استمر في الاستكشاف!

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