{"id":9926,"date":"2020-07-13T20:17:44","date_gmt":"2020-07-13T20:17:44","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=9926"},"modified":"2025-02-14T18:26:53","modified_gmt":"2025-02-14T11:26:53","slug":"cara-membuat-button-di-wordpress","status":"publish","type":"post","link":"\/id\/tutorial\/cara-membuat-button-di-wordpress","title":{"rendered":"Cara membuat button di WordPress dengan shortcode & plugin"},"content":{"rendered":"

Ingin menambahkan tombol (button) ke website WordPress<\/a> tapi belum tahu cara membuat button di WordPress? Platform ini memang tidak memiliki fitur bawaan untuk fungsi tersebut. Tapi tenang, Anda bisa menggunakan shortcode atau plugin.<\/p>

Di tutorial ini, kami akan menunjukkan cara membuat tombol WordPress menggunakan shortcode dan plugin tanpa shortcode. Untuk memulai, kami akan menjelaskan dulu apa itu shortcode.<\/p>

Apa Itu Shortcode WordPress?<\/h2>

Sebelum membahas topik ini lebih lanjut, Anda sebaiknya mengenal dulu apa itu shortcode apabila belum tahu artinya.<\/p>

Shortcode adalah<\/strong> kode sederhana yang berada di dalam tanda kurung siku, misalnya [contoh tombol]<\/strong>. Dengan kode ini, Anda bisa menambahkan fungsi tertentu pada postingan dan halaman WordPress.<\/p>

Untuk menggunakan shortcode WordPress, cukup ketikkan kode di editor postingan, lalu WordPress akan merender kode dan menampilkan hasilnya di website Anda.<\/p>

Salah satu hal keren dari WordPress shortcode adalah Anda bisa membuatnya sendiri apabila opsi yang tersedia kurang sesuai dengan preferensi atau tidak bisa memenuhi kebutuhan Anda.<\/p>

Nah, seperti yang sudah dijelaskan, di artikel ini kami akan membahas cara membuat button WordPress dengan shortcode dan metode lainnya. Namun, proses menulis kode mungkin agak menakutkan kalau Anda belum terbiasa melakukannya.<\/p>

Oleh karena itu, kami juga akan merekomendasikan metode lain yang lebih mudah, yaitu menggunakan plugin. Ada juga metode alternatif lainnya yang mungkin lebih Anda sukai. Jadi, mari mulai tutorial ini!<\/p>

Cara Membuat Button di WordPress<\/h2>

Button atau tombol di website memiliki fungsi penting dalam implementasi strategi untuk meningkatkan konversi. Misalnya, Anda bisa mengajak orang-orang untuk melakukan aksi tertentu, misalnya mendaftar akun (sign up), log in, atau download file.<\/p>

Contohnya adalah Amazon yang menyediakan tombol khusus agar para pengunjung bisa dengan lebih mudah menambahkan produk yang akan dibeli ke cart atau keranjang belanja.<\/p>

\n
\"Button<\/figure><\/div>

Anda juga bisa menyisipkan tombol seperti pada contoh di atas. Mari lihat caranya berikut ini.<\/p>

Cara Membuat Button di WordPress dengan Plugin <\/h3>

Dari banyaknya pilihan plugin button WordPress yang tersedia, kami akan menggunakan MaxButtons<\/a>. Plugin ini telah diinstall lebih dari 100.000 kali dan kompatibel dengan berbagai versi WordPress. Terlebih lagi, MaxButton juga mudah digunakan.<\/p>

\n
\"Dashboard<\/figure><\/div>

Untuk memulai, download dan install plugin tersebut. Kemudian, buka menu MaxButtons<\/strong>. Setelah berhasil masuk ke dashboard plugin, klik Add new<\/strong>. Anda akan diarahkan ke Button Editor<\/strong>.<\/p>

Lengkapi informasi dasar yang diperlukan, misalnya button name<\/strong> (nama tombol untuk mengenali dan mencari tombol apabila ada banyak tombol yang dibuat), URL<\/strong> (link yang disertakan pada tombol), dan button text<\/strong> (teks tombol).<\/p>

Anda juga boleh mengubah font, warna teks, warna kursor teks, dan dimensi button. Semua perubahan atau pengaturan yang Anda buat bisa dilihat dulu pratinjaunya secara langsung melalui area di sisi kanan layar.<\/p>

\n
\"Info<\/figure><\/div>

Scroll ke bawah dan temukan lebih banyak opsi untuk menyesuaikan tampilan button.<\/p>

Kalau sudah merasa puas dengan desain dan gaya button, klik opsi Save<\/strong> yang ada di bagian atas halaman.<\/p>

Kembali ke menu dashboard MaxButtons. Di sana, Anda akan melihat shortcode untuk tombol yang baru saja dibuat. Berikut ini adalah contoh button WordPress yang kami sudah buat, dengan shortcode [maxbutton id=”1”]<\/strong>.<\/p>

\n
\"Button<\/figure><\/div>

Menambahkan Button dengan Shortcode<\/h3>

Untuk menambahkan button ke editor WordPress, cukup salin dan tempelkan shortcode. Atau, Anda juga bisa mengklik Add Button<\/strong> dan memilih button yang ingin ditambahkan:<\/p>

\n
\"Cara<\/figure><\/div>

Lakukan perubahan pada URL dan teks button sesuai yang Anda inginkan terkait isi postingan. Dengan demikian, Anda tidak perlu membuat shortcode lagi untuk digunakan di beberapa postingan.<\/p>

\n
\"Informasi<\/figure><\/div>

Selesai! Anda sudah berhasil membuat button WordPress menggunakan shortcode. Untuk melihat tampilan button, Anda harus memublikasikan postingan dulu.<\/p>

Alternatif Selain Plugin Shortcode<\/h2>

Kelemahan plugin shortcode button WordPress seperti MaxButtons adalah fleksibilitasnya. Kalau ingin mengubah gaya dan tampilan button serta menambahkannya ke postingan atau halaman, Anda harus masuk ke dashboard plugin dulu lalu mengeditnya.<\/p>

Untungnya, ada cara membuat button di WordPress dengan metode lain. Anda bisa menggunakan plugin non-shortcode seperti Forget About Shortcode Buttons<\/a> atau menyisipkan tombol secara manual dengan WordPress Gutenberg.<\/p>

Menggunakan Plugin Non-Shortcode<\/h3>

Seperti namanya, Forget About Shortcode Buttons tidak menggunakan shortcode. Anda bisa langsung membuat tombol di editor WordPress dan mengatur gayanya. Cukup klik ikon Insert Button<\/strong> dan sesuaikan gayanya.<\/p>

\n
\"Menambahkan<\/figure><\/div>

Opsi yang tersedia mirip dengan MaxButtons, termasuk gaya tepian (border), warna latar belakang, dan ukuran tombol. Ada juga fitur berguna yang memungkinkan Anda menambahkan ikon agar tampilan button lebih menarik.<\/p>

\n
\"kustomisasi<\/figure><\/div>

Selain itu, kalau ingin menggunakan tombol tersebut lagi, Anda tidak perlu memulai dari nol. Cukup simpan dengan mengklik ikon Floppy Disk<\/strong>. Anda bisa menggunakannya kembali dari tab Template<\/strong> kapan pun Anda butuhkan.<\/p>

Setelah selesai, klik Update<\/strong> untuk menyisipkan button.<\/p>

Menggunakan Block Button di Gutenberg WordPress<\/h3>

WordPress 5.4 dan versi yang lebih baru memiliki block Buttons<\/strong> yang memungkinkan Anda menambahkan tombol langsung ke postingan atau halaman website. Berikut cara menggunakannya:<\/p>

    \n
  1. Klik tool block inserter<\/strong> di bagian kiri atas editor lalu pilih block Buttons<\/strong>.<\/li>\n<\/ol>
    \n
    \"button<\/figure><\/div>
      \n
    1. Setelah WordPress menambahkan tombol ke editor, pilih tombol tersebut untuk menambahkan label.<\/li>\n<\/ol>
      \n
      \"membuat<\/figure><\/div>
        \n
      1. Untuk membuat lebih banyak tombol, pilih Add Button<\/strong> di pojok kanan bawah block.<\/li>\n<\/ol>
        \n
        \"beberapa<\/figure><\/div>
        \n
        \"\"<\/a><\/figure><\/div>

        Kesimpulan<\/h2>

        Button atau tombol memiliki fungsi yang sangat penting untuk jenis website apa pun. Anda bisa menarik perhatian pengunjung secara efektif dan menambahkan CTA yang mendorong mereka melakukan suatu tindakan.<\/p>

        Namun, WordPress tidak menyediakan fitur bawaan untuk menambahkan tombol ke website sehingga Anda perlu menggunakan beberapa plugin tambahan.<\/p>

        Anda bisa memilih plugin berbasis shortcode dan non-shortcode untuk membuat button di WordPress. Melalui tutorial ini, Anda sudah mempelajari keduanya.<\/p>

        Silakan pilih mana yang paling cocok untuk Anda, lalu mulailah menambahkan tombol pada website. Yuk beri tahu kami pilihan Anda melalui kolom komentar di bawah artikel ini!<\/p>

        \n\n\n

        \n

        Artikel Lain Seputar Hal-Hal Teknis WordPress<\/h4>\n

        Cara Menggunakan do_shortcode WordPress<\/a>
        \n        Cara Menambahkan Font Kustom di WordPress<\/a>
        \n        Cara Mengubah Panjang Kutipan (Excerpt) WordPress<\/a>
        \n        Cara Menyembunyikan Judul Halaman di WordPress<\/a><\/p>\n <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"

        Ingin menambahkan tombol (button) ke website WordPress tapi belum tahu cara membuat button di WordPress? Platform ini memang tidak memiliki fitur bawaan untuk fungsi tersebut. Tapi tenang, Anda bisa menggunakan shortcode atau plugin. Di tutorial ini, kami akan menunjukkan cara membuat tombol WordPress menggunakan shortcode dan plugin tanpa shortcode. Untuk memulai, kami akan menjelaskan dulu […]<\/p>\n

        Read More…<\/a><\/p>\n","protected":false},"author":190,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"Button (tombol) membuat website lebih fungsional. Baca cara membuat button di WordPress menggunakan shortcode dan metode lainnya yuk!","rank_math_focus_keyword":"cara membuat button di wordpress","footnotes":""},"categories":[4859],"tags":[9101,9104,9103,7430,7718,7571,9102,4860,9100],"class_list":["post-9926","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-cara-membuat-button-di-wordpress","tag-forget-about-shortcode-buttons","tag-maxbuttons","tag-plugin","tag-plugin-wordpress","tag-shortcode","tag-shortcode-wordpress-plugin","tag-wordpress","tag-wordpress-shortcode"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/9926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=9926"}],"version-history":[{"count":10,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/9926\/revisions"}],"predecessor-version":[{"id":43155,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/9926\/revisions\/43155"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=9926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=9926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=9926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}