Home / WordPress / Cara Membuat Tombol Di Dalam Postingan WordPress

Cara Membuat Tombol Di Dalam Postingan WordPress

Cara Membuat Tombol Di Dalam Postingan WordPress – Bingung juga membuat judul untuk postingan ini. Mungkin lebih tepatnya lagi pembahasan untuk judul postingan ini adalah Cara Membuat Tombol Style Berwarna Yang Disimpan Di Dalam Visual Editor (Postingan) blog CMS WordPress. Saya tidak bisa menggunakan judul itu, karena kepanjangan. Kabarnya tidak baik jika kita membuat judul artikel yang terlalu panjang.

Baca Juga : Cara Membuat Recent Post Kategori Di WordPress

Ketika kita sedang membuat artikel, terkadang kita membutuhkan penyisipan tombol di dalam postingan. Terutama jika blog kita adalah blog yang membahas tentang tutorial, maka kita akan akan membutuhkan tombol-tombol seperti tombol order, tombol download, tombol demo, dan lain-lain.

Jika kita ingin membuat tombol yang akan kita sisipkan didalam visual editor WordPress, maka kita akan membuat style dulu. Hal ini akan membutuhkan waktu yang lebih lama daripada kita tidak sedang membuat artikel yang harus menyisipkan tombol didalamnya. Untuk menghemat waktu, maka sebaiknya kita simpan saja secara permanent tombol-tombol tersebut di dalam visual editor atau postingan WordPress. Sehingga ketika kita membutuhkan style tombol tersebut, kita tinggal memanggilnya saja style yang sebelumnya sudah kita simpan. Lebih jelasnya lagi, Anda bisa lihat hasilnya di bawah ini :

Cara Membuat Tombol Di Dalam Postingan WordPress 1

Praktis bukan? Kita tidak harus repot untuk membuat syle baru ketika kita ingin menyisipkan tombol di dalam postingan WordPress. Tentunya hal ini akan menghemat waktu kita dalam membuat artikel.

Berikut Cara Membuat Tombol Yang Disimpan Di Dalam Postingan WordPress

Untuk membuat tombol menarik yang selanjutnya kita simpan secara permanent di dalam visual editor WordPress kita harus menambahkan kode berikut :

/*--------------------------------------------------------*/ 
/* Tombol Download
/*--------------------------------------------------------*/
function wpb_mce_buttons_2($buttons) {
 array_unshift($buttons, 'styleselect');
 return $buttons;
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');
function my_mce_before_init_insert_formats( $init_array ) { 
// Define the style_formats array
 $style_formats = array( 
 // Each array child is a format with it's own settings
 array( 
 'title' => 'Tombol Merah', 
 'block' => 'span', 
 'classes' => 'tombol-merah',
 'wrapper' => true, 
 ), 
 array( 
 'title' => 'Tombol Oranye', 
 'block' => 'span', 
 'classes' => 'tombol-oranye',
 'wrapper' => true,
 ),
 array( 
 'title' => 'Tombol Emas', 
 'block' => 'span', 
 'classes' => 'tombol-emas',
 'wrapper' => true,
 ),
 array( 
 'title' => 'Tombol Kuning', 
 'block' => 'span', 
 'classes' => 'tombol-kuning',
 'wrapper' => true,
 ),
 array( 
 'title' => 'Tombol Limau', 
 'block' => 'span', 
 'classes' => 'tombol-limau',
 'wrapper' => true,
 ),
 array( 
 'title' => 'Tombol Hijau', 
 'block' => 'span', 
 'classes' => 'tombol-hijau',
 'wrapper' => true,
 ),
 array( 
 'title' => 'Tombol Biru', 
 'block' => 'span', 
 'classes' => 'tombol-biru',
 'wrapper' => true,
 ),
 array( 
 'title' => 'Tombol Ungu', 
 'block' => 'span', 
 'classes' => 'tombol-ungu',
 'wrapper' => true,
 ),
 array( 
 'title' => 'Tombol Netral', 
 'block' => 'span', 
 'classes' => 'tombol-netral',
 'wrapper' => true,
 ),
 array( 
 'title' => 'Tombol Coklat', 
 'block' => 'span', 
 'classes' => 'tombol-coklat',
 'wrapper' => true,
 ),
 ); 
 // Insert the array, JSON ENCODED, into 'style_formats'
 $init_array['style_formats'] = json_encode( $style_formats ); 
 return $init_array; 
} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Silakan Anda pasang kode di atas didalam file functions.php tema yang Anda gunakan. Seperti biasa, untuk masuk ke dalam file functions.php bisa melalui cPanel Hosting atau dashboard wp-admin.

Selanjutnya agar tombol-tombol tersebut terlihat lebih menarik, maka kita harus menambahkan style khusus di dalam file style.css tema yang digunakan. Contoh disini, saya membuat kode untuk mempercantik tombol tersebut seperti kode berikut :

/*-[ Tombol Download ]-------------------*/
.tombol-merah {
 color: #fff!important;
 padding: 7px 30px 5px 30px;
 cursor: pointer;
 text-decoration: none;
 background: #c02e2d;
 border-bottom: 4px solid rgba(0, 0, 0, 0.19);
 border-radius: 4px;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
}
.tombol-oranye {
 color: #fff!important;
 padding: 7px 30px 5px 30px;
 cursor: pointer;
 text-decoration: none;
 background: #d85a16;
 border-bottom: 4px solid rgba(0, 0, 0, 0.19);
 border-radius: 4px;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
}
.tombol-emas {
 color: #fff!important;
 padding: 7px 30px 5px 30px;
 cursor: pointer;
 text-decoration: none;
 background: #fea400;
 border-bottom: 4px solid rgba(0, 0, 0, 0.19);
 border-radius: 4px;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
}
.tombol-kuning {
 color: #fff!important;
 padding: 7px 30px 5px 30px;
 cursor: pointer;
 text-decoration: none;
 background: #f1cb1a;
 border-bottom: 4px solid rgba(0, 0, 0, 0.19);
 border-radius: 4px;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
}
.tombol-limau {
 color: #fff!important;
 padding: 7px 30px 5px 30px;
 cursor: pointer;
 text-decoration: none;
 background: #c3c20b;
 border-bottom: 4px solid rgba(0, 0, 0, 0.19);
 border-radius: 4px;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
}
.tombol-hijau {
 color: #fff!important;
 padding: 7px 30px 5px 30px;
 cursor: pointer;
 text-decoration: none;
 background: #23904e;
 border-bottom: 4px solid rgba(0, 0, 0, 0.19);
 border-radius: 4px;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
}
.tombol-biru {
 color: #fff!important;
 padding: 7px 30px 5px 30px;
 cursor: pointer;
 text-decoration: none;
 background: #0087bb;
 border-bottom: 4px solid rgba(0, 0, 0, 0.19);
 border-radius: 4px;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
}
.tombol-ungu {
 color: #fff!important;
 padding: 7px 30px 5px 30px;
 cursor: pointer;
 text-decoration: none;
 background: #60396d;
 border-bottom: 4px solid rgba(0, 0, 0, 0.19);
 border-radius: 4px;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
}
.tombol-netral {
 color: #fff!important;
 padding: 7px 30px 5px 30px;
 cursor: pointer;
 text-decoration: none;
 background: #7f8381;
 border-bottom: 4px solid rgba(0, 0, 0, 0.19);
 border-radius: 4px;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
}
.tombol-coklat {
 color: #fff!important;
 padding: 7px 30px 5px 30px;
 cursor: pointer;
 text-decoration: none;
 background: #916e2a;
 border-bottom: 4px solid rgba(0, 0, 0, 0.19);
 border-radius: 4px;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: bold;
}

Silakan Anda simpan kode tersebut di dalam file style.css melalui dashboard wp-admin atau cPanel Hosting. Jika style yang saya sajikan kurang cocok dengan selera Anda, sesuaikan saja sendiri.

Nanti jika Anda sukses telah menambahkan kode-kode seperti yang sudah saya contohkan diatas, maka pada visual editor WordPress akan bertambah tombol baru dengan nama Formats.

Cara Membuat Tombol Di Dalam Postingan WordPress 2

Untuk menggunakannya cukup mudah, pertama Anda ketik tulisan yang akan ditampilkan dalam tombol tersebut, contoh Tombol Merah. Kemudian blok tulisan tersebut dan klik Formats. Pilih style yang akan kita gunakan untuk tombol yang akan kita buat dan selesai.

Baca Juga : Cara Membuat Tombol Back To Top Di WordPress

Mungkin hanya itu saja tulisan tentang Cara Membuat Tombol Di Dalam Postingan WordPress. Salam hangat dan semoga bermanfa’at.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

One comment

  1. Ntar deh kapan2 saya coba mas.
    Untuk saat ini belum butuh, soalnya postingannya masih standar2 aja, hihihi..
    Btw thanks buat infonya :)

Leave a Reply

Your email address will not be published. Required fields are marked *