Secara umum, desain WordPress hanya dilakukan pada halaman depan atau frontend. Dalam beberapa kasus, biasanya pengembang WordPress atau WordPress developer juga membuat dashboard WordPress sesuai dengan kebutuhan klien mereka.
Pada artikel ini kami akan menjelaskan secara runut tutorial membuat custom admin WordPress dashboard menggunakan tema Bricks Builder.
Kami akan mengupayakan sebisa mungkin agar penjelasan ini mudah dipahami, bahkan oleh pengguna yang tidak memiliki dasar pengetahuan pemrograman tingkat lanjut sekalipun.
Versi Video
Persiapan Sebelum Memulai
Yang harus dipersiapkan sebelum memulai proyek ini adalah pastikan Anda menggunakan tema Bricks.
Bricks merupakan tema WordPress premium (berbayar). Silakan kunjungi website resmi untuk melihat harganya. Mereka juga memberikan opsi trial secara gratis yang dapat Anda akses di sini.
Selain itu, Anda membutuhkan dua plugin lainnya, yaitu Meta Box AIO dan Code Snippets Pro. Adapun fungsi masing-masing plugin adalah untuk membuat settings page dan menambah baris kode yang diperlukan untuk styling dan fungsional tambahan pada halaman dashboard.
Langkah-langkah Membuat Dashboard WordPress
Agar mendapat gambaran, inilah langkah-langkah yang akan kita lakukan pada tutorial kali ini:
- Membuat settings page untuk admin dashboard,
- Membuat custom fields untuk admin content,
- Membuat template untuk admin template,
- Menambahkan custom CSS, dan
- Menambahkan custom PHP.
Membuat Settings Page
Langkah pertama dalam tutorial ini adalah menambahkan menu “Admin Dashboard” menggunakan plugin Meta Box AIO. Pilihan Settings Page akan muncul pada submenu Meta Box.
Langkah-langkah Membuat Settings Page
Pilih Meta Box => Settings Page. Lalu klik “Add New Settings Page” dan beri nama “Admin Dashboard”.
Selanjutnya, sesuaikan konfigurasi settings page seperti berikut:
- Menu type: Top-level menu;
- Show menu after: kosong
- Default first submenu title: kosong;
- Parent menu: Dashboard;
- Icon type: pilih sesuai keinginan;
- Required capability: edit_theme_options;
- Custom CSS class: kosong;
- Style: No boxes;
- Columns: 1;
- Tabs: Key = dashboard, Value = Dashboard;
- Tab style: Top;
- Custom submit button: kosong;
- Custom message: kosong;
- Help tabs: kosong;
- Customizer: off:
- Customizer only: off;
- Network: off.
Setelah semua konfigurasi selesai, selanjutnya klik tombol “Publish” di sebelah kanan.
Proses pembuatan dashboard admin selesai.
Membuat Custom Fields
Langkah berikutnya adalah menambahkan custom fields ke settings page yang telah kita buat sebelumnya. Cara membuat custom fields adalah dengan memilih Meta Box => Custom Fields.
Selanjutnya, klik “Add New Field Group”. Setelah muncul tampilan editor, ketik nama Admin Content Fields pada kolom “Title”. Berikutnya, klik “Add New” pada tab “Fields”.
Pilih “Custom Html” pada daftar fields yang disediakan. Dengan menggunakan field ini, kita dapat menambahkan kode HTML yang kita perlukan.
Konfigurasi Tab General
Tidak banyak pengaturan yang harus dilakukan di sini. Dari 11 daftar fungsionalitas, yang harus kita atur adalah:
- Label: Biarkan default;
- Type: Custom HTML;
- Label description: Dikosongkan atau isi sesuai keinginan Anda;
- Input description: Dikosongkan atau isi sesuai keinginan Anda;
- Content (HTML allowed):
<iframe src="" title="dashboard" class="iframe-saya" scrolling="no"></iframe> - PHP Callback: Dikosongkan;
- Show as am admin column: Off;
- Columns: 12;
- Tooltip: Off;
- Hide from Rest API?: Off;
- Hide from front end?: Off.
Sebagai catatan, untuk sementara attribute src="" kita kosongkan terlebih dulu. Attribute ini akan diisi dengan slug yang kita peroleh dari URL template yang akan kita buat pada tahap berikutnya.
Konfigurasi Tab Advanced
Tidak ada konfigurasi khusus pada tab ini. Anda bisa mengosongkan semua fungsionalitas yang ada di sini kecuali “Save field value” yang diatur ke mode “on”.
Pada tahap terakhir dari membuat custom fields, adalah konfigurasi pada tab “Settings” di sebelah kanan “Fields”.
Dari 10 daftar fungsionalitas di sini, yang harus Anda sesuaikan adalah opsi:
- Location: Settings page = Admin Dashboard (admin-dashboard);
- Tab: Dashboard;
- Tab style: Box.
Untuk opsi lainnya biarkan kosong atau default.
Sampai di sini, Anda telah selesai membuat custom fields yang akan ditampilkan pada menu Admin Dashboard yang telah dibuat sebelumnya.
Membuat Template Admin Dashboard
Sebagai seorang WordPress developer, tentunya Anda tidak asing dengan kata “membuat template”. Ya, itulah yang akan kita lakukan pada tahap ini.
Cara Membuat Template Bricks Builder
Sekarang mari beralih ke tema Bricks yang akan kita gunakan untuk mendesain template. Silakan kembali ke halaman dashboard atau langsung pilih menu Bricks Builder dan klik submenu “Templates”.
Anda akan diarahkan ke halaman daftar template. Klik “Add New Template” untuk memulai. Pada kolom Title, ketik “Admin Template” sebagai nama yang akan kita gunakan.
Di sebelah kanan, pada metabox, cari “Template type”, klik menu dropdown dan pilih “Section”, lalu publish dan klik “Edit with Bricks”. Anda akan diarahkan ke halaman Bricks editor.
Membuat Desain Admin Dashboard
Pada tahap desain template ini tidak ada pengaturan khusus. Anda bebas berkreasi sesuka hati. Namun, jika Anda ingin tampilan dashboard admin seperti yang kami desain, silakan ikuti video tutorial membuat desain dashboard admin WordPress di bawah ini.
Setelah selesai mengikuti tutorial ini, silakan kembali ke submenu Template Bricks, lalu pilih dan klik tombol edit pada template yang baru saja Anda buat.
Anda akan diarahkan ke halaman block editor. Di bawah kolom Title (Admin Template) Anda akan menemukan keterangan kecil “Permalink: https://domainanda.com/template/admin-template”.
Silakan salin slug “/template/admin-template” dan tambahkan parameter “?cilukba=sembunyikan”, lalu tempelkan pada attribute src="" iframe yang telah dibuat sebelumnya pada custom fields. Dengan begitu, maka tampilan utuh kode HTML akan seperti ini:
<iframe src="/template/admin-template?cilukba=sembunyikan" title="dashboard" class="iframe-saya" scrolling="no"></iframe>Jika Anda belum paham perbedaan antara tautan (URL) dan slug, silakan baca artikel kami sebelumnya mengenai cara redirect URL.
Menambahkan Kode CSS
Kita masuk ke ranah coding. Pertama, kita akan menambahkan CSS. Tidak banyak baris yang akan kita tambahkan.
Anda boleh menggunakan plugin code snippets lainnya seperti WP Codebox, Script Organizer, WPCode, ataupun menambahkannya secara manual pada tema Anda. Namun kali ini kebetulan kami menggunakan Code Snippets Pro untuk mengelola kode CSS dan PHP.
Silakan pilih plugin code snippets terbaik sesuai pilihan Anda. Kemudian salin baris CSS ini:
.iframe-saya{
width: 100%;
height: 200vmin;
}
.rwmb-label{
display: none;
}Note: Sesuaikan nama class
iframe-sayadengan nama class yang Anda buat sebelumnya pada custom fields.
Pada plugin code snippets, cara menambahkan kode CSS ada di menu Snippets => Add New. Buat nama snippet seperti “Admin CSS”, kemudian pilih tab “Styles”, lalu tempel kode CSS di atas ke editor.
Untuk pengaturan lainnya silakan pilih “Administration area styles” dan set “Priority” = 10 atau default. Pada tab “Description” dan “Tags” bisa Anda isi atau dikosongkan.
Agar kode ini dapat berjalan, Anda harus mengklik tombol “Activate” di sebelah kanan atas tepat di bawah kolom Title.
Selanjutnya, silakan cek apakah terjadi perubahan pada tampilan desain atau tidak?
Apabila tidak terjadi perubahan, coba cek kembali apakah ada penulisan yang tidak benar pada snippets yang Anda buat.
Menambahkan Kode PHP
Langkah terakhir sebelum memastikan proyek yang ini adalah menambahkan kode PHP untuk menyembunyikan admin bar WordPress.
Bagaimana cara menambahkan PHP di WordPress? Sama seperti kode CSS sebelumnya, kita akan memanfaatkan plugin Code Snippets.
Lakukan langkah yang sama dengan poin sebelumnya, namun kali ini pilih tab PHP. tempelkan kode berikut pada kolom code editor.
add_action('after_setup_theme', 'sembunyikan_admin_bar', 1);
function sembunyikan_admin_bar() {
if (isset($_GET['cilukba']) && $_GET['cilukba'] === 'sembunyikan') {
add_filter('show_admin_bar', '__return_false');
}
}Kita menggunakan salah satu hook dan function dari WordPress yaitu add_action('after_setup_theme', 'sembunyikan_admin_bar', 1); dan add_filter('show_admin_bar', '__return_false');
Sebelum menjalankan fungsi menyembunyikan tampilan admin bar, baris kode di atas melakukan pengecekan untuk memastikan apakah parameter “cilukba” identik dengan “sembunyikan”? Jika iya, maka kembalikan nilai “false” (boolean) pada baris kode berikutnya.
Kreasikan Dashboard WordPress Sesuai Keinginan
Semoga hasil akhir yang Anda dapatkan sesuai dengan ekspektasi Anda. Apabila ada pertanyaan atau mendapatkan kendala, silakan tinggalkan komentar agar kita dapat mendiskusikannya lebih lanjut.
Jika Anda ingin memilikinya, namun tidak punya waktu luang untuk mengerjakannya. Silakan hubungi kami di halaman kontak. Sampaikan keinginan Anda untuk kemudian kita diskusikan lebih lanjut.
Ketika menambahkan kode CSS pada admin dashboard WordPress, kami menggunakan height: 200vmin; alih-alih satuan vh. Mengapa? Keputusan untuk menggunakan vmin diambil setelah mengajukan pertanyaan Perplexity.
Kami memilih Perplexity karena menurut kami, setelah menggunakan beberapa AI tools, Perplexity merupakan yang paling akuran dalam memberikan jawaban-jawaban yang membutuhkan pengetahuan akademis. Anda dapat membaca secara lengkap jawaban yang diberikan di sini.
