Advertisement
  1. Code
  2. WordPress

Cara Membuat Panel Opsi WordPress yang Lebih Baik

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Hari ini, kita akan membahas keseluruhan proses pembuatan panel opsi admin untuk tema WordPress, dengan menggunakan WooFramework yang sangat bagus sebagai contoh. Kemudian, kita akan mengambil langkah lebih jauh, karena kita menerapkan jQuery untuk memperbaiki beberapa fungsi.

Detail Tutorial

  • Program: WordPress
  • Versi: 2.7, 2.8, 2.9 dan seterusnya
  • Kesulitan: Menengah
  • Perkiraan Waktu Penyelesaian: 1,5 jam
Final Product

Produk AkhirWordPress adalah salah satu sistem Content Management Software (CMS) yang paling populer di luar sana. Entah itu untuk proyek klien atau untuk menjual tema di ThemeForest, WordPress cepat muncul sebagai CMS pilihan bagi banyak pengembang web. Ini relatif mudah digunakan, namun bisa dibuat lebih sederhana lagi bila Anda menyertakan panel administrasi untuk pengguna. Daripada harus membuka file template PHP dan mengutak-atik kode, pengguna bisa langsung menggunakan panel pilihan untuk berinteraksi dengan tema WordPress Anda.

Misalnya - jika tema Anda memiliki skema warna merah, biru dan hijau, dan masing-masing memiliki file CSS yang sesuai, akan jauh lebih mudah bagi pengguna untuk memilih warna pilihan mereka dari daftar drop-down. Jadi hari ini, izinkan saya membimbing Anda melalui keseluruhan proses pembuatan dan peningkatan halaman panel admin WordPress yang terinspirasi oleh Woo.

Langkah 1

Sebelum kita mulai membuat panel admin, kita perlu punya tema kan? Jadi unduh file sumber yang disertakan dengan tutorialnya. Saya telah sedikit memodifikasi tema WordPress Classic. Tempatkan folder 'nettuts' (saya telah menamai tema 'Nettuts') di folder wp-content/themes Anda. Anda harus melihat file berikut:

  • functions.php (kosong)
  • index.php
  • comments.php
  • footer.php
  • header.php
  • rtl.php
  • sidebar.php
  • style.css
  • screenshot.png
  • Folder images dengan dua file

Sebagian besar pekerjaan kita akan dilakukan di file functions.php.

Tema dapat secara opsional menggunakan file functions, yang berada pada subdirektori tema dan dinamakan functions.php. File ini pada dasarnya bertindak seperti plugin, dan jika ada dalam tema yang Anda gunakan, file akan dimuat secara otomatis selama inisialisasi WordPress (baik untuk halaman admin dan halaman eksternal).

Penggunaan yang disarankan untuk file ini:

  • Tentukan fungsi yang digunakan dalam beberapa file template dari tema Anda
  • Mengatur layar admin, memberikan pilihan pengguna untuk warna, gaya, dan aspek lain dari tema Anda

(Dari WP Codex)

Langkah 2

Sekarang kita sudah menyiapkan tema WordPress kita, masuk ke Appearance>Themes, dan aktifkan tema nettuts.

Diaktifkan? Ok, bagus. Sekarang kita harus memikirkan tata letak halaman admin panel kita. Inilah struktur yang telah saya putuskan:

Izinkan saya menjelaskan semua itu kepada Anda. Pilihan yang ditetapkan akan dibungkus menjadi div bernama "rm_wrap" dan kemudian "rm_opts" untuk pilihannya. Kemudian kita memulai sebuah formulir, dengan semua masukan di dalamnya. Setiap bagian dari pilihan (general Settings, Homepage settings, Blog settings dll) memiliki div terpisah dengan kelas "rm_section". Div ini memiliki judul (untuk nama) serta beberapa masukan divs di dalamnya. Dengan menggunakan kelas seperti div <class="rm_input rm_select">, kita dapat menata dropdown, masukan teks, dan textarea secara berbeda.

Nah, yang terpenting adalah pengkodean ini tidak boleh dilakukan secara manual - kita harus menggunakan fleksibilitas PHP sebanyak mungkin. Itu berarti efisiensi: jangan mengkode secara manual bila Anda memiliki loop untuk Anda!

Langkah 3

Mulailah dengan membuka functions.php di editor kode favorit Anda (saya menggunakan Notepad ++). Masukkan kode berikut:

