NEW!! » Premium Support - PHP, MySQL, Dll Buku Query MySQL Lihat Detail » x

Menambahkan Icon dan Banner Pada Halaman Plugin WordPress.org

Setelah sebelumnya kita membahas cara untuk meng-upload plugin ke direktori plugin wordpress.org, kali ini kita akan membahas cara untuk menampilkan/menambahkan icon dan banner pada halaman plugin kita di wordpress.org

1 Menampilkan icon plugin

Icon plugin ini umumnya akan muncul ketika kita ingin menginstall plugin melalui halaman administrasi melalui menu Plugins » Add New, pada halaman tersebut akan muncul plugin yang disertai icon

Disamping itu icon ini juga akan muncul pada halaman plugin wordpress.org bagian menu plugins https://wordpress.org/plugins/

Contoh sebelum ditambahkan icon:

Default Icon Pada Halaman Plugin di WordPress.org

Setelah ditambahkan icon:

Menambahkan Icon Pada Halaman Plugin di WordPress.org

Untuk menampilkan icon plugin kita perlu menggunakan gambar dengan nama dan kriteria tertentu, sesuai yang telah disyaratkan oleh wordpress yaitu:

  • Nama file: icon-128x128.(png|jpg), ukuran gambar 128px x 128px.
  • Nama file: icon-256x256.(png|jpg), ukuran gambar 256px x 265px, untuk ditampilkan pada retina display (HiDPI – layar dengan resolusi sangat tinggi), pada layar tersebut, WordPress pertama kali akan meload file ini.
  • Nama file: icon.svg. Jika file tersebut tersedia, maka akan menjadi prioritas utama untuk ditampilkan.

Kelebihan dari format .svg ini adalah gambar dapat di resize dengan ukuran berapapun tanpa mempengaruhi kualitasnya, disamping itu, ukuran filenya juga tetap kecil.

Namun, kelemahannya, tidak semua browser mensupport file .svg untuk itu jika menggunakan file .svg, maka tetap perlu untuk disertai file png atau jpg, sehingga jika browser tidak mensupport .svg, masih bisa menggunakan file jpg atau png tersebut.

Berikut ini browser yang mensupport gambar SVG

Browser Yang Mensupport Gambar SVG

Sumber: caniuse.com

Beberapa tips dalam mendesain icon ini:

  • Buat sesimpel mungkin.
  • Hindari penggunaan teks, karena ketika icon di tampilkan dalam ukuran kecil, maka teks tersebut tidak terlihat, disamping itu juga hanya mengcover 1 bahasa.
  • Jangan membuat icon seolah olah seperti iklan.
  • Jangan menggunakan logo wordpress, gunakan brand anda sendiri.
  • Kompres gambar sehingga ukurannya menjadi kecil (misal dengan: sortpixel)

Gambar default…

Jika tidak menemukan icon, wordpress akan menggenerate pattern dari geo pattern yang dibuat oleh: JasonLong, contoh pattern dapat dilihat di halaman GitHub: jasonlong/geo_pattern: Create beautiful generative geometric background images from a string.

2 Menampilkan Banner Pada Halaman Plugin WordPress

Banner ini akan ditampilkan pada halaman plugin kita pada wordpress.org, misal pada https://wordpress.org/plugins/aph-prism-highlighter/

Sebelum menggunakan bannner:

Menambahkan Banner Pada Halaman Plugin di WordPress.org - Tanpa Banner

Untuk menambahkan banner:

  1. Buat gambar dengan nama banner-772×250.(png|jpg), ukuran gambar 772px x 250px kemudian disimpan pada direktori assets pada svn anda, gambar tersebut dapat berformat png atau jpg.

    Direktori Assets Pada SVN

  2. Selanjutnya jalankan SVN Commit. Perubahan ini dapat dilihat setelah WordPress merefresh plugin direktorinya (biasanya rata-rata setiap 15 menit)
  3. Anda dapat membuat gambar tambahan untuk ditampilkan pada “retina display” (HiDPI-layar dengan resolusi tinggi), gambar ini ukurannya 2x dari gambar normal, yaitu 1544px x 500px, sehingga nama file menjadi banner-1544×500.(jpg|png).
  4. Pada website dengan arah tulisan dari kanan ke kiri (RTL) maka Judul plugin akan berada disebelah kanan, sehingga jika pada banner anda menulis deskripsi plugin di sebelah kanan, maka akan tertutup oleh judul, maka anda dapat membuat banner tambahan dengan nama banner-772×250-rtl.(png|jpg) dan banner-1544×500-rtl.(jpg|png), gambar tersebut akan di load pertama kali ketika website menggunakan bahasa model RTL

Contoh halaman plugin yang sudah ditambahkan banner:

Menambahkan Banner Pada Halaman Plugin WordPress.org

Dalam mendesain banner untuk plugin, pertimbangkan adanya ruang kosong ketika view port halaman website kecil, seperti ketika dibuka di smartphone, ruang kosong ini terjadi ketika judul plugin bergeser kebawah, contoh:

Ruang Kosong Pada Banner

Sehingga sebaiknya pada bagian ini (sisi kiri) diisi gambar sehingga masih kelihatan bagus baik ketika terlihat (viewport kecil) maupun ketika tertutup judul (viewport normal)

Demikian pembahasan mengenai cara menampilkan/menambahkan icon dan banner pada halaman plugin wordpress.org

Referensi: wordpress.org

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.

Recomended Post

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Jasa Konsultasi PHP MySQL Website Dengan Ahlinya

Like Us

  1. Same Origin Policy – Apa dan Bagaimana Mengatasinya?

  2. JSONP Dengan Javascript dan jQuery – Lintas Domain

  3. JSON Pada Javascript – Panduan Lengkap

  4. JSON Pada Dokumen HTML

  5. JSON Dari Database – PHP dan MySQL

  6. Memahami JSON Pada PHP

  7. Panduan Lengkap Memahami JSON

  8. Memahami Tipe Data Pada PHP

  9. Query MySQL di Dalam PHP Loop – Bad Practice !!!

  10. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested