WordPressの機能を拡張するためのプラグイン(SVG編)

WordPressの機能を拡張するためのプラグインはたくさんあるので目的別に機能を拡張するために入れていると思いますがおもしろい表現やカッコイイ表示などができるプラグインを紹介したいと思います。

基本、有料で且つ海外で作成されたプラグインしか紹介しません。

なぜなら、コストパフォーマンスが圧倒的に高いから。

英語が出来ないからサポートが受けられないという風に考えるかも知れませんが、技術的サポートならGoogle翻訳で十分に質問も回答も得ることができます。

会員系のプラグインでソーシャルの要素を付けたいなら高度な機能を追加する事のできるプラグインも海外製ならいくらでもあるし、日本で販売されているプラグインはいかんせんDEMOが弱い。

機能や動作保証、別に自サイトで売ると言うもの良いですが、テーマなど色違いなものだけを種類が豊富として売っているのがなんだかな?と思ってしまいます。

まあ、こうちた愚痴みたいな話は良いとして単に高機能にしても使い切れないと意味がないし目的に対してきちんとあったプラグインを導入してサイトを見てくれる人を楽しませることが出来れば良いかなと思います。

あと、SVGって普通にメディアからアップロードしてもエラーになってしまうし、表示も出来ません。

ひとつ、手を加える必要があって

自分の備忘録としても書いておきます。

functions.php に以下のコードを加えます。

// SVGファイルに対応する
add_filter( 'upload_mimes', 'my_add_mime_type' );
if( !function_exists('my_add_mime_type') ) {
  function my_add_mime_type($mime_types)
  {
    $mime_types['svg'] = 'image/svg+xml';
    $mime_types['svgz'] = 'image/svg+xml';
    return $mime_types;
  }
}
add_filter('ext2type', 'my_ext2type');
if( !function_exists('my_ext2type') ) {
  function my_ext2type($ext2types)
  {
    array_push($ext2types['image'], 'svg', 'svgz');
    return $ext2types;
  }
}
add_filter('wp_generate_attachment_metadata', 'my_wp_generate_attachment_metadata',1,2);
if( !function_exists('my_wp_generate_attachment_metadata') ) {
  function my_wp_generate_attachment_metadata($metadata, $attachment_id)
  {
    $attachment_post = $post = get_post($attachment_id);
    $type = $attachment_post->post_mime_type;
    if ($type === 'image/svg+xml' && empty($metadata)) {
      $upload_dir = wp_upload_dir();
      $base_name = basename($attachment_post->guid);
      $metadata = array(
        'file' => $upload_dir['subdir'] . '/' . $base_name
      );
    }
    return $metadata;
  }
}

あと .htaccessにこのコードを加えてください

AddType image/svg+xml .svg .svgz

なぜ、SVGかっていうとベクター画像になるのでRetinaや2Kや4Kなどのモニターが一般普及して行くであろう今後を考えると解像度フリーになるベクター画像って大事な存在なんです。

注意点としてはセキュリティなどのリスクもあるので以下を参照してみてください。

SVGの画像でつくるアバター

これはSVG画像でアバターを作成出来るプラグインです。

アメリカ(海外)ナイズされたアバターとなってしまいますが、工夫によってはアニメ調などには仕上げる事ができます。

日本でアバターを作成できるサイトはありますが、大体JpegやPNG画像ですから大きな画像に拡大出来ないといった制限があります。

2014年くらいまでは、Webサイトはグラデーションや画像を多用したサイトが普通でしたがパソコンの画面がRetinaサイズや2K・4Kなどの高解像度が普通になって行く事を踏まえるとSVGなどのベクター画像に対応することは今後のことを考えると必須です。

そうした知見の一つになればいいなと。

WordPressのためのSVGアニメーションエンジン

フラット画像などが一般的になり、解像度の高いサイトを求められる傾向が強まることを踏まえると、サイトないでアイコンや画像を表示する時にもRetina対応は必要でしょう。

クリエイティブをFont Iconなどで対応する他には画像で挿入せざるを得ない部分もSVG化しておけば高解像度になっても平気ですね。

抽象のSVG画像を作成しアニメーション化します。

昨年から出始めた、画像をモザイク調にするJqueryスクリプトです。

これは、WordPressのプラグインではありませんが、人気が上がればプラグイン化されるかもしれません。

ただ、私は、あまりこのモザイクが一般化するとは思いませんが(一部のあしらいには良いかなくらい。ロゴにも使っているし)使える気がします。

対話型画像マップビルダー

対話型画像マップビルダーって意味がわからないかも知れませんが、ようするに画像を見ながらクリエイトできるビルダーがついているということ。

マップというのは地図ではなく、位置とか場所って意味で画像に対してその画像の特定の場所をマウスホバーなど何らかのアクションをする事で、ツールチップを表示したりすることの出来るインタラクティブ(対話)型の機能のこと。

このように、機能を追加したり一点豪華主義で、サイトを見に来てくれる人に対して便利な機能を提供してビューを稼ぎ広告収入をえるなどもWebサイトを提供する側の楽しみなのでアイデアを絞ってみてはいかがでしょうか?