Cara Menambahkan User Interface Untuk Shortcode di WordPress Dengan Shortcake

Bila Anda tengah mengembangkan sebuah situs WordPress untuk seorang client, maka hampir pasti bahwa Anda membuatkan beberapa shortcode untuk digunakan oleh client. Permasalahannya, kebanyakan pemula tidak tahu bagaimana cara menambahkan shortcode. Plus, ditambah dengan beberapa parameter nan kompleks, hal ini menjadi jauh lebih sulit. Shortcake memberikan suatu solusi dengan cara menambahkan sebuah user interface untuk shortcode.

Cara Menambahkan User Interface Untuk Shortcode Di WordPress Dengan Shortcake

Apa itu Shortcake?
WordPress memberikan metode mudah untuk memasukkan kode executeable di dalam berbagai post dan laman dengan menggunakan shortcode. Banyak tema dan plugin yang mengizinkan penggunanya untuk menambahkan fungsionalitas tertentu via shortcode. Namun, terkadang shortcode ini bisa menjadi rumit ketika pengguna perlu menambahkan parameter untuk kustomisasi.

Shortcake adalah sebuah plugin WordPress yang juga telah diajukan untuk dijadikan fitur resmi WordPress. Fungsinya ialah menyediakan sebuah user interface untuk memasukkan value parameter secara mudah dan sederhana. Dengan demikian, shortcode jadi jauh lebih mudah digunakan.

Cara Menambahkan User Interface Untuk Shortcode Di WordPress Dengan Shortcake 1

Memulai
Tutorial ini ditujukan bagi pengguna yang masih hijau di dunia pengembangan WordPress. Pengguna level pemula yang suka mengotak-atik tema WordPress juga akan mendapatkan sedikit manfaat dari artikel ini.

Hal pertama yang perlu Anda lakukan adalah menginstall dan mengaktifkan plugin Shortcake (UI Shortcode). Kemudian, Anda perlu sebuah shortcode yang menerima beberapa parameter dari input pengguna. Sebagai contoh, kita akan menggunakan shortcode sederhana yang membantu pengguna menambahkan button ke dalam post atau laman WordPress mereka. Berikut kode sampel untuk shortcode tersebut, dan Anda dapat menggunakannya dengan memasukkannya ke file tema atau sebuah plugin site-specific.
01 add_shortcode( ‘cta-button’, ‘cta_button_shortcode’ );
02
03 function cta_button_shortcode( $atts ) {
04        extract( shortcode_atts(
05                array(
06                        ‘title’ => ‘Title’,
07                        ‘url’ => ”
08                ),
09                $atts
10        ));
11        return ‘<span class=”cta-button”><a href=”‘ . $url . ‘”>’ . $title . ‘</a></span>’;
12 }

Anda juga membutuhkan sedikit CSS untuk mempermak penampilan tombol. Anda bisa menggunakan CSS berikut di stylesheet tema.
1 .cta-button {
2 padding: 10px;
3 font-size: 18px;
4 border: 1px solid #FFF;
5 border-radius: 7px;
6 color: #FFF;
7 background-color: #50A7EC;
8 }

Berikut ini cara seorang pengguna akan menggunakan shortcode di dalam post dan laman mereka :
[cta-button title=”Download Now” url=”http://example.com”]

Sekarang kita sudah memiliki sebuah shortcode yang menerima beberapa parameter. Langkah berikutnya, kita akan membuat user interface untuk itu.

Meregistrasikan UI Shortcode Anda dengan Shortcake
Shortcake API mengizinkan registrasi UI shortcode. Anda perlu mendeskripsikan atribut apa saja yang diterima oleh shortcode itu, jenis input field, dan post macam apa yang akan menampilkan UI shortcode tersebut. Berikut contoh potongan kode yang kami gunakan untuk meregistrasikan UI shortcode kami. Anda bisa menyalinnya ke file tema atau plugin site-specific WordPress Anda.
01 shortcode_ui_register_for_shortcode(
02
03 /** handle shortcode Anda */
04 ‘cta-button’,
05
06 /** label dan ikon shortcode Anda */
07 array(
08
09 /** Label untuk user interface shortcode Anda. Bagian ini harus diisi. */
10 ‘label’ => ‘Add Button’,
11
12 /** Ikon untuk shortcode. Opsional. */
13 ‘listItemImage’ => ‘dashicons-lightbulb’,
14
15 /** atribut shortcode */
16 ‘attrs’ => array(
17
18 /**
19 * Setiap atribut yang menerima input pengguna akan memiliki array sendiri yang didefinisikan seperti ini
20 * Shortcode kami menerima dua parameter atau atribut, yaitu judul dan URL
21 * Kita pertama-tama akan mendefinisikan user interface untuk field judul
22 */
23
24 array(
25
26 /** Label ini akan tampil di user interface */
27 ‘label’ => ‘Title’,
28
29 /** Ini adalah attr sebenarnya yang digunakan di dalam kode shortcode */
30 ‘attr’ => ‘title’,
31
32 /** Definisikan jenis input. Jenis yang didukung antara lain text, textarea, checkbox, radio, number, date, email, url, dan select. */
33 ‘type’ => ‘text’,
34
35 /** Berikan deskripsi buat pengguna
36 ‘description’ => ‘Please enter the button text’,
37 ),
38
39 /** Di sini, kita akan mendefinisikan user interface untuk field URL */
40
41 array(
42 ‘label’ => ‘URL’,
43 ‘attr’ => ‘url’,
44 ‘type’ => ‘text’,
45 ‘description’ => ‘Full URL’,
46 ),
47 ),
48 ),
49
50 /** Anda dapat memilih jenis post yang akan menampilkan user interface shortcode */
51 ‘post_type’ => array( ‘post’, ‘page’ ),
52 )
53 );

Artikel berhubungan:  Cara Menulis Komentar Blog yang Baik dan Melewati Spam Filter di WordPress

Begitulah, kini Anda dapat melihat penampilan user interface shortcode dengan cara menyunting sebuah post. Cukup klik tombol “Add Media” di post editor. Media Uploader akan ditampilkan, dan Anda bisa melihat item baru bernama “Insert Post Element” di kolom sebelah kiri. Klik di sana dan Anda akan diberikan tombol untuk memasukkan kode Anda.

Cara Menambahkan User Interface Untuk Shortcode Di WordPress Dengan Shortcake 2

Bila Anda meng-klik thumbnail dengan ikon berupa bola lampu tersebut, label Shortcake Anda akan menampilkan user interface shortcode yang telah dibuat.

Cara Menambahkan User Interface Untuk Shortcode Di WordPress Dengan Shortcake 3

Semoga bermanfaat!