Cara Membuat Halaman Administrasi Kustom di Dasbor WordPress

Artikel ditulis oleh: Jerry Low
  • Menampilkan Artikel
  • Diperbarui: Jun 30, 2013

Ketika WordPress meluncurkan apa yang dulunya menjadi tema standarnya, Kubrick, beberapa tahun yang lalu, itu juga membungkus fitur baru yang menarik. Fitur itu adalah panel administrasi tema kustom, yang diaktifkan dengan menentukan fungsi dan preferensi dalam file "functions.php" khusus tema. Pada tahun-tahun berikutnya, halaman opsi tema sayangnya kurang digunakan oleh banyak perancang tema, tetapi sebenarnya ini adalah cara yang bagus untuk memberi pengguna kendali atas tampilan situs mereka tanpa memaksa mereka memasang tema baru. Hal-hal seperti gambar latar belakang tema, jumlah kolom, dan bahkan warna font semuanya dapat diubah menggunakan panel administrasi kustom ini.

Panel administrasi itu sendiri diubah dengan mengisi file fungsi tema dengan serangkaian array PHP yang menentukan nilai-nilai khusus. Nilai-nilai itu kemudian dimasukkan dalam templat dan mereka didefinisikan dalam panel administrasi yang memungkinkan pengguna untuk menentukan preferensi penampilan mereka secara visual. Seluruh proses sebenarnya relatif sederhana setelah perancang tema mempelajari cara kerja PHP dan bagaimana mereka dapat memanfaatkan potongan kode itu untuk memungkinkan presentasi khusus dalam file templat mereka.

Proses beberapa langkah semua dimulai dengan menetapkan beberapa variabel luas situs dan menentukan apa yang harus disesuaikan di halaman administrasi baru ini.

Langkah 1: Membuat dan Mengedit Fungsi Theme-Specific.php Page

Jika Anda telah mengembangkan tema Anda sendiri, kemungkinan sangat kecil bahwa Anda telah membuat file functions.php untuk dipasangkan dengan file template yang ada. Ini adalah opsi yang relatif canggih dan sebagian besar desainer hanya melewatkannya sama sekali. Dalam hal ini, penting untuk membuka klien FTP pilihan Anda dan mengarahkannya ke URL server berikut tempat file tema berada:

/ public_html / wp-content / themes / YOUR-THEME-FOLDER /

Setelah berada di dalam folder ini, periksa kembali untuk memastikan tidak ada file "functions.php", lalu gunakan program pengeditan teks Anda untuk membuat file baru bernama "functions.php". File ini kemudian dapat disimpan dan diunggah ke server melalui FTP. Ini dapat diedit langsung di server, menghilangkan kebutuhan untuk program pengeditan teks.

Langkah pertama untuk memiliki panel opsi tema yang valid yang ditentukan di file "functions.php" adalah dengan menentukan dua variabel di bagian atas dokumen. Variabel-variabel ini akan digunakan untuk menampilkan nama tema menggunakan Dashboard, serta mengidentifikasi elemen formulir dan pemilihan dalam halaman administrasi tersebut. Amati kode di bawah ini, letakkan di bagian atas dokumen "functions.php" Anda, dan sesuaikan dengan kebutuhan situs Anda.

$ longname = “Tema Pengembangan Panel Administrasi”;
$ shortcode = “apdt”;

Variabel-variabel ini memiliki tujuan berbeda. Variabel $ longname akan digunakan untuk mencetak nama tema di panel opsi administrasi yang sebenarnya. Untuk alasan ini, disarankan agar pengembang menetapkan nama persis tema untuk variabel ini untuk menghilangkan kebingungan di antara pengguna tema mereka. Variabel $ shortcode harus semua huruf kecil tanpa tanda baca, karena ini akan digunakan untuk mengidentifikasi elemen formulir dalam kode itu sendiri. Dalam contoh tersebut, akronim sederhana digunakan berdasarkan nama lengkap tema; ini dapat disesuaikan dengan selera pengguna.

Langkah 2: Mendefinisikan Preferensi yang Dapat Disesuaikan Menggunakan PHP Arrays

