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

Indonesian (Bahasa Indonesia) translation by Yanti Baddolo (you can also view the original English article)

Di tulisan saya sebelumnya di seri ini, saya mulai membangun halaman selamat datang untuk plugin WordPress. Saya mendiskusikan arsitektur plugin dan bagaimana fungsinya. Lalu saya menulis kode untuk bagian dasar dan file inisialisasinya dimana kita menambahkan blok kode untuk menambahkan dan menghapus sebuah transient berdasarkan aktivasi dan penonaktifan plugin.

Pada artikel terakhir ini, saya akan mendiskusikan file plugin yang tersisa bersamaan dengan pengimplementasian plugin secara praktikal. Di akhir artikel ini, Anda akan sangat paham bagaimana proses pengkodean halaman selamat datang pertama Anda untuk plugin WordPress.

Logika untuk Pengalihan Halaman Selamat Datang

File welcome-init.php mendefinisikan semua kode yang behubungan dengan proses inisialisasi untuk halaman selamat datang kita. Dimulai dengan menambahkan dan menghapus transient lewat set_transient() (pada pengaktifan plugin) dan delete_transient() (pada penonaktifan plugin)

Karena itu, sekarang kita butuh cara untuk mengarahkan pengguna ke halaman selamat datang kita. Untuk mengelola logika plugin, saya membuat file terpisah bernama welcome-logic.php.

Mari kita bahas kode untuk file ini.

<?php

/**
 * Welcome Logic
 *
 * @since 1.0.0
 * @package WPW
 */

if ( ! defined( 'WPINC' ) ) {

    die;

}

/**
 * Welcome page redirect.
 *
 * Only happens once and if the site is not a network or multisite.
 *
 * @since 1.0.0
 */
function wpw_safe_welcome_redirect() {

    // Bail if no activation redirect transient is present.
    if ( ! get_transient( '_welcome_redirect_wpw' ) ) {

        return;

    }

  // Delete the redirect transient.
  delete_transient( '_welcome_redirect_wpw' );

  // Bail if activating from network or bulk sites.
  if ( is_network_admin() || isset( $_GET['activate-multi'] ) ) {

    return;

  }

  // Redirect to Welcome Page.
  // Redirects to `your-domain.com/wp-admin/plugin.php?page=wpw_welcome_page`.
  wp_safe_redirect( add_query_arg( array( 'page' => 'wpw_welcome_page' ), admin_url( 'plugins.php' ) ) );

}

add_action( 'admin_init', 'wpw_safe_welcome_redirect' );

Jadi, seperti yang Anda tahu sekarang, saya ingin mengikuti standar dokumentasi dan kode WordPress, itulah mengapa ada banyak dokumentasi disana, sementara beberapa ditambahkan agar Anda lebih mengerti.

Salah satu yaitu header DocBlock yang digunakan untuk memberikan wawasan tentang apa yang berada di file ini. Kode dimulai dengan pengecekan ABSPATH, yang menghentikan operasi plugin jika seseorang mencoba mengakses plugin secara langsung. Setelahnya, saya menulis kode rutin untuk pengalihan yang aman.

Saya kemudian mendefinisikan sebuah fungsi bernama wpw_safe_welcome_redirect() untuk menangani pengalihan yang aman ke halaman selamat datang. Di dalamnya, saya melakukan beberapa pemeriksaan dengan if untuk memantau metode pengalihan. Jika Anda telah membaca artikel sebelumnya, Anda tahu bahwa saya mendefinisikan transient _welcome_redirect_wpw dan menetapkan nilainya ke true. Saya akan menggunakan kunci yang sama untuk melakukan pemeriksaan ini. Untuk mendapatkan pemahaman kode yang lebih baik, Anda harus membaca artikel sebelumnya secara rinci.

Mari kita mulai dengan mengetahui apa yang terjadi di fungsi wpw_safe_welcome_redirect().

Langkah #1: Cek jika tidak ada transient pengalihan

Saya memeriksa apakah ada transien aktivasi pengalihan, yaitu _welcome_redirect_wpw, melalui fungsi get_transient(). Fungsi ini digunakan untuk mendapatkan nilai transien. Jika sementara tidak ada, tidak memiliki nilai, atau sudah kadaluarsa, maka nilai return akan menjadi false.

Jadi, jika nilai yang didapat tidak sama dengan true, maka kita tidak perlu mengalihkan pengguna ke halaman selamat datang. Jika nilai yang diterima adalah true dan terdapat transient aktivasi pengalihan, maka kita lanjut ke langkah berikutnya.

Langkah #2: Hapus transient pengalihan

