WooCommerce: สำรวจ Codebase

WooCommerce เป็นปลั๊กอินที่มีฐานรหัสขนาดใหญ่และซับซ้อน

หากคุณเป็นนักพัฒนาซอฟต์แวร์ การทำความเข้าใจโค้ดพื้นฐานอย่างละเอียดจะเป็นประโยชน์อย่างยิ่ง และเกือบจะจ่ายเงินปันผลได้อย่างแน่นอนในระยะยาว

หากคุณสามารถเขียน PHP ได้เล็กน้อย ( Business Bloomer ส่วนใหญ่ทำจาก PHP Snippets) คุณจะต้องค้นหา แกนหลัก เป็นระยะๆ มิฉะนั้น Stackoverflow จะไม่เพียงพอในตัวเอง

หากคุณบังเอิญเห็นและใช้ WooCommerce Visual Hook Guides เช่นคู่มือสำหรับ Single Product Page สิ่งเหล่านี้ถูกสร้างขึ้นอย่างง่าย ๆ (ด้วยตนเอง…) จากโค้ดโดยดำเนินการค้นหา 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 ไปยังไดเร็กทอรีในเครื่องบนคอมพิวเตอร์ของคุณ:

 โคลน git https://github.com/woocommerce/woocommerce.git

คุณสามารถโคลนได้โดยตรงในไดเร็กทอรีปลั๊กอิน WordPress ในเครื่องของคุณ (อยู่ใน /wp-content/plugins/) หรือโคลน WooCommerce ไปที่โฟลเดอร์ทั่วไปบนคอมพิวเตอร์ของคุณและเชื่อมโยงไปยังโฟลเดอร์ปลั๊กอิน WordPress ในเครื่องของคุณ ข้อดีของวิธีนี้คือคุณสามารถเพิ่ม/ลบ WooCommerce จากอินสแตนซ์ WordPress ในพื้นที่โดยเฉพาะได้ ไม่ได้ผูกติดอยู่กับสิ่งใดสิ่งหนึ่ง

เมื่อคุณโคลน repo แล้ว ตรวจสอบให้แน่ใจว่าคุณได้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้งการพึ่งพาปลั๊กอินและแพ็คเกจภายนอก

 npm install && การติดตั้งตัวแต่ง

นี่เป็นสิ่งสำคัญเนื่องจากโค้ด WooCommerce ทั้งหมดไม่รวมอยู่ในที่เก็บหลัก ตัวอย่างเช่น บล็อก Gutenberg มีอยู่ในที่เก็บแยกต่างหากโดยค่าเริ่มต้น หากต้องการรวมไว้ใน codebase คุณจะต้องใช้คำสั่งด้านบนเพื่อติดตั้งโดยเฉพาะ

เมื่อติดตั้งการพึ่งพาและที่เก็บข้อมูลภายนอกทั้งหมดแล้ว จะพร้อมใช้งานทันที นี่คือรหัสบล็อก Checkout เดียวกันกับที่เราดูก่อนหน้านี้ใน WordPress Trac แต่ตอนนี้เราสามารถเข้าถึงได้ในเครื่องแล้ว

โครงสร้างรหัส

ปลั๊กอิน WooCommerce ถูกจัดเป็นโฟลเดอร์ระดับบนสุดหลายโฟลเดอร์:

• /ทรัพย์สิน
• /i18n
• /รวมถึง
• /lib
• /แพ็คเกจ
• /sample-data
• /src
• /แม่แบบ
• /ผู้ขาย

โฟลเดอร์ แอสเซทประกอบด้วยชุดสไตล์ ฟอนต์ รูปภาพ และ JavaScript จำนวนมาก ซึ่งช่วยในเรื่องความสวยงามของปลั๊กอินและการโต้ตอบทั้งในผู้ดูแลระบบ WordPress และในส่วนหน้า

โฟลเดอร์ปลั๊กอินมาตรฐาน เช่น i18n , sample-data และ vendor มีฟังก์ชันการทำงานสำหรับคุณลักษณะการทำให้เป็นสากล ข้อมูลผลิตภัณฑ์ตัวอย่าง และไลบรารีของบุคคลที่สามตามลำดับ

