Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress
Webdesign

Buat Panel Opsi Tema WordPress Anda Sendiri Dengan Framework Redux

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Framework Redux adalah salah satu kerangka panel pilihan yang paling populer, canggih, dan bebas digunakan untuk tema dan plugin WordPress. Fleksibilitasnya memberi Anda kebebasan untuk membuat jenis opsi dan pengaturan apa pun untuk proyek WordPress Anda.

Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana Anda dapat menginstal, menyesuaikan, dan menggunakan framework Redux dalam tema Anda sendiri.

Kita akan melangkah melalui langkah-langkah berikut:

  1. Instalasi
  2. Konfigurasi Umum
  3. Menciptakan sebuah Option Panel
  4. Menggunakan Option dalam tema

Catatan: Saya akan merujuk ke Redux Framework hanya sebagai Redux di seluruh tutorial ini. Tidak menjadikan bingung dengan Redux, "wadah yang dapat diprediksi untuk aplikasi JavaScript".

1. instalasi

Ada tiga cara Anda bisa memasukkan Redux dalam proyek Anda:

  • Instal sebagai plugin terpisah
  • Memasukkannya ke dalam inti tema Anda
  • Sertakan dalam Plugin Theme-Dependent

Instal sebagai Plugin terpisah

Secara default, Redux dapat diinstal sebagai plugin. Jika Anda pergi ke Redux Framework WordPress Plugin Page Anda akan melihat bahwa Anda dapat mengunduhnya sebagai plugin biasa dan menginstalnya di situs WordPress Anda dengan tema apa pun. Ini tidak menciptakan opsi apa pun; yang dapat Anda lakukan hanyalah mengaktifkan mode demo dengan opsi sampel.

Untuk mendapatkan panel opsi dengan opsi khusus untuk tema atau plugin Anda, Anda perlu membuat file config.php terpisah. Baca lebih lanjut tentang cara kerjanya:

Oleh karena itu pro dan kontra dari pendekatan ini adalah:

Kontra

Pro

Instalasi plugin terpisah yang perlu disimpan sebagai file zip baik di server Anda atau di dalam folder tema.

Anda mengurangi ukuran tema Anda ketika panel pilihan bukan bagian dari inti tema.

Peningkatan feeling bahwa tema/plugin bergantung pada pengembangan dan alat pihak ketiga.

Anda menghindari banyak peringatan dan error dari plugin Theme Check.

Sertakan Ini di Inti Tema Anda

Tidak ada yang menghentikan Anda termasuk Redux dalam tema Anda, kecuali itu bertentangan dengan plugin Theme Check. Logikanya sama seperti sebelumnya, Anda masih memerlukan file config.php dengan opsi kustom Anda, tetapi sekarang Anda menghindari instalasi plugin tambahan.

Kontra

Pro

Meningkatkan ukuran size tema.

Hindari pemasangan plugin tambahan.

Potensi konflik dan masalah dapat muncul dari plugin Theme Check.

Panel opsi tema terasa lebih terhubung dengan tema Anda dan lebih terintegrasi.

Kapan pun plugin diperbarui Anda harus memperbarui tema Anda juga.

Sertakan dalam Plugin Theme-Dependent

Menurut pendapat saya, pendekatan ini adalah cara terbaik untuk memasukkan framework Redux. Prosesnya sesederhana pemasangan plugin normal, satu-satunya perbedaan adalah bahwa itu sekarang merupakan bagian dari plugin add-on yang diperlukan tema Anda sendiri.

Tema premium modern biasanya hadir dengan elemen custom - jenis posting khusus dan sebagainya - semuanya ada dalam sebuah plugin, jadi pendekatan logisnya adalah membuat plugin add-on yang terkait dengan tema Anda. Dalam plugin add-on Anda dapat menyertakan panel opsi tema Anda. Pelajari lebih lanjut tentang membuat plugin yang bergantung pada tema dalam tutorial ini:

Kontra

Pro

Tidak menemukan :)

Hindari pemasangan plugin tambahan.

Panel opsi tema terasa lebih integral dengan tema Anda.

Proses konfigurasi Redux tidak terpengaruh oleh metode instalasi, jadi terserah pada Anda bagaimana Anda ingin memasukkan Redux dalam proyek Anda. Yang mengatakan, saya masih lebih suka opsi terakhir, jadi itulah pendekatan yang akan saya gunakan untuk mendeskripsikan konfigurasi.

2. Konfigurasi Umum

Jika Anda memeriksa folder plugin Redux Framework default, Anda akan menemukan banyak file dan direktori, tetapi semua yang Anda perlukan di sini adalah folder ReduxCore.

the ReduxCore folder
ReduxCore folder

Salin semua konten dari folder itu ke folder plugin add-on Anda. Buat folder, sebut saja apa pun yang Anda inginkan, misalnya optionpanel, dan masukkan konten ReduxCore ke dalamnya. Selanjutnya, buat file kosong di dalam folder itu dan beri nama config.php. Selanjutnya kita akan membutuhkan reduxframework, yang akan kita lakukan dengan cara tanpa konflik, jadi jika plugin add-on diinstal di lingkungan WordPress situs tidak akan crash.

Pada FILE utama plugin add-on Tambahkan kode:

Itu semuanya! Kerangka Redux Anda sekarang terintegrasi, meskipun Anda belum melihat panel opsi apa pun, karena pertama-tama kita perlu membuat beberapa opsi. Ini semua akan dilakukan dalam file config.php yang kita buat.

3. Membuat Panel Opsi

Sebagai panduan dan titik awal Anda dapat menggunakan file contoh-config.php yang disediakan dengan plugin Redux. Ini berisi semua kode yang diperlukan untuk mulai membuat opsi kustom Anda sendiri. Untuk saat ini mari sorot proses konfigurasi utama.

Buka file config.php Anda dan pada awalnya tambahkan kode ini (tag pembuka <?php tag tidak diperlukan jika sudah ada

Pemeriksaan ini memastikan bahwa Kerangka Redux aktif, jika tidak semua opsi yang kita buat akan gagal berfungsi dan kemungkinan akan membuang banyak PHP error.

Sebelum kita mulai membuat opsi, pertama-tama kita perlu beberapa konfigurasi tambahan. Buat variabel yang akan menyimpan semua opsi Anda dan dapat digunakan dalam file tema Anda:

Jadikan unik, dengan menggunakan awalan, misalnya: namabrandAnda_namatemaAnda

Setelah itu, tambahkan kode:

Ini diperlukan untuk mengkonfigurasi argumen Redux mana pun yang menggunakan informasi tentang tema yang diinstal.

Argumen

Pada titik ini kita perlu menambahkan argumen berikut:

Ada banyak argumen di sini, tapi jangan khawatir, saya akan menyoroti yang paling penting.

menu_type

Jika Anda ingin halaman opsi tema Anda muncul sebagai item menu tingkat atas terpisah Anda harus mengatur nilai ini ke menu, jika Anda membutuhkan opsi tema Anda untuk muncul sebagai submenu (saya lebih suka menempatkan itu di bawah Appearance) atur nilainya ke submenu.

dev_mode

Anda dapat mengaktifkan ini selama pengembangan, tetapi jangan lupa untuk menonaktifkannya saat memublikasikan tema.

update_notice

Karena Redux akan menjadi bagian dari proyek Anda, Anda tidak akan ingin pengguna Anda mendapatkan pemberitahuan pembaruan apa pun dari Framework Redux, jadi set ini menjadi false.

Customizer

Jika Anda ingin menunjukkan pengaturan kustom Anda sebagai bagian dari penyesuai WordPress atur argumen ini menjadi true.

Array argumen berisi lebih banyak item, dan jika Anda menginginkan informasi pada masing-masing, Anda dapat menemukan detail dalam sample-config.php. Untuk kebutuhan kita, kita telah menyesuaikan cukup argumen. Sekarang mari kita tentukan argumennya.

Menambahkan Section

Sekarang panel tema Anda sudah siap, Anda dapat menambahkan bagian dengan opsi. Pikirkan tentang bagian sebagai group. Jika Anda ingin menambahkan (misalnya) opsi header, Anda membuat bagian header dan menambahkan opsi ke dalamnya. Untuk membuat section mana pun Anda akan membutuhkan struktur berikut:

Di sini saya ingin menyoroti atribut id membuat yakin itu unik. Anda dapat menggunakan ikon kustom, tetapi default ikon pack adalah elusiveicons.

Bagian Anda dibuat, jadi sekarang Anda dapat menambahkan opsi ke field array. Daftar jenis opsi yang tersedia, serta struktur kode dengan explaination dan highlight, dapat ditemukan di sini.

Jika Anda ingin membuat bagian subsection dari bagian yang ditambahkan sebelumnya, tambahkan saja argumen baru 'subsection' => true.

Pilihannya sendiri tidak lebih dari sebuah array dengan argumen, misalnya:

Dengan kode ini, kita telah menambahkan kotak centang ke bagian kita. Hal yang paling penting di sini adalah id (harus unik), dan type (itu harus benar, dan ikuti penamaan yang tepat dari jenis field yang disediakan Redux). Sekali lagi, rincian lebih lanjut tentang field/bidang dapat ditemukan dalam file sample-config.php.

Secara umum, inilah yang perlu Anda ketahui untuk membuat panel opsi. Selanjutnya kita akan melihat cara menggunakan opsi ini.

4. Menggunakan Opsi dalam Tema

Redux menyimpan semua opsi dalam variabel global. Ingat variabel $opt_name yang kita buat di file config.php? Itu adalah variabel yang menyimpan semua opsi Anda, dan Anda dapat mengaksesnya dengan cara berikut.

Pertama, Anda perlu mendeklarasikan variabel global. Dan ini menyajikan masalah potensial pertama: tidak disarankan untuk mendeklarasikan variabel global di luar fungsi atau tindakan. Solusinya adalah dengan menambahkan file function.php Anda fungsi kecil ini:

Kemudian, di setiap halaman Anda ingin menggunakan opsi Anda, jalankan fungsi seperti ini:

Jika Anda membutuhkan variabel global di dalam fungsi atau tindakan lain, Anda dapat mendeklarasikannya tanpa fungsi ini.

Menggunakan Opsi

Jika Anda menggunakan opsi tanpa terlebih dahulu memeriksa opsi yang ada, Anda akan mendapatkan pemberitahuan PHP yang mengatakan sesuatu tentang variable/index yang tidak terdefinisi. Mengapa ini penting? Karena jika pengguna mengaktifkan tema Anda, tetapi tidak mengaktifkan plugin add-on yang berisi panel opsi Anda, ia akan melihat koleksi pemberitahuan peringatan PHP pada variabel yang tidak terdefinisi. Tidak ideal.

Ada pola yang bagus untuk menghindari situasi ini — kelihatan seperti ini:

Dengan pemeriksaan kecil ini Anda memastikan bahwa Anda tidak akan mendapatkan pemberitahuan variable/index yang tidak terdefinisi. Jika Anda tidak ingin menetapkan nilai default atau membuat variabel, Anda dapat menggunakan pola ini sebagai gantinya:

Kesimpulan

Terima kasih telah membaca, semoga ini membuat Anda mulai menggunakan Redux untuk opsi tema Anda! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bawah ini.

Link yang berguna

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.