Jika transient _welcome_redirect_wpw bernilai true, maka bisa berarti dua hal: pertama adalah itu terdapat di dalam database, dan kedua adalah kita belum mengalihkan pengguna ke halaman selamat datang. Jadi mari kita hapus transient ini dan alihkan pengguna ke halaman selamat datang kita.

Langkah #3: Cek jika pengaktifan dilakukan dari jaringan atau situs massal

Lalu kita memiliki pernyataan cek selanjutnya yaitu untuk mengkonfirmasi bahwa pengalihan halaman selamat datang yang aman hanya akan terjadi jika situs bukan merupakan sebuah jaringan atau sebuah multi-site. Kita tidak mau mengalihkan ke halaman selamat datang jika plugin diaktifkan dari sebuah jaringan.

Langkah #4: Pengalihan yang aman ke Halaman Selamat Datang

Akhirnya, setelah semua pengecekan, saya mengalihkan pengguna ke halaman selamat datang. Fungsi wp_safe_redirect($location) melakukan pengalihan lokal dan memberi tahu server tentang lokasi $location kemana pengguna akan dialihkan.

Untuk mendefinisikan lokasi, saya menggunakan fungsi add_query_arg() yang mengambil string kueri URL yang dimodifikasi. Ini mengambil array asosiatif yang memiliki pasangan kunci-nilai Bersama dengan URL lokasi.

Dalam kasus ini, saya membuat kunci bernama page dengan nilai wpw_welcome_page dan mengallihkannya ke file plugins.php melalui fungsi admin_url(). Ini berarti bahwa saya mengalihkan pengguna ke halaman kustom di dalam menu Plugins, dan pengguna akan dialihkan ke URL your-domain.com/wp-admin/plugin.php?page=wpw_welcome_page.

Selanjutnya, saya mengaitkan seluruh fungsi wpw_safe_welcome_redirect() ke admin_init.

Menambahkan submenu Halaman Selamat Datang

Sejauh ini, saya telah mendefinisikan prosedur untuk pengalihan yang aman. Lokasinya adalah page yang ada di dalam menu PLUGINS. Tapi saya belum membuat halamanya tersebut. Sekarang mari kita buat halaman selamat datang di dalam menu Plugins.

Kode yang tersisa di file welcome-logic.php adalah:

/**
 * Adds welcome page sub menu.
 *
 * @since 1.0.0
 */
function wpw_welcome_page() {

  global $wpw_sub_menu;

  $wpw_sub_menu = add_submenu_page(
      'plugins.php', // The slug name for the parent menu (or the file name of a standard WordPress admin page).
      __( 'Welcome Page', 'wpw' ), // The text to be displayed in the title tags of the page when the menu is selected.
      __( 'Welcome Page', 'wpw' ), // The text to be used for the menu.
      'read', // The capability required for this menu to be displayed to the user.
      'wpw_welcome_page', // The slug name to refer to this menu by (should be unique for this menu).
      'wpw_welcome_page_content' // The function to be called to output the content for this page.
  );

}

add_action( 'admin_menu', 'wpw_welcome_page' );

/**
 * Welcome page content.
 *
 * @since 1.0.0
 */
function wpw_welcome_page_content() {

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

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

    }
}

Untuk menambahkan submenu, saya menambahkan fungsi wpw_welcome_page(), didalam fungsi yang saya namakan add_submenu_page().

Fungsi add_submenu_page() menambahkan halaman kedalam sebuah menu. Ia menerima beberapa daftar parameter:

$parent_slug (Required): Slug atau nama file untuk menu induk.
$page_title (Required): Teks yang akan ditampilkan di tag judul halaman saat menu dipilih.
$menu_title (Required): Teks yang akan digunakan untuk menu.
$capability (Required): Kemampuan yang dibutuhkan agar menu ini bisa ditampilkan kepada pengguna.
$menu_slug (Required): Nama slug untuk merujuk ke menu ini dengan (harus unik untuk menu ini). Ini adalah wpw_welcome_page, sama seperti yang kita definisikan selama fungsi pengalihan secara aman.
$function (Optional): Fungsi callback yang akan dipanggil untuk menampilkan konten halaman ini.

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

Sekarang kita perlu menangani konten halaman selamat datang, Karena itulah saya membuat fungsi wpw_welcome_page_content() (ini adalah fungsi callback untuk add_submenu_page()) yang memerlukan file welcome-view.php.

Anda mungkin telah memperhatikan bahwa saya membuat variabel global $wpw_sub_menu yang berisi ID layar halaman untuk halaman sub-menu baru kita. Kita akan menggunakan ini di bagian selanjutnya.

Enqueue Style.css Kustom

Tepat setelah ini, saya telah men-enqueued sebuah file style.css untuk menata elemen secara kustom di halaman selamat datang kita. Di kode di atas, saya menetapkan variabel global $wpw_sub_menu yang berisi ID layar halaman sub_menu.

Kita dapat memeriksa ID layar ini saat kita men-enqueue file styles kita untuk memastikan bahwa itu hanya di-enqueue saat kita melihat halaman selamat datang dan tidak di manapun di halaman admin. Itulah yang dilakukan kode berikut.

/**
 * Enqueue Styles.
 *
 * @since 1.0.0
 */
function wpw_styles( $hook ) {

    global $wpw_sub_menu;

    // Add style to the welcome page only.
    if ( $hook != $wpw_sub_menu ) {

      return;

    }

    // Welcome page styles.
    wp_enqueue_style(
      'wpw_style',
      WPW_URL . '/welcome/css/style.css',
      array(),
      WPW_VERSION,
      'all'
    );

}

// Enqueue the styles.
add_action( 'admin_enqueue_scripts', 'wpw_styles' );

Logika untuk halaman selamat datang kita sudah lengkap. Anda dapat melihat kode lengkap untuk file welcome-logic.php di GitHub.

View untuk Halaman Selamat Datang

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 terlihat seperti apapun yang Anda inginkan, tapi saya ingin meninggalkan Anda dengan beberapa boilerplate untuk alasan yang jelas.

Bagian HTML dan CSS dari plugin berada di dalam file welcome-view.php. Kodenya adalah sebagai berikut:

<?php

/**
 * Welcome Page View
 *
 * @since 1.0.0
 * @package WPW
 */

if ( ! defined( 'WPINC' ) ) {

    die;

}

?>

File dimulai seperti file PHP biasa dengan DocBlock dan kemudian kode untuk cek ABSPATH sehingga tidak ada yang bisa mengakses file secara langsung. Setelah itu, saya membuat variabel untuk versi plugin dan path untuk gambar logo kita.

CSS Styling

Saya telah menambahkan sebuah folder bernama css dan sebuah file bernama style.css di dalamnya untuk membuat beberapa style kustom untuk halaman selamat datang. Kode seperti berikut. Ini kode yang digunakan untuk memodifikasi kelas tambahan yang saya tambahkan untuk logo kita. (Anda bisa menambahkannya sesuai keinginan Anda; saya baru saja mengganti logo WP agar tetap sederhana untuk tujuan tutorial ini.)

/* Logo */
.svg .wp-badge.welcome__logo {
    background: url('../img/logo.png') center 24px no-repeat #0092f9;
    background-size: contain;
    color: #fff;
}

/* Responsive Youtube Video*/
.embed-container {
    height: 0;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    top: 0;
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

Setelah itu, ada bagian HTML dari halaman kita. Ada video dari YouTube yang disematkan sebagai video responsif.

Bagian HTML dari halaman selamat datang serupa dengan halaman selamat datang WordPress. Manfaat dari itu adalah kita tidak perlu banyak menulis CSS, dan pengguna sudah terbiasa dengan format built-in.

Plugin adalah ekstensi untuk WordPress. Anda dapat memperluas WordPress dengan membuat plugin, oleh karena itu saya berpikir bahwa Anda harus selalu menggunakan tampilan dan style bawaan agar lebih sesuai dengan dasbor WordPress. Beberapa plugin menambahkan ikon berwarna dan latar belakang yang berat atau yang lainnya, namun pada akhirnya mereka akan mengganggu pengalaman pengguna yang lancar.

Saya yakin pengembang plugin berpengalaman dengan pemrograman HTML. Inilah kodenya.

<div class="wrap about-wrap">

    <h1><?php printf( __( 'WordPress Product &nbsp; %s', 'WPW' ), WPW_VERSION ); ?></h1>

    <div class="about-text">
        <?php printf( __( "WordPress Product's welcome page boilerplate for WordPress plugins.", 'WPW' ), WPW_VERSION ); ?>
    </div>

    <div class="wp-badge welcome__logo"></div>

    <div class="feature-section one-col">
        <h3><?php _e( 'Get Started', 'WPW' ); ?></h3>
        <ul>
            <li><strong><?php _e( 'Step #1:', 'WPW' ); ?></strong> <?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'WPW' ); ?></li>
            <li><strong><?php _e( 'Step #2:', 'WPW' ); ?></strong> <?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'WPW' ); ?></li>
            <li><strong><?php _e( 'Step #3:', 'WPW' ); ?></strong> <?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'WPW' ); ?></li>
        </ul>
     </div>

    <div class="feature-section one-col">
        <h3><?php _e( 'What is Inside?', 'WPW' ); ?></h3>
        <div class="headline-feature feature-video">
            <div class='embed-container'>
                <iframe src='https://www.youtube.com/embed/3RLE_vWJ73c' frameborder='0' allowfullscreen></iframe>
            </div>
        </div>
    </div>

    <div class="feature-section two-col">
        <div class="col">
            <img src="http://placehold.it/600x180/0092F9/fff?text=WELCOME" />
            <h3><?php _e( 'Some Feature', 'WPW' ); ?></h3>
            <p><?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.', 'WPW' ); ?></p>
        </div>
        <div class="col">
            <img src="http://placehold.it/600x180/0092F9/fff?text=WELCOME" />
            <h3><?php _e( 'Some Feature', 'WPW' ); ?></h3>
            <p><?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.', 'WPW' ); ?></p>
        </div>
    </div>

    <div class="feature-section two-col">
        <div class="col">
            <img src="http://placehold.it/600x180/0092F9/fff?text=WELCOME" />
            <h3><?php _e( 'Some Feature', 'WPW' ); ?></h3>
            <p><?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.', 'WPW' ); ?></p>
        </div>

        <div class="col">
            <img src="http://placehold.it/600x180/0092F9/fff?text=WELCOME" />
            <h3><?php _e( 'Some Feature', 'WPW' ); ?></h3>
            <p><?php _e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.', 'WPW' ); ?></p>
        </div>
    </div>

