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

Menulis WordPress Widget Yang Dapat Dipelihara: Bagian 1 dari 2

by
Difficulty:IntermediateLength:LongLanguages:

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

Wptuts Terbaik 2011: setiap minggu daru Januari, kita akan meninjau kembali beberapa posting favorit kami dari 2011. Perkembangan plugin dapat sering merasa seperti barat yang liat jika Anda membuat sesuatu dari awal tanpa boilerplate atau plugin yang serupa untuk bekerja - Tom 2 bagian seri Maintainable WordPress widget/Plugins yang dapat dipelihara menawarkan beberapa petunjuk praktis yang harus menjaga tetap di jalan!

Ketika datang ke pengembangan perangkat lunak, framework dan perpustakaan itu populer karena mereka membantu, kan? Mereka menyediakan cara yang konsisten untuk menulis dan mengatur kode dengan harapan membuat pembangunan dan pemeliharaan semudah mungkin.


Masalahnya adalah, prinsip-prinsip yang sama yang berlaku untuk lebih besar, sistem tingkat perusahaan sama berlaku untuk proyek-proyek kecil - seperti WordPress plugins - dikembangkan oleh tim kecil. Dan sama seperti sistem yang lebih besar penuh dengan bagian yang bergerak, seperti halnya dengan WordPress Plugin.

Misalnya: Anda punya kode inti yang bertanggung jawab untuk berkomunikasi dengan WordPress (melalui filter, action, dan hook), panel kontrol administrasi, client-side view, JavaScript file, style sheet, file lokalisasi dan seterusnya yang dicapai menggunakan setidaknya empat bahasa pemrograman yang berbeda.

Selama waktu saya menghabiskan di pembangunan WordPress, saya telah membuat beberapa boilerplate yang saya gunakan untuk memulai setiap proyek saya. Tutorial ini akan melihat kode Boilerplate Widget WordPress saya, bagaimana memanfaatkan dalam proyek-proyek baru, dan contoh aplikasi dengan harapan dapat membantu Anda mendapatkan proyek WordPress berikutnya untuk awal yang solid.


Widget Boilerplate

Organisasi

Ketika datang untuk pengembangan, saya biasanya mencoba untuk menjaga hal-hal tetap sederhana mungkin dengan perencanaan hanya untuk fitur yang diperlukan; Namun, ini adalah salah satu kasus di mana saya bertujuan untuk menjadi lengkap. Hal ini hampir selalu lebih mudah untuk memulai perencanaan boilerplate ketika Anda tahu semua komponen yang dapat masuk ke dalam sistem.

Plugin dapat akhirnya terdiri dari berikut:

  • Kode inti plugin
  • Style sheet
  • Java script
  • File lokalisasi
  • Markup
  • Gambar

Mempertimbangkan semua hal di atas, widget boilerplate direktori akan diletakkan seperti ini:

Kita akan melihat di setiap direktori secara rinci nanti dalam artikel.

Kerangka

Selain file organisasi, saya juga ingin menulis rintisan kode yang digunakan untuk menggerakkan widget. Wordpress [1] memiliki penjelasan rinci mengenai API Widget [2] dan karena ada cara yang disaraknakn untuk membuat mereka, saya mencoba untuk mengikutinya.

Selain itu, saya penggemar menulis kode saya dalam cara object-oriented dengan komentar kode untuk membantu menjelaskan apa yang terjadi di setiap daerah kode. Dengan demikian, kode widget awal terlihat seperti ini:

Melihat ada sejumlah TODO di seluruh kode. Ini berguna terutama dalam konteks menulis kode di atas boilerplate.

Perhatikan bahwa ada tiga bagian utama dari kode, seperti:

  1. Constructor. Fungsi ini bertanggung jawab untuk inisialisasi widget, mengimpor file lokalisasi dan termasuk menyertakan JavaScript dan style sheet.
  2. Fungsi API. Fungsi-fungsi ini adalah tiga fungsi yang diperlukan untuk mengelola, menampilkan dan memperbarui widget.
  3. Fungsi pembantu. Ini adalah fungsi private saya gunakan untuk membantu dengan tugas yang berulang atau yang diperlukan.

