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

Membina Laman Selamat Datang untuk Produk WordPress Anda: Kod Bahagian 2

by
Length:LongLanguages:
This post is part of a series called Building a Welcome Page for Your WordPress Product.
Building a Welcome Page for Your WordPress Product: Code Part 1

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Dalam catatan saya sebelum ini, saya mula membina halaman selamat datang untuk plugin WordPress. Saya membincangkan seni bina plugin dan bagaimana ia berfungsi. Kemudian saya menulis kod untuk pangkalan dan fail permulaannya di mana kami menambah blok kod untuk menambah dan memadamkan sementara berdasarkan pengaktifan dan penyahaktifan plugin.

Dalam artikel akhir ini, saya akan membincangkan fail plugin yang lain bersama dengan pelaksanaan praktikal plugin. Menjelang akhir artikel ini, anda akan menyedari proses pengekodan halaman selamat datang pertama anda untuk plugin WordPress.

Logik untuk Redirection Laman Selamat Datang

Fail selamat datang-init.php mentakrifkan semua kod berkaitan yang memulakan proses untuk halaman selamat datang kami. Ia bermula dengan menambah dan memadamkan transien melalui set_transient () (pada pengaktifan plugin) dan fungsi delete_transient () (pada penyahaktifan plugin).

Setelah berkata demikian, kini kita memerlukan cara untuk mengalihkan pengguna ke halaman selamat datang kami. Untuk mengurus logik plugin, saya buat fail berasingan bernama welcome-logic.php.

Mari tinjau semula kod untuk fail ini.

Oleh itu, seperti yang anda tahu sekarang, saya suka mengikuti standard pengekodan dan dokumentasi WordPress, sebab itu terdapat banyak dokumentasi di sana, sementara sebahagian daripadanya telah ditambahkan untuk pemahaman anda.

Terdapat tajuk fail DocBlock yang digunakan untuk memberi gambaran keseluruhan tentang apa yang terkandung dalam fail tersebut. Kod bermula dengan cek ABSPATH, yang menamatkan operasi plugin jika seseorang cuba mengakses fail plugin secara langsung. Selepas itu, saya menulis kod rutin untuk peralihan yang selamat.

Saya kemudian menetapkan fungsi bernama wpw_safe_welcome_redirect () untuk mengendalikan redirect selamat ke halaman selamat datang. Di dalamnya, saya melakukan beberapa jika cek yang memantau kaedah redirect. Sekiranya anda telah melepasi artikel sebelumnya, maka anda tahu bahawa saya telah menentukan sementara _welcome_redirect_wpw dan menetapkan nilainya kepada benar. Saya akan menggunakan kunci yang sama untuk melakukan pemeriksaan ini. Untuk mendapatkan pemahaman yang lebih baik tentang kod tersebut, anda mesti meneruskan artikel sebelumnya secara terperinci.

Mari mulakan dengan apa yang sedang berlaku dalam fungsi wpw_safe_welcome_redirect ().

Langkah #1: Bail jika Tiada Transit Langsung Dihantar Hadir

Saya memeriksa sama ada terdapat pengaktifan mengalihkan sementara sementara, iaitu, _welcome_redirect_wpw sementara, melalui fungsi get_transient (). Fungsi ini digunakan untuk mendapatkan nilai sementara. Jika fana tidak wujud, tidak mempunyai nilai, atau telah tamat tempoh, maka nilai pulangannya akan palsu.

Jadi, jika nilai yang diperoleh tidak sama dengan benar, maka kita tidak perlu mengarahkan pengguna ke halaman selamat datang. Jika nilai yang diambil adalah benar dan pengaktifan pengalihan sementara hadir, maka mari maju.

Langkah #2: Padam Transien Langsung

Sekiranya _welcome_redirect_wpw sementara kembali benar, ini bermakna dua perkara: pertama sekali ia wujud dalam pangkalan data, dan kedua kita tidak mengalihkan pengguna ke halaman selamat datang. Oleh itu mari hapuskan sementara ini dan alihkan pengguna ke halaman selamat datang kami.

Langkah #3: Jaminan jika Mengaktifkan Daripada Rangkaian atau Tapak Pukal

Kemudian kami mempunyai satu lagi pernyataan cek yang mengesahkan bahawa pengalihan halaman selamat datang selamat hanya berlaku untuk tapak yang bukan rangkaian atau berbilang tapak. Kami tidak mahu pengalihan halaman selamat datang jika plugin sedang diaktifkan dari rangkaian.

Langkah #4: Redirect Selamat ke Halaman Selamat Datang

Akhirnya, selepas semua cek ini, saya mengalihkan pengguna ke halaman selamat datang kami. Fungsi wp_safe_redirect ($ lokasi) melakukan peralihan setempat dan memberitahu pelayan tentang $lokasi untuk mengalihkan pengguna.

Untuk menentukan lokasi, saya menggunakan fungsi add_query_arg () yang mengambil rentetan pertanyaan URL diubah suai. Ia mengambil pelbagai bersekutu yang mempunyai pasangan nilai penting bersama dengan URL lokasi.

Dalam kes ini, saya membuat halaman bernama utama dengan nilai wpw_welcome_page dan mengalihkannya ke fail plugins.php melalui fungsi admin_url (). Ini bermakna saya mengalihkan pengguna ke halaman tersuai di dalam menu Plugin, dan pengguna akan diarahkan ke URL-domain.com/wp-admin/plugin.php?page=wpw_welcome_page anda.

Seterusnya, saya mengaitkan keseluruhan fungsi wpw_safe_welcome_redirect () ke admin_init.

Menambah Sub-Menu Halaman Selamat Datang

Setakat ini, saya telah menentukan prosedur untuk peralihan yang selamat. Lokasi adalah halaman yang terdapat di dalam menu PLUGINS. Tetapi saya belum membuat halaman ini. Sekarang mari kita buat halaman selamat datang di dalam menu Plugin.

Baki kod selamat datang-logic.php adalah:

Untuk menambah sub-menu, saya buat fungsi wpw_welcome_page (), di dalamnya saya memanggil fungsi add_submenu_page ().

Fungsi add_submenu_page () menambah halaman di dalam menu. Ia mengambil senarai parameter:

  • $parent_slug (Diperlukan): Nama slug atau fail untuk menu ibu bapa.
  • $page_title (Diperlukan): Teks yang akan dipaparkan dalam tag tajuk halaman apabila menu dipilih.
  • $menu_title (Diperlukan): Teks yang akan digunakan untuk menu ini.
  • keupayaan$ (Diperlukan): Keupayaan yang diperlukan untuk menu ini dipaparkan kepada pengguna.
  • $ menu_slug (Diperlukan): Nama slug untuk merujuk kepada menu ini oleh (sepatutnya unik untuk menu ini). Ia adalah wpw_welcome_page, sama seperti yang kita tetapkan semasa fungsi pengalihan selamat.
  • Fungsi $ (Pilihan): Fungsi panggil balik yang dipanggil untuk mengeluarkan kandungan untuk halaman ini.

Saya telah menentukan nilai parameter ini, dan akhirnya, saya menambah fungsi wpw_welcome_page () sebagai add_action ke admin_menu.

Sekarang kita perlu mengendalikan kandungan halaman selamat datang, yang mana saya buat fungsi wpw_welcome_page_content () (ini adalah fungsi panggil balik untuk add_submenu_page () yang memerlukan fail selamat welcome-view.php.

Anda mungkin perasan bahawa saya telah membuat pembolehubah global $ wpw_sub_menu yang mengandungi ID skrin halaman untuk halaman sub-menu baru kami. Kami akan menggunakannya dalam bahagian seterusnya.

Enqueue Custom Style.css

Tepat selepas semua ini, saya telah memesona fail style.css untuk gaya penyesuaian unsur-unsur dalam halaman selamat datang kami. Di dalam kod di atas, saya menetapkan pembolehubah global $ wpw_sub_menu yang mengandungi ID skrin halaman sub_menu.

Kami boleh menyemak ID skrin ini semasa mencengkam fail gaya kami untuk memastikan bahawa ia hanya enqueued apabila kami melayari halaman selamat datang dan tidak di mana-mana di dalam admin. Itulah yang dilakukan oleh kod berikut.

Logik halaman selamat datang kami selesai. Anda boleh melihat kod lengkap untuk fail selamat datang-logic.php di GitHub.

Tampilan halaman selamat datang

Sekarang setelah logika halaman selamat datang kami selesai, Anda sebenarnya bisa menguji plugin yang Anda buat, dan ini akan mengarahkan Anda kembali ke halaman selamat datang. Satu-satunya hal yang harus dilakukan adalah membangun tampilan halaman selamat datang Anda. Ini bisa menjadi apapun yang Anda inginkan, tapi saya ingin meninggalkan Anda dengan beberapa boilerplate untuk alasan yang jelas.

Bahagian HTML dan CSS plugin terletak di dalam fail selamat datang-view.php. Kodnya berjalan seperti berikut:

Fail bermula seperti fail PHP biasa dengan DocBlock dan kemudian kod untuk pemeriksaan ABSPATH supaya tidak ada yang dapat mengakses fail secara langsung. Selepas itu, saya membuat pembolehubah untuk versi plugin dan laluan untuk imej logo kami.

CSS Styling

Saya telah menambah folder yang dipanggil css dan fail yang dipanggil style.css di dalamnya untuk membuat beberapa gaya tersuai untuk halaman selamat datang. Kod ini kelihatan seperti berikut. Ini adalah kod yang digunakan untuk mengubahsuai kelas tambahan yang saya tambah untuk logo kami. (Anda boleh menambahnya seperti yang anda suka; Saya baru sahaja menukar logo WP supaya mudah untuk tujuan tutorial ini.)

Selepas itu, terdapat bahagian HTML halaman kami. Terdapat video dari YouTube yang tertanam sebagai video responsif.

Bahagian HTML halaman selamat datang sama dengan halaman selamat datang lalai WordPress. Manfaatnya ialah kita tidak perlu menulis banyak CSS, dan pengguna sudah biasa dengan format terbina dalam.

Plugin adalah sambungan untuk WordPress. Anda boleh memperluaskan WordPress dengan membuat plugin, oleh itu saya fikir anda harus sentiasa menggunakan gaya lalai dan terbina dalam untuk memastikan perkara lebih sesuai dengan papan pemuka WordPress. Sesetengah plugin menambah ikon berwarna dan latar belakang berat atau mana-mana, tetapi pada penghujung hari mereka akhirnya mengganggu pengalaman pengguna yang lancar.

Saya yakin pemaju plugin berpengalaman dengan pengaturcaraan HTML. Inilah kod itu juga.

Kod ini memaparkan susun atur berikut:

  • tajuk plugin, versi, perihalan, dan logo
  • tutorial permulaan ringkas dalam bentuk langkah-langkah
  • tutorial video membantu melalui YouTube
  • senarai ciri plugin dua bertajuk

Pada masa penulisan, anda boleh menggunakan kelas CSS berikut untuk membuat lajur:

  • .ketua bahagian bersama dengan .one-col: Untuk membuat lajur tunggal.
  • .ketua bahagian bersama dengan .two-col: Untuk mencipta dua lajur.
  • .ketua bahagian bersama dengan .three-col: Untuk membuat tiga lajur.

Ini melengkapkan pembangunan plugin kami. Mari kita uji di laman web demo.

Pelaksanaan Praktikal

Untuk menguji plugin di laman web demo, anda boleh memuat turun dan memasang WP-Welcome-Page-Boilerplate-For-TutsPlus dari GitHub.

Selepas itu, lakukan langkah-langkah berikut:

  • Log masuk ke papan pemuka WordPress.
  • Pergi ke menu Plugins dan klik Tambah Baru.
  • Klik butang Upload Plugin dan tambahkan fail zip yang anda muat turun daripada GitHub.
  • Pasang dan aktifkan pemalam

Voila! Telah dialihkan semula ke halaman selamat datang?

Sebaik sahaja anda selesai, kembali ke halaman utama papan pemuka dan tuding tetikus anda ke atas menu Plugin. Satu sub-menu tambahan ditambah, bernama sebagai Halaman Selamat Datang. Untuk mengingatkan anda sekali lagi, ini adalah halaman yang sama yang saya buat sebelumnya.

welcome page sub-menu

Dengan cara ini, halaman selamat datang akhir kelihatan seperti ini.

welcome page for the plugin

Berikut adalah susun atur lengkap skrin selamat datang.

complete layout of the welcome page

Kesimpilan

Ini adalah bagaimana anda boleh membuat halaman selamat datang untuk plugin WordPress anda. Saya telah menerangkan pelaksanaan yang sangat asas. Anda boleh mengubahnya mengikut kehendak anda. Saya akan mengesyorkan memuat turun folder selamat datang dan termasuk welcome-init.php ke produk anda (lakukan perubahan pemalar global dalam fail php selamat datang - *. Php).

Akhirnya, anda boleh menangkap semua kursus dan tutorial saya di halaman profil saya, dan anda boleh mengikuti saya di blog saya dan/atau menjangkau Twitter @mrahmadawais di mana saya menulis tentang alur kerja pembangunan dalam konteks WordPress.

Seperti biasa, jangan teragak-agak untuk meninggalkan apa-apa soalan atau komen di bawah, dan saya berhasrat untuk memberi respons kepada masing-masing.

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.