</div>

Kode ini menampilkan layout berikut:

judul plugin, versi, deskripsi dan logo
tutorial memulai singkat dalam bentuk langkah demi langkah
tutorial video bantuan melalui YouTube
daftar fitur plugin dalam 2 kolom

Pada saat penulisan artikel ini, Anda bisa menggunakan kelas CSS berikut untuk membuat kolom:

.feature-section along with .one-col: Untuk membuat satu kolom.
.feature-section along with .two-col: Untuk membuat dua kolom.
.feature-section along with .three-col: Untuk membuat tiga kolom.

Ini melengkapi pengembangan plugin kita. Mari kita uji coba di situs demo.

Implementasi Praktis

Untuk menguji plugin di situs demo, Anda dapat mendownload dan menginstal WP-Welcome-Page-Boilerplate-For-TutsPlus dari GitHub

Setelah itu, lakukan langkah berikut:

Login ke dashbor WordPress.
Pergi ke menu Plugins dan klik Add New.
Klik tombol Upload Plugin dan tambahkan file zip yang anda telah download dari GitHub
Install dan aktifkan plugin

Voila! Apakah anda dialihkan ke halaman selamat datang?

Setelah selesai, kembali ke halaman awal dasbor dan arahkan mouse ke menu Plugins. Submenu tambahan ditambahkan, dinamakan sebagai Halaman Selamat Datang. Untuk mengingatkan Anda lagi, ini adalah halaman yang sama dengan yang saya buat sebelumnya.

Ngomong-omong, versi akhir dari halaman selamat datang akan terlihat seperti ini

Berikut adalah layout lengkap tampilan halaman selamat datang.

Kesimpulan

Ini adalah bagaimana Anda bisa membuat halaman selamat datang untuk plugin WordPress Anda. Saya telah menggambarkan sebuah implementasi yang sangat mendasar. Anda bisa memodifikasinya sesuai kebutuhan Anda. Sebaiknya unduh folder welcome dan sertakan welcome-init.php ke produk Anda (ubahlah konstanta global di file welcome- *. php).

Akhirnya, Anda dapat membaca semua kursus dan tutorial saya di halaman profil saya, dan Anda 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 masing-masing.

1	<?php
2
3	/**
4	* Welcome Logic
5	*
6	* @since 1.0.0
7	* @package WPW
8	*/
9
10	if ( ! defined( 'WPINC' ) ) {
11
12	die;
13
14	}
15
16	/**
17	* Welcome page redirect.
18	*
19	* Only happens once and if the site is not a network or multisite.
20	*
21	* @since 1.0.0
22	*/
23	function wpw_safe_welcome_redirect() {
24
25	// Bail if no activation redirect transient is present.
26	if ( ! get_transient( '_welcome_redirect_wpw' ) ) {
27
28	return;
29
30	}
31
32	// Delete the redirect transient.
33	delete_transient( '_welcome_redirect_wpw' );
34
35	// Bail if activating from network or bulk sites.
36	if ( is_network_admin() \|\| isset( $_GET['activate-multi'] ) ) {
37
38	return;
39
40	}
41
42	// Redirect to Welcome Page.
43	// Redirects to `your-domain.com/wp-admin/plugin.php?page=wpw_welcome_page`.
44	wp_safe_redirect( add_query_arg( array( 'page' => 'wpw_welcome_page' ), admin_url( 'plugins.php' ) ) );
45
46	}
47
48	add_action( 'admin_init', 'wpw_safe_welcome_redirect' );