Dua variabel PHP menyimpan nama tema Anda (Nettuts dalam kasus kita), dan sebuah nama pendek yang telah Anda definisikan (nt dalam kasus kita). Nama pendek digunakan untuk awalan semua nama opsi tema kita, dan biasanya unik untuk tema tertentu. Berlanjut, kita akan menulis beberapa kode untuk secara otomatis membuat daftar kategori WordPress, daripada pengguna memasukkan nomor ID. Masukkan kode di bawah ini di bawah kode yang sudah diketik:

Cuplikan ini menggunakan fungsi get_categories bawaan WordPress untuk mengambil semua kategori, dan kemudian menggunakan perulangan foreach untuk menyimpannya dalam variabel $wp_cats. Pilihan "Choose a category" kemudian ditambahkan ke bagian atas array

Langkah 4

Sekarang kita mulai memasukkan daftar pilihan untuk temanya. Lihat di bawah, dan tempelkan ke file functions.php Anda:

Itu adalah potongan kode yang besar, yang pastinya menjamin beberapa penjelasan. Jadi ini dia:

  • Variabel PHP $options menyimpan seluruh daftar opsi untuk temanya.
  • Ini terdiri dari sejumlah array, masing-masing dengan kunci "type" untuk menandakan bagaimana ia ditampilkan, dan apa fungsinya.
  • Kita memulai dengan array "type" => "title" - ini akan digunakan untuk menunjukkan nama tema dan judul di bagian atas halaman
  • Setiap bagian (General, Homepage dan Footer) memiliki daftar opsi yang terpisah.
  • We start a new section by closing any previous sections, declaring a new section using array( "name" => "Footer Kita memulai bagian baru dengan menutup bagian sebelumnya, mendeklarasikan bagian baru menggunakan array ( "name" => "Footer "type "=> "section") dan membuka bagian baru.
  • Setiap opsi dapat memiliki opsi yang ditentukan di bawah ini:
    name: Nama field masukan.
    desc: Penjelasan singkat yang menjelaskan apa itu bagi pengguna.
    id: id dari field, diawali dengan shortname. Ini akan digunakan untuk menyimpan sekaligus mengakses pilihannya.
    type: jenis masukan - select, teks atau textarea
    options: digunakan untuk mendeklarasikan array dari pilihan untuk jenis masukan select.
    std: nilai masukan default, digunakan jika tidak ada masukan lain yang diberikan.

Langkah 5

Cobalah menavigasi ke WordPress. Anda akan melihat bahwa tidak ada pilihan di mana pun untuk benar-benar melihat halaman panel admin; jadi bagaimana kita melihatnya? Tambahkan potongan kode berikut ke file functions.php:

Fungsi ini dimaksudkan untuk memperbarui pilihan, sekaligus menambahkan halaman menu. Jika pilihan sedang disimpan (ditunjukkan dengan variabel save tersembunyi), maka semua opsi diperbarui dengan nilai baru mereka. Jika pilihan sedang di-reset (ditunjukkan oleh variabel tersembunyi lainnya dengan nilai reset), maka semua pilihan akan dihapus. Baris terakhir menambahkan halaman menu - masing-masing parameter, nama dan judul, tingkat otorisasi pengguna yang diperlukan untuk melihat halaman, halaman simpan dan fungsi yang digunakan untuk menampilkan/menyimpan (disebut mytheme_admin dalam kasus kita). Lihat mytheme_add_init, sebuah fungsi kosong? Biar begitu, kita akan membahasnya nanti.

Langkah 6

Masih belum ada pilihan tema halaman kan? Nah, ingat fungsi mytheme_admin yang telah kita bicarakan beberapa baris yang lalu? Kita masih belum menulis fungsi itu. Jadi gunakan kode dari langkah 6, 7 dan 8 untuk menulis fungsi itu. Memulai dari:

Cukup sederhana kan? Jika pilihan telah tersimpan, tulis pesan yang menunjukkannya. Demikian juga untuk me-reset. Anda akan melihat sebuah class="updated fade" - WordPress akan secara otomatis memudar dalam beberapa detik. Bagus, bukan? Berpindah, kita kemudian memulai div "rm_wrap".

Langkah 7

Membawa dari atas, tempelkan di kode berikut:

Itu adalah satu kode yang besar! Penjelasan - menggunakan perulangan foreach php, setiap jenis opsi dievaluasi berdasarkan kasus per kasus. Kita menggunakan teknik switch-case untuk ini. Variabel switch adalah pilihannya - case dicocokkan dan dievaluasi. Perhatikan pernyataan 'break' setelah setiap case? Hal ini untuk mencegah sesuatu yang dikenal sebagai properti 'fall-through'. Bila sebuah case telah cocok, semua case berturut-turut juga dieksekusi. Ini berarti jika kita mencocokkan case 3, case 4, 5 dll juga dieksekusi. Kita tidak ingin itu, kan? Jadi gunakan break untuk menghentikan switch-case.

