WordPressで使うイメージをレスポンシブにする方法
WordPressは実にパワフルなプラットフォームです。
レスポンシブで、かつ統合されたテーマを作ることは、一度その方法を理解してしまえばとても簡単です。
一方で、もし必要なら、ワードプレス自体の機能を使わなくても、レスポンシブなイメージを作ることは可能です。つまり、マニュアルでイメージを保存するディレクトリに下りていって、それぞれのサイズのイメージを保存し、HTMLエディターでイメージタグのsrcset属性にイメージの名前をマニュアルでタイプすれば良いのです。
しかし、この方法は時間がかかりますし、HTMLに慣れていないユーザーにとっては難しいかもしれません。
幸い、この面倒な作業をすべてWordPressにさせることが可能です。
プラグインを使うことによって、一つのイメージをアップロードするだけで必要なサイズのイメージを自動的に生成させ、イメージを表示したい箇所のHTMLのイメージタグやsrcset属性の修正まで自動的にやってくれるように設定できるのです。
ステップ1: より多くのサイズのイメージを生成するようにfunctions.phpを修正する
イメージをアップロードするたびに、WordPressはそのオリジナルのサイズのイメージを保存し、同時に、以下の3つのサイズのイメージを自動的に生成します(各イメージの高さと幅はオリジナルの縦横比によって違ってきます)。
1. サムネール(150×150)
2. ミディアム(300×300)
3. ラージ(1024×1024)
この機能の素晴らしいところは、どのようなサイズのイメージでも生成できるように修正できることです。
つまり、複数のサイズのイメージを準備しておく必要はなく、WordPressの方で自動生成するように設定できるのです。
これを実行するには、add_image_size命令を呼び出すようにfunctions.phpファイルを修正する必要があります。以下がその例です。
add_image_size( ‘sml_size’, 300 );
add_image_size( ‘mid_size’, 600 );
add_image_size( ‘lrg_size’, 1200 );
add_image_size( ‘sup_size’, 2400 );
各命令文にはその名前と横幅が含まれています(こうすることでWordPressはサイズを特定することができるようになります)。
上記の命令ではイメージの縦横比は保持されますが、イメージの高さを指定したり、イメージを切り取るように指定したりすることも可能です(詳しくはWordPress Codexのadd_image_size命令の項目をご参考ください)。
この例の場合、4つのイメージが追加されますが、テーマ・デザインに応じて増やしたり減らしたりすることができます。
これで、イメージをアップロードするたびにWordPressが自動的に必要なサイズのイメージを生成するようになります。
次のステップは、HTMLを修正するように設定することです。
ステップ2: RICG Responsive Imagesプラグインをインストールする
WordPressにすべてのサイズのイメージを出力させるようにするためには、RICG Responsive Imagesプラグインをインストールする必要があります。
一度インストールして設定を済ませてしまえば、すべてのイメージのサイズがsrcset属性を使って表示されるようになります。
一般的に、WordPressのページにイメージを追加すると、以下のようなHTMLコードが記述されます。
<img class=”aligncenter wp-image–176 size-full” src=”https://somedomain.co.uk/wp-content/uploads/2015/05/img1.jpg” alt=”App Screenshot”>
この場合、一つのイメージだけがsrc属性に設定されています。
が、プラグインをインストールすると、以下のようなコードが生成されるようになります。
<img class=”aligncenter wp-image–137 size-full” src=”https://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg” srcset=”https://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–169×300.jpg 169w, https://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–576×1024.jpg 576w, https://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo–300×534.jpg 300w, https://localhost/SebastianGreen/2015/wp_dev/wp-content/uploads/2015/05/onavo–600×1067.jpg 600w, https://somedomain.co.uk/2/wp-content/uploads/2015/05/onavo.jpg 600w” alt=”onavo” width=”600″ height=”1067″ sizes=”(max-width: 600px) 100vw, 600px”>
すべてのサイズのイメージがsrcset属性を使って記述されていることがお分かりになるかと思います。
このプラグインにはPicturefill.jsファイルも含まれています。
これは画像エレメントを操作し、画像をレスポンシブにするためにsrcset属性と協力して働くファイルです。
これでイメージがレスポンシブになりました。
これであなたのウェブサイトのイメージはレスポンシブになり、各デバイスのブラウザーが必要に応じて最適なサイズのイメージを選択しダンロードして表示するようになります。
小さなスクリーンを持つデバイスは小さなサイズのイメージを選びます。
これによってイメージをロードするスピードを速くすることができますし、バンドの帯域幅に応じて転送されるデータ量を減らすこともできるわけです。一方で、大きなスクリーンを持つデバイスの場合は大きなサイズのイメージをダウンロードし、ジャギーのない、より質の良いイメージを表示することができます。
ところで、ここで一つ問題が発生します。
このRICG Responsive Imagesプラグインは、一度これがインストールされた後にアップロードされたイメージについては、必要なイメージサイズのコピーを自動的に生成し、srcset属性にも修正を加えてくれます。
新しいウェブサイトを作る場合にはこれで問題ないかもしれませんが、すでに存在するサイトのすでに存在するコンテンツで使われているイメージについては、functions.phpに変更を加えても、新しいサイズのイメージを生成してくれることはありません。この点はどうすれば良いでしょう。
ありがたいことに、これにも助けてくれるプラグインがあります。
すでに投稿した写真についても、あなたは別なサイズのイメージを用意する必要はありません。
ステップ3: イメージサイズを再生成するプラグインをインストールする(オプション)
Regenerate Thumbnailsプラグインがそれで、これを使うことで、既存のイメージからfunctions.phpに指定された各サイズのイメージを再生成することが可能です。
このプラグインはリアルタイムで実行され、あなたがやるべきことは、ボタンを一つクリックすることだけです。
インストールを済ませたらTools -> Regen.Thumbnailsに行って、”Regenerate All Thumbnails”ボタンをクリックしてください。
進行状況を表示するバーが現れ、イメージのリサイズ処理が進行してことが分かります。
これで、現存するすべてのイメージについて、イメージタグ中のsrcset属性によって、デバイスに応じた適切なサイズが選択されて、ウェブサイトに表示されるようになります。