7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Creative Coding

Menyesuaikan Admin WordPress - Menambahkan Gaya

Scroll to top
Read Time: 6 mins
This post is part of a series called Customizing the WordPress Admin.
Customizing the WordPress Admin - Listings Screens

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Dalam lima bagian pertama dari seri ini, saya menunjukkan cara menyesuaikan admin WordPress dalam berbagai cara, termasuk menyesuaikan layar login, dashboard dan layar pengeditan posting.

Dalam tutorial ini Anda akan belajar cara menambahkan gaya dan pencitraan ke layar admin Anda. Secara khusus Anda akan belajar cara:

  • mengkustomisasi footer layar admin dan memberinya gaya
  • memberi gaya menu admin
  • gaya tautan dan tombol

Saya akan membuat plugin untuk melakukan ini - jika Anda sudah membuat plugin setelah mengikuti Bagian 1 hingga 5 dari seri ini Anda mungkin lebih suka menambahkan kode dari tutorial ini ke plugin tersebut, memberi Anda satu plugin dengan semua penyesuaian admin Anda.


Apa yang Anda Butuhkan untuk Menyelesaikan Tutorial Ini

Untuk menyelesaikan tutorial ini Anda akan membutuhkan:

  • Instalasi WordPress
  • Akses ke folder plugin situs Anda untuk menambahkan plugin Anda
  • Editor teks untuk membuat plugin Anda

Menyiapkan Plugin

Karena saya akan menyertakan gambar dan stylesheet dengan plugin ini, saya membuat folder untuk itu daripada sebuah file PHP tunggal. Di dalam folder itu saya akan membuat file PHP yang akan berisi fungsi-fungsi inti di plugin saya.

Ini berarti saya memiliki folder bernama wptutsplus-customizing-admin6-styling, di mana saya memiliki dua folder - images dan css, dan satu file PHP.

Di awal file itu, saya menambahkan baris berikut:


Dashboard Memulai

Karena saya sudah membuat beberapa modifikasi pada dashboard di bagian awal seri ini, ia tidak sama dengan dashboard default. Tangkapan layar di bawah ini menunjukkan apa yang saya mulai:

customizing-the-wordpress-admin-part6-starting-dashboardcustomizing-the-wordpress-admin-part6-starting-dashboardcustomizing-the-wordpress-admin-part6-starting-dashboard

Dalam tutorial ini saya akan menambahkan beberapa gaya untuk menggabungkan warna yang berbeda, yang dapat digunakan untuk mencerminkan merek Anda sendiri.


1. Mengatur Stylesheet

Sebelum saya melakukan hal lain, saya akan mengatur stylesheet dengan benar. Alih-alih menggunakan hook wp_enqueue_scripts seperti yang Anda lakukan jika menambahkan stylesheet untuk digunakan di front end situs web Anda, Anda menggunakan admin_enqueue_scripts sebagai gantinya.

Jadi, di plugin Anda, tambahkan yang berikut:

Anda juga harus membuat stylesheet di direktori /css di folder plugin Anda, yang mana Anda akan menambahkan penataan nanti di tutorial ini.


2. Mengubah Teks Footer

Teks footer default di WordPress berbunyi 'Thank you for creating with WordPress'. Jika Anda menjalankan instalasi multisite atau mengembangkan untuk klien, Anda mungkin ingin merujuk ke merek Anda sendiri di sini. Untungnya ini dapat dilakukan menggunakan filter admin_footer_text.

Saya akan mengubah teks dan menambahkan logo juga, jadi saya akan membuat direktori /images di folder plugin saya dan menambahkan logo saya untuk itu.

Di file utama plugin Anda tambahkan yang berikut:

Ini menambahkan gambar dan teks footer baru seperti yang ditunjukkan pada tangkapan layar:

customizing-the-wordpress-admin-part6-new-footercustomizing-the-wordpress-admin-part6-new-footercustomizing-the-wordpress-admin-part6-new-footer

Namun gambarnya agak besar, meskipun saya sudah mengunggah yang kecil. Ini juga terlalu dekat dengan teksnya. Untuk memperbaikinya, Anda menambahkan beberapa gaya ke stylesheet yang sudah Anda daftarkan.

Di stylesheet yang Anda buat untuk plugin Anda, tambahkan yang berikut:

Sekarang gambarnya adalah ukuran yang benar:

customizing-the-wordpress-admin-part6-new-footer-styledcustomizing-the-wordpress-admin-part6-new-footer-styledcustomizing-the-wordpress-admin-part6-new-footer-styled

3. Menata Menu Admin

Di Bagian 3 dari seri ini, saya menunjukkan cara menyesuaikan konten menu admin - sekarang saya akan mendemonstrasikan cara menyesuaikan gayanya. Saya akan mengubah warna cukup drastis - Anda mungkin atau mungkin tidak suka hasilnya, tetapi itu menunjukkan bagaimana melakukannya!

Di stylesheet yang Anda buat, tambahkan yang berikut:

Ini menghasilkan beberapa warna yang sangat berbeda untuk menu admin:

  • latar belakang berwarna abu-abu gelap
  • submenu berwarna putih dengan teks abu-abu
  • tautan berwarna putih
  • halaman aktif memiliki latar belakang merah

Unsur paling sulit untuk menata ulang gaya adalah panah yang menunjuk ke halaman saat ini atau ke submenu - ini ditata menggunakan elemen .wp-menu-arrow dan elemen div .wp-menu-arrow di dalamnya. Yang hebat adalah WordPress menggunakan CSS murni untuk membuat panah ini dan bukannya sebuah gambar, jadi setelah Anda mengidentifikasi elemen yang ditargetkan, Anda dapat mengubah warnanya menggunakan CSS.

Dashboard sekarang terlihat seperti ini:

customizing-the-wordpress-admin-part6-restyled-dashboardcustomizing-the-wordpress-admin-part6-restyled-dashboardcustomizing-the-wordpress-admin-part6-restyled-dashboard

4. Menata Tautan

Saya ingin tautan saya mencerminkan warna merek yang saya gunakan untuk menu dashboard - khususnya saya ingin mengubah warna merah yang digunakan saat tautan pada hover atau aktif.

Di stylesheet, tambahkan yang berikut:

Ini tweak merah dari tautan saya seperti yang ditunjukkan pada tangkapan layar:

customizing-the-wordpress-admin-part6-link-colorscustomizing-the-wordpress-admin-part6-link-colorscustomizing-the-wordpress-admin-part6-link-colors

5. Menata Tombol

Perubahan gaya akhir yang ingin saya buat adalah pada tombol. Saya akan mengubah warna tombol di layar admin, baik ketika mereka aktif dan tidak aktif. Ini untuk menarik perhatian mereka dan juga untuk menyesuaikan dengan warna menu.

Di stylesheet, tambahkan kode di bawah ini:

Ini mengubah warna latar belakang dan border untuk tombol, baik dalam keadaan default dan ketika tombol itu pada hover atau aktif. Tangkapan layar di bawah ini menunjukkan status default:

customizing-the-wordpress-admin-part6-button-colorscustomizing-the-wordpress-admin-part6-button-colorscustomizing-the-wordpress-admin-part6-button-colors

Dan ini adalah warna ketika tombol pada hover atau diklik:

customizing-the-wordpress-admin-part6-button-hover-colorscustomizing-the-wordpress-admin-part6-button-hover-colorscustomizing-the-wordpress-admin-part6-button-hover-colors

Dan itu semua gaya saya - selesai!


Ringkasan

Dalam seri ini saya telah menunjukkan kepada Anda enam teknik berbeda untuk menyesuaikan admin WordPress.

Saya telah membahas:

  1. Membuat layar login kustom dengan logo dan warna Anda sendiri
  2. Menyesuaikan dashboard dengan menambahkan dan menghapus konten
  3. Membuat menu admin kustom untuk membantu pengguna Anda
  4. Menambahkan teks bantuan ke layar pengeditan untuk membantu pengguna Anda mengedit situs mereka
  5. Menyesuaikan layar daftar untuk hanya menampilkan apa yang dibutuhkan pengguna Anda
  6. Menata layar admin untuk mencerminkan merek Anda dan/atau membuat perubahan warna untuk UI atau untuk menyatu dengan front end situs

Semoga ini memberi Anda beberapa inspirasi untuk menghasilkan ide-ide Anda sendiri.

WordPress adalah Sistem Manajemen Konten yang benar-benar hebat, dengan beberapa penyesuaian yang dapat Anda buat sendiri, dan memberi pengguna dan klien Anda pengalaman yang menambah bantuan ekstra untuk mereka dan juga mencerminkan merek Anda.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.