コピペ一発でWordPressの投稿時にアイキャッチを自動設定させるカスタマイズ方法(YouTube対応版)

WordPressのアイキャッチ設定って結構面倒くさいです。

そりゃ、一度ぐらいならさして面倒な事ではありません。けれど記事を書いて、投稿するたびに、毎回毎回設定していると面倒くさくなってきます。

しかもそのアイキャッチが、毎回投稿のトップにある画像に設定しているのなら、ついつい自動化したくなります。

そういう時のために、Auto Post Thumbnailというプラグインがあります。通常そういった場合は、このプラグインを使用すれば良いですが、今回は使っているテーマにこのAuto Post Thumbnailのような機能を付加する方法を紹介したいと思います。

ついでに、投稿内にYouTubeの動画があった場合は、動画のサムネイルを取得してアイキャッチにする機能も付けたいと思います。

カスタマイズ自体は、functions.phpにコードをコピペするのみになっているので、それほど難しくはないと思います。

スポンサーリンク
レクタングル(大)広告

アイキャッチ自動設定カスタマイズ

アイキャッチ自動設定のカスタマイズ自体は、とても簡単です。

以下のコードを、親テーマでも子テーマでも良いので、functions.phpにコピペするだけです。

ポイントとなるところには、コメントを入れてあるのですが、一応いくつか解説です。

2016年3月14日追記:以前のコードは、画像は既にあったとしても、画像IDが取得出来ないケースもあり、新たに画像が生成てしまう場合もありました。けれども、なるべく新たな画像が生成されなくても済むように、コードを修正しました。

ファイルの読み書き

以下のコードは、WP_Filesystemを利用するために記述します。

WordPressテーマなどから、file_get_contentsを直接呼ぶのは、作法的に良くない(というかセキュリティー的にだと思う)ので、WP_Filesystemのオブジェクトを介して取得する必要があります。

例としては、こんな感じで。

詳しくは以下を参照してください。

Wordpressテーマなどでは、PHP関数で直接ファイル操作をするのは非推奨、WP_FileSystemを使って操作するのが望ましいらしい
先日、自分が作成しているテーマにスキン機能をつけてみました。 スキン機能は、PHPのファイル操作関数を使っていました。 するとその後...

それぞれの関数の動作

fetch_thumbnail_image()は、画像がデータベースにない場合は、WEB上の画像URLからファイルを取得する関数です。今回は、YouTubeのサムネイルを取得するのに利用しています。

auto_post_thumbnail_image()は、投稿にアイキャッチが設定されていなかったら、投稿本文の最初に出てくる画像をアイキャッチに設定します。

投稿本文に画像がなくてYouTubeの埋め込みがあったら、YouTubeのサムネイルをアイキャッチに設定します。

画像と、YouTubeめ込みが両方あった場合は、画像の方が優先されます。

上記のコードを作成するのに、以下の情報をまぜ合わせて利用させてもらいました。

あと、YouTubeのサムネイルに関しては以下が参考になります。

動作確認

で、肝心の動作です。

画像の自動アイキャッチ設定

新しい投稿作成して、以下のように設定して公開すると

アイキャッチの自動設定公開前

一番最初に出てくる画像が「アイキャッチ画像」に設定されています。

アイキャッチの自動設定公開後

YouTube動画の自動アイキャッチ設定

例えば、WordpressのoEmbed(埋め込み)機能で、投稿本文に以下のように書いて公開ボタン押すと

YouTube動画の自動アイキャッチ設定公開前

YouTubeから、最初に登場する動画のmqdefault.jpg(320×180px)サイズのサムネイルが、自動で取得され「アイキャッチ画像」に自動設定されます。

YouTube動画の自動アイキャッチ設定公開後

もちろん、WordpressのoEmbedではなく、YouTubeの以下のようなiframe埋め込みを利用してもサムネイルは取得されます。

注意点

今回の方法では、画像とYouTube埋め込みを同時に本文中に挿入した場合は、最初に登場する画像が優先的にアイキャッチに設定されます。

