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

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

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

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

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

WP5 Gutenberg エディター対応版に作りなおしました (^^)

Thumbnail optimize 機能

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

  1. 拡張アイキャッチ
  2. サムネイル再作成
  3. PNG/JPEG→WebP複製
  4. サムネイル画像 [JPEG/WebP形式] の画質設定

 

Celtispack-WebP複製設定

 

WebP複製機能は、セルティスラボ製のWordPressテーマ Celtis Speedy をお使いの場合のみ有効化される限定機能です

ダウンロード

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

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

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

拡張アイキャッチ

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

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

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

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

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

  1. サイト内の画像
  2. gallery ショートコード(最初の画像)
  3. サイト外の画像
  4. youtube (動画サムネイル)
  5. Vimeo (動画サムネイル)
  6. flickr (画像/動画サムネイル)
  7. instgram (画像/動画サムネイル)
  8. SlideShare サムネイル
  9. CodePen サムネイル
  10. SoundCloud サムネイル
  11. Twitter(リンク先OGP画像/動画サムネイル)

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

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

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

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

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

TinyMCE エディタでの設定

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

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

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

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

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

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

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

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

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

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

Gutenbergエディタでの設定

Gutenbergエディタでは、動画等の埋め込みはブロックを使うようになりますが、TinyMCE と同様に URL を貼り付けるだけで埋め込みが出来ます

埋め込みブロックから今回は YouTube を選択。するとURL入力用のボックスが表示されるのでURLを入力します

埋め込みブロックを選択してURL入力

埋め込みボタンをクリックすると動画が埋め込まれます

上部に表示されるメニューから拡張アイキャッチをクリックすればセットされます

ブロックから拡張アイキャッチを選択

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

拡張アイキャッチ設定例

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

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

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

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

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

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

注意事項

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

 

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

 

サムネイル再作成

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

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

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

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

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

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

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

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

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

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

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

 

PNG/JPEG→WebP複製とサムネイル画像の画質設定

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

JPGと同等の画質なら2~3割データサイズを減らせると言われている WebPという画像形式が、2019年2月現在 Chrome, Edge, Firefox とモダンブラウザの8割近くがサポートされるようになってきています

Celtis Speedy テーマ限定の機能となってますが、JPG/PNG 画像から WebP 画像を複製して活用できるようにしました

WordPress で WebP画像をサポートする方法
WordPress で WebP を扱うためのポイントを紹介します。うまくいけば WebP に対応した高速なサイトが出来あがります (^^)
WordPress で WebP画像をサポートする方法

また、サムネイル画像のサイズ毎(大/中大/中/サムネイル)にJPEG/WebPの画質を選択出来るようにしています

この機能が使えるサーバーはまだ限られているかも知れませんが、私の使用しているエックスサーバーでは使えることが出来たので試してみて下さい

WebPの使用や画質を落とすことで画像ファイルのサイズをかなり小さくすることが出来るので実際に確かめて見ることをお勧めします

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

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

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

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

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

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

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

以上です

 

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

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

 



まとめ記事紹介

go-to-top