WooCommerce: Menjelajahi Basis Kode

Diterbitkan: 2021-09-15
Basis kode WooCommerce

WooCommerce adalah plugin dengan basis kode yang besar dan rumit.

Jika Anda seorang pengembang, memahami kode yang mendasarinya secara detail sangat bermanfaat, dan hampir pasti akan membayar dividen dalam jangka panjang.

Jika Anda dapat menulis sedikit PHP (sebagian besar Business Bloomer terbuat dari PHP Snippet), Anda pasti perlu mencari intinya sesekali. Jika tidak, Stackoverflow tidak akan cukup dengan sendirinya.

Jika Anda kebetulan melihat dan menggunakan Panduan Kait Visual WooCommerce seperti untuk Halaman Produk Tunggal, yah, itu hanya dibuat (secara manual…) dari kode itu sendiri dengan mengeksekusi banyak pencarian PHP. Saya pribadi menyimpan salinan file plugin terbaru di unduhan PC saya, sehingga saya selalu dapat mencarinya saat mencari pengait atau fungsi tertentu.

Jadi, ikuti saya di artikel ini saat kita menjelajahi basis kode WooCommerce, bagaimana strukturnya, dan beberapa rahasia dalamnya!

Di mana menemukan kodenya?

Untuk menjelajahi basis kode WooCommerce, Anda memiliki beberapa alternatif, selain mengunduh file plugin dari https://wordpress.org/plugins/woocommerce

Pertama, dan paling mudah diakses, adalah menelusuri kode secara online melalui WordPress Trac . Ini adalah cara paling nyaman untuk menavigasi kode karena selalu terbarui dan tersedia secara instan. Yang Anda butuhkan hanyalah koneksi internet dan akses ke browser.

Metode ini sangat bagus untuk pencarian kode cepat dan mem-bookmark file kode untuk referensi di kemudian hari. Anda bahkan dapat menandai nomor baris tertentu juga. misalnya untuk menautkan ke metode render blok Checkout Gutenberg (yang dimulai pada baris 66), Anda dapat menggunakan URL ini: https://plugins.trac.wordpress.org/browser/woocommerce/trunk/packages/woocommerce-blocks/src /BlockTypes/Checkout.php#L66

Opsi lain untuk melihat kode adalah dengan mengkloning repositori resmi WooCommerce GitHub . Ini disarankan jika Anda perlu menjelajahi kode secara lebih rinci secara lokal melalui editor pilihan Anda, karena Anda memiliki akses ke alat pencarian yang lebih canggih.

Untuk melakukan ini, Anda harus menggunakan baris perintah untuk mengunduh dan mengelola repositori WooCommerce. Jika Anda menggunakan macOS atau sistem operasi Linux, Anda dapat menggunakan aplikasi Terminal bawaan. Git Bash adalah pilihan yang sangat baik untuk pengguna Windows.

Aplikasi terminal apa pun yang Anda gunakan, buka, dan jalankan perintah berikut untuk mengkloning WooCommerce ke direktori lokal di komputer Anda:

 git clone https://github.com/woocommerce/woocommerce.git

Anda dapat mengkloningnya langsung ke direktori plugin WordPress lokal Anda (terletak di /wp-content/plugins/), atau sebagai gantinya, mengkloning WooCommerce ke folder umum di komputer Anda dan menghubungkannya ke folder plugin WordPress lokal Anda. Keuntungan dengan metode ini adalah Anda dapat dengan mudah menambah/menghapus WooCommerce dari instance WordPress lokal tertentu. Itu tidak terikat pada yang spesifik.

Setelah Anda mengkloning repo, pastikan Anda juga menjalankan perintah berikut untuk menginstal dependensi plugin dan paket eksternal.

 npm instal && instal komposer

Ini penting karena tidak semua kode WooCommerce disertakan dalam repositori inti. Misalnya, blok Gutenberg terkandung dalam repositori terpisah secara default. Untuk memasukkannya ke dalam basis kode, Anda harus menggunakan perintah di atas untuk menginstalnya secara khusus.

Setelah semua dependensi dan repositori eksternal diinstal, mereka langsung tersedia. Berikut kode blok Checkout yang sama yang kita lihat sebelumnya di Trac WordPress, tetapi sekarang kita memiliki akses ke sana secara lokal.

Struktur Kode

Plugin WooCommerce diatur ke dalam beberapa folder tingkat atas:

  • /aktiva
  • /i18n
  • /termasuk
  • /lib
  • /paket
  • /contoh data
  • /src
  • /templat
  • /penjual

Folder aset berisi banyak koleksi gaya, font, gambar, dan JavaScript yang membantu estetika plugin dan interaktivitas baik di admin WordPress maupun di frontend.

Folder plugin standar seperti i18n , sample-data , dan vendor masing-masing berisi fungsionalitas untuk fitur internasionalisasi, sampel data produk, dan perpustakaan pihak ketiga.

Folder template berisi semua template PHP terstruktur yang digunakan untuk berbagai konten WooCommerce seperti keranjang, checkout, email, dll. Setiap template dapat ditimpa dengan menyalinnya ke lokasi yang relevan dalam tema khusus (biasanya tema anak) sehingga layak untuk dijelajahi melalui folder ini secara detail untuk melihat semua template yang tersedia yang dapat dikustomisasi. Harap dicatat: menyesuaikan WooCommerce melalui cuplikan lebih baik daripada mengganti template.

