Buat Panel Opsi Tema WordPress Anda Sendiri Dengan Framework Redux

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:

• 
  WordPress
  Memulai Dengan Framework Redux: Memperkenalkannya dan Mengintegrasikannya ke Tema Anda
  Bonang Salemane

Oleh karena itu pro dan kontra dari pendekatan ini adalah:

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.

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:

• 
  WordPress
  Cara Membuat Plugin Addons Dikemas untuk WordPress
  Karen Pogosyan

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.

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:

1

<?php

2

3

if (!class_exists('ReduxFramework') && file_exists(plugin_dir_path(__FILE__) . '/optionpanel/framework.php'))

4

    {

5

  require_once ('optionpanel/framework.php');

6

7

	}

8

9

if (!isset($redux_demo) && file_exists(plugin_dir_path(__FILE__) . '/optionpanel/config.php'))

10

	{

11

	require_once ('optionpanel/config.php');

12

13

	}

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

1

<?php

2

3

if (!class_exists('Redux'))

4

    {

5

	return;

6

	}

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:

1

$opt_name = "your_variable_name";

Jadikan unik, dengan menggunakan awalan, misalnya: namabrandAnda_namatemaAnda

Setelah itu, tambahkan kode:

1

$theme    = wp_get_theme();

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

Argumen

Pada titik ini kita perlu menambahkan argumen berikut:

1

$args = array(

2

    'opt_name' => $opt_name,

3

	'display_name' => $theme->get('Name') ,

4

	'display_version' => $theme->get('Version') ,

5

	'menu_type' => 'submenu',

6

	'allow_sub_menu' => true,

7

	'menu_title' => esc_html__('Theme Settings', yourtextdomain'),'page_title'           => esc_html__('ThemeSettings', yourtextdomain') ,

8

	'google_api_key' => '',

9

	'google_update_weekly' => false,

10

	'async_typography' => true,

11

	'admin_bar' => true,

12

	'admin_bar_icon' => '',

13

	'admin_bar_priority' => 50,

14

	'global_variable' => $opt_name,

15

	'dev_mode' => false,

16

	'update_notice' => false,

17

	'customizer' => true,

18

	'page_priority' => null,

19

	'page_parent' => 'themes.php',

20

	'page_permissions' => 'manage_options',

21

	'menu_icon' => '',

22

	'last_tab' => '',

23

	'page_icon' => 'icon-themes',

24

	'page_slug' => 'themeoptions',

25

	'save_defaults' => true,

26

	'default_show' => false,

27

	'default_mark' => '',

28

	'show_import_export' => true

29

);

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.

1

Redux::setArgs( $opt_name, $args );

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:

1

Redux::setSection($opt_name, array(

2

    'title' => esc_html__('Section title', 'yourtextdomain') ,

3

	'id' => esc_html__('section-unique-id', ' yourtextdomain') ,

4

	'icon' => 'icon-name',

5

	'fields' => array()

6

));

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:

1

array(

2

    'id' => 'opt-checkbox',

3

	'type' => 'checkbox',

4

	'title' => esc_html__('Checkbox', 'yourtextdomain') ,

5

	'subtitle' => esc_html__('No validation can be done on this field type', 'yourtextdomain') ,

6

	'desc' => esc_html__('This is the description field, again good for additional info.', ' yourtextdomain') ,

7

	'default' => '1' // 1 = on | 0 = off),

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:

1

function yourprefix_theme_options_global_variable()

2

    {

3

	global $yourglobalvariable;

4

	}

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

1

yourprefix_theme_options_global_variable ();

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:

1

$your_option_name = (isset($GLOBALS['yourglobalvariable']['youroption'])) ? $GLOBALS['yourglobalvariable']['youroption'] : “yourdefaultvalue

2

for thisoption”;

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:

1

If (isset($GLOBALS['yourglobalvariable']['youroption'])

2

    { // do the stuff…}

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

• reduxframework.com
• ReduxFramework on Facebook
  
• @ReduxFramework on Twitter