Pendahuluan

Setelah kamu memahami apa itu ChatGPT dan bagaimana menyusun prompt dengan benar, sekarang saatnya terjun langsung membuat plugin WordPress pertama kamu. Di artikel ini, kita akan membahas studi kasus sederhana: plugin tombol “Kembali ke Atas” (Back to Top). Proyek ini sangat cocok untuk pemula, namun cukup memberi gambaran bagaimana ChatGPT bisa menghasilkan sesuatu yang fungsional—tanpa kamu menulis satu baris kode pun sendiri.

Tujuan Plugin yang Akan Dibuat

Plugin ini akan:

• Menambahkan tombol di pojok kanan bawah halaman.
• Saat tombol diklik, halaman akan scroll otomatis ke atas.
• Dilengkapi dengan sedikit CSS agar tampilannya menarik.

Menyusun Prompt untuk Plugin

Berikut prompt yang kita kirim ke ChatGPT:

Prompt:
“Tolong buatkan plugin WordPress yang menambahkan tombol ‘Kembali ke Atas’ di pojok kanan bawah. Saat diklik, tombol ini akan scroll halaman ke atas secara smooth. Sertakan file utama plugin dan kode CSS-nya.”

Hasil Balasan dari ChatGPT

ChatGPT akan memberikan struktur file seperti berikut:

1. back-to-top-button.php (file utama plugin)

<?php
/**
 * Plugin Name: Back to Top Button
 * Description: Menambahkan tombol 'Kembali ke Atas' di pojok kanan bawah.
 * Version: 1.0
 * Author: Nama Kamu
 */

function btt_enqueue_assets() {
    wp_enqueue_style('btt-style', plugin_dir_url(__FILE__) . 'btt-style.css');
    wp_enqueue_script('btt-script', plugin_dir_url(__FILE__) . 'btt-script.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'btt_enqueue_assets');

function btt_add_button() {
    echo '<button id="backToTop" title="Kembali ke Atas">&#8679;</button>';
}
add_action('wp_footer', 'btt_add_button');

2. btt-style.css (CSS)

#backToTop {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 100;
    display: none;
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

3. btt-script.js (JavaScript)

jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('#backToTop').fadeIn();
        } else {
            $('#backToTop').fadeOut();
        }
    });
    $('#backToTop').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 600);
        return false;
    });
});

Cara Menguji Plugin

1. Buat folder baru di dalam /wp-content/plugins/ misalnya: back-to-top-button.
2. Simpan file:
   • back-to-top-button.php
   • btt-style.css
   • btt-script.js
     ke dalam folder tersebut.
3. Masuk ke dashboard WordPress, buka Plugins > Installed Plugins.
4. Aktifkan plugin Back to Top Button.
5. Buka salah satu halaman di situsmu, scroll ke bawah, dan lihat tombolnya muncul!

Apa yang Bisa Kamu Pelajari dari Studi Kasus Ini

✅ Prompt yang jelas → hasil coding yang akurat.
✅ Struktur file plugin sederhana bisa langsung diuji.
✅ Kamu bisa meminta ChatGPT untuk menjelaskan kembali fungsi-fungsi dalam plugin ini.
✅ Jika ingin modifikasi (ubah warna tombol, tambahkan animasi, dsb), kamu tinggal ubah prompt dan minta revisi.

Lanjutkan dengan Variasi Prompt

Berikut beberapa ide yang bisa kamu eksplorasi lebih lanjut dengan ChatGPT:

• “Tambahkan opsi pengaturan di admin untuk mengatur warna tombol.”
• “Tampilkan tombol hanya di halaman tertentu.”
• “Gunakan ikon SVG alih-alih teks.”

Cukup ubah prompt dan minta ChatGPT menyesuaikan. Kamu jadi developer kreatif tanpa menulis dari nol.

Kesimpulan dan Arah Selanjutnya

Kamu baru saja membuktikan bahwa membuat plugin WordPress bisa dilakukan tanpa mengerti coding, cukup dengan prompt yang baik dan pemahaman tentang struktur dasar plugin. Di artikel berikutnya, kita akan bahas cara menulis prompt lanjutan untuk plugin yang lebih kompleks, seperti form, shortcode, atau bahkan integrasi dengan Elementor.

«Previous

Ayo Coba Ubah Prompt Versimu!

Buka chat.openai.com, salin prompt tadi, lalu ubah fitur sesuai kebutuhanmu. Dalam hitungan menit, kamu bisa punya plugin versimu sendiri. Selamat mencoba!