Cara Edit Website WordPress Menggunakan Plugin Editor

TokoDaring.Com – Cara Edit Website WordPress Menggunakan Plugin Editor. Membuat website eCommerce menggunakan CMS WordPress, bukan berarti tidak bisa di kustomisasi sama sekali. Ada beberapa cara edit website WordPress. Dan WordPress memang ‘memberikan ruang‘ untuk itu.

Bisakah tema WordPress diubah ?

Membuat website eCommerce menggunakan WordPress, maka anda akan sangat bergantung pada tema website yang sudah jadi.

Tema atau WordPress theme adalah sebuah package file (grafik atau gambar, css, kode dan lainnya) yang menentukan tampilan dan fitur keseluruhan situs website.

Tema website yang anda gunakan akan mengontrol sepenuhnya tata letak atau layout, warna, huruf dan fitur lainnya situs website anda.

Pertanyaannya, Bisakah tema WordPress diubah ?

Anda masih tetap bisa merubah layout, warna, huruf atau apapun sesuai keinginan anda. Misalnya ketika anda menggunakan plugin, atau anda memberikan fungsi kustomisasi sendiri melalui script yang anda tambahkan.

Berikut ini beberapa cara edit website WordPress. Baik untuk sekedar mengubah tampilan atau bahkan menambahkan fitur yang tidak bisa di lakukan oleh tema website yang di gunakan.

Cara edit website WordPress

Seperti di artikel kami sebelumnya, ada beberapa Cara Menambahkan Kode HTML di Website eCommerce WordPress, yaitu :

• Memasang plugin.
• Membuat child theme (tema anak).
• Menggunakan plugin editor.

Maka pada artikel ini kami jelaskan bagaimana cara mengkustom bahkan memodifikasi website eCommerce WordPress anda menggunakan plugin editor.

Apa yang dimaksud plugin editor ?

Plugin editor yang kami maksud adalah plugin yang anda buat sendiri. Plugin yang akan mengontrol dan menyimpan setiap script atau kode yang anda tambahkan untuk merubah bahkan menambah fitur website eCommerce anda.

Merubah tampilan atau menambahkan fungsi dan fitur website eCommerce menggunakan plugin editor sangat erat kaitannya dengan WordPress hook. Karena kebanyakan, setiap script yang di tambahkan akan mengkatrol hook tersebut.

Misalnya pada script berikut untuk mengaktifkan iklan google adsense di dalam situs website dengan mengkatrol hook wp_head(). Hook wp_head() di gunakan, untuk menggantikan alih-alih anda menulis script adsense tersebut di dalam file header.php.

Tentang WordPress dan WooCoomerce hook, lihat artikel kami masing-masing berikut, apa itu WordPress hooks dan WooCommerce hooks.

/*
 * Cara Edit Website WordPress
 * Mengaktifkan google adsense
 */

add_action('wp_head','tokodaring_adsense',20);
function tokodaring_adsense() { ?>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345678910111213" crossorigin="anonymous"></script>
<?php
}

Cara kerja plugin editor WordPress

Sebelum mengetahui bagaimana cara membuat plugin editor WordPress, sangat penting untuk mengetahui cara kerjanya. Dengan begitu, anda akan memahami logika dari setiap kode yang di tambahkan maupun hook yang di gunakan.

Cara kerja plugin editor WordPress sebenarnya berfungsi sama seperti plugin yang anda instal.

WordPress di tulis sedemikian rupa sehingga pengembang software lain (plugin developer) dapat menambahkan kode mereka sendiri ke dalamnya. Plugin API WordPress menawarkan serangkaian hooks dan filter.

Hooks dan filter tersebut memungkinkan para developer untuk memodifikasi fitur WordPress yang sudah ada atau menambahkan fitur baru.

Bahkan dengan menggunakan hook, kita bisa merubah tampilan sebuah halaman secara signifikan. Misalnya melakukan modifikasi dan custom halaman login WordPress.

WordPress juga memungkinkan developer untuk membuat dan menyimpan data di database WordPress. Plugin dapat memanfaatkan tipe konten, taksonomi, dan custom fields yang memungkinkan anda untuk menyimpan berbagai jenis konten.

Setiap plugin WordPress yang di instal di situs website anda akan terdaftar di database WordPress. Dan dapat di aktifkan atau di nonaktifkan kapan saja.

Pada setiap website anda di kunjungi melalui browser, maka WordPress akan segera terhubung ke database, lalu akan memuat file inti (core WordPress). Baru setelah itu akan memuat plugin aktif yang anda pasang.

Itu artinya semua kode plugin termasuk kode tambahan yang anda tulis di dalam plugin editor akan diproses pada sisi server. Untuk kemudian di kirim ke browser pengguna untuk ikut di tampilkan.

Contoh cara kerja plugin editor WordPress

Berikut kami berikan satu contoh lagi bagaimana script atau kode yang kami tulis melalui plugin editor dapat merubah fungsi WooCommerce yang sudah ada.

Secara default, teks dari tombol WooCommerce di halaman produk adalah “add to cart”. Atau dalam setting bahasa indonesia adalah “tambah ke keranjang” seperti gambar di sebelah kiri.

Lalu kami ingin agar label tombol tersebut di ubah menjadi ‘Pesan’ seperti pada gambar di sebelahnya. Maka kami tambahkan script berikut ke dalam plugin editor yang di buat.

Hasil live bagaimana hasil dari script yang kami tambahkan tersebut bisa di lihat di halaman single produk yang sesuai dengan gambar.

Artikel lengkap ini, menjelaskan cara mengganti tombol add-to-cart WooCommerce dengan menambahkan kode snippet menggunakan plugin editor (tanpa plugin).

/* 
 * Cara Edit Website WordPress
 * ganti text add to cart WooCommerce
 */

add_filter('woocommerce_product_single_add_to_cart_text','tdr_order_text'); 
add_filter('woocommerce_product_archive_add_to_cart_text','tdr_order_text');
function tdr_order_text() {
    return __('Pesan','woocommerce'); 
}

Cara membuat plugin editor WordPress

Lalu bagaimana cara membuat plugin editor WordPress tersebut ? Mudah saja, dan ini adalah ‘plugin internal’ dengan tujuan hanya akan di gunakan pada website anda sendiri.

Dan berikut langkah-langkah atau cara membuat plugin editor WordPress.

• Dari PC atau laptop, buatlah folder dengan nama “websitesaya-plugin” di sini kami membuat folder dengan nama “TokoDaring-plugin”.
• Buat file php dengan menggunakan notepad dan isikan baris kode berikut, dan simpan ke dalam folder yang baru di buat dengan ekstensi .php : (kami menyimpannya dengan nama TokoDaring-plugin.php).

<?php
/*
 * Plugin Name : TokoDaring-Plugin
 * Description : Kustom code TokoDaring.Com (Cara Edit Website WordPress)
 * Plugin URI : TokoDaring.Com
 */

?>

• Kompres file folder yang berisi file .php tersebut hingga ber-extensi .zip. Contohnya akan memiliki nama “websitesaya-plugin.zip”
• Upload file websitesaya-plugin.zip dan WordPress akan melakukan ‘bongkar paket’ dan menginstalnya.
• Jika berhasil plugin anda akan terlihat pada menu daftar plugin (https://domain.com/wp-admin/plugins.php) dan mungkin anda perlu untuk mengaktifkannya terlebih dulu.
• Jika tidak berhasil membongkar dan memasang plugin periksa lagi baris kalimat yang ditambahkan.
  • Tuliskan nama plugin dan deskripsi di tulis menggunakan bahasa inggris, dalam hal ini adalah :
    • plugin name dan
    • description.
• Coba tes dengan menambahkan kode kustomisasi, jika berhasil maka kode yang ditambahkan akan dieksekusi dan memberikan perubahan pada “section” yang anda inginkan.

Pastikan setiap scipt atau kode kustom yang ditambahkan berada di dalam baris tag berikut ?>.

Fungsi dan kegunaan plugin editor WordPress ?

Dari contoh mengganti label add to cart di atas, jelas sekali bahwa kami merubah sebuah fungsi yang sudah ada. Fungsinya jelas sekali bahwa plugin editor di buat dan di gunakan untuk mennambah atau mengoveride fungsi yang anda.

Dan keuntungan melakukan kustomisasi website eCommerce WordPress menggunakan plugin editor adalah script yang sudah di tambahkan tersebut tidak akan hilang. Meskipun anda mengganti tema, atau bahkan update core WordPress sekalipun, script anda akan tetap bekerja selama hooknya masih sesuai.

Kami banyak melakukan modifikasi atau kustomisasi baik fitur WordPress maupun halaman toko daring kami sendiri. Dan itu kami lakukan dengan menambahkan banyak script via plugin editor. Beberapa kami paparkan dan di terbitkan artikel website ini pada kategori coding for fun.

Apa saja yang bisa di tulis melalui plugin editor ?

Website eCommerce anda, seperti juga kebanyakan website pada umumnya terdiri dari ‘tiga pilar’ bahasa pemrograman, yaitu HTML, CSS dan Javascript.

Dan ketiga bahasa tersebut bisa anda tambahkan melalui plugin editor. Konten artikel kami berikut menjelaskan bagaimana menambahkan masing-masing bahasa ke dalam WordPress.

Seri menambahkan script dan kode HTML, CSS, JS di website eCommerce WordPress :

• Cara Menambahkan Kode HTML di Website eCommerce WordPress.
• Cara Menambahkan Kode CSS Di Website eCommerce WordPress.
• Cara Menambahkan Kode JS Di Website eCommerce WordPress.

Artikel terkait :