Tutorial ini akan menjelaskan bagaiamana membuat plugin Wordpress dari nol. Plugin akan terhubung ke database OSCommerce eksternal dan menampilkan produk-produk acak di situs Wordpress Anda. Juga menerapkan halaman konfigurasi untuk Wordpress admin panel.
1. Pendahuluan
Wordpress adalah mendapatkan popularitas lebih dan lebih setiap hari, bukan hanya sebagai blogging platform, tetapi juga sebagai basic CMS, dengan demikian meningkatkan dan extending fungsi dasar-nya menjadi kebutuhan sehari-hari bagi banyak developer. Untungnya, Wordpress developer telah diramalkan kebutuhan ini dan menambahkan kemungkinan menyesuaikan fungsi dasar dengan menambahkan plugin. Pada dasarnya, sebuah plugin Wordpress adalah sepotong [lebih atau kurang] stand-alone kode yang dapat dijalankan di bagian yang berbeda dan tahap dalam halaman atau situs.
Dalam tutorial hari ini kita akan berbicara tentang membuat sebuah plugin Wordpress yang meng-ekstrak dan menampilkan produk-produk dari external OSCommerce shop database. Kita akan mulai dengan menggambarkan struktur file plugin dan dimana itu harus dimasukkan ke dalam struktur Wordpress, maka kita akan melihat lebih dekat bagaimana membuat plugin visible untuk Wordpress dan mengintegrasikan dengan aksi-aksi yang dijalankan oleh frame. Selanjutnya, kami akan membuat konfigurasi panel untuk plugin agar memungkinkan administrator situs untuk menyesuaikannya dengan kebutuhan mereka. Setelah selesai, kami akan melaksanakan fungsi front-end sendiri yang akan berinteraksi dengan OSCommerce database dan ekstrak data yang dibutuhkan. Akhirnya, kami akan memodifikasi template default untuk menampilkan data diekstraksi di sidebar. Bersemangat? Mari kita mulai!
2. persiapan
Sementara itu akan tidak mungkin untuk mengikuti tutorial ini hanya dengan membaca melalui itu, saya sarankan menginstal Wordpress pada komputer Anda dan mengikuti tutorial terapkan semua langkah. Untuk ini, Anda akan memerlukan server lokal berjalan pada mesin Anda, seperti XAMPP misalnya. Sekali Anda telah menjalankannya, men-download dan menginstal Wordpress. Anda akan menemukan informasi yang extensive tentang Untuk tutorial ini kita akan menggunakan rilis 2.7
Lebih lanjut, Anda akan perlu untuk setup toko OSCommerce pada mesin Anda. Anda dapat men-download rilis terbaru di sini: //www.oscommerce.com/solutions/downloads
3. file dan folder
Pertama, kita harus membuat struktur folder dan file dasar kami. wordpress menyimpan plugin di wp-content/plugins/ folder. Ini adalah tempat di mana kami akan menambahkan file kita juga. Biasanya, jika plugin Anda akan menjadi sangat sederhana, Anda akan mencakup semua kode di dalam single PHP file. Dalam kasus ini, Anda hanya akan menyimpan file dalam folder yang disebutkan di atas. Namun, dalam kasus kami, kami akan menggunakan dua file [satu untuk berkas utama plugin] dan satu untuk implementai halaman administrasi karena itu kami akan menempatkan semua file dalam folder tertentu bahwa kita akan nama oscommerce_importer. Silahkan buat folder ini.
4. membuat plugin file
Selanjutnya, kita harus membuat berkas utama plugin kami. Kami member nama oscommerce_importer.php. Anda dapat memberi nama apapun yang Anda inginkan, itu tidak membuat perbedaan.
Jika Anda sekarang buka panel administrasi Wordpress Anda dan navigasikan ke bagian plugin, layar Anda akan terlihat seperti ini:
Seperti yang Anda lihat, tidak ada sedikitpun tanda plugin baru kami. Saatnya untuk mengubah hal itu dan memberitahu Wordpress bahwa file kami akan menerapkan sebuah plugin. Proses untuk melakukan hal ini sangat sederhana. Kita perlu lakukan adalah menambahkan sebuah plugin informasi spesifik header ke file kami baru dibuat. Header standar ini akan terlihat seperti ini:
Cukup sederhana, tidak kalian pikir? Anda dapat, tentu saja, mengubah isi dari header ini sesuai dengan keinginan Anda tetapi pastikan Anda menyimpan semuanya, sebaliknya Wordpress tidak akan mengenali benar plugin Anda.
Jika Anda me-refresh halaman plugin panel administrasi Anda, sekarang Anda akan melihat kami plugin tercantum bersama dengan yang lain.
Lihat bagaimana semua informasi yang relevan seperti judul, keterangan, penulis, URL yang diekstrak dari informasi header? Inilah mengapa hal itu selalu penting untuk benar mengisi informasi ini. Ayo dan mengaktifkan plugin kami dengan mengklik Activate di kanan entri plugin.
5. bekerja dengan action hook
Plugin kami sekarang ditampilkan di panel administrasi sehingga Wordpress menyadari hal itu. Namun, itu tidak melakukan apa-apa karena mengandung apa-apa kecuali informasi header. Kita akan mengubah ini sekarang.
Wordpress menawarkan cara yang bagus untuk memasukkan kode plugin Anda di tempat yang berbeda seluruh template, posisi fisik dalam halaman atau logis posisi dalam proses membangun halaman yang akan ditampilkan. Pertama, kita akan melihat lebih dekat pada kategori kedua, posisi yang logis, lebih dikenal sebagai action hook.
Action Hook
Anda dapat melihat action hook sebagai fungsi callback. Setiap kali Wordpress mengeksekusi sebuah operasi tertentu, seperti, misalnya, menampilkan halaman footer, itu akan memungkinkan Anda plugin untuk mengeksekusi kode mereka sendiri yang harus dijalankan pada saat yang tepat.
Untuk pemahaman yang lebih baik, mari kita mempertimbangkan sebuah plugin generik yang disebut my_plugin yang mengimplementasikan fungsi yang disebut mp_footer[] yang akan dijalankan setiap kali footer Halaman ditampilkan. Kami akan memberitahu Wordpress untuk memanggil fungsi ini, pada saat menampilkan footer dengan menggunakan fungsi khusus yang disebut add_action[]:
Fungsi add_action[] mengambil nama action hook sebagai parameter pertamanya dan nama fungsi yang harus dijalankan, sebagai parameter kedua. fungsi ini akan ditambahkan ke berkas utama plugin [yang berisi informasi header], biasanya, tepat di bawah kode fungsi yang perlu dijalankan [mp_footer[] dalam contoh kita]. Anda akan menemukan daftar lengkap tersedia action hook di Wordpress Codex.
Kita akan menggunakan action hook di bab berikutnya, di mana kami akan membuat administrasi di halaman untuk plugin kami.
6. Membuat plugin admin.
Kita akan mulai implementasi modul dengan mendefinisikan parameter dapat dikonfigurasi dan membuat ini mudah diakses oleh administrator situs. Mari kita lihat apa yang akan menjadi bit konfigurasi ini:
- Pengaturan database
- database host
- nama database
- user database
- database password
- Menyimpan pengaturan
- menyimpan URL
- folder untuk foto produk
Pertama, kita perlu database host, nama, user dan password agar dapat menyambung ke perangkat dan mengekstrak data yang diperlukan. Kedua, kita perlu beberapa data general tentang toko seperti URL-nya dan folder yang menyimpan gambar produk. Kami memerlukan informasi ini untuk membangun link karena path yang ada dalam database relatif folder gambar produk yang telah disebutkan sebelumnya.
Sekarang bahwa kita tahu apa yang kita masukkan ke dalam konfigurasi panel, saatnya untuk menerapkannya. Kita akan mulai dengan membuat item menu baru untuk mengakses halaman dan kita akan meletakkannya di dalam menu Settings. Ingat kami mengobrol tentang action hook dalam bab sebelumnya? Saatnya untuk menggunakan fitur ini.
Jika Anda akan scrool di list action hook, Anda akan melihat bahwa Wordpress juga menyediakan satu yang akan dipanggil ketika struktur menu dasar telah dihasilkan [admin_menu] jadi, ini akan menjadi tempat yang optimal untuk berpadu di dan membuat kita sendiri item menu.
Sekarang bahwa kami mengidentifikasi tindakan kita akan menggunakan, semua yang kita butuhkan adalah untuk menetapkan fungsi kita sendiri yang akan dipanggil ketika menjalankan action hook ini. Kita sebut fungsi kita oscimp_admin_actions[] dimana oscimp_ singkatan oscommerce importir dan digunakan untuk membuat nama fungsi mungkin unik yang tidak mendapatkan Griffith dengan fungsi apapun dalam Wordpress atau salah satu plugin. Mari kita lihat bagaimana kode akan terlihat seperti:
function oscimp_admin_actions[] {
}
add_action['admin_menu', 'oscimp_admin_actions'];Seperti yang Anda lihat, kami membuat oscimp_admin_actions[] fungsi kemudian menghubungkannya dengan hook action admin_menu menggunakan fungsi add_action[]. Langkah berikutnya akan untuk menambahkan beberapa kode untuk fungsi oscimp_admin_actions[] kita untuk benar-benar membuat menu item yang baru.
Seperti kebanyakan hal Wordpress, menambahkan item menu baru juga sangat mudah. Itu semua bermuara memanggil single fungsi. Kami ingin menambahkan item menu baru kami ke menu Settings sehingga, dalam hal ini fungsi kita perlu add_options_page[]. Kami akan menambahkan kode dalam fungsi oscimp_admin_actions[].
function oscimp_admin_actions[] {
add_options_page["OSCommerce Product Display", "OSCommerce Product Display", 1, "OSCommerce Product Display", "oscimp_admin"];
}
add_action['admin_menu', 'oscimp_admin_actions'];Jika Anda me-refresh halaman admin Anda, Anda akan melihat menu item yang baru muncul di bawah Settings.
Setiap menu yang ada memiliki fungsi tersendiri untuk digunakan untuk menambah item submenu. Misalnya, jika kita ingin menambahkan item submenu menu ke Tools bukan Settings, kita akan menggunakan fungsi add_management_page[] daripada add_options_page[]. Anda dapat menemukan rincian lebih lanjut tentang pilihan yang tersedia di bagian Wordpress Codex menambahkan administrasi menu.
Jika kita mendapatkan kembali ke jalur kode baru ditambahkan, Anda mungkin akan melihat parameter terakhir. Ini adalah benar-benar nama fungsi yang akan dipanggil ketika item menu baru ditambahkan diklik dan akan digunakan untuk membuat administrasi di halaman plugin kami. Selanjutnya, kami akan menambahkan fungsi baru ini. Namun, sebelum melanjutkan kita harus berhenti sejenak dan berpikir tentang apa yang akan dilaksanakan di Halaman ini.
Kita sudah didefinisikan parameter kami ingin membuat dikonfigurasi [database host, nama, user, dll] jadi ini harus dimasukkan dalam form untuk memungkinkan pengguna untuk mengirimkan data ke database. Setelah form didefinisikan, kita akan memerlukan sedikit kode yang ekstrak data dikirim dari form dan menyimpannya ke database. Yah, semuanya berjalan cukup baik sejauh ini tetapi kami plugin namun tidak dapat digunakan karena kami belum menerapkan bagian yang benar-benar akan memungkinkan kita untuk menampilkan produk di front-end. Seperti yang Anda lihat, ada beberapa hal untuk melakukannya, mungkin ide yang baik untuk memisahkan fungsi ini ke file sendiri. Kami akan member nama file ini oscommerce_import_admin.php. Sekarang, sillahkan dan membuat file kosong dengan nama yang diberikan.
Seperti telah disebutkan, kita harus membuat fungsi yang akan menampilkan halaman konfigurasi plugin kami [kami bernama oscimp_admin[]] fungsi ini. Kode dalam fungsi ini akan disertakan dari kami baru dibuat file PHP, oscommerce_import_admin.php
function oscimp_admin[] {
include['oscommerce_import_admin.php'];
}
function oscimp_admin_actions[] {
add_options_page["OSCommerce Product Display", "OSCommerce Product Display", 1, "OSCommerce Product Display", "oscimp_admin"];
}
add_action['admin_menu', 'oscimp_admin_actions'];Jika Anda klik pada link di bawah menu Settings, Anda akan diarahkan ke halaman kosong. Hal ini karena kami oscommerce_import_admin.php file masih kosong.
Selanjutnya, kita akan membuat form. Kami sekarang telah menerapkan sebuah plugin dari awal.
Chủ Đề