โฟลเดอร์ เทมเพลต ประกอบด้วยเทมเพลต PHP ที่มีโครงสร้างทั้งหมดที่ใช้สำหรับเนื้อหา WooCommerce ต่างๆ เช่น รถเข็น การชำระเงิน อีเมล ฯลฯ แต่ละเทมเพลตสามารถเขียนทับได้โดยการคัดลอกไปยังตำแหน่งที่เกี่ยวข้องในธีมที่กำหนดเอง (โดยปกติคือธีมย่อย) ดังนั้นจึงควรค่าแก่การเรียกดู ผ่านโฟลเดอร์นี้โดยละเอียดเพื่อดูเทมเพลตที่มีอยู่ทั้งหมดที่สามารถปรับแต่งได้ โปรดทราบ: การปรับแต่ง WooCommerce ผ่านตัวอย่างดีกว่าการแทนที่เทมเพลต

แกนหลักของฟังก์ชันปลั๊กอินมีอยู่ในโฟลเดอร์ รวม , lib , แพ็คเกจ และ src โดยเฉพาะอย่างยิ่ง โฟลเดอร์ include มีรายการหลักของคลาสปลั๊กอิน PHP สำหรับคุณสมบัติ WooCommerce ที่หลากหลาย

นอกจากนี้ คำจำกัดความบล็อกของ Gutenberg ทั้งหมดที่มีอยู่ใน WooCommerce ยังอยู่ในโฟลเดอร์แพ็คเกจ

สำรวจรหัส

ไฟล์ปลั๊กอินหลักในโฟลเดอร์รูทคือ woocommerce.php บูตสแตรปตัวโหลดอัตโนมัติและแพ็คเกจ

ตัวโหลดอัตโนมัติจัดการการโหลดแพ็คเกจและคลาสที่อยู่ในไดเร็กทอรี /src แพ็คเกจประกอบด้วยโค้ดที่พัฒนานอกปลั๊กอินหลักของ WooCommerce เช่น บล็อกตัวแก้ไข

เมื่อโหลดโค้ดที่โหลดอัตโนมัติทั้งหมดแล้ว คลาส WooCommerce หลักจะถูกรวมและสร้างอินสแตนซ์ผ่าน:

 WooCommerce::instance()

สิ่งนี้จะสร้างอินสแตนซ์ใหม่ของคลาส WooCommerce และเก็บไว้ในตัวแปรคลาสคงที่ อินสแตนซ์ใหม่นี้จะถูกส่งคืนและเก็บไว้ในตัวแปรส่วนกลางเพื่อให้สามารถเข้าถึงได้จากทุกที่

ค้นหา Codebase

โปรแกรมแก้ไขโค้ดที่ทันสมัยส่วนใหญ่มีฟังก์ชันการค้นหาที่มีประสิทธิภาพเพื่อให้สามารถนำทางไปยังฐานโค้ดได้ สำหรับตัวอย่างที่แสดงด้านล่าง เรากำลังใช้ VS Code แต่ไม่สำคัญหรอกว่าเครื่องมือแก้ไขเกือบทั้งหมดมีฟังก์ชันการค้นหาที่คล้ายคลึงกัน

เราสามารถค้นหา codebase ได้มากมายโดยทำการค้นหาพื้นฐาน ตัวอย่างเช่น หากเราค้นหาว่ามีตะขอใดบ้าง การค้นหา ' add_filter ' จะส่งกลับตัวกรองประมาณ 380 ตัว!

เปรียบเทียบสิ่งนั้นกับ action hooks ซึ่งส่งคืนมากกว่าที่ประมาณ 618 รายการที่ตรงกันสำหรับข้อความค้นหา ' add_action '

มีขอบเขตมากมายในการปรับแต่งการค้นหาของเรา เช่น การค้นหาเฉพาะไฟล์บางประเภท และสำหรับสตริงที่ตรงกับกรณีของข้อความค้นหาโดยเฉพาะ และหากเป็นทั้งคำ

เช่น ผลการค้นหาต่อไปนี้แสดงการจับคู่สำหรับ ' WooCommerce ' ซึ่งเป็นทั้งคำ ตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ และอยู่ในไฟล์ PHP เท่านั้น (ไฟล์ประเภทอื่นๆ จะถูกละเว้น)

เหตุผลหนึ่งที่ VS Code ได้รับความนิยมอย่างมากก็เนื่องมาจากส่วนขยายที่มีอยู่จำนวนมาก และมีหลายส่วนขยายที่สามารถช่วยในการนำทางด้วยโค้ด ส่วนขยายหนึ่งที่โดดเด่นคือบุ๊กมาร์ก

ช่วยให้คุณสามารถบุ๊กมาร์กตำแหน่งในโค้ดของคุณ เพื่อให้คุณสามารถย้อนกลับไปยังส่วนโค้ดที่ต้องการได้ด้วยการคลิกปุ่ม มันมีประโยชน์มาก โดยเฉพาะอย่างยิ่งสำหรับ codebase ขนาดใหญ่ เช่น WooCommerce

ในภาพหน้าจอต่อไปนี้ฉันได้บุ๊กมาร์ก WooCommerce action hooks ไว้สองสามอันเพื่อการเข้าถึงที่รวดเร็วซึ่งฉันต้องการกลับมาดูในภายหลัง

เพียงคลิกที่รายการใดๆ ที่คั่นหน้าไว้ในแผง explorer จะนำคุณไปยังบรรทัดของรหัสเฉพาะโดยตรง

มีคำศัพท์อื่นๆ อีกมากมายที่คุณสามารถค้นหาได้ บางทีคุณอาจต้องการสำรวจว่ามีคลาส WooCommerce ใดบ้าง การค้นหาประเภทนี้สามารถทำให้มีประสิทธิภาพมากขึ้นเมื่อรวมกับ Regex

ตัวอย่างเช่น ง่ายต่อการค้นหาชื่อคลาสที่มี 'WC' ที่จุดเริ่มต้น (เช่น 'WC_Structured_Data') แล้วคลาสที่มี ' WC ' ในชื่อคลาสล่ะ สำหรับสิ่งนั้น จำเป็นต้องมี Regex เนื่องจากคุณจะต้องค้นหาสตริง 'class' ตามด้วยช่องว่าง ซึ่งตามด้วยสตริงที่มี 'WC' ที่ใดก็ได้ภายใน

ด้วย Regex คุณยังสามารถทำสิ่งต่างๆ เช่น ค้นหาชื่อฟังก์ชัน (หรือบางส่วนของชื่อ) ที่เป็นวิธีการของคลาสและไม่ใช่ฟังก์ชันแบบสแตนด์อโลน ความเป็นไปได้ไม่มีที่สิ้นสุด ดังนั้นจึงขอแนะนำให้มีความรู้เกี่ยวกับ Regex ในการทำงานเป็นอย่างดี

ตัวอย่างการปรับแต่ง WooCommerce อย่างรวดเร็ว

สมมติว่าคุณต้องปรับแต่งหน้าการชำระเงิน และจำเป็นต้องแสดงคำบรรยายใต้หัวข้อ "รายละเอียดการเรียกเก็บเงิน" โดยเฉพาะ

สิ่งที่คุณสามารถทำได้คือการค้นหาไฟล์ปลั๊กอิน WooCommerce สำหรับสตริง ' รายละเอียดการเรียกเก็บเงิน ' เพื่อดูว่ามี "บางอย่าง" ที่คุณสามารถใช้ในโค้ดที่กำหนดเองของคุณหรือไม่ ในกรณีนี้ ฉันจะใช้โปรแกรมแก้ไขโค้ด NotePad++ เพื่อแสดงว่าซอฟต์แวร์ใดๆ ถูกต้อง:

ฉันได้รับผลการค้นหา 2 รายการ แต่มีรายการเดียวที่เกี่ยวข้องกับหน้าชำระเงิน ดังนั้นฉันจึงเปิดไฟล์นั้น (form-billing.php) ที่บรรทัดนั้น (28):

…และสังเกตว่ามี do_action() หลังส่วนหัว!

สิ่งนี้ทำให้เรามีโอกาส "แทรก" โค้ดบางส่วนในนั้นโดยไม่ต้องแทนที่ไฟล์เทมเพลตทั้งหมด ฉันไปที่ 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>';
}

และนี่คือ "หลัง":

ให้สำรวจ!

เราเพิ่งขีดข่วนพื้นผิวของสิ่งที่ค่อนข้างตรงไปตรงมาว่าเป็น codebase ที่ใหญ่มาก คุณจะใช้เวลานานในการค้นหาโค้ดทุกบรรทัด แต่หวังว่าฉันจะสามารถกระตุ้นความอยากอาหารของคุณให้มากพอที่จะสำรวจฐานโค้ด WooCommerce ที่น่าสนใจต่อไปและเรียนรู้เพิ่มเติมอีก!