Pertama, penting untuk memberi tahu tema apa nama panel administrasi. Ini akan dicetak di atas semua pengaturan potensial dan membantu mendorong kejelasan tujuan bagi pengguna pemula. Ini dilakukan dengan menambahkan array berikut ke tag $ settings di dalam file "functions.php":

$ settings = array (
array (“name” => $ longname. ”Pengaturan Penampilan”,
“Type” => “title”),

Selanjutnya, kita harus menunjukkan bahwa array yang penuh dengan opsi adalah "terbuka", atau dapat dimodifikasi dengan input pengguna. Ini dilakukan dengan menggunakan larik sederhana lain yang muncul tepat di bawah definisi judul halaman. Ini terlihat seperti ini:

larik (“type” => “open”),

Sekarang kita bebas untuk mulai menentukan opsi tampilan tema, dengan masing-masing dibuat sebagai array baru. Dalam contoh ini, kita akan menentukan teks yang ditempatkan di footer tema. Secara default, contoh tema berisi tautan ke situs web pengembang tema serta informasi tentang pembuatan versi yang padat. Hal ini tidak diinginkan oleh sejumlah besar pengguna WordPress yang lebih memilih untuk menempatkan informasi mereka sendiri di footer, bagaimanapun, dengan mengaktifkan kontrol kustom ini akan menghemat pengeditan manual dari file "footer.php". Begini caranya.

array (
“Name” => “Teks Footer Tema Kustom”,
“Desc” => “Ini adalah teks yang ditampilkan di bagian paling akhir dari setiap halaman yang ada dalam tema ini.”,
“Id” => $ shortcode. ”_ Custom_footer”,
“Type” => “text”,
“Std” => “Tema Eksperimental v1.0. Dikembangkan oleh John Doe. Lebih banyak tema di sini. ”),

Array di atas memungkinkan pengguna untuk menentukan teks footer standar tema, tetapi tag array perlu dijelaskan untuk lebih menggambarkan bagaimana proses ini bekerja dan apa yang didefinisikan oleh setiap bagian dari array.

Nama: Ini mengacu pada nama kotak teks yang sebenarnya, dan tidak ditampilkan kepada pengguna ketika mereka memasuki halaman opsi administrasi untuk tema.

Penj: Ini adalah deskripsi singkat yang menyertai pengaturan khusus, dan ini ditampilkan kepada pengguna.

ID: Ini menggunakan kode pendek bersama dengan identifikasi yang dibuat khusus dari nama formulir untuk menyajikan dan memberi gaya pada kotak teks.

Tipe: Ini menentukan apakah elemen bentuk adalah garis teks, kotak teks, menu drop down, tombol radio, atau kotak centang.

STD: Ini menentukan nilai default dari elemen yang dipilih. Untuk kotak teks, ini menentukan teks default yang dimasukkan ke dalamnya. Untuk kotak centang, tombol radio, dan kotak drop-down, ini menentukan opsi mana yang dipilih secara default.

Langkah 3: Menceritakan WordPress untuk Mengaktifkan Akses ke Halaman Opsi Baru

Meskipun halaman opsi telah diberi tujuan menggunakan file "functions.php" di dalam folder utama tema, halaman tersebut belum dikenali oleh WordPress atau disertakan di antara banyak halaman pengaturan lain dalam Dasbor WordPress. Ini karena halaman opsi tema harus diidentifikasi di halaman fungsi dan diberi tahu ke mana harus pergi (baik sebagai elemen sidebar independen atau dalam pengelompokan "Pengaturan"). Ini dilakukan dengan menggunakan fungsi yang relatif sederhana yang ditambahkan ke file "functions.php" di bawah array penyesuaian potensial:

function experimental_theme_save_values ​​() {
global $ longname, $ shortcode, $ pengaturan;
if ($ _GET ['halaman'] == nama dasar (__ FILE__)) {
if ('save' == $ _REQUEST ['action']) {
foreach ($ settings as $ value) {
update_option ($ nilai ['id'], $ _REQUEST [$ nilai ['id']]); }
foreach ($ settings as $ value) {
if (isset ($ _REQUEST [$ value ['id']])) {update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); } lain {delete_option ($ value ['id']); }}
header (“Lokasi: themes.php? page = functions.php & save = true”);
mati;
} lain jika ('reset' == $ _REQUEST ['action']) {
foreach ($ settings as $ value) {
delete_option ($ value ['id']); }
header (“Lokasi: themes.php? page = functions.php & reset = true”);
mati;
}
}
add_menu_page ($ longname. "Pengaturan Penampilan", "". $ longname. "Pengaturan Penampilan", 'edit_themes', basename (__ FILE__), 'experimental_theme_save_values');

Potongan kode ini melakukan dua hal. Pertama, ini memungkinkan pengaturan tema untuk disimpan melalui panel opsi administrasi. Kedua, ini menempatkan tombol independen di sidebar Dasbor WordPress yang memungkinkan pengguna untuk mengkliknya dan langsung membuka panel opsi tema. Ini diberi label "Pengaturan Penampilan" seperti halaman sebenarnya itu sendiri. Konsistensi adalah kunci untuk menghilangkan kebingungan dan mengarahkan pengguna ke halaman tanpa secara khusus memberi tahu mereka untuk membuka panel opsi guna menyesuaikan tampilan tema.

Langkah 4: Menambahkan Pesan Kesalahan dan Menutup File PHP

Langkah terakhir untuk mengisi semua elemen panel opsi tema adalah menentukan pesan kesalahan yang mungkin dihadapi pengguna dan kemudian memastikan bahwa elemen formulir dapat disajikan dalam gaya WordPress default dalam halaman opsi. Menambahkan pesan kesalahan dilakukan dengan menempelkan kode ini ke file fungsi PHP:

function experimental_theme_save_values ​​() {
global $ longname, $ shortcode, $ pengaturan;
jika ($ _REQUEST ['disimpan']) echo '
'. $ themename.' kustomisasi penampilan telah berhasil disimpan.
';
jika ($ _REQUEST ['reset']) echo '
'. $ themename.' kustomisasi tampilan telah berhasil diatur ulang.
';

Di bawah dua baris kode ini, bagian PHP dari file functions.php dapat ditutup menggunakan tag penutup?>. Di bawah ini, kode XHTML akan ditempatkan untuk menata elemen menggunakan lembar gaya Dashboard WordPress standar.

Langkah 5: Memberikan Halaman Pilihan Beberapa Gaya

Saat ini, pengguna Dashboard WordPress dapat melihat halaman kesalahan baru tetapi mereka tidak bisa berbuat banyak dengan itu. Itu karena elemen bentuk dan stylesheet belum ditempatkan ke file functions.php untuk digunakan dalam antarmuka administrasi. Itu semua akan berubah, karena kami menyertakan stylesheet dan elemen bentuk default untuk digunakan oleh panel baru:

<div class = ”wrap”>
<h2> <? php echo $ longname; ? > Pengaturan </ h2>

<form method = ”post” action = ”options.php”>

<? php break; case 'text':? >

<tr>
<td width = ”20%” rowpan = ”2 ″ valign =” middle ”> <strong> <? php echo $ value ['name']; ? > </ strong> </ td>
<td width = ”80%”> <input style = ”width: 100%;” nama = ”<? php echo $ value ['id']; ? > ”Id =” <? Php echo $ value ['id']; ? > ”Type =” <? Php echo $ value ['type']; ? > ”Value =” <? Php if (get_settings ($ value ['id'])! = “”) {Echo get_settings ($ value ['id']); } lain {echo $ value ['std']; }? > ”/> </ Td>
</ tr>

<tr>
<td> <kecil> <? php echo $ value ['desc']; ? > </ kecil> </ td>
</ tr> <tr> <td colspan = ”2 ″> </ td>
</ tr>

<? php break;}? >

<input type = ”submit” value = ”<? php _e ('Simpan Pengaturan Tema')? > ”/>

Kode ini ditempelkan di bawah tag penutup file fungsi PHP, dan dapat disesuaikan untuk setiap jenis formulir yang mungkin disertakan oleh panel opsi tema. Variabel "case" dapat diubah dari "teks" menjadi hal-hal seperti kotak teks, kotak centang, pilih, dan judul. Formulir ini hanya perlu disertakan, ditentukan, dan diberi gaya, jika digunakan oleh tema. Jika tidak, penyertaan mereka tidak diperlukan dan meninggalkan file fungsi tema akan mempromosikan efisiensi dan kode yang bersih.

Langkah 9: Mengaktifkan Opsi Khusus untuk Ditinjau pada Tema Aktual

Ada dua langkah yang harus dilakukan ketika memastikan bahwa perubahan apa pun dapat dilihat pada templat publik tema. Yang pertama adalah menempatkan variabel ke footer tema yang akan menampilkan teks hak cipta dan versi yang ditentukan pengguna yang kami aktifkan di langkah sebelumnya dari tutorial ini. Itu dilakukan dengan menempatkan kode berikut di area hak cipta footer:

<? php echo $ apdt_custom_footer; ? >

Teks ini memanggil larik khusus untuk teks footer yang telah ditentukan sebelumnya dan, sesuai pernyataan "Echo", mencetak teks tersebut di footer. Tag ini dapat terkandung dalam tag XHTML apa pun yang dianggap cocok oleh pengguna, tetapi tidak akan muncul tanpa potongan kode yang ditambahkan ke tajuk situs.

Di tajuk, tema harus diinstruksikan untuk mencari opsi yang ditentukan pengguna yang ditetapkan di dalam Dasbor WordPress, dan harus mengetahui variabel yang ditentukan dalam file "functions.php" kustom sehingga dapat mencetak kontennya ke situs web. Ini dilakukan dengan menempatkan variabel PHP berikut di header situs web (biasanya file "header.php"):

<? php global $ pengaturan;
foreach ($ settings as $ value) {
if (get_settings ($ value ['id']) === FALSE) {$$ value ['id'] = $ value ['std']; } lain {$$ value ['id'] = get_settings ($ value ['id']); }
}
? >

Itu semua yang ada untuk itu. Sekarang, setiap opsi yang ditentukan dalam file functions.php kustom dapat tercermin dalam tampilan halaman hanya dengan memasukkan variabel PHP yang didefinisikan khusus di mana kustomisasi dan konten yang ditunjuk seharusnya berlaku.

Langkah 10: Uji Pengaturan Baru dan Halaman Opsi

Tidak ada upaya pengembangan WordPress yang sepenuhnya selesai sampai benar-benar diuji untuk bug, kesalahan, dan kesalahan yang tidak disengaja dalam kode PHP yang ditempatkan ke dalam file "functions.php". Karena itu, inilah saatnya untuk menguji! Masuk ke Dasbor WordPress dan, jika tema yang Anda kerjakan saat ini tidak dipilih, pastikan untuk menavigasi ke kategori "Penampilan" di bilah sisi dan mengaktifkan tema yang relevan.

Dari sana, periksa beberapa hal:

  1. Pastikan link pengaturan tema muncul sebagai entitasnya sendiri di sidebar di bawah judul kategori sidebar "Pengaturan".
  2. Pastikan bahwa opsi penyesuaian teks footer yang ditentukan dapat diakses di panel kontrol opsi kustom; memodifikasi konten default footer dan menyimpan preferensi. Pastikan bahwa itu menyimpan tanpa kesalahan.
  3. Kunjungi situs web Anda yang sebenarnya, dan pastikan bahwa perubahan yang dilakukan di Dasbor terkait konten footer ditampilkan.
  4. Jika semuanya berfungsi dengan baik, tarik napas lega dan nikmati halaman panel kontrol opsi tema WordPress Anda yang pertama.

Tentang Jerry Low

Pendiri WebHostingSecretRevealed.net (WHSR) - ulasan hosting yang dipercaya dan digunakan oleh pengguna 100,000. Lebih dari 15 tahun pengalaman dalam hosting web, pemasaran afiliasi, dan SEO. Kontributor ke ProBlogger.net, Business.com, SocialMediaToday.com, dan banyak lagi.