YouTubeの埋め込みが先頭に記入されていても、本文中に画像が使用されていれば、画像が「アイキャッチ画像」に設定されます。

ここらへんを、修正するには、画像とYouTubeを判別する正規表現部分を、適切なものに変更してください。

まとめ

とりあえず、コードに書かれている内容を特に気にしなければ、カスタマイズ自体は1回のコピペだけで行える簡単なものです。編集に1分もかかりません。

ただ、画像だけをアイキャッチに自動設定したければ、Auto Post Thumbnailプラグインを利用した方が無難かと思います。

また、YouTubeのサムネイルをアイキャッチに自動設定したい場合は、有料ですがAuto Post Thumbnail PROというのもあるようです。この記事を書いた時点では、8ドルで購入できます。

「いつも使用しているテーマに自動アイキャッチ設定機能をつけて、プラグインのインストールを不要にしたい」とか、「YouTube動画を紹介するページで、毎回アイキャッチ設定が面倒くさい」なんて方には、有効なカスタマイズ方法かもしれません。

『コピペ一発でWordPressの投稿時にアイキャッチを自動設定させるカスタマイズ方法(YouTube対応版)』へのコメント

  1. 名前:ggg 投稿日:2015/07/22(水) 16:43:02 ID:3dd0a220d

    お前の推奨したクソテンプレートのせいで、ワードプレスがぐちゃぐちゃになったじゃねーかお前のサイトを鵜呑みにするんじゃなかったは。

  2. わいひら 名前:わいひら 投稿日:2015/07/22(水) 20:06:57 ID:f723ed1f3

    この記事では、テンプレート(テーマ)は、推奨していないですけどどのテーマのことでしょうか?

    IP情報から、以下の書き込みはすべてgggさんかと思われますが、こういったことを一方的に書き込むだけというのはやめていただけないでしょうか?
    http://nelog.jp/for-pc-crash#comment-40304
    http://nelog.jp/wordpress-h1-h6#comment-40267
    http://nelog.jp/wordpress-child-theme#comment-38815
    (※もちろん当サイトを読んで、上記リンクのようなことを思われる方もおられるかもしれません。いろいろな意見は歓迎します。ただ、上記のようなコメントがすべて同一人物と思われるIPからだった上に、すべて具体的な返信がないもので。)

    もし今回の記事に関する書き込みが一方的ではなく、根拠があるとおっしゃられるのなら、この記事で書かれているカスタマイズをしたら、Wordpressにどのような不具合が出たか具体的に書いてみてもらってよろしいでしょうか。

  3. 名前:名無しさん 投稿日:2015/12/17(木) 16:49:27 ID:b55a2618b

    いつもすばらしい記事ありがとうございます。
    さっそく質問なのですが、サムネイル生成後にflickr等外部サイトから取得した画像及びyoutubeから取得した画像を自分のサーバーから削除することは可能でしょうか?可能で有ればご教授頂ければ幸いです。
    よろしくお願いします。

  4. わいひら 名前:わいひら 投稿日:2015/12/18(金) 12:32:32 ID:4fadac0fd

    それは、サーバー上に保存した画像のことでしょうか?
    それでしたら僕の知る限りでは、保存した画像には「何処から取得したか?」等の情報は含まれていないと思うので、「特定のサービスから取得した画像を削除する」ということはできないのではないかと思います。

  5. 名前:obon 投稿日:2016/03/11(金) 02:37:41 ID:cbbb485b9

    大変参考になる記事ありがとうどうざいます。
    質問なのですが、上記の方法を使用した際にアイキャッチ画像を生成しないでアイキャッチとして登録するにはどうしたらよいでしょうか?

    画像は既にメディアにアップロードしてある存在している状態で、アイキャッチを選択しないで、「公開」した際に本記事の通り自動でアイキャッチが設定されるのですが、新たに画像が生成されてしまうのが悩みです。(Auto Post Thumbnailでも同様です)

    画像は既にメディアにアップロードしてある存在している状態で、アイキャッチを自分でアップした画像に選択するとファイルは新たに生成されません。

    ・「XXX.jpg」→「XXX-1.jpg」が追加されアイキャッチとして登録されてしまう。

    ・新たなファイル名の画像を生成しないで「XXX.jpg」のままサイズを追加してアイキャッチを登録したいです。

    説明が下手で申し訳ないです。少しでも解決案などご教授いただければ幸いです。
    よろしくお願いしたします。

  6. わいひら 名前:わいひら 投稿日:2016/03/12(土) 19:15:18 ID:70c3172f3

    原因を探っていって、返事が遅れて申しわけありません。
    多分ですが、コード中の以下の部分を

    $image = substr($image, strpos($image, ‘”‘)+1);

    以下のように変更すればいけるかと思います。

    preg_match(‘/src *= *”([^”]+)/i’, $image, $m);
    $image = $m[1];

    Auto Post Thumbnailの方も、おそらく不具合っぽいですね。

  7. 名前:obon 投稿日:2016/03/12(土) 22:52:52 ID:9b58f8e1d

    ご回答ありがとうございます。返信の早さに驚きです。
    いくら検索してみてもなかなか解決できなかったのでやっと光が見えてきて感謝です。

    さっそく上記の通りfunctions.php部分を書き換えてみたのですがで
    真っ白になってエラーになってしまいました。

    $image = substr($image, strpos($image, ‘”‘)+1);

    部分をそのまま

    preg_match(‘/src *= *”([^”]+)/i’, $image, $m);
    $image = $m[1];

    に書き換えてみたのですがうまくいきません、何がいけないんでしょうか?

    引き続きご教授いただければと思います。

  8. わいひら 名前:わいひら 投稿日:2016/03/12(土) 23:03:28 ID:70c3172f3

    ちょっとエラーメッセージがわからないと何とも言えないです。
    以下の、デバックモードにしてエラーメッセージを表示させて、メッセージをそのままコメントに貼り付けていただいてよろしいでしょうか。
    WordPress 画面が真っ白になる対応の一つ デバッグモード | エス技研
    (※サーバー名のような、表示させたくない部分は、xに置き換えるなどしてください)
    よくわからない場合は、「Wordpress デバッグモード」などで検索して解りやすい記事を探してみてください。

  9. わいひら 名前:わいひら 投稿日:2016/03/12(土) 23:08:24 ID:70c3172f3

    どうやら、コメント欄の仕様で、’(シングルクォーテーション)や”(ダブルクォーテーション)が全角に置き変わって表示されているコードをそのまま使用しているのが原因ではないかと思います。

    もう一度書きますと、以下のコードを

    以下のように変更してください。

    もしくは、全角の文字列(‘”)を全て半角に修正してください。

  10. 名前:obon 投稿日:2016/03/13(日) 00:00:31 ID:6da198792

    返信ありがとうございます。
    上記のコード貼り付けのエラーは発生しなくなるようになりました。

    しかし、引き続き「XXX.jpg」→「XXX-1.jpg」になってしまいます。

    自分はアップロードしたファイルのサムネイルサイズを投稿の際、
    使用しているのですが、これが原因なのでしょうか?

    色々試しているうちにフルサイズの投稿の際は、
    このような症状はないことが発覚いたしました。

    ↓フルサイズ使用の際

    ↓サムネイルサイズ使用の際 

    サムネイルサイズの投稿の際にも本記事の動作を対応させる事はできますでしょうか?

    重ね重ね大変恐縮ですが、よろしくお願いいたします。

  11. 名前:obon 投稿日:2016/03/13(日) 00:02:42 ID:6da198792

    先ほどの質問でコメント欄の関係で消えてしまった部分です。

    ↓フルサイズ使用の際
    img src=”http://xxx/wp-content/uploads/2016/03/yyy.png”…..

    ↓サムネイルサイズ使用の際
    img src=”http://xxx/wp-content/uploads/2016/03/yyy-600×350.png”…..

  12. わいひら 名前:わいひら 投稿日:2016/03/13(日) 00:32:25 ID:3844c0bc3

    いくつかの環境で確認をしてみましたが、当環境ではサムネイルでも不具合が確認できませんでした。問題なく動作しています
    もし不具合がある場合でも、詳細な不具合再現手順がわからないと、修正は難しいです。

  13. 名前:obon 投稿日:2016/03/13(日) 02:08:33 ID:6da198792

    親身に付き合って頂きありがとうございます。
    もう少し、原因を、手順を正確に調べてみようと思います。

    詳細な不具合再現手順等、整ってから改めて質問させていただきたいと思います。
    ありがとうございました。

  14. わいひら 名前:わいひら 投稿日:2016/03/13(日) 10:00:26 ID:3844c0bc3

    よかったら、修正したコードの部分を以下のように書き換えて、出てきた文字列を可能な限りそのまま、このコメント欄に貼り付けてもらえると、問題があるかどうかがわかるかもしれません。

    出てきた文字列を確認後は、追加部分をコメントアウトするか削除してください。

  15. わいひら 名前:わいひら 投稿日:2016/03/13(日) 10:04:24 ID:3844c0bc3

    出来れば「フルサイズ使用の際」と「サムネイルサイズ使用の際」に出てきた文字列両方を貼っていただけると助かります。
    あと、文字列は、preで囲んでいただけると、そのまま表示されるかと思います。
    <pre></pre>

  16. 名前:obon 投稿日:2016/03/13(日) 14:46:05 ID:6da198792

    新たな上記のコードに書き換えてみましたが文字列等のものが特に現れませんでした..(エラーなどは特に起こりません)

    悩みの点を画像と共にアップさせて頂きました。
    ↓サムネイルサイズ投稿の場合
    http://imgur.com/a/jczn8
    ↓フルサイズ投稿の場合
    http://imgur.com/a/hvE3x

    テーマをSimplicityのものにさせて頂いたり使用プラグインをすべて停止したりしてみたのですがダメでした。そもそもアイキャッチというのは登録すると新たにアイキャッチようにファイルを生成する仕様なのでしょうか?でも、なぜフルサイズを投稿に使用した場合は新たに生成されずサムネイルサイズを使用すると生成されてしまうのでしょうか?

    あと、少し要望とは違いますが似たような状況の方を見つけました。
    https://ja.forums.wordpress.org/topic/148528

    ・参考になるか分かりませんが使用サーバーはエックスサーバーです。

    よろしくお願いいたします。

  17. わいひら 名前:わいひら 投稿日:2016/03/14(月) 13:01:32 ID:f6a7cdd73

    分かりやすい不具合の再現方法ありがとうございます。

    説明されている再現方法通りにやると、おしゃっていることが再現できたので修正してみました。(キャプチャがあったおかげでわかりやすくて原因がわかりました)

    一つ一つ修正方法を書くのは大変なので、全てのコードを貼り付けます。修正したままを貼り付けるので、不要なコメント部分などは削除してください。

    ただ、外部リンクが本文最初に設定されているときは、毎回新しい画像が生成されます。(これは仕様上どうしょうもない)
    あと、もしかしたら、上記のコードでも新たに画像が生成されてしまうこともあるかもしれません。
    それを、サムネイルをアイキャッチに登録することで、新しい画像を生成しないようにする方法もあって試してみたのですが、それをすると、また違った不具合が出でくるようです。なのでAuto Post Thumbnailもこういった仕様になっているのかもしれません。
    (※分かりづらいかもしれませんが、すべてをわかりやすく説明するとなると膨大な文章と画像も必要になってくるので割愛させてください)

    でも、これで大抵の場合は、画像が新しく生成されることはなくなるのではないかと思います。

  18. 名前:obon 投稿日:2016/03/14(月) 15:03:36 ID:eaa9f3175

    //if ( is_auto_post_thumbnail_enable() ) {
    //新しい投稿で自動設定する場合
    //add_action( ‘transition_post_status’, ‘auto_post_thumbnail_image’);
    add_action(‘save_post’, ‘auto_post_thumbnail_image’);
    add_action(‘draft_to_publish’, ‘auto_post_thumbnail_image’);
    add_action(‘new_to_publish’, ‘auto_post_thumbnail_image’);
    add_action(‘pending_to_publish’, ‘auto_post_thumbnail_image’);
    add_action(‘future_to_publish’, ‘auto_post_thumbnail_image’);
    add_action(‘xmlrpc_publish_post’, ‘auto_post_thumbnail_image’);
    //}

    エラーメッセージにFatal error: Call to undefined functionと「is_auto_post_thumbnail_enable()」の部分について出てきたのですが、コメントアウトしてしまっても大丈夫でしょうか?(一応これで無事動作しております。)

    まさに理想の動作の動作になりました!!検索してもなかなか情報を得られず、半分諦めかけていたこの悩み。わいひらさんにご相談して本当に良かったと思います。

    この度は本当にお世話になりました。貴重な時間をさいて、毎度、早々に丁寧なご回答をいただき本当に感謝しております。ありがとうございました。

  19. わいひら 名前:わいひら 投稿日:2016/03/14(月) 16:13:05 ID:f6a7cdd73

    それは、コメントアウトしてしまって大丈夫です。
    その部分は、僕の使用しているテーマでテストしたので、テーマ内で使用している関数を使った条件分岐が付加されてしまいました。
    その部分は、他のテーマの場合は、消さなくてはなりません。

    とりあえず、うまくいったようでよかったです。
    記事の方も、修正しておこうと思います。僕も、自作のテーマの不具合をこれで修正できたので、よかったです。

  20. わいひら 名前:わいひら 投稿日:2016/03/14(月) 16:52:30 ID:f6a7cdd73

    エラーを修正して、余計なコメントを削除して整形して、本文に反映させておきました。
    17に書き込んだコードは、コメントアウトのし忘れもあったので、本文中にあるコードで、もう一度コピペし直しておいたほうがいいかもしれません。
    多分大丈夫とは思うのですが、もしエラーメッセージなどが出たら、教えていただけると幸いです。

  21. わいひら 名前:わいひら 投稿日:2016/06/24(金) 06:22:48 ID:742957fc9

    関連トピック。
    コピペ一発でWordPressの投稿時にアイキャッチ、についてですが

  22. 名前:SAS 投稿日:2016/06/26(日) 11:07:38 ID:9b849ddd1

    いつもお世話になっております。
    初書き込みです。
    大変便利でこちらのコードを使用させていただいております。
    2点お伺いしたことがございます。
    1点目はこちらのコードなのですが記事に画像がない場合のデフォルト画像の自動添付を追加出来ないでしょうか?
    2点目はギャリーを作成した時に自動的にアイキャッチに最初の画像などを添付できないでしょうか?
    非公式のCeltispackというプラグインにて二点目は実現させている状態なのですが
    使用プラグインが増えすぎているためなんとかfunctions.phpの記述にて対応出来ればと思っております。
    お忙しいと思いますがお時間あればご教授下さい。
    宜しくお願い致します。

  23. わいひら 名前:わいひら 投稿日:2016/06/26(日) 12:15:03 ID:5553d9ec7

    1.こちらのコードでは「画像がない場合のデフォルト画像の自動添付を追加」といった機能は出来ないので、機能追加するなら自前でPHPで書くしかないかと思います。

    2.ギャリーというのはギャラリーのことでしょうか?ギャラリーといってもいろいろなタイプがあるのでちょっと何とも言えないです。この記事のコードを実装してみて出来ていないものは、PHPの処理を変更しないことには出来ないと思います。

    僕は現在忙しくて、カスタマイズコードを書く暇はないので、自前では無理かつ、どうしても機能を追加するならば、WEB制作会社もしくは、クラウドソーシングサービスなどに依頼することをお勧めします。