ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 27-08-2016

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

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP
  2. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP
  3. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL
  4. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP
  5. Menghitung Selisih Waktu Dengan PHP – Cara Termudah
  6. Memahami Fungsi Date Pada PHP
  7. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu
  8. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP
  9. Setting ODBC MySQL Untuk Gammu
  10. Cara Install dan Menggunakan Gammu di Windows