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:

Setelah ditambahkan icon:

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

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:

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.

   

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:

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:

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