Cara Menyesuaikan Dasbor Admin WordPress Anda

Mobil khusus. Mereka akan membawa Anda dari titik A ke B sama seperti mobil lainnya. Mereka terbuat dari bahan yang sama dan membakar galon bahan bakar seperti kendaraan bermotor lainnya. Namun kami (atau setidaknya para pecinta mobil di antara kami) memiliki kecintaan yang mendalam terhadap mobil yang dibuat khusus. Mengapa?

Mereka terlihat jauh lebih baik daripada rekan-rekan mereka langsung dari jalur perakitan
Mereka dioptimalkan untuk kinerja yang lebih baik

WordPress adalah salah satu sarana terhebat yang dapat Anda gunakan untuk mencapai impian online Anda. WordPress dilengkapi dengan dasbor yang bagus, dan langsung digunakan, WordPress akan membantu Anda dan/atau klien Anda membangun situs web yang bagus dalam waktu singkat.

Namun dasbor admin WordPress terlalu “mainstream” dalam hal nuansa dan tampilan. Maksudku, meski indah, itu tidak mencerminkan gaya pribadi. Ini agak umum dan mungkin tidak akan mengesankan klien yang pernah menggunakan platform ini sebelumnya. Heck, itu tidak akan mengesankan klien yang menghargai gaya pribadi atau kemiripan merek.

Di sisi lain, dasbor WordPress khusus bersifat pribadi dan akan memberi klien Anda faktor tambahan rasa nyaman yang membuat mereka mendambakan lebih. Anda dapat membangun merek atau menyesuaikan dasbor WordPress dengan kebutuhan klien Anda, sehingga menghasilkan produk hebat yang hadir dalam kemasan bagus – kemasan khusus Anda sendiri. Dalam postingan hari ini, kami akan:

Hilangkan widget dan menu yang tidak perlu untuk membuat dasbor khusus yang lebih bersih dan ringan
Sesuaikan tautan footer dasbor
Singkirkan elemen umum seperti logo WordPress
Sentuh pada opsi layar
Sentuh beberapa plugin yang dapat Anda gunakan untuk menyesuaikan dasbor Anda

Di akhir postingan ini, Anda seharusnya bisa membuat dasbor admin WordPress yang indah dan pribadi yang sesuai dengan klien Anda atau memperkuat kehadiran merek online Anda. Selamat menikmati sampai akhir dan buat kami kagum dengan pemikiran Anda di bagian komentar di bawah!

Tunggu! Sebelum Kita Mulai, Buat Tema Anak

Anda dapat mengedit file tema inti Anda, atau menggunakan Editor di bawah Penampilan di dasbor tema Anda, tetapi itu berarti Anda tidak akan pernah memperbarui tema WordPress Anda lagi. Sebelum melakukan perubahan apa pun pada file tema, Anda harus membuat tema anak. Dengan cara ini ketika Anda memperbarui tema inti, semua perubahan Anda akan tetap berlaku. Berikut adalah beberapa langkah cepat yang dapat Anda gunakan untuk menyiapkan tutorial ini, namun kami juga memiliki panduan lengkap pembuatan tema anak atau Anda dapat mereferensikan kodeks WordPress untuk bantuan lebih lanjut.

Buat folder tema anak Anda: Masuk ke instalasi WordPress Anda dan cari folder wp-content/themes/yourthemename. Di dalam folder ini tambahkan folder baru dan beri nama “child-theme” atau “yourthemename-child” (Anda pasti mengerti).
Buat file CSS tema anak Anda: Sekarang setelah Anda memiliki folder tema anak baru, Anda dapat menambahkan file baru untuk mengubah atau mengganti gaya dan fungsi tema Anda saat ini. Pertama-tama buat file style.css baru di dalam folder tema anak Anda, lalu edit file baru untuk menambahkan beberapa informasi judul dasar (supaya Anda atau pengembang berikutnya mengetahui apa yang terjadi):
```
/*---------------------------------------------------
Theme Name: Your Child Theme Folder Name Here
Description: Child theme for Parent Theme Name Here
Author: Your Name Here
Template: Parent Theme Name Here
----------------------------------------------------*/
```

