Memulai Dengan Redux Framework: Pendahuluan dan Memadukannya Ke Dalam Theme

Ketika pemilik situs menginstal sebuah theme WordPress baru, hal pertama yang mereka ingin lakukan adalah memperbaiki tampilan untuk menyesuaikan dengan branding atau preferensi mereka. Dan kebanyakan waktu, orang yang membeli, download, atau menginstal theme WordPress memiliki sedikit atau tidak ada pengalaman coding.

Jadi bagaimana kamu, sebagai seorang pengembang theme, memudahkan pengguna theme untuk memiliki sebanyak mungkin kendali terhadap tampilan situs mereka tanpa harus belajar tentang code?

Dengan membuat halaman / panel options, tentu saja!

Bagaimana pun juga, halaman option theme tidak mudah dibuat—khususnya bagi para pengembang yang tidak memiliki banyak pengalaman dengan WordPress atau programming secara umum. Beruntungnya, ada framework option.

Apakah Framework Option itu?

Framework options adalah librari code, plugin atau class yang menyediakan fondasi yang solid dimana pengembang dapat dengan mudah dan cepat membangun untuk membuat dan menambahkan halaman options pada theme mereka. Ini memudahkan non-pengembang untuk menggunakan panel agar dengan cepat mengkustomasi tampilan situs mereka, tanpa menyentuh code.

Panel Options dapat digunakan untuk:

• mengupload sebuah logo
• mengganti warna background atau properti CSS apapun dari sebuah elemen (seperti header atau footer theme)
• memilih skin atau layout yang telah ditentukan sebelumnya
• menambahkan custom CSS atau JavaScript
• dan banyak lagi

Pada dasarnya, panel options dapat menempatkan kekuatan ke dalam tangan pengguna theme dengan memudahkan mereka untuk mengubah hampir tiap aspek desain situs mereka.

Dalam seri ini, kita akan melihat framework yang sangat populer yang digunakan secara luas—Redux Framework.

Seri ini akan dibagi ke dalam bagian-bagian berikut:

• Bagian 1: Pendahuluan Redux Framework dan Memadukannya Ke Dalam Theme
• Bagian 2: Menambahkan Sections dan Fields & Berkerja Dengan Pengaturan Konfigurasi
• Bagian 3: Menggunakan Options Dalam Theme (dan Widgets)
• Bagian 4: Alternatif Selain Redux
• Bagian 5: Kesimpulan

Apakah Framework Options Redux?

Redux Framework adalah sebuah framework options yang dilahirkan dari kombinasi empat framewowk, yaitu:

• NPH, yang dibuat oleh Lee Mason dengan tujuan membuat sebuah framework yang kompatibel dengan persyaratan ThemeForest
• SMOF
• SimpleOptions, yang merupakan gabungan antara framework di atas, dibuat oleh Dovy Paukstys
• Versi Redux sebelumnya (Redux 2.0), dibuat oleh Daniel Griffiths dan berbasis NPH

Tim inti Redux terdiri dari pengembang ketiga framework tersebut. Project ini di bawah pengembangan aktif, yang mengupdate rilis secara reguler.

Fitur-Fitur Redux

• Menggunakan WordPress Settings API
• Berbagai jenis field
• Validation class bawaan
• Dapat diperpanjang
• Fungsi import/export, membolehkanmu untuk memasang pengaturan di sepanjang situs

Mengapa Redux?

• Gratis: Redux gratis dan 100% open source. Kamu dapat menggunakan itu baik untuk project personal maupun komersial tanpa membayar apapun.
• Cocok pada ThemeForest: Redux memenuhi persyaratan Envato, membuatnya pilihan yang bagus bagi pengembang theme yang berharap untuk mengembangkan theme atau plugin untuk dijual di Envato marketplace.
• Populer: Redux digunakan lebih dari 250 (yang diketahui) item dalam Envato marketplace yang telah terjual lebih dari 6 juta dollar. Popularitas ini menunjukkan kekuatan framework ini.
• Mudah Digunakan: Jika kamu mengerti bagaimana array berkerja, maka kamu dapat menggunakan Redux. Memulai dengan Redux sesederhana membuat obyek konfigurasi yang meliputi tidak lebih dari sebuah array yang menginduk.
• Fleksibel: Jika itu tidak memenuhi kebutuhanmu, Redux dapat diperluas untuk membuat custom field dan penanganan validation / error.
• Terdokumentasi Dengan Baik: Redux terdokumentasi dengan baik. Website Redux memiliki basis pengetahuan, codex (dokumentasi pengembang), dan tutorial video.
• Komunitas Yang Kuat: Sebuah komunitas yang kuat telah menjamur di sekitar Redux. Jika kamu sedikit memiliki masalah dan menyukai bantuan, kamu mungkin akan menemukan seseorang yang telah menghadapi masalah yang sama sebelumnya. Dan jika itu adalah fitur yang kamu persyaratkan, maka ada lebih dari 50 kontributor yang bersedia mendengarkan (dan barangkali menambahkannya dalam rilis berikutnya).

Menginstal Redux

Ada beberapa cara untuk menginstal Redux. Namun untuk tujuan tutorial ini, kita akan menginstalnya dari WordPress.org

Instal plugin seperti yang biasa kamu lakukan dengan plugin lainnya:

• Pergi ke Plugins > Add New.
• Dalam kotak pencarian, masukkan Redux Framework dan kemudian klik Search Plugins.
• Dari halaman hasil, klik Install Now pada hasil pertama.
• Setelah kamu menginstalnya, lanjutkan untuk mengaktifkannya seperti yang biasa kamu lakukan dengan plugin lain.

Mengaktifkan Mode Demo

Untuk mengaktifkan mode demo, pergi ke Plugins > Installed Plugins dan scroll ke Redux Framework. Kamu akan melihat sesuatu seperti ini:

Klik Activate Demo Mode.

Ini akan mengaktifkan mode demo dan membuat sebuah panel options contoh bernama Sample Options di dalam Dashboard WordPress.

Demo Mode dan halaman Sample Options akan membolehkanmu untuk memainkan sekitar Redux dan menjelajah berbagai jenis field dimana itu mengijinkanmu untuk membuatnya.

Memadukannya Ke Dalam Theme

Sejauh ini kita telah menginstal Redux dan mengaktifkan mode Demo untuk membolehkan kita menjelajah field yang berbeda yang dibolehkan Redux untuk dibuat.

Untuk memadukan Redux ke dalam theme, kita harus menginisialisasikannya dengan sebuah file konfigurasi baru. Ikuti tahap-tahap ini untuk menginisialisasi contoh Redux yang baru:

• Arahkan ke direktori redux-framework dalam direktori Plugins WordPress (wp-content/plugins/) dan salin direktori sample ke dalam theme.

• Buka file functions.php dan tambahkan baris code di bawah:

1

<?php

2

3

 require_once (dirname(__FILE__) . '/sample/sample-config.php');

4

5

?>

Ketika kamu memuat ulang Dashboard WordPress dan mengarahkan ke Sample Options, kamu akan menyadari tidak ada yang berubah—kamu masih memiliki sub-menu yang sama seperti sebelumnya. Ini karena konfigurasi kita masih persis sama dengan sebelumnya. Kita hanya memindahkan file confid dari direktori plugin Redux ke dalam direktori theme kita.

Terlebih lagi, kamu mungkin melihat pesan error berikut:

Ini berdasarkan fakta bahwa kita memuat dua file config yang identik. Kamu dapat memperbaiki ini dengan pergi ke panel Plugins dan menonaktifkan Demo Mode.

Apa yang ingin kita lakukan adalah mulai dengan file config yang kosong. Redux hadir dengan satu untuk kenyamananmu. Jadi mari tautkan dengan itu.

Untuk melakukannya, ganti baris yang baru saja kamu tambahkan ke functions.php dari:

1

<?php

2

require_once (dirname(__FILE__) . '/sample/sample-config.php');

3

?>

Ke:

1

<?php

2

require_once (dirname(__FILE__) . '/sample/barebones-config.php');

3

?>

Jika kamu kembali ke Dashboard, kamu akan menyadari bahwa panel Sample Options berisi satu section—Home Settings—dan satu field, sebuah media uploader yang tepatnya bernama Web Fonts.

Kita sekarang memiliki sebuah class config dasar yang dapat kita tambahkan section dan field.

Kesimpulan

Dalam bagian pertama seri ini, kita melihat Redux Framework, apa itu dan mengapa itu layak digunakan dalam projectmu. Kita melanjutkan dan menginstal sebuah instalasi segar Redux dan memeriksa fitur-fitur berbeda yang ditawarkannya kepada kita sebagai seorang pengembang theme.

Kita juga membuat sendiri file konfigurasi kerangka dasar untuk mendemonstrasikan bagaimana kita dapat mulai memperkuat Redux untuk memenuhi kebutuhan khusus kita.

Dalam tutorial berikutnya seri ini, kita akan mempelajari bagaimana kita dapat menambahkan lebih banyak section, dan juga melihat pada menambahkan fields untuk section ini.