Tiga paling penting fungsi di atas, fungsi API diperlukan untuk mengembangkan plugin Anda.

  1. widget() ekstrak nilai yang disimpan dan merender ke view public
  2. update() akan membuat bertanggung jawab untuk memperbarui nilai yang sebelumnya telah disimpan dengan nilai-nilai yang diberikan oleh pengguna
  3. form() menjadikan bentuk administrasi dan menyediakan fungsionalitas yang diperlukan untuk menyimpan nilai-nilai baru.

Karena plugin sering dibagi antara fungsi administrasi dan fungsi untuk klien, saya membagi sumber JavaScript, style sheet, dan HTML dengan sesuai. Saya namai file ini sesuai dan tulisan rintisan mereka yang benar:

Sumber JavaScript:

admin.js:

widget.js:

Style sheet:

admin.css:

widget.css:

Views:

Mudah, kan? Anda dapat lihat (dan fork!) seluruh boilerplate ini termasuk file lokalisasi dan README pada GitHub.

Sekarang ada tempat untuk segalanya dan ketika tiba saatnya untuk dikirm, Anda hanya mengecualikan file tertentu dari pembangunan akhir...


Contoh yang bekerja dengan jaringan sosial Anda

Ketika datang ke pemrograman, praktek membantu dalam mempelajari bahasa baru atau tip jadi di sini adalah sebuah contoh cepat tentang cara menggunakan boilerplate di atas untuk menciptakan sebuah widget yang sederhana untuk membuatnya mudah untuk berbagi link Anda ke Twitter, Facebook, dan Google+.

Pertama, kami akan mencantumkan persyaratan:

  • View administrasi untuk memasukkan nilai-nilai. Ini termasuk markup dan gaya.
  • Menghadap viewpublic untuk menampilkan link ke jaringan sosial. Ini juga termasuk markup dan gaya.
  • Pilihan untuk menyimpan Twitter username, nama pengguna Facebook, dan ID Google+

Kedua, mari kita membuka boilerplate dan mulai stubbing bagian-bagian yang diperlukan.

Pertama, kita mendefinisikan nama nilai-nilai plugin, slug, dan nilai lokal. Ini digunakan berulang-ulang seluruh kode Jadi bagus untuk menyimpan mereka sebagai konstanta agar dengan mudah mengambil mereka. Temukan fungsi init_plugin_constants() dan pastikan bahwa kode Anda terlihat seperti ini:

Setelah itu, kita perlu menyiapkan konstruktor:

Dan potong fungsi-fungsi API:

Versi akhir dari plugin akan terlihat seperti ini:

Selanjutnya, mari kita tambahkan beberapa gaya untuk form administrasi. Temukan /css/admin.css dan tambahkan kode berikut:

Dan mari kita menulis markup yang akan merender view dari form administrasi:

Akhirnya, kita perlu untuk menulis beberapa markup untuk membuat tampilan public menghadap widget kalau sudah live di blog sebenarnya:

Selesai dan selesai. Tidak buruk, kan? Cukup banyak pekerjaan dan fungsionalitas yang dilakukan relatif cepat.

Anda dapat men-download kode sumber kerja (termasuk README terkait) untuk widget ini pada GitHub atau tepat di sini di Wptuts.

Pada akhirnya, memelihara jumlah proyek perangkat lunak untuk mencoba untuk mengatur kompleksitas. Meskipun boilerplate di atas *bukan * cara mengatur atau mengelola kode, ia memiliki  "efektif * cara untuk mengatur kode dan aku telah menemukan sangat berguna dalam banyak proyek-proyek saya dan mudah-mudahan hal ini membantu Anda dalam pekerjaan dimasa depan.

Ingat, Anda dapat mengambil salinan boilerplate dan proyek contoh dari repositori GitHub mereka masing-masing. Saya juga sangat merekomendasikan bookmark WordPress Codex [1]. Itu adalah sumber luar biasa bagi siapa saja yang mencari untuk melakukan pengembangan WordPress lebih lanjut.

  1. http://codex.Wordpress.org
  2. http://codex.wordpress.org/Widgets_API

Pindah ke bagian dua...

Periksa bagian kedua dari seri ini tutorial yang mana kami akan dapat menggali lebih dalam menciptakan plugin yang dapat dipelihara! Kita akan melihat bagaimana untuk menggunakan hook dalam WordPress - dan kemudian kami akan benar-benar menempatkan boilerplate kami untuk digunakan membuat plugin lain yang berguna. Siap untuk bagian dua?

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.