Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WordPress Plugins
Code

Menggunakan Ruang Nama dan Autoloading dalam Plugin WordPress, Bahagian 2

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Using Namespaces and Autoloading in WordPress Plugins.
Using Namespaces and Autoloading in WordPress Plugins, Part 1
Using Namespaces and Autoloading in WordPress Plugins, Part 3

Malay (Melayu) translation by Umar bin Abdul Aziz (you can also view the original English article)

Dalam tutorial sebelumnya, kami mula bercakap mengenai ruang nama dan autoloading dengan PHP dalam konteks pembangunan WordPress. Dan walaupun kami tidak pernah memperkenalkan dua topik ini, kami menentukannya dan mula meletakkan asas bagaimana kami memperkenalkannya dalam tutorial yang akan datang.

Sebelum kita berbuat demikian, terdapat beberapa fungsi yang perlu kita selesaikan untuk menyelesaikan plugin kami. Matlamatnya adalah untuk melengkapkan pemalam dan fungsi supaya kita mempunyai plugin asas dan berorientasikan objek yang didokumenkan dan berfungsi dengan betul dengan satu amaran; Ia tidak menggunakan ruang nama atau autoloading.

Ini seterusnya akan memberi kita peluang untuk melihat apa jenis plugin sebelum dan selepas memperkenalkan topik ini.

Sebelum meneruskan, saya cadangkan membaca tutorial terdahulu. Dengan cara ini, anda akan mempunyai pemahaman ruang nama dan autoloading seperti itu, anda akan mempunyai versi plugin yang berfungsi hingga ke hari ini (kerana kami akan membinanya), dan kemudian anda akan bersedia untuk meneruskannya.

Selepas anda membacanya, sila kembali ke tutorial ini dan teruskan kerja anda.

Sebelum Kami Mulakan

Seperti semua tutorial saya, saya menganggap anda mempunyai persekitaran pembangunan yang bekerja di komputer anda. Ini termasuk yang berikut:

  • Persekitaran pembangunan tempatan yang merangkumi PHP 5.6.20, pelayan web Apache, dan pelayan pangkalan data MySQL.
  • Direktori dari mana WordPress 4.6 sedang dihoskan.
  • Editor teks atau IDE pilihan anda yang anda gunakan untuk menulis plugin.
  • Pengetahuan API Plugin WordPress.

Sekiranya anda telah berada di dalam siri ini (atau telah membaca karya saya sebelum ini ), maka saya menganggap bahawa anda sudah mempunyai sesuatu seperti yang sudah ada.

Dan apabila anda melakukannya, kami bersedia untuk memulakan.

Apa yang Kita Bangun

Ingat dari tutorial terdahulu:

Kami akan membuat plugin yang memudahkan untuk memuat gaya stylesheet dan gaya JavaScript dalam plugin kami, dan ia memaparkan kotak meta yang meminta pengguna untuk bertanya soalan untuk membantu mereka membuat brainstorming tentang blog.

Ya, ia mudah dan mungkin bukan sesuatu yang akan digunakan oleh orang lain melangkaui pembelajaran konsep yang dibincangkan di blog ini. Tetapi cara kita mengajar konsep yang kita gunakan adalah perkara yang penting.

Plugin ini memberi kita kemampuan untuk melakukan perkara itu.

Pada akhir tutorial akhir kami meninggalkan dengan plugin yang memaparkan soalan rawak kepada penulis di bahagian atas sidebar pada skrin penciptaan pos WordPress.

Random questions appearing in a meta box

Setiap kali anda membuka semula halaman, beban soalan baru. Seperti yang dinyatakan, ia tidak buruk, tetapi terdapat beberapa penambahbaikan yang boleh kita buat dari segi gaya kandungan di dalam kotak meta.

Iaitu, kita boleh memperkenalkan gaya-gaya yang akan membantu kita membuat persembahan yang lebih menarik secara visual. Di samping itu, ini akan memberi kita peluang untuk meneroka beberapa teknik yang berorientasikan objek yang boleh kita gunakan semasa bekerja dengan aset seperti stylesheet.

Jadi mari kita mulakan.

Memperkenalkan Stylesheets

Untuk tujuan tutorial ini, saya tidak akan menggunakan sebarang jenis preprocessor. Saya hanya akan menggunakan CSS vanilla. Tetapi cara kami memberikan aset kurang berorientasikan objek berbanding dengan banyak pembangun WordPress.

Ini semua akan menyumbang kepada tujuan menggunakan ruang nama dan autoloading dalam siri ini. Tetapi pertama, mulakan dengan memperkenalkan lembaran gaya ini, mencipta antara muka kelas, kelas, dan komunikasi kelas seperti yang diperlukan dengan API WordPress.

Menambah Fail CSS

Dalam direktori admin , buat subdirektori yang dipanggil assets . Dalam direktori assets , buat subdirektori yang dipanggil css dan tambahkan fail admin.css .

Struktur direktori akhir harus kelihatan seperti ini:

The final directory structure for assets

Kami tidak bersedia memberikan apa-apa jenis gaya. Sebaliknya, kita perlu mengalih perhatian kita kepada kod sisi pelayan yang bertanggungjawab untuk melengkapkan lembaran gaya ini.

Enqueue Stylesheet

Apabila ia datang untuk mendaftarkan dan mendaftarkan kedua-dua stylesheets dan JavaScript, kebanyakan pemaju plugin Wordpress terbiasa dengan cangkuk yang diperlukan untuk berbuat demikian. Khususnya, saya merujuk kepada admin_enqueue_scripts dan wp_enqueue_style.

Dan walaupun kita akan menggunakan cangkuk ini, kita akan menyediakannya dengan cara yang mudah dan berorientasikan objek. Tidak, siri ini tidak dimaksudkan untuk menyelam secara mendalam ke dalam prinsip berorientasikan objek tetapi, sekiranya mungkin, saya gembira dapat menunjukkannya kepada anda.

Antara muka aset

Dalam pengaturcaraan berorientasikan objek, antara muka ditakrifkan sebagai berikut:

Antara muka ialah struktur pengaturcaraan / sintaks yang membolehkan komputer melaksanakan sifat-sifat tertentu dalam kelas.

Satu lagi cara untuk memikirkannya ialah:

Jika anda mempunyai kelas yang melaksanakan antara muka, kelas mesti menentukan fungsinya untuk ditakrifkan oleh antara muka.

Jadi jika antara muka mempunyai dua kaedah tandatangan dengan penglihatan dan nama tertentu, maka kelas yang menerapkan antara muka mesti mempunyai dua kaedah dengan penglihatan dan nama yang sama serta pelaksanaan kaedah sebenar.

Dan itulah yang akan kita lakukan. Pertama, kita perlu menentukan antara muka kita. Jadi dalam direktori util , buat interface-assets.php dan kemudian tambahkan kod berikut:

Perhatikan, antara muka sebenarnya tidak menentukan fungsi. Sebaliknya, ia menentukan kelas apa yang melaksanakan antara muka ini harus ditakrifkan.

Seperti yang anda boleh meneka, kelas yang akan melaksanakan antara muka ini akan mempunyai dua kaedah di atas bersama-sama dengan pelaksanaan sebenar bagi setiap fungsi. Dan kita akan melihat bagaimana ini berfungsi dalam masa yang singkat.

Seterusnya, pastikan untuk memasukkan fail ini dalam fail plugin utama:

Seterusnya, kita perlu membuat fail yang melaksanakan antara muka ini. Oleh kerana kami bekerja dengan fail CSS, kami akan mencipta pemuat CSS.

CSS Loader

Ini adalah kelas yang bertanggungjawab untuk melaksanakan antara muka dan melaksanakan tugas sebenar untuk mendaftarkan fungsi tersebut dengan cangkuk WordPress yang diperlukan (dan sebenarnya menyediakan pelaksanaan fungsi tersebut).

Jika anda melihat kod di bawah, ia sepatutnya kelihatan sangat serupa dengan sesuatu yang anda lihat atau mungkin telah dilakukan dalam projek terdahulu:

Kod di atas sepatutnya agak mudah untuk diikuti memandangkan kod komen, tetapi saya akan menerangkan apa yang berlaku:

  • Init dan enqueue kedua-duanya berfungsi sebagai kelas yang melaksanakan Assets_Interface .
  • Apabila init dipanggil, daftar akan menerima fungsi enqueue dengan cangkuk yang bertanggungjawab untuk mendaftarkan lembaran gaya.
  • Kaedah enqueue mendaftarkan fail admin.css dan menggunakan masa Filemtime sebagai cara mengetahui jika fail telah berubah atau tidak (yang membolehkan kita memusnahkan setiap versi cache fail apabila dibentangkan).

Dalam pelaksanaan ini, fail admin.css sebenarnya ditambah pada setiap halaman. Tambah syarat untuk menyemak halaman mana yang sedang aktif dan kemudian tentukan sama ada lembaran gaya perlu ditambah atau tidak boleh ditambah sebagai latihan pasca tutorial. Sebagai petunjuk, periksa get_current_screen ().

Seterusnya, kita perlu menyertakan fail ini dalam fail plugin utama:

Seterusnya, kita perlu memberi instan kepada pemuat CSS dan memanggil kaedah init dalam fungsi tutsplus_namespace_demo utama:

Dengan mengandaikan bahawa anda telah melakukan semuanya dengan betul, anda sepatutnya dapat menyegarkan halaman Add New Post , lihat sumbernya, dan lihat admin.css disenaraikan sebagai lembaran gaya yang tersedia.

Kami melakukan satu perkara lagi sebelum kami bersedia untuk menyiapkan bahagian tutorial ini. Kita perlu menulis beberapa CSS.

Gaya Meta Box

Oleh kerana kebanyakan tutorial memberi tumpuan kepada beberapa teknik yang berorientasikan objek dan kami masih mempunyai topik baru untuk meneroka dalam siri ini, kami akan menjadikan bahagian ini agak mudah.

Daripada menggunakan beberapa gaya lalai seperti yang disediakan oleh WordPress, mari kita tingkatkan kotak meta hanya sedikit.

Pertama, cari fungsi render dalam kelas Meta_Box_Display. Mari ubah suai itu supaya ia menghasilkan kandungan fail dalam elemen perenggan dengan atribut ID "tutsplus-penulis-gesaan".

Untuk melakukan ini, kami akan memperkenalkan kaedah baru yang akan menggunakan kaedah WordPress API untuk menghapuskan HTML.

Kami kemudian akan memanggil fungsi ini dari dalam kaedah rendering untuk memaparkan kandungan dalam kotak meta.

Sekarang kita dapat membuka admin.css dan membuat beberapa perubahan kecil untuk mengemas kini rupa dan nuansa kotak meta pada skrin Tambah New Post. Mari tambahkan CSS berikut:

Dan pada ketika ini, kotak meta anda sekarang akan kelihatan seperti berikut:

An updated version of the styles of the metabox

Seperti yang disebutkan sebelumnya, itu bukanlah perkara utama, tetapi ia adalah sesuatu yang meningkatkan penampilan dan rasa persoalan sedikit.

Apa seterusnya?

Pada ketika ini, kami telah memperkenalkan beberapa kelas, antara muka, dan ciri-ciri berorientasikan objek yang lain. Kami mempunyai plugin yang menggunakan data dari fail teks, yang berkomunikasi dengan API WordPress, dan memberikan maklumat sebelum membuat rendering ke laman utama.

Kami mempunyai asas yang baik untuk mula bercakap mengenai ruang nama. Jadi dalam tutorial seterusnya, kami akan melakukannya. Jika anda tidak dapat mengikuti siri lain, maka saya mencadangkannya kerana kita hanya akan terus membina apa yang telah kita pelajari.

Sekiranya anda sedang mencari bahan WordPress lain yang berkaitan, anda boleh mencari semua tutorial sebelumnya di halaman profil saya dan anda boleh mengikuti saya di blog atau di Twitter .

Sehingga itu, jangan lupa untuk memuat turun versi kerja plugin (versi 0.2.0) yang tertanam dalam siaran ini. Pautan ini boleh didapati di bar sisi dengan butang yang dipanggil Muat Lampiran. Dan, seperti biasa, jangan ragu untuk bertanya dalam komen!

Sumber

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.