Buat file PHP tema anak Anda: Di dalam folder tema anak baru Anda, buat file fungsi.php. Selanjutnya edit file fungsi baru untuk menambahkan kode yang akan memuat gaya tema “induk” asli Anda:

<?php
function myprefix_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'myprefix_theme_enqueue_styles' ); ?>

Tentu saja Anda dapat menambahkan lebih banyak lagi ke tema anak Anda untuk membuat perubahan pada templat untuk header, footer, atau apa pun. Namun untuk keperluan tutorial ini Anda sudah siap! Jadi ini dia…

Menghilangkan Widget Dashboard WordPress yang Tidak Diperlukan

Setelah Anda masuk ke dasbor WordPress, Anda akan melihat beberapa bagian (widget) seperti Sekilas, Statistik Situs, Draf Cepat, dan WordPress Berita antara lain. Sebagian besar widget dasbor ini ditambahkan oleh WordPress, tetapi jumlah widget yang ditampilkan bisa bertambah atau berkurang tergantung pada tema dan/atau plugin Anda. Beberapa tema dan plugin menambahkan widgetnya sendiri ke dasbor.

Meskipun beberapa widget ini berguna, apakah klien Anda perlu melihatnya? Apakah Anda perlu melihat masing-masing widget ini setiap kali Anda masuk? Mungkin Anda harus tahan dengan widget tersebut karena Anda tidak punya cara untuk menghilangkannya. Hari ini adalah hari keberuntunganmu. Anda dapat dengan mudah menghapus widget dasbor sebanyak yang Anda inginkan menggunakan beberapa baris kode:

// Remove dashboard widgets
function remove_dashboard_meta() {
	if ( ! current_user_can( 'manage_options' ) ) {
		remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_primary', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_secondary', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
		remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' );
		remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
		remove_meta_box( 'dashboard_activity', 'dashboard', 'normal');
	}
}
add_action( 'admin_init', 'remove_dashboard_meta' );

Menyalin kode di atas dalam file function.php tema anak Anda (terdapat di wp-content/themes/yourthemename/child-theme/functions.php) dan menyimpan perubahannya akan menghilangkan semua widget dasbor kecuali dari yang ditambahkan oleh tema atau plugin Anda. Dari kode di atas, semua pengguna dengan kemampuan kurang dari admin tidak akan melihat widget berkat bagian kode ini:

if ( ! current_user_can( 'manage_options' ) )

…yang memeriksa apakah pengguna memiliki kemampuan ('manage_options') yang hanya tersedia untuk administrator. Mungkin Anda tidak ingin menghilangkan semua widget di dasbor Anda. Anda dapat menggunakan kode berikut sebagai gantinya:

// Create the function to use in the action hook
function wpexplorer_remove_dashboard_widget () {
    remove_meta_box ( 'dashboard_quick_press', 'dashboard', 'side' );
}
add_action ('wp_dashboard_setup', 'wpexplorer_remove_dashboard_widget');

Salin kode di atas ke file function.php Anda dan simpan perubahan untuk menghilangkan widget Draf Cepat. Untuk menghapus widget lainnya, cukup ganti 'dashboard_quick_press', 'dashboard', 'side' dengan slug yang sesuai untuk setiap widget. Siput widget standar lainnya meliputi:

dashboard_incoming_links
dashboard_plugins
dashboard_utama
dashboard_sekunder
dashboard_quick_press
dashboard_recent_drafts
dashboard_recent_comments
dashboard_kanan_sekarang
dashboard_aktivitas

