Menambahkan Tombol Button Copy to Clipboard di WordPress

Apa Itu Tombol “Copy to Clipboard”?

Tombol ini berfungsi agar pengunjung blog kamu bisa menyalin teks (seperti prompt AI, kode, dll) hanya dengan satu klik — tanpa harus seleksi teks manual.

Masalah Umum: Kenapa Kode onclick Tidak Bisa Disimpan di Editor WordPress?

WordPress, terutama di Gutenberg Editor, secara default memblokir JavaScript inline seperti:

<button onclick="copyText()">Copy</button>

Ini karena alasan keamanan (XSS Protection). Akibatnya:

• • Saat kamu simpan, bagian onclick=”…” akan otomatis dihapus oleh WordPress.
  • Jadi tombol tetap muncul, tapi fungsinya tidak bekerja.

Masalah prompt hilang saat di-save di WordPress post dapat juga dosebabkan karena WordPress memfilter HTML dan JavaScript tertentu demi keamanan. Secara default, WordPress akan:

• • Menghapus <script> tag
  • Memfilter atribut seperti onclick, onmouseover, dll.
  • Menyaring elemen custom seperti <button onclick=”…”> saat menggunakan Classic Editor atau Block Editor (Gutenberg) tanpa izin khusus.

Solusi yang Bisa Dicoba:

1. Gunakan Plugin untuk Izinkan Kode Custom

Agar onclick dan sejenisnya tidak dihapus:

• Plugin: WPCode – Insert Headers and Footers + Custom Code Snippets
  Bisa menyisipkan JS dan HTML custom melalui “Code Snippet” area.
• Plugin: Raw HTML
  Gunakan shortcode [raw]…[/raw] agar WordPress tidak menyaring HTML dan JS tertentu.

Contoh:

[raw]
<button class="copy-btn" onclick="copyPrompt('prompt1')">Copy Prompt</button>
[/raw]

Copy Code

2. Gunakan Gutenberg HTML Block

• Tambahkan “Custom HTML Block”.
• Tempelkan HTML dan JavaScript di situ.
  Namun, perlu catatan: jika menyisipkan JS di dalam post, Gutenberg bisa tetap menyaringnya. Alternatif: sisipkan JS terpisah di Footer via plugin WPCode.

3. Pisahkan JavaScript ke File Sendiri

Lebih aman dan bersih:

HTML post:

<button class="copy-btn" data-prompt-id="prompt1">Copy Code</button>
<pre id="prompt1">Teks prompt di sini...</pre>

Copy Code

JavaScript (misal ditaruh via custom js di fitur theme option):

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.copy-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const id = btn.getAttribute('data-prompt-id');
      const text = document.getElementById(id).innerText;
      navigator.clipboard.writeText(text).then(() => {
        alert('Prompt berhasil disalin!');
      });
    });
  });
})

Copy Code
 

4. Pakai JavaScript Eksternal + Data Attribute

Tambahkan HTML Tombol dan Teks:

<pre id="prompt1">Tulis prompt kamu di sini...</pre>

Copy Code

<button class="wp-block-button__link copy-btn" data-prompt-id="prompt1">Copy Prompt</button>

Copy Code

Gunakan class wp-block-button__link agar tampilan konsisten dengan tema WordPress kamu.

Tambahkan Script di Footer (functions.php child theme)

Tambahkan kode berikut ke file functions.php pada child theme:

function add_custom_copy_script() {
    ?>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".copy-btn").forEach(function (button) {
          button.addEventListener("click", function () {
            const targetId = this.dataset.promptId;
            const text = document.getElementById(targetId).innerText;
            navigator.clipboard.writeText(text).then(() => {
              this.innerText = "✅ Copied!";
              setTimeout(() => this.innerText = "Copy Prompt", 2000);
            });
          });
        });
      });
    </script>
    <?php
}
add_action('wp_footer', 'add_custom_copy_script');

Copy Code

Tips Tambahan: Ubah Tampilan Tombol Sesuai Tema

Kamu bisa gunakan class CSS sesuai theme:

• btn, btn-primary (jika pakai Bootstrap)
• bg-blue-600 text-white px-4 py-2 (jika pakai Tailwind)
• wp-block-button__link (jika pakai default WP themes)
• Hindari onclick=”…” langsung di elemen HTML jika sering pakai WordPress. Lebih baik delegasikan via JS eksternal.
• Pastikan user role kamu adalah Administrator, karena role lebih rendah kadang juga tidak bisa menyimpan JS atau embed tertentu.

Contoh lainnya:

<button class=”btn btn-outline-dark copy-btn” data-prompt-id=”prompt1″>Copy Prompt</button>

Kesimpulan

Referensi

• WordPress Developer Docs – Escaping HTML
• MDN Web Docs – navigator.clipboard
• Stack Overflow – WordPress Removing onclick