Jika ada opsi jenis "open" - tidak ada yang dilakukan. Jika ada opsi jenis "close", dua div ditutup. Pilihan "title" hanya digunakan sekali - ini adalah pengantar pilihan tema. Untuk masing-masing jenis "text" (input type="text"), "select" (dropdown), "checkbox" dan "textarea" (yang jelas artinya), masukan yang sesuai akan ditampilkan. Perhatikan <div class="clearfix"> - ini digunakan untuk membersihkan float, yang akan kita lakukan nanti.

Langkah 8

Kita sampai pada akhir fungsi yang agak masif. Tempel kode di bawah ini:

Untuk pilihan jenis "section", saya telah menggunakan variabel counter $i. Ini melacak nomor bagian dan mengkonfirmasikannya dengan nama tombol kirim, untuk memiliki tombol kirim yang unik. Ada juga formulir terakhir di akhir untuk mengatur ulang semua opsi. Gambar yang digunakan akan menjadi gambar transparan yang digunakan dalam jQuery-fication kita. Gunakan potongan kode terakhir ini untuk membawa fungsi kita ke dalam permainan:

Itu memberitahu WordPress untuk menambahkan menu admin.

Langkah 9

Dan voila! Kita memiliki halaman panel admin kita yang mengagumkan dengan posisi menu terpisah untuk dirinya sendiri. Jadi mari kita periksa - klik linknya. Dan yuck. Itu pasti halaman admin panel paling jelek yang pernah ada. Jadi, mari kita panggil teman baik kita, CSS! Buat folder baru di direktori nettuts/ dan beri nama "functions". Buat file CSS baru di sana - functions.css. Tempel kode berikut:

Saya tidak akan menjelaskan apapun disini; cukup jelas apa yang dilakukan setiap deklarasi CSS, dan Anda bebas menyesuaikan tata letak tema Anda sendiri.

Langkah 10

Jadi sekarang kita memiliki file CSS yang bagus. Tapi bagaimana kita menambahkannya ke halaman? Lagi pula, kita tidak memiliki akses langsung ke <head> dari dokumen. Ingatlah bahwa fungsi kosong mytheme_add_init() yang kita tulis di Langkah 4? Itu akan berguna. Ubah ke ini:

Itu menambahkan file functions.css ke head. Lokasi file ditentukan oleh direktori template.

Langkah 11

Lihatlah halamannya sekarang. Cukup bagus, bukan? Tapi kemudian, Anda bertanya, apa kegunaan ikon '+'? Nah, itulah tempat jQuery masuk!. Buat file baru rm_script.js di folder nettuts/functions/. Tempel kode berikut:

Apa yang dilakukan ini - setelah DOM dimuat, semua rm_options meluncur ke atas. Bila ikon '+' diklik, kelas inactive akan dihapus dari gambar dan kelas active ditambahkan - menjadikannya ikon '-'. Kebalikannya dilakukan saat ikon '-' diklik. rm_options kemudian meluncur ke atas atau ke bawah (ditentukan oleh status CSS saat ini) dengan menggunakan fungsi slideToggle - cukup sederhana. Untuk menambahkan skrip ini, fungsi mytheme_add_init() yang sama digunakan. Ubah ke:

Skrip jQuery sekarang akan aktif. Periksalah. Secara pribadi, saya pikir itu indah!

Langkah 12

Setelah kita menyiapkan halaman opsi tema kita, saya akan menjalankan menggunakan opsi ini. Kode untuk menggunakan pilihannya adalah sebagai berikut:

Itu akan mengambil opsi nt_color_scheme. Lihat contoh di bawah ini:

Berbagai kegunaan hanya dibatasi oleh imajinasi Anda.

Kesimpulan

Saya harap Anda telah belajar sesuatu dalam tutorial ini. Ini bukan panel pilihan standar Anda. Yang ini tidak menggunakan tabel, ini ditingkatkan dengan jQuery, menggunakan CSS yang mengagumkan, dan sangat mudah digunakan. Inti dari tutorial ini adalah belajar - Anda selalu bisa mengganti panel yang dapat dilipat dengan tab, misalnya, atau bahkan sesuatu yang lebih canggih. Gunakan kreativitas Anda! Jangan ragu untuk berdiskusi atau mengajukan pertanyaan di komentar!

WooThemes sejak itu telah merilis versi dua dari kerangka kerja mereka. Anda dapat meninjau rinciannya di sini.

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.