Namun Anda mungkin memiliki widget tambahan yang ditambahkan oleh tema induk, plugin lain yang telah Anda instal, atau bahkan hosting Anda (WP Engine menambahkan widget yang disebut wpe_dify_news_feed). Untuk menemukan slug untuk widget tambahan ini, gunakan inspektur browser (kami menyukai yang ada di Chrome – ini adalah bagian dari alat pengembang web default, jadi yang harus Anda lakukan hanyalah mengeklik kanan elemen dan memilih “inspeksi”) lalu salin ID div untuk widget yang ingin Anda hapus.

Menambahkan Widget Dasbor WordPress

Sekarang Anda dapat menghilangkan widget dasbor sesuai keinginan, mari kita coba menambahkan widget khusus kita sendiri. Anda dapat menampilkan apa pun yang Anda inginkan dengan widget Anda, jadi tidak ada yang menghalangi Anda untuk membuat dasbor khusus impian Anda. Bagian terbaiknya adalah sangat mudah menambahkan widget ke dashboard WordPress Anda. Cukup tambahkan kode berikut ke file wp-content/themes/yourthemename/child-theme/functions.php Anda:

/**
 * Add a widget to the dashboard.
 *
 * This function is hooked into the 'wp_dashboard_setup' action below.
 */
function wpexplorer_add_dashboard_widgets() {
	wp_add_dashboard_widget(
		'wpexplorer_dashboard_widget', // Widget slug.
		'My Custom Dashboard Widget', // Title.
		'wpexplorer_dashboard_widget_function' // Display function.
	);
}
add_action( 'wp_dashboard_setup', 'wpexplorer_add_dashboard_widgets' );

/**
 * Create the function to output the contents of your Dashboard Widget.
 */
function wpexplorer_dashboard_widget_function() {
	echo "Hello there, I'm a great Dashboard Widget. Edit me!";
}

Simpan perubahan. Tentu saja Anda dapat mengedit plugin tersebut sesuai kebutuhan Anda. Letakkan HTML, PHP, atau apa pun yang Anda punya:

echo "Hello there, I'm a great dashboard Widget. Edit me!";

Widget khusus baru Anda akan muncul paling bawah – di bawah semua widget – yang mungkin berada di luar area pandang jika Anda memiliki banyak widget. Namun, Anda dapat menarik dan melepas widget di bagian atas (atau di mana pun).

Halaman Dasbor WordPress Kustom

Katakanlah Anda tertarik untuk membuat dasbor yang benar-benar berbeda. Yang hadir dengan HTML khusus, PHP, dan bahkan gaya Anda sendiri. Jika Anda ingin lebih dari sekadar menambah/menghapus widget dasbor, silakan lihat Cara Membuat Halaman Dashboard Kustom WordPress oleh Remi Corson.

Dia telah membangun sebuah plugin hebat yang akan membantu Anda mempercepat pembuatan halaman dasbor kustom Anda sendiri (custom-dashboard.php). Anda harus memoles keterampilan pengembangan PHP Anda untuk membuat plugin agar sesuai dengan kebutuhan spesifik Anda. Secara keseluruhan, saya mencoba Sweet Custom Dashboard dan itu luar biasa. Dasbor khusus Anda dapat diinstal :). Ingin menyesuaikan pesan selamat datang Anda, lihat posting kami tentang Menyesuaikan Pesan Selamat Datang Dashboard WordPress Anda.

Menghapus Menu Dasbor WordPress

Kita dapat menambah atau menghilangkan widget dashboard WordPress dan bahkan mengubah tampilan dashboard secara keseluruhan (berkat Remi), Sekarang mari kita beralih ke bagian berikutnya: menghilangkan item menu yang tidak diinginkan.

Mengapa? Anda ingin menghapus beberapa menu untuk memberikan klien dasbor yang lebih ramping dan mencegah mereka mengakses area “terbatas”. Jika klien tidak mengetahui cara menggunakan WordPress, mereka mungkin akan merusak situs jika mengunjungi dan mengubah opsi pada halaman seperti Pengaturan atau Plugin. Tambahkan kode berikut ke file function.php Anda:

function wpexplorer_remove_menus() {
	remove_menu_page( 'themes.php' );          // Appearance
	remove_menu_page( 'plugins.php' );         // Plugins
	remove_menu_page( 'users.php' );           // Users
	remove_menu_page( 'tools.php' );           // Tools
	remove_menu_page( 'options-general.php' ); // Settings
}
add_action( 'admin_menu', 'wpexplorer_remove_menus' );

Kode di atas menghapus link menu ke Pengaturan, Plugin, Tampilan, Pengguna dan Alat untuk semua pengguna. Anda juga dapat menghapus sub menu. Berikut adalah contoh kode yang menghilangkan sub menu Widget di bawah Appearance:

function wpexplorer_adjust_the_wp_menu() {
	$page = remove_submenu_page( 'themes.php', 'widgets.php' );
}
add_action( 'admin_menu', 'wpexplorer_adjust_the_wp_menu', 999 );

Pada contoh di atas, pengguna akan mengakses semua sub menu di bawah Appearance kecuali Widgets. Anda dapat menghapus menu atau sub menu sebanyak yang Anda inginkan. Ingatlah bahwa ini tidak akan menghentikan pengguna untuk mengakses halaman ini secara langsung. Maksud saya, jika pengguna masuk, misalnya domainanda.com/wp-admin/options-general.php, mereka akan mengakses halaman Pengaturan Anda. Untung sebagian besar pengguna tidak akan repot jika item tersebut tidak ada di menu.

Jika Anda tidak bisa atau tidak ingin mengedit file function.php, Anda selalu dapat menginstal plugin Admin Menu Editor, yang memberi Anda kendali penuh atas menu Anda. Ini dikirimkan dengan beberapa fitur keren termasuk pembatasan menu berbasis peran, kemampuan untuk menyembunyikan menu dan membuat item menu khusus di antara fitur-fitur keren lainnya.

Menyesuaikan Footer Dasbor WordPress

Hingga saat ini, kami telah melakukan penyesuaian “signifikan” pada dasbor admin WordPress Anda. Menghargai semua pekerjaan brilian yang Anda lakukan adalah hal yang tepat. Menyesuaikan footer (“Terima kasih telah berkreasi dengan WordPress.”) dapat lebih membantu memperkuat merek Anda (atau klien). Mari ubah footer Anda menjadi “Dibangun dengan cinta oleh Nama Anda”. Cukup tambahkan cuplikan berikut ke file function.php Anda dan simpan perubahan:

// Custom Admin footer
function wpexplorer_remove_footer_admin () {
	echo '<span id="footer-thankyou">Built with love by <a href="http://www.wpexplorer.com/" target="_blank">WPExplorer</a></span>';
}
add_filter( 'admin_footer_text', 'wpexplorer_remove_footer_admin' );

Ganti 'Nama Anda' dengan nama Anda, situs web, alamat email, dll dan domainanda.com dengan nama domain Anda yang sebenarnya. Bergerak…

Menyesuaikan Formulir Login

Sejauh ini, Anda memiliki semua yang diperlukan untuk menyesuaikan dasbor admin WordPress Anda. Mari melangkah lebih jauh dan sesuaikan halaman login, sehingga pengguna Anda dapat mendapatkan pengalaman yang benar-benar dipersonalisasi sejak awal. Lagi pula, mengapa repot-repot menyesuaikan dashboard WordPress Anda hanya untuk diberikan oleh halaman login?

Dengan halaman ini, kita perlu menyesuaikan dua elemen: logo WordPress default dan link wordpress.org yang menyertainya. Namun sebelum saya menunjukkan kodenya ?, Anda dapat menyesuaikan halaman login Anda dengan mudah menggunakan salah satu dari 15 Plugin Halaman Login Kustom Terbaik untuk WordPress ini. Sekarang, untuk perasaan hangat dan tidak jelas yang muncul saat bermain-main dengan kode, salin kode berikut ke fungsi Anda.php:

function wpexplorer_login_logo() { ?>
	<style type="text/css">
		body.login div#login h1 a {
			background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png );
			padding-bottom: 30px;
		}
	</style>
<?php }
add_action( 'login_enqueue_scripts', 'wpexplorer_login_logo' );

Ganti logo.png dengan nama file logo khusus Anda, yang harus Anda unggah terlebih dahulu ke wp-content/themes/yourtheme/images. Pertahankan logo khusus Anda di bawah 80 x 80 piksel meskipun Anda dapat mengubahnya dengan beberapa CSS khusus. Dengan adanya logo login khusus, sekarang saatnya untuk mengubah tautan yang disertakan dengan logo WordPress asli. Izinkan kami menautkan logo baru Anda ke situs web Anda. Salin kode ini ke file function.php Anda dan simpan perubahan:

function wpexplorer_login_logo_url() {
	return esc_url( home_url( '/' ) );
}
add_filter( 'login_headerurl', 'wpexplorer_login_logo_url' );

function wpexplorer_login_logo_url_title() {
	return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpexplorer_login_logo_url_title' );

Ingat, Anda selalu dapat menata halaman login sesuai keinginan menggunakan CSS. Atau, Anda bisa memulai dengan tema luar biasa seperti tema WordPress Total Multiguna & Responsif yang dilengkapi dengan opsi bawaan untuk halaman login khusus dan branding situs.

Sesuaikan Dasbor WordPress: Opsi Layar

Jika Anda tidak ingin mendalami kode atau menginstal plugin, Anda dapat memanfaatkan Opsi Layar untuk membuat dasbor WordPress khusus. Cukup masuk ke dashboard WordPress Anda dan di bagian atas layar di sebelah kanan, Anda akan melihat menu drop-down Opsi Layar. Klik ini untuk meluaskan dan centang/hapus centang untuk mengaktifkan/menonaktifkan widget. Anda kemudian dapat menarik dan melepas widget untuk mengaturnya sesuai keinginan.

Satu-satunya kelemahan adalah metode ini menyimpan setelan Anda berdasarkan per pengguna, artinya metode ini tidak akan memberikan banyak manfaat jika Anda memiliki blog multi-penulis. Selain itu, Anda tidak dapat mencegah pengguna mengaktifkan kembali widget sesuka hati.

Bonus: Gunakan Plugin

Kami menghabiskan sebagian besar waktu kami untuk membahas opsi kode. Namun jika Anda tidak punya banyak waktu, plugin bisa membantu.

Opsi 1: Plugin Tweaker Utama untuk WordPress

Pertama, sesuatu yang sedikit berbeda: Ultimate Tweaker untuk WordPress, tersedia dari CodeCanyon. Opsi plugin terbaik untuk mengedit admin WordPress Anda (dan beberapa fitur WordPress lainnya).

Sebagian besar plugin mendukung fungsionalitas untuk satu tujuan tertentu, tetapi tidak untuk Ultimate Tweaker; plugin ini serba guna, yang belum pernah saya lihat sebelumnya. Pada dasarnya, Ultimate Tweaker mendukung 240+ peretasan, trik, dan alat WordPress yang berbeda untuk membuat hidup Anda lebih mudah. Hal ini membuatnya berguna dalam beberapa hal: meningkatkan efisiensi, menghilangkan bagian-bagian WordPress yang mengganggu Anda, dan memperluas fungsionalitas inti WordPress melampaui apa yang Anda pikir mungkin dilakukan.

240 peretasan tersebut sangat beragam, dan dapat dipecah menjadi 35 kategori berbeda. Untuk memberi Anda gambaran tentang apa yang dapat dilakukan Ultimate Tweaker, berikut adalah beberapa “peretasannya:”

Tambahkan logo di atas menu sidebar
Ubah citra dasbor WordPress dan halaman login
Nonaktifkan tombol klik kanan atau Print Screen di situs web Anda
Tingkatkan keamanan dengan menambahkan reCaptcha 2 ke layar login Anda
Atur kualitas JPEG untuk mengurangi ukuran file gambar
Aktifkan kode pendek di widget teks
Buat jumlah kata minimum untuk postingan
Nonaktifkan kata sandi yang salah “goyang” di layar login
Tambahkan kode Google Analytics ke situs web Anda
19 pintasan keyboard baru untuk WordPress
Buat halaman 404 khusus
Nonaktifkan pembaruan WordPress otomatis

Banyak dari peretasan WordPress ini adalah hal-hal yang kita semua beralih ke Google pada suatu saat atau lainnya. Kebanyakan dari mereka relatif kecil, tetapi dengan daftar lengkap beberapa ratus, secara kolektif plugin ini dapat menawarkan banyak nilai. Komunitas WordPress biasanya sangat vokal tentang apa yang ingin mereka lihat dari inti WordPress, jadi saya sangat berharap para pengembang mendengarkan komunitas dan menerapkan beberapa saran mereka dalam pembaruan plugin ini di masa mendatang.

Opsi 2: Hutan – Tema Admin WordPress Revolusi

Hanya ingin mengubah branding backend situs Anda? Meskipun kami biasanya menyarankan penggunaan sedikit kode, Anda juga dapat menggunakan plugin. Jika Anda bosan dengan tampilan dasbor default, tema admin Forest WordPress memungkinkan Anda memberikan sedikit perubahan. Dan hanya dengan $9. Forest tidak akan mengubah cara Anda melakukan tugas-tugas umum di WordPress, seperti menambahkan postingan/halaman, ini hanya akan membuat WordPress terlihat lebih baik saat Anda melakukannya! Plugin ini juga memungkinkan Anda mengubah halaman login WordPress default.

Forest memungkinkan Anda menambahkan gambar latar belakang Anda sendiri ke dashboard WordPress – atau Anda dapat menggunakan salah satu dari enam gambar yang disediakan gratis, termasuk yang ada pada gambar di atas. Anda dapat menyesuaikan dashboard menggunakan kreativitas Anda sendiri (menggunakan warna tak terbatas), atau menggunakan salah satu skema warna default WordPress. Anda dapat menyesuaikan dasbor lebih lanjut dengan memilih tipografi Anda sendiri dari lebih dari 600 font Google. Plugin ini mendukung kulit terang dan gelap, dan Anda dapat mengonfigurasi tingkat opasitas setiap elemen. Jika ada beberapa tombol di dasbor yang tidak Anda gunakan, Anda bahkan dapat menyembunyikannya — ini bagus untuk situs web klien yang terlalu banyak opsi dapat membebani tombol tersebut.

Catatan: Forest tidak akan mengubah tampilan situs web langsung Anda dengan cara apa pun, ini murni untuk bagian belakang.

Sumber Daya tentang Menyesuaikan Dasbor WordPress

Ingin mempelajari lebih lanjut tentang menyesuaikan dasbor WordPress? Berikut beberapa sumber daya tambahan untuk perangkat profesional Anda:

API Widget Dasbor
15 Plugin Halaman Login Kustom Terbaik untuk WordPress
Cara Membuat Halaman Dashboard Kustom WordPress
Menyesuaikan Dasbor WordPress untuk Klien Anda
Menyesuaikan Admin WordPress – Dasbor

Ke Anda…

Membuat dasbor admin WordPress khusus adalah salah satu cara terbaik untuk memperkuat citra merek dan memberikan pengalaman yang dipersonalisasi kepada klien Anda. Sederhana dan tidak akan menyita banyak waktu Anda. Jadi tunggu apa lagi? Dapatkan penyesuaian.

Selain itu, apa yang Anda pelajari di sini hari ini? Pernahkah Anda membuat dasbor admin WordPress khusus? Bagikan dengan komunitas kami yang bersemangat di komentar di bawah. Bersulang!