注意!! この投稿は4年と3ヶ月くらい前に公開したものです。
そのため正常に動作しないかもしれないので、ご注意ください。

WordPress 4.0からの管理画面のプラグインインストーラーに表示されるようになったプラグインアイコン機能がプラグインディレクトリに導入されたのでそれの紹介

タイトル長いな。

WordPressのコアの実装に関するあれこれを紹介するMake WordPress Coreブログでちょっと前に「Introducing plugin icons in the plugin installer – プラグインインストーラーのプラグインアイコンの導入」という投稿があったので、かいつまんでご紹介。

  • 通常版のプラグインアイコンの大きさは縦横128pxの正四角形で、HiDPI (retina) 版用の縦横256pxもサポートしている
  • ファイル形式はPNGもしくはJPG、もしくはSVG
  • ファイル名はicon-128x128.(png|jpg)および/もしくはicon-256x256.(png|jpg)、もしくはicon.svg
  • ファイルを置く場所は/assetsディレクトリ
  • SVGを使う場合は、SVGをサポートしていないブラウザ用にPNGも用意することをおすすめする(SVGが優先)
  • プラグインアイコンがない場合はGeoPattern library を使った自動生成のアイコン画像が使用される(下のようなやつ)

plugin-icon-auto-generated

アイコンをデザインするときのヒント

  • シンプルにしよう!  AndroidiOS Human Interface Guidelines の両方に素晴らしいデザインのヒントが有ります。
  • テキストを避けること。他のコンテキストでは小さいサイズの表示になるので。またこれはアイコンであり、広告ではないので。
  • 適切なファイル形式を使用する。単純なデザインにJPGは使用しない。写真にはPNGを使用しない。
  • 画像を最適化しよう! ImageOptim やお気に入りのウェブアプリやCLIツールなどを利用するといいだろう。
  • WordPressのロゴを使わないでください。自分なりのブランドを。(バナー画像があるのなら、それを利用するといいだろう。)
  • SVGを扱ったことがないのなら、Chris Coyierのチュートリアルをどうぞ。
  • これはプラグインのアイコンであり、広告ではないことをお忘れなく

Introducing plugin icons in the plugin installer – プラグインインストーラーのプラグインアイコンの導入」の「Some tips when designing an icon」より

サンプルは元の投稿をご覧ください

で、素人が作るとこんなしょぼいものになるという例は以下にw(誰か作ってー!)

show-current-template-icon-sample