WordPressアイキャッチは動画等のサムネイルも簡単にセットできる半自動がお勧め!

とても簡単なアイキャッチ画像の設定

皆さんアイキャッチ画像を設定していますか

ちょっとした手間で設定できるのですが、面倒くさやがりの人は Auto Post Thumbnail プラグインを使ったり、動画なら Video Thumbnails プラグインを使ったりされていると思います

これらのプラグインは便利で良いのですが、痒いところに手が届かないところもあるので、下記の4つのプラグインの良い所を取り入れて一つにまとめました

前バージョンよりも格段に使いやすように作りなおしました (^^)

Thumbnail optimize 機能

Thumbnail optimize で追加される機能で WordPress で不足している画像関連機能がかなりカバーできます

  1. 拡張アイキャッチ
  2. サムネイル再作成
  3. PNG-JPEG変換とサムネイル画像 [JPEG形式] の画質設定

 

ダウンロード

プログラムは、WordPress Plugin : Celtispack ページからダウンロード出来ます

ダウンロードした zipファイルを WordPress 管理画面のプラグイン新規追加画面を開き、アップロードからファイルを選択してインストールして下さい

アップロードしたら管理画面から有効化して、Celtisプラグインパック設定から Thumbnail optimize を有効化すれば使用することが出来ます

Thumbnail_optimizeプラグイン設定

※WordPress 3.9 以上で動作確認しましたが、投稿記事の TinyMCE エディタ上で埋め込んだ画像、動画の確認が出来る 4.1 以上をお勧めします

 

拡張アイキャッチ

テーマによってはアイキャッチ画像が設定されていないと No Image 等の画像がないよという表示がおこなわれてちょっと残念なブログとなってしまいます

拡張アイキャッチは、そんなアイキャッチ画像の設定を行っていない方でも出来るだけ No Image を表示しないようにする機能です

基本動作としては、記事内の img タグの最大 width 指定の画像を自動的に拡張アイキャッチとして設定することです

これだけだと Auto Post Thumbnail とあまり変わらないかも知れませんが、さらに外部の画像や動画等のサムネイルを設定することも可能となっています

サポートしているサムネイル画像

  1. サイト内の画像
  2. gallery ショートコード(最初の画像)
  3. サイト外の画像
  4. youtube (動画サムネイル)
  5. Vimeo (動画サムネイル)
  6. Vine (動画サムネイル)
  7. flickr (画像/動画サムネイル)
  8. instgram (画像/動画サムネイル)
  9. SlideShare サムネイル
  10. CodePen サムネイル
  11. SoundCloud サムネイル
  12. Ustream (ロゴ?)
  13. Twitter(リンク先OGP画像/動画サムネイル)
  14. Google Photos サムネイル(要 Google Photos embed プラグイン )

アイキャッチの自動設定だけだと、動画等が混在してくる場合に意図したサムネイルを設定するのが難しくなってきます

そこでおすすめするのが半自動方式です

基本的に動画のサムネイルは oEmbed API を使ってリンク先サイトからサムネイル画像を取得して使用するので、その部分を半自動で行います

※Twitter の埋め込みでは oEmbed API で取得したメッセージ内にあるリンク先URLのOGP画像がセットされていればそれをサムネイルとして取得します

設定方法

ここでは Youtube を例に説明します

WordPress 4.0 以上なら TinyMCE エディタのビジュアルモードで URL を貼り付けるだけで動画を埋め込んで表示確認することが出来ます

※WordPress への youtube 等の埋め込みについてはWordPress Codex 日本語版の該当ページをご覧ください。

とりあえず下記の2つの youtube のURLをエディターに埋め込んでみてください

” http://youtu.be/nwe-H6l4beM ”
” http://www.youtube.com/watch?v=kmfeKUNDDYs ”

※ここでは埋め込み機能が働かないように ” で括っています

正しく埋め込まれれば下記のように表示されるはずです

拡張アイキャッチ_youtube埋め込み例

うまく表示されましたか?

ここでサムネイルを取得したい動画をクリックしてエディタ上で選択状態とします

次にエディタのツールバーに表示されている マークボタンをクリックすれば選択状態の動画のサムネイルが拡張アイキャッチとしてセットされます

oEmbed API の通信処理をおこなうので、少し時間がかかりますがサムネイルが取得できると下記のように表示されます

拡張アイキャッチ設定例

これでサポートしている画像、動画、スライド等から簡単に対象を選んでサムネイル取得できます

選べるってすばらし~ (^^)

ちなみにセットした拡張アイキャッチを変更したい場合は同じようにエディタ上で選択して マークボタンをクリックすればOKです

また、拡張アイキャッチをセットしたくないという記事がありましたら、拡張アイキャッチ画像上部の x マークをクリックすればスキップされます

拡張アイキャッチスキップ

※記事内に画像が存在しない場合等は、スキップモードにしておけば、自動検出を行わないようになりますので無駄な動作を行わない分だけ処理が速くなります

注意事項

  • 拡張アイキャッチの画像は、標準のアイキャッチ画像が設定されていない場合のみ使用されます
  • 拡張アイキャッチは oEmbed 埋め込みの動画等が対象となっていますので、 直接 iframe コードを貼り付けて埋め込んでいる場合は対象外となります

 

どうです。記事内の画像や動画から簡単に選択できるので、私のような面倒くさやがりの人にもお勧めです (^^)

 

サムネイル再作成

拡張アイキャッチ等のサムネイル画像を活用するためには、サムネイルの再作成機能が不可欠です

WordPress のサムネイルは、画像をアップロードした時に設定画面のサムネイルサイズ設定値に基づいて自動的に作成されます

そう。チャンスは一度きりなんです (>_<)

WordPress サムネイル再作成はいつやるの
WordPress Celtis-one テーマでのサムネイル再作成について紹介しています
また、プログラムに興味がある方向けに、サムネイル生成やjpeg画像の画質設定を行ったプログラムも紹介しています…

サイズを変更したりトリミング設定を変えた時には、別途 Regenerate Thumbnails 等のプラグインで再作成しなければなりませんでした。また、作成されるサムネイルのサイズを最適化するには EWWW Image Optimizer 等を使用している方も多いと思います

これらのプラグインを使用しなくても手間をかけずにサムネイルの最適化を自動的に行う機能です

サムネイル画像を表示する時に現在の設定値と較べて変化していたらサムネイルを自動的に再作成します

実際にサイズが変わって再作成する時には負荷はかかりますが、そのページ内のサムネイル画像だけなので、気にするほどでもありません

なにより自動的に再作成してくれるので楽ちんです

もちろん拡張アイキャッチにも対応していますので、動画サムネイルのキャッシュファイルも自動的に再作成します

自動ってすばらし~ (^^)

 

PNG-JPEG変換とサムネイル画像 [JPEG形式] の画質設定

画像をたくさん使用すると、通信量が増えてサイトの表示が遅くなりがちです

そこで、様々な画像の最適化が必要になってくるのですが、ここでは簡単にサムネイル画像のサイズを小さくする方法を紹介します

サムネイルの再作成機能と合わせて使用して下さい

画像最適化は、通常 PNG 画像より JPEG 画像のほうが非可逆圧縮なのでサイズが小さくなります。そこで元画像が PNG形式ならサムネイルのみを JPEG に変換してサイズを縮小化します

JPEG画質は、大、中、サムネイルサイズ毎に選択出来るようになっています

画質を落とせばかなり小さくすることが出来るので実際に確かめて見ることをお勧めします

WordPress png画像のサムネイルを jpg画像に変換してみる
WordPress でサムネイル画像を作成するときに png形式から jpg形式に変換するプログラムを紹介しています。サムネイルを png形式にすることでファイルサイズを縮小化し、表示スピードを高速化することが出来ます…

注意事項

  • サムネイル画像が対象の機能なので、フルサイズの元画像データには影響しません
  • 画像データを小さくするには、アップロードする前の元画像の最適化が大切です

 

キャッシュファイルのクリア

外部サイトから取得した画像データは、サイトの wp-content/uploads/celtispack/thumbnail フォルダーにキャッシュファイルとして保存管理しています

拡張アイキャッチ画像のキャッシュファイルは、長い期間に少しずつ不要なファイルが溜まってきます。テーマ変更やサムネイルサイズの変更、削除した記事中の画像等などで無駄なキャッシュファイルが増えてきたらお掃除することをお勧めします

通常はこの機能は隠されていますが、wp-config.phpdefine(‘WP_DEBUG’, true) が指定してあると Celtisプラグインパック設定画面の一番下に下記のような表示がされます

このリンクをクリックすることでサムネイル画像キャッシュファイルがクリアされます

サムネイルキャッシュファイル削除リンク

あくまでキャッシュファイルなので、消してしまってもサムネイル再作成機能が有効になっていれば、自動的に表示する時に作られますが、最初のキャッシュ再作成時は、ちょっと時間がかかる場合もあります

以上です

 

これでアイキャッチ設定作業が地味に便利になると思います

まだ不具合等があるかもしれませんが、よろしければ試してみてください (^^)

 

また、プログラムの処理内容については紹介していませんが、コードに興味がある方は、ダウンロードしたプログラムの celtispacl/module/thumb-optimize 以下にあるファイルを参照して下さい

ちょっとボリュームのあるコードですがコメントも入っているので追いかけて見て下さい (^^)

 


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss