Membangun Halaman Selamat Datang untuk Produk WordPress Anda: Kode Bagian 1

Dalam dua artikel pertama dari seri ini, saya telah menulis tentang apa itu halaman selamat datang dan bagaimana mereka mampu membantu produk meningkatkan pengalaman pengguna dengan menghubungkan titik-titik, setelah itu saya menulis tentang API Transients WordPress yang saya gunakan selama membangun halaman selamat datang.

Menulis kode untuk halaman selamat datang untuk plugin WordPress Anda bisa cukup rumit. Seluruh konsep berkisar seputar tentang mengalihkan pengguna ke halaman tertentu melalui pengaturan transiets dan kemudian menghapusnya. Mari membuat halaman selamat datang kita.

Boilerplate Halaman Selamat Datang WP

Saya akan membuat boilerplate halaman selamat datang untuk WordPress dalam bentuk plugin yang bisa digunakan pada produk WordPress Anda. Hasil akhir dari plugin ini telah di-host di GitHub di WP-Welcome-Page-Boilerplate-For-TutsPlus.

Pada titik ini, saya menganggap bahwa Anda memiliki pengaturan berikut:

• mesin atau server web lokal
• demo dashboard WordPress

Arsitektur Plugin

Saya akan membuat plugin sederhana yang menampilkan sebuah halaman selamat datang ketika pengguna meng-install dan mengaktifkan plugin. Mari kita diskusikan arsitektur dari plugin:

• WP-Welcome-Page-Boilerplate: Folder berisi plugin kita.
• WP-Welcome-Page-Boilerplate/welcome: Folder untuk semua yang berhubungan dengan halaman selamat datang.
• WP-Welcome-Page-Boilerplate/welcome/img: Folder untuk gambar.
  
• wp-welcome-page-boilerplate.php: File plugin utama pada folder root. File ini bertanggung jawab untuk mendefinisikan konstan dan file penginisialisasi yang di butuhkan, contohnya welcome-init.php.
• welcome-init.php: File penginisialisasi yang bertanggung jawab untuk tiga hal: menambahkan transient ketika plugin di aktifkan, menghapusnya ketika plugin di nonaktifkan, dan terakhir menambahkan file logic, contohnya. welcome-logic.php.
  
• welcome-logic.php: File logika yang bertanggung jawab untuk pengalihan halaman selamat datang yang aman, membuat submenu halaman selamat datang, dan menambahkan file tampilan halaman selamat datang. contohnya. welcome-view.php.
  
• welcome-view.php: File tampilan yang bertanggung jawab untuk menampilkan halaman selamat datang dan di buat dengan menggunakan PHP dan HTML.
• Ada beberapa folder tambahan untuk gambar dan CSS, dan mereka di namai sesuai dengan tujuan file tersebut.

Anda bisa melihat screenshot berikut untuk memeriksa arsitekturnya.

Alur Kerja Plugin

Plugin bekerja dengan cara berikut ini:

• Menambahkan transient pada aktivasi plugin.
• Menghapus transient pada deaktivasi plugin.
• Pengalihan secara aman ke halaman selamat datang.

File Dasar Plugin Standar

Mari kita mulai berdiskusi dengan konten dari file dasar, yaitu halaman wp-welcome-page-boilerplate.php. Berikut kode lengkapnya:

<?php

/**
 * Plugin Name: WP Welcome Page Boilerplate
 * Plugin URI: https://code.tutsplus.com/articles/building-a-welcome-page-for-your-wordpress-product-introduction--cms-26013
 * Description: Welcome page boilerplate for WordPress plugins.
 * Version: 1.0.0
 * Author: mrahmadawais, WPTie
 * Author URI: http://AhmadAwais.com/
 * License: GPL-3.0+
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 * Domain Path: /lang
 * Text Domain: WPW
 */

if ( ! defined( 'WPINC' ) ) {

    die;

}

Bagian header PHPDoc dari plugin memberitahu WordPress bahwa file ini adalah plugin. Parameter yang ditentukan memberitahu bagaimana data ditangani. Secara minimal, header bisa hanya diisi oleh nama plugin, tapi beberapa bagian bisa – dan biasanya harus – disertakan. Anda bisa membaca tentang persyaratan header di WordPress Plugin Developer Handbook.

Bagian selanjutnya dari kode melakukan pengecekan keamanan. Jika seseorang mencoba untuk mengakses file ini secara langsung, ini akan menjalankan cek ABSPATH, dimana akan menghentikan skrip jika diakses dari luar WordPress.

Setelah itu, kodenya adalah seperti ini:

// Plugin version.
if ( ! defined( 'WPW_VERSION' ) ) {

    define( 'WPW_VERSION', '1.0.0' );

}

// Plugin folder name.
if ( ! defined( 'WPW_NAME' ) ) {

    define( 'WPW_NAME', trim( dirname( plugin_basename( __FILE__ ) ), '/' ) );

}

// Plugin directory, including the folder.
if ( ! defined( 'WPW_DIR' ) ) {

    define( 'WPW_DIR', WP_PLUGIN_DIR . '/' . WPW_NAME );

}

// Plugin url, including the folder.
if ( ! defined( 'WPW_URL' ) ) {

    define( 'WPW_URL', WP_PLUGIN_URL . '/' . WPW_NAME );

}

// Plugin root file.
if ( ! defined( 'WPW_PLUGIN_FILE' ) ) {

    define( 'WPW_PLUGIN_FILE', __FILE__ );

}

Saya telah mendefinisikan beberapa konstan global yang mendefinisikan detil  tentang vesi plugin, folder root, URL, dan file utama plugin.

Masing-masing memiliki pernyataan if(! defined() ), dimana membantu terhindar dari error apapun dikarenakan oleh pendefinisian ulang dari konstan global. Saya merekomendasikan mendefinisikan konstan global dengan awalan nama paket Anda. Nama paket pada plugin ini adalah WPW, contoh WordPress Welcome. Jadi, setiap konstan memiliki awalan WPW_.

Konstan plugin yang didefinisikan adalah:

• WPW_VERSION: Versi Plugin
• WPW_NAME: Name Folder Plugin
• WPW_DIR: Direktori Plugin
• WPW_URL: URL Plugin
• WPW_PLUGIN_FILE: File Root Plugin

Setelah semua konstan ini telah didefinisikan, kita akan mulai dengan konten dari file halaman kita.

Terakhir, saya menyertakan file penginisialisasi halaman selamat datang dan halaman logic.

if ( file_exists( WPW_DIR . '/welcome/welcome-init.php' ) ) {

    require_once( WPW_DIR . '/welcome/welcome-init.php' );

}

if ( file_exists( WPW_DIR . '/welcome/welcome-logic.php' ) ) {

    require_once( WPW_DIR . '/welcome/welcome-logic.php' );

}

Saya suka untuk menjaga kode saya secara minimal, tepat dan terdokumentasi dengan baik. Jadi, daripada menambahkan setiap blok kode pada satu file, saya lebih memilih membuat file individu, masing-masing sesuai dengan satu tujuan mereka. Maka dari itu kenapa kita memiliki sebuah file penginisialisasi yang akan menginisialisasi semua yang berhubungan dengan halaman selamat datang kita.

Pernyataan require_once() membutuhkan file welcome-init.php, tapi sebelum menyertakan sebuah file, saya selalu mengeceknya dengan fungsi PHP file_exists() untuk mencegah adanya error yang fatal jikalau file terhapus.

Prinsip yang sama berlaku untuk halaman logic, yang akan kita dapatkan kemudian di bagian selanjutnya dari series ini.

And bisa mengecek kode final dari file wp-welcome-page-boilerplate.php di GitHub.

Penginisialisasi Halaman Selamat Datang

Untuk mengelola semua file yang berhubungan dengan halaman selamat datang, saya membuat folder terpisah bernama welcome dan menambahkan file welcome-init.php. Keseluruhan kode file ini mengontrol inisialisasi dari halaman selamat datang.

Mari pelajari kode lengkap dari file ini:

<?php

/**
 * Welcome Page Init
 *
 * Welcome page initializer.
 *
 * @since 1.0.0
 */

if ( ! defined( 'WPINC' ) ) {

    die;

}

/**
 * Activates the welcome page.
 *
 * Adds transient to manage the welcome page.
 *
 * @since 1.0.0
 */
function wpw_welcome_activate() {

    // Transient max age is 60 seconds.
    set_transient( '_welcome_redirect_wpw', true, 60 );

}

register_activation_hook( WPW_PLUGIN_FILE, 'wpw_welcome_activate' );

/**
 * Deactivates welcome page
 *
 * Deletes the welcome page transient.
 *
 * @since 1.0.0
 */
function wpw_welcome_deactivate() {

  delete_transient( '_welcome_redirect_wpw' );

}

register_deactivation_hook( WPW_PLUGIN_FILE, 'wpw_welcome_deactivate' );

Kode dimulai dengan dokumentasi tentang file dan pengecekan ABSPATH. Sekarang saya membutuhkan cara untuk menambahkan dan menghapus transient ketika plugin diaktifkan dan dinonaktfikan berurutan.

Untungnya, WordPress menyediakan kita dengan dua hooks untuk tujuan ini.

• register_activation_hook( string $file, callable $function ): Hook ini dipanggil ketika plugin diaktifkan. Dibutuhkan $file utama plugin dan $function yang bisa dipanggil sebagai parameter.
• register_deactivation_hook( string $file, callable $function ): Hook ini dipanggil ketika plugin dinonaktifkan. Dibutuhkan $file utama plugin dan $function yang bisa dipanggil sebagai parameter.

Jadi, sekarang kita perlu untuk memanfaatkan kedua hook ini. Saya telah membuat sebuah transient unuk halaman selamat datang. Fungsi set_transient() dipanggil di dalam fungsi kustom wpw_welcome_activate(). Pada artikel sebelumnya, kita mempelajari bahwa operasi set membutuhkan key, value, dan waktu kadaluwarsa sebagai parameter.

Karena itu, key _welcome_redirect_wpw di set menjadi true untuk 60 detik. Ini mendefinisikan waktu maksimum transient akan kadaluwarsa.

Selanjutnya adalah hook aktivasi, dan seperti kita ketahui hook ini berjalan hanya ketika plugin diaktifkan. Ini menambahkan transient kita ke dalam database. Setelah transient telah masuk ke database, itu berarti kita bisa mengeceknya dan mengalihkan pengguna ke halaman selamat datang kita. Bagaimana cara mengalihkan pengguna? Itu yang akan kita pelajari pada artikel selanjutnya.

Setelah itu, saya menulis kode yang berjalan ketika plugin di nonaktifkan. Kita menginginkan sebuah fungsi dimana transient akan dihapus ketika pengguna menonaktifkan plugin. Untuk melakukan ini, saya memanggil fungsi delete_transient(), dimana membutuhkan key _welcome_redirect_wpw sebagai parameter. Dan kemudian ada fungsi wpw_welcome_deactivate(), yang ditambahkan ke hook penonaktifan plugin.

Bagian ini opsional, tapi saya ingin pengguna saya bisa melihat halaman selamat datang kapanun mereka mengaktifkan plugin. Jika Anda tidak ingin, Anda bisa tentu saja mengabaikan penghapusan transient Anda.

Sejauh ini, saya telah mendiskusikan bagian dari kode yang dibutuhkan untuk membuat dan menghapus sebuah transient. Tapi kode untuk logika halaman selamat datang masih kurang, yang akan mengalihkan pengguna ke halaman selamat datang. Kita akan membahasnya selanjutnya.

Kesimpulan

Itulah untuk hari ini. Jadi, kita sudah setengah jalan. File dasar dan penginisialisasi untuk halaman selamat datang kita telah siap. Sekarang kita peru untuk membuat file logika dan tampilan, dimana itu merupakan rencana untuk artikel selanjutnya.

Akhirnya, Anda dapat membaca semua kursus dan tutorial saya di halaman profil saya, Anda juga dapat mengikuti saya di blog saya dan / atau cek Twitter @mrahmadawais dimana saya menulis tentang alur kerja pengembangan dalam konteks WordPress.

Seperti biasa, jangan ragu untuk meninggalkan pertanyaan atau komentar di bawah ini, dan saya akan berusaha untuk menanggapinya.