ads

Langkah-Langkah Membuat Option Page WordPress untuk Pemula

Langkah-Langkah Membuat Option Page WordPress untuk Pemula – artikel ini akan membahas langkah-langkah tersebut mulai dari: fungsi dan kegunaan, plugin yang diperlukan, membuat menu custom untuk optiona page, desain form infput option page, menyimpan dan memanggil atau cara menampilkan field option page yang telah kita buat.

Langkah-Langkah Membuat Option Page WordPress untuk Pemula

Apa itu Option Page: Option page atau halaman opsi adalah bagian dari WordPress yang memungkinkan pengguna untuk mengelola pengaturan khusus untuk tema atau plugin yang mereka gunakan. Option page memudahkan pengguna dalam mengonfigurasi dan menyesuaikan fitur-fitur yang ditawarkan oleh tema atau plugin, tanpa perlu mengedit kode secara langsung.

Fungsi Option Page: Option page pada dasarnya berfungsi sebagai antarmuka pengaturan bagi pengguna akhir. Hal ini mencakup menyediakan pengguna dengan berbagai pilihan dan kontrol untuk mengatur tampilan, fungsi, dan perilaku tema atau plugin yang digunakan. Fungsi utama dari option page adalah untuk menyederhanakan proses konfigurasi dan menawarkan fleksibilitas dalam penyesuaian.

Kegunaan Option Page: Option page sangat berguna bagi pengembang tema dan plugin karena memungkinkan mereka untuk menyediakan pengaturan yang mudah digunakan dan diakses oleh pengguna. Dengan option page, pengguna tidak perlu menguasai bahasa pemrograman atau mengedit kode sumber untuk mengubah pengaturan tema atau plugin. Ini membuat proses penyesuaian lebih mudah, cepat, dan aman bagi pengguna WordPress yang kurang berpengalaman atau bahkan pemula.

Contoh yang bisa kita buat dengan option page misalnya:

  1. Membuat field nomor telepon
  2. Membuat field nomor whatsapp
  3. Membuat field alamat
  4. Membuat field google map

Dan masih banyak lagi field-field yang bisa kita tambahkan yang tujuan utamanya adalah untuk mempermudah kita merubah data-data tanpa harus membongkar kode atau mengganti satu persatu.

Contoh kasus:

Tanpa option page: Ketika kita menampilkan nomor telepon didalam konten lalu tiba-tiba kita harus mengganti nomor telepon maka kita harus mengganti satu persatu dari total halaman yang menampilkan nomor telepon didalam konten.

Dengan option page: jika itu terjadi kita cukup melakukan langkah: masuk ke option page -> ganti nomor telepon

Option page berbeda dengan post option perbedaannya adalah: option page berfungsi sebagai global option yang sifatnya statis sedangkan post atau page option sifatnya dinamis yaitu mengikuti value atau data yang kita masukan. Dilain waktu akan kita bahas mengenai post option atau lebih dikenal dengan istilah post meta.

Persiapan Sebelum Membuat Option Page

Berikut adalah beberapa langkah persiapan sebelum membuat option page pada WordPress:

  1. Tentukan fitur dan pengaturan yang akan ditawarkan: Sebelum membuat option page, pikirkan pengaturan dan fitur apa yang ingin Anda tawarkan kepada pengguna. Ini termasuk menentukan tipe input yang akan digunakan (misalnya teks, gambar, pilihan, dll.), serta struktur pengaturan yang akan ditampilkan.
  2. Riset dan analisis tema atau plugin serupa: Telusuri tema atau plugin yang memiliki fitur dan pengaturan serupa dengan yang Anda rencanakan. Ini akan memberi Anda pemahaman yang lebih baik tentang cara terbaik untuk menyajikan pengaturan kepada pengguna dan apa yang diharapkan oleh pengguna dari option page.
  3. Pahami WordPress Settings API: Sebelum mulai membuat option page, penting untuk memahami cara kerja WordPress Settings API. Settings API merupakan cara yang disarankan oleh WordPress untuk mengelola pengaturan tema dan plugin. Dengan memahami API ini, Anda akan dapat membuat option page yang sesuai dengan standar dan praktik terbaik WordPress.
  4. Siapkan lingkungan pengembangan: Pastikan Anda memiliki lingkungan pengembangan yang sesuai untuk membuat option page. Ini termasuk memiliki akses ke instalasi WordPress yang berfungsi, alat pengedit kode (seperti Visual Studio Code, Sublime Text, atau Atom), dan akses ke server lokal atau remote untuk menguji perubahan Anda.
  5. Siapkan dokumentasi dan sumber daya: Kumpulkan dokumentasi dan sumber daya yang relevan untuk membantu Anda selama proses pembuatan option page. Ini mungkin termasuk dokumentasi WordPress resmi, tutorial, contoh kode, dan forum atau komunitas pengembang yang dapat membantu Anda dengan masalah yang mungkin Anda hadapi.

Metode atau Bagaimana Proses Option Page WordPress Bekerja

Setelah pengguna mengisi input field pada option page, berikut adalah proses yang terjadi:

Pengiriman data: Ketika pengguna menekan tombol “Simpan” atau “Submit” pada option page, data dari input field dikirim melalui metode POST atau GET (biasanya POST) ke server di mana instalasi WordPress Anda berada.

Validasi dan sanitasi data: Sebelum data disimpan, penting untuk memvalidasi dan menyaring (sanitize) data yang dikirim oleh pengguna untuk menghindari masalah keamanan dan kesalahan. WordPress menyediakan berbagai fungsi sanitasi untuk membersihkan data input, seperti sanitize_text_field(), sanitize_email(), dan esc_url_raw(). Anda harus menggunakan fungsi ini untuk memastikan data yang disimpan aman dan valid.

Penyimpanan data: Setelah data divalidasi dan disaring, data tersebut disimpan dalam tabel opsi WordPress di basis data. WordPress menyediakan API yang memudahkan penyimpanan dan pengambilan data opsi. Fungsi update_option() digunakan untuk menyimpan nilai opsi ke dalam basis data. Fungsi ini memeriksa apakah opsi sudah ada; jika sudah, maka nilai opsi yang ada akan diperbarui, jika tidak, opsi baru akan dibuat dengan nilai yang disediakan.

Pengambilan data: Untuk mengambil data yang telah disimpan, Anda dapat menggunakan fungsi get_option(). Fungsi ini menerima nama opsi sebagai argumen dan mengembalikan nilai opsi tersebut. Anda kemudian dapat menggunakan nilai ini di dalam tema atau plugin Anda untuk mengaplikasikan pengaturan yang telah ditentukan oleh pengguna.

Menampilkan data yang disimpan: Setelah data disimpan dan diambil, Anda perlu menampilkan pengaturan yang disimpan di option page Anda. Anda akan menggunakan nilai yang diambil dari get_option() untuk mengisi input field ketika option page dimuat. Ini memungkinkan pengguna melihat pengaturan saat ini dan membuat perubahan yang diinginkan.

Proses ini menjelaskan bagaimana data opsi bekerja mulai dari pengguna mengisi input field hingga data disimpan, diambil, dan ditampilkan kembali pada option page. Seluruh proses ini melibatkan berinteraksi dengan API WordPress, seperti Settings API dan Options API, untuk memastikan data disimpan dan dikelola dengan benar.

Beberapa Cara Membuat Wodpress Option Page

Ada beberapa metode yang dapat Anda gunakan untuk membuat WordPress option page. Berikut ini beberapa metode yang umum digunakan:

Menggunakan WordPress Settings API

Settings API adalah cara yang disarankan oleh WordPress untuk membuat option page. API ini menyediakan fungsi dan metode yang memudahkan pembuatan option page, validasi data, penyimpanan, dan pengambilan pengaturan. Dengan menggunakan Settings API, Anda akan memastikan option page Anda sesuai dengan standar dan praktik terbaik WordPress.

Membuat option page secara manual

Meskipun tidak disarankan, Anda juga dapat membuat option page secara manual dengan membuat form HTML, mengatur aksi form untuk menangani penyimpanan data, dan menggunakan fungsi update_option() dan get_option() untuk menyimpan dan mengambil data opsi. Metode ini mungkin lebih sulit untuk dikelola dan tidak sesuai dengan praktik terbaik WordPress, tetapi bisa digunakan jika Anda ingin menghindari menggunakan Settings API.

Menggunakan plugin pihak ketiga

Terdapat beberapa plugin yang dapat membantu Anda membuat option page dengan lebih mudah dan cepat. Beberapa plugin populer meliputi Advanced Custom Fields (ACF), OptionTree, Redux Framework, dan Carbon Fields. Plugin ini menyediakan antarmuka yang mudah digunakan untuk membuat option page dan mengelola pengaturan tema atau plugin Anda. Namun, perlu diingat bahwa tergantung pada plugin pihak ketiga dapat menyebabkan ketergantungan dan masalah kompatibilitas.

Langkah-Langkah Membuat Option Page WordPress untuk Pemula

Sebagai pengembang tema atau plugin, disarankan untuk menggunakan WordPress Settings API saat membuat option page karena ini adalah metode yang paling sesuai dengan standar dan praktik terbaik WordPress. Namun, jika Anda lebih suka menggunakan metode lain, pastikan untuk mempertimbangkan keamanan, kinerja, dan kemudahan pemeliharaan dalam proses pembuatan option page Anda.

Karena panduan ini untuk para pemula maka cara yang akan kita pakai untuk membuat WordPress option page adalah dengan cara menggunakan plugin Carbon Fields.

Mengapa buat option page WP pakai plugin Carbon Fields? mengapa bukan ACF Fields atau Metabox? jawabnya karena kita harus bayar (alias tidak gratis) membuat WP option page baik  itu menggunakan ACF maupun Metabox sedangkan Carbon Fields 100% gratis.

Berikut Langkah-langkah Membuat WP Option Page Dengan Carbon Fields

Tetapi untuk Anda yang belum tahu apa itu Carbon Fields sebaiknya baca artikel ini dulu ya.

Dalam studi kasus kita kali ini adalah kita akan membuat option page sederhana berisi nomor telepon yang akan kita tampilkan dalam bentuk shortcode agar kita bisa tampilkan diberbagai element.

1. Download dan Install Carbon Fields

Kunjungi https://carbonfields.net/release-archive/ untuk mendownload kemudian install Carbon Fields.

2. Backup Website

Agar lebih aman sebaiknya lakukan backup terlebih dahulu. Backup bisa melalui cpanel atau gunakan plugin UpdraftPlus.

3. Buka File Functions.php

Buka folder theme Anda dan temukan file bernama functions.php lalu copy dan paste kode dibawah ini pada baris terakhir kode di functions.php.

// load carbon fields composer
use Carbon_Fields\Container;
use Carbon_Fields\Field;

// dibawah ini kode untuk membuat option page menggunakan carbon fields
// step 1: buat action untuk register field
add_action('carbon_fields_register_fields', 'theme_option_saya');

// step 2: buat function untuk register field
function theme_option_saya() {
    // step 3: buat container untuk field
    Container::make('theme_options', 'Theme Option Saya')
   // keterangan: kode diatas adalah function dengan parameter membuat theme_options dengan nama Theme Option Saya
    // step 4: buat grup field
    ->add_fields([
        // step 5: buat field (kita bisa membuat field dengan tipe data apapun, misalnya text, textarea, checkbox, radio, select, dll)
        // contoh membuat field text
        Field::make('text', 'nomor_telpon_saya', 'Nomor Telepon'),
        // keterangan: text adalah tipe data, nomor_telpon_saya adalah id field atau key field dan Nomor Telepon adalah label field
    ]);
}

Simpan (klik save) lalu refresh (bila perlu) dan perhatikan pada side menu admin Anda sudah ada menu baru bernama: Theme Option Saya.

Note: nama function dan field id tidak boleh sama!

Klik menu tersebut maka sudah tersedia field baru didalamnya dengan nama

Membuat Shortcode Untuk Menampilkan Option Page

Langkah 1: isikan field Nomor Telepon Saya lalu klik save

2. Tambahkan lagi kode berikut pada file functions.php

// dibawah ini kode untuk membuat shortcode untuk menampilkan nomor telepon yang diinputkan di theme option

// step 1: buat action untuk register shortcode
add_shortcode('nomor_telepon', function() {
    // step 2: buat variable untuk menampung nomor telepon yang diinputkan di theme option
    $nomor = carbon_get_theme_option('nomor_telpon_saya');
    // step 3: return variable nomor
    return $nomor;
});

Langkah 3: Buat atau buka post atau page editor Anda lalu ketikan kode shortcode:

[nomor_telepon]

lalu klik simpan jika post/page baru atau klik update jika post/page lama Anda.

Langkah 4: Cek post/page sekarang seharusnya sudah ada nomor telepon.

Demikian dan Anda bisa membuat dan menambahkan field-field option page WP lainnya sebanyak sesuai keperluan Anda secara gratis dengan menggunakan WP plugin Carbon Fields ini.

Contoh pembuatan custom field lainnya yang bisa Anda lihat diwebsite ini adalah:

  1. Association post (lihat block “yuk baca juga”) dibuat menggunakan field association
  2. Loading prism.js juga menggunakan logic carbon fields
  3. Dan masih banyak lagi

Related Posts