Cara Membuat Halaman Administrasi Kustom di Dasbor WordPress

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

Ketika WordPress meluncurkan apa yang dulunya adalah tema standarnya, Kubrick, beberapa tahun yang lalu, WordPress juga mengambil fitur baru yang menarik. Fitur itu adalah panel administrasi tema khusus, diaktifkan dengan mendefinisikan fungsi dan preferensi dalam file “functions.php” tema-spesifik. Pada tahun-tahun yang telah terjadi, halaman opsi tema sayangnya kurang dimanfaatkan oleh banyak desainer tema, tetapi itu sebenarnya cara yang bagus untuk memberi pengguna kontrol atas tampilan situs mereka tanpa memaksa mereka untuk menginstal tema baru. Hal-hal seperti gambar latar belakang tema, jumlah kolom, dan bahkan warna font semua 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” yang ada dan kemudian gunakan program pengeditan teks Anda untuk membuat file baru bernama “functions.php.” File ini kemudian dapat disimpan dan diunggah ke server melalui FTP. Itu dapat diedit langsung di server, menghilangkan kebutuhan untuk program pengeditan teks.

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

$ longname = "Tema Pembangunan 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 itu. Ini akan dicetak di atas semua pengaturan potensial dan membantu menumbuhkan kejelasan tujuan bagi pengguna pemula. Ini dilakukan dengan menambahkan array berikut ke tag $ settings dalam file “functions.php”:

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

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

array ("type" => "open"),

Sekarang kita bebas untuk mulai menentukan opsi tampilan tema, dengan masing-masing dari mereka dibuat sebagai array baru. Dalam contoh ini, kita akan mendefinisikan teks yang ditempatkan di footer tema. Secara default, contoh tema berisi tautan ke situs web pengembang tema serta informasi pembuatan versi lengkap. Ini tidak diinginkan oleh sejumlah besar pengguna WordPress yang lebih suka untuk menempatkan informasi mereka sendiri di footer, bagaimanapun, sehingga memungkinkan kontrol kustom ini menyelamatkan mereka dari pengeditan manual file "footer.php". Begini cara melakukannya.

array (
"Name" => "Teks Footer Tema Kustom",
“Desc” => “Ini adalah teks yang ditampilkan di bagian paling akhir dari setiap halaman yang ada di 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" dalam folder home tema, halaman tersebut belum dikenali oleh WordPress atau dimasukkan di antara banyak halaman pengaturan lainnya di Dashboard WordPress. Ini karena halaman opsi tema harus diidentifikasi di halaman fungsi dan diberitahu 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 kustomisasi potensial:

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

Sepotong kode ini melakukan dua hal. Pertama, ini memungkinkan pengaturan tema untuk disimpan melalui panel opsi administrasi. Kedua, itu menempatkan tombol independen di sidebar WordPress Dashboard yang memungkinkan pengguna untuk mengkliknya dan langsung menuju panel opsi tema. Itu diberi label "Pengaturan Tampilan" seperti halaman yang sebenarnya. Konsistensi adalah kunci untuk menghilangkan kebingungan dan mengarahkan pengguna ke halaman tanpa secara khusus memberitahu mereka untuk menuju panel opsi untuk 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;
if ($ _REQUEST ['disimpan']) gema '
'. $ nama samaran.' kustomisasi tampilan telah berhasil disimpan.
';
if ($ _REQUEST ['reset']) echo '
'. $ nama samaran.' kustomisasi tampilan telah berhasil direset.
';

Di bawah dua baris kode ini, bagian PHP dari file functions.php dapat ditutup menggunakan tag>> akhir. Di bawah ini, kode XHTML akan ditempatkan untuk menata elemen menggunakan lembar gaya WordPress Dashboard 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; huruf 'teks':? >

<tr>
<td width = ”20%” rowspan = ”2 ″ valign =” middle ”> <strong> <? php echo $ value ['name']; ? > </ kuat> </ td>
<td width = ”80%”> <input style = ”width: 100%;” name = ”<? 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'])); } else {echo $ value ['std']; }? > ”/> </ Td>
</ tr>

<tr>
<td> <small> <? 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 menyertakan panel opsi tema. Variabel "case" dapat diubah dari "text" ke hal-hal seperti kotak teks, kotak centang, pilih, dan judul. Bentuk-bentuk ini hanya perlu dimasukkan, didefinisikan, dan ditata, jika digunakan oleh tema. Jika tidak, penyertaan mereka tidak perlu dan meninggalkan kemudian fungsi file tema akan mempromosikan efisiensi dan kode 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 array kustom untuk teks footer yang didefinisikan sebelumnya dan, sesuai pernyataan "Echo", mencetak teks itu di footer. Tag ini dapat dimasukkan ke dalam tag XHTML apa pun yang dianggap cocok oleh pengguna, tetapi tidak akan muncul tanpa sepotong kode ditambahkan ke header situs.

Di header, tema harus diinstruksikan untuk mencari opsi yang ditentukan pengguna yang diatur di dalam Dasbor WordPress, dan harus mengetahui variabel yang didefinisikan dalam file “functions.php” khusus sehingga dapat mencetak konten mereka ke situs web. Ini dilakukan dengan menempatkan variabel PHP berikut di header situs web (biasanya file "header.php"):

<? php global $ settings;
foreach ($ settings as $ value) {
if (get_settings ($ value ['id']) === FALSE) {$$ value ['id'] = $ value ['std']; } else {$$ 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 lengkap sampai telah diuji secara menyeluruh untuk bug, kesalahan, dan kesalahan tidak disengaja dalam kode PHP yang ditempatkan ke dalam file “functions.php”. Yang mengatakan, saatnya untuk mendapatkan pengujian! Masuk ke Dasbor WordPress dan, jika tema yang sedang 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 tautan pengaturan tema muncul sebagai entitasnya sendiri di bilah sisi di bawah tajuk kategori bilah “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.