Inti utama dari fungsionalitas plugin terdapat dalam folder include , lib , packages , dan src . Secara khusus, folder include berisi daftar utama kelas plugin PHP untuk berbagai fitur WooCommerce.

Juga, semua definisi blok Gutenberg yang tersedia di WooCommerce terletak di folder paket.

Menjelajahi kode

File plugin utama di folder root adalah woocommerce.php . Ini mem-bootstrap autoloader dan paket.

Pemuat otomatis mengelola pemuatan paket dan kelas yang terletak di direktori /src. Paket termasuk kode yang dikembangkan di luar plugin inti WooCommerce, seperti blok editor.

Setelah semua kode yang dimuat secara otomatis telah dimuat, kelas WooCommerce utama kemudian dimasukkan dan dipakai melalui:

 WooCommerce::contoh()

Ini membuat instance baru dari kelas WooCommerce dan menyimpannya di dalam variabel kelas statis. Instance baru ini kemudian dikembalikan dan disimpan dalam variabel global sehingga dapat diakses dari mana saja.

Mencari Basis Kode

Kebanyakan editor kode modern menyediakan fungsi pencarian yang kuat untuk dapat menavigasi basis kode. Untuk contoh yang ditunjukkan di bawah ini, kami menggunakan Kode VS tetapi sebenarnya tidak masalah karena hampir semua editor menyediakan fungsi pencarian yang serupa.

Kita dapat mengetahui banyak tentang basis kode dengan melakukan beberapa pencarian dasar. Misalnya jika kita mencari kait apa yang tersedia maka mencari ' add_filter ' menghasilkan sekitar 380 kait filter!

Bandingkan dengan kait tindakan yang menghasilkan lebih banyak lagi sekitar 618 kecocokan untuk istilah pencarian ' add_action '.

Ada banyak ruang untuk menyempurnakan pencarian kami seperti melakukan pencarian hanya pada jenis file tertentu, dan untuk string yang secara khusus cocok dengan kasus istilah pencarian dan jika itu adalah keseluruhan kata.

misalnya Hasil pencarian berikut menampilkan kecocokan untuk ' WooCommerce ' yang merupakan keseluruhan kata, peka huruf besar-kecil, dan hanya terletak di file PHP (jenis file lain diabaikan).

Salah satu alasan mengapa VS Code begitu populer adalah karena banyaknya ekstensi yang tersedia, dan ada beberapa yang dapat membantu navigasi kode. Salah satu ekstensi tertentu yang menonjol adalah Bookmarks.

Ini memungkinkan Anda untuk menandai lokasi dalam kode Anda sehingga Anda dapat melompat kembali ke bagian kode tertentu yang menarik dengan mengklik tombol. Itu sangat berguna, terutama untuk basis kode besar seperti WooCommerce.

Pada tangkapan layar berikut, saya telah menandai beberapa kait tindakan WooCommerce untuk akses cepat yang ingin saya kunjungi lagi nanti.

Cukup mengklik salah satu item yang ditandai di panel penjelajah akan membawa Anda langsung ke baris kode tertentu.

Ada banyak istilah lain yang bisa Anda cari. Mungkin Anda ingin menjelajahi kelas WooCommerce apa yang tersedia. Jenis pencarian ini dapat dibuat lebih kuat bila dikombinasikan dengan Regex.

Misalnya, mudah untuk mencari nama kelas yang berisi 'WC' di awal (misalnya 'WC_Structured_Data'). Tapi bagaimana dengan kelas yang berisi 'WC' di mana saja di nama kelas? Untuk itu, Regex diperlukan karena Anda perlu mencari string 'kelas' diikuti dengan spasi, yang kemudian diikuti oleh string yang berisi 'WC' di mana saja di dalamnya.

Dengan Regex Anda juga dapat melakukan hal-hal seperti mencari nama fungsi (atau bagian dari nama) yang merupakan metode kelas dan bukan fungsi yang berdiri sendiri. Kemungkinannya tidak terbatas dan pengetahuan kerja yang baik tentang Regex sangat dianjurkan.

Contoh kustomisasi WooCommerce cepat

Katakanlah Anda perlu menyesuaikan halaman Checkout, dan secara khusus perlu menampilkan subtitle di bawah judul "Detail penagihan".

Apa yang dapat Anda lakukan adalah mencari file plugin WooCommerce untuk string ' Detail penagihan ', untuk melihat apakah ada "sesuatu" yang kemudian dapat Anda gunakan dalam kode kustom Anda. Dalam hal ini saya akan menggunakan editor kode NotePad++, hanya untuk menunjukkan bahwa perangkat lunak apa pun valid:

Saya mendapat 2 hasil pencarian, tetapi hanya satu yang relevan dengan halaman checkout. Jadi, saya membuka file tertentu (form-billing.php), di baris tertentu (28):

…dan perhatikan ada do_action() tepat setelah heading!

Ini memberi kita kesempatan untuk "menyuntikkan" beberapa kode di sana tanpa mengesampingkan seluruh file template. Saya pergi ke functions.php tema anak saya dan menulis yang berikut: 

/**
 * @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>';
}

Dan inilah "setelah":

Terus Menjelajah!

Kami hanya menggores permukaan dari apa yang sejujurnya merupakan basis kode yang sangat besar. Anda akan membutuhkan waktu lama untuk melihat setiap baris kode, tetapi mudah-mudahan saya telah berhasil membangkitkan selera Anda untuk terus menggali di sekitar basis kode WooCommerce yang menarik dan belajar lebih banyak lagi!