Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Membuat sebuah Plugin WordPress kustom dari awal

by
Difficulty:AdvancedLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Gustiawan (you can also view the original English article)

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!

Final Product

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 proses instalasi dan mengatasi masalah di situs Wordpress. 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: http://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:

Admin panel

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.

Admin panel with deactivated plugin

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:

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().

Jika Anda me-refresh halaman admin Anda, Anda akan melihat menu item yang baru muncul di bawah Settings.

New menu item

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

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.

Empty plugin configuration page

Selanjutnya, kita akan membuat form. Kami sekarang telah menerapkan sebuah plugin dari awal.

Menjelaskan kode

Jika Anda sudah familiar dengan HTML dan PHP, kode di atas akan membuat akal tetapi, masih, mari kita segera berjalan melalui baris.

  • Kita mulai dengan membuat div dengan class wrap. Ini adalah kelas Wordpress standar yang akan membuat halaman kami terlihat seperti halaman lain di dalam wilayah administrasi.
  • Form akan menggunakan metode POST untuk mengirim data kembali kepada dirinya sendiri. Ini berarti bahwa data form akan diterima oleh halaman yang sama begitu, kita dapat menambahkan kode update database ke file yang sama.
  • Selanjutnya, ada bidang tersembunyi yang akan digunakan untuk menentukan apakah Halaman ditampilkan setelah pengguna menekan tombol Update Options atau tidak. Ketika halaman menerima data form, nilai dari field ini akan diatur ke Y.
  • Baris berikutnya akan membuat Field input form untuk database dan menyimpan pengaturan. Seperti Anda dapat dengan mudah Lihat, nilai parameter yang ditetapkan oleh isi dari variabel PHP. Kita akan berbicara tentang ini segera.
  • Sekarang jika Anda me-refresh halaman admin, Anda akan melihat form yang baru dibuat. Namun, menekan tombol Update Options tidak akan berpengaruh selain menyegarkan laman dan kolom form kosong.
Plugin configuration page with form

Penanganan Data

Setelah form siap dipakai, kami akan mengurus data form penanganan sendiri, memperbarui database dan mengambil nilai-nilai pilihan yang ada dari database. Untuk ini, kita pertama kali harus memutuskan apakah Halaman ditampilkan setelah pengguna menekan tombol Update Options atau tidak. Kita akan melakukannya dengan menganalisis nilai form hiden field, oscimp_hidden. Kode berikut akan ditambahkan pada awal file oscommerce_import_admin.php, sebelum kode untuk menampilkan form:

Selanjutnya, kami akan menangani data form dan memperbarui pilihan plugin dalam database sesuai. Untuk ini kita akan menggunakan fungsi update_option(). Parameter pertama fungsi ini adalah nama pilihan yang akan dituntut kemudian secara unik mengidentifikasi opsi ini dan nilainya. Parameter kedua adalah nilai yang diberikan.

Kode diatas jika cukup banyak jelas tetapi Harap dicatat bahwa di sini kita menggunakan variabel PHP yang telah kita disebutkan sebelumnya sambil membangun form. Variabel ini akan diperbarui dengan nilai data form saat ini dan akan ditampilkan dalam bentuk itu sendiri. Pergi, periksa! Refresh halaman konfigurasi dan masukkan pengaturan database OSCommerce Anda serta parameter toko Anda lalu tekan Update Options.

Jika semuanya dilaksanakan seperti dijelaskan di atas, Anda akan melihat pesan Options saved success dan isian akan berisi data yang Anda masukkan.

Plugin configuration page with success message

Terakhir tetapi tidak paling tidak, kita harus pra-mengisi form dengan database data ketika user membuka halaman konfigurasi. Untuk ini, kita akan menggunakan fungsi get_option() yang mengambil pilihan tertentu dari database.

Anda dapat tes kode di atas dengan hanya menavigasi ke halaman lain dalam admin area dan kemudian retuning ke Halaman ini dengan mengklik item submenu OSCommerce produk display dalam menu Settings. Jika semuanya berjalan dengan baik, Anda akan melihat form dengan semua bidang pra-diisi dengan data yang Anda masukkan.

Plugin configuration page with pre-populated form

Dengan ini potongan kode terakhir, kami telah selesai melaksanakan halaman konfigurasi plugin jadi, mari kita tinjau apa yang telah dilakukan dalam bab ini:

  • kita mendefinisikan parameter apa yang perlu dikonfigurasi oleh administrator
  • Kami menambahkan action hook bila menu ditampilkan dalam administrasi panel untuk membantu kami menambahkan submenu item baru untuk plugin kami
  • kami telah menambahkan item submenu baru untuk menu Settings yang akan link ke halaman konfigurasi plugin kami
  • Kami juga telah mendefinisikan fungsi yang akan membuat halaman konfigurasi plugin dan dipisahkan kode dalam file PHP kedua
  • kami telah membuat form yang mengandung input pengguna untuk setiap data yang dapat dikonfigurasi
  • kami telah membuat fungsi update database
  • kami telah membuat sebuah fungsi yang akan pra-mengisi form dengan nilai-nilai pilihan yang disimpan dalam database

7. membuat fungsi user

Yah, semuanya berjalan cukup baik sejauh ini tetapi plugin belum tidak dapat digunakan karena kami belum menerapkan bagian yang benar-benar akan memungkinkan kita untuk menampilkan produk di front-end.

Untuk memungkinkan pengguna untuk menampilkan produk di front-end, kita harus menyatakan fungsi yang dapat dipanggil dari template kode PHP dan yang akan kembali kode HTML untuk dimasukkan ke dalam template. Kita akan memberi nama oscimp_getproducts() fungsi ini dan menerima jumlah produk untuk ditampilkan sebagai parameter fungsi. Fungsi itu sendiri akan di implementasi di berkas utama plugin kami, oscommerce_import.php

Seperti yang Anda lihat, kita menentukan nilai default untuk parameter fungsi kami sehingga memungkinkan uawe untuk memanggil fungsi baik dengan dan tanpa parameter. Jika fungsi ini disebut dengan parameter, seperti oscimp_getproducts(3), itu akan menampilkan tiga produk. Jika fungsi ini dipanggil tanpa parameter, seperti oscimp_getproducts(), itu hanya akan menampilkan salah satu produk.

Hal pertama dalam fungsi kita akan menjadi untuk membuat koneksi ke OSCommerce database. Berkat halaman konfigurasi plugin kami, kami sekarang memiliki semua informasi yang kita butuhkan: database host, nama, user dan password. Kita akan menggunakan built-in wpdb kelas untuk membuat objek database baru.

Setelah ini selesai, kita mendeklarasikan variabel yang akan berisi kode HTML dan mulai quering OSCommerce database untuk masing-masing ditentukan jumlah produk. Kode di bawah ini hanya menerapkan loop query ini dan dapat lebih lanjut pada ditingkatkan dengan memeriksa duplikat, misalnya, tapi ini bukanlah tentang tutorial ini jadi, kami akan tetap sederhana untuk dibaca.

Setelah ini selesai, Semua yang harus kita lakukan adalah memasukkan oscimp_getproducts() fungsi ke template. Kita akan menampilkan tiga produk di bagian bawah sidebar begitu, kita akan memodifikasi file sidebar.php kami template, memasukkan kode berikut tepat di bawah daftar item yang berisi meta link:

Jika Anda me-refresh halaman front-end Anda sekarang, Anda akan melihat tiga produk acak yang ditampilkan di bagian bawah sidebar.

Frontpage with random products

Dengan ini terakhir potongan kode, kami telah selesai melaksanakan fungsi front-end.


8. kesimpulan

Kami sekarang telah menerapkan sebuah plugin dari awal. Marilah kita menyimpulkan apa yang telah dilakukan:

  • kita mendefinisikan cara kita menyimpan file plugin kita
  • kita mendefinisikan header informasi untuk membuat plugin visible Wordpress
  • Kami berbicara tentang action hook dan cara menggunakannya
  • kita mendefinisikan parameter apa yang perlu dikonfigurasi oleh administrator
  • Kami menambahkan action hook untuk hook menu ditampilkan dalam administrasi panel untuk membantu kami menambahkan submenu item baru untuk plugin kami
  • kami telah menambahkan item submenu baru untuk menu Settings yang akan link ke halaman konfigurasi plugin kami
  • Kami juga telah mendefinisikan fungsi yang akan membuat halaman konfigurasi plugin dan dipisahkan kode dalam file PHP kedua
  • kami telah membuat form yang mengandung input pengguna untuk setiap data yang dapat dikonfigurasi
  • kami telah membuat fungsi update database
  • kami telah membangun sebuah fungsi yang akan pra-mengisi form dengan nilai-nilai pilihan yang disimpan dalam database
  • kami telah membangun fungsi pengguna kami untuk digunakan dalam template
  • kita menghubungkan ke OSCommerce database
  • kita kueri database OSCommerce ekstrak ID Produk, gambar dan nama
  • kami telah membuat kode HTML untuk menampilkan data diekstraksi
  • kami telah menyertakan fungsi user untuk template sidebar

Saya berharap tutorial ini memberi Anda semua informasi yang Anda butuhkan untuk membangun sebuah plugin dari awal. Jangan ragu untuk posting komentar Anda di bawah ini.

Terima kasih telah membaca! :)

  • Berlangganan ke NETTUTS RSS Feed untuk daily web developent tuts dan artikel.

Resource tambahan

Jika Anda baru untuk perkembangan Plugin WordPress, maka Anda juga mungkin tertarik dalam WordPress Plugin pada layanan pengembangan di mana kita memiliki berbagai resource WordPress, serta Envato Studio.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.