[WordPress] アイキャッチ画像をURLで指定するプラグイン『Featured Image from Url』（FIFU）の使い方【おすすめ】
サムネイル画像（アイキャッチ画像）に外部URLを指定できるようになるプラグイン。
＊ featured imageとはサムネイル画像のこと（アイキャッチは和製英語）
WordPressでは通常、管理画面のライブラリにある画像、つまりWordPress本体に自分でアップロードしたものしか投稿画面で指定できず、たとえ同一ドメイン内にある画像であってもURLでは指定できない。
現在は、クラウドやCDNを利用することが当たり前になり、もちろん画像も例外ではないのだが、上記の仕様によりそれを活かせない状態にある。
このプラグインを使えば、外部URLの画像をサムネイルに指定できるようになるだけでなく、他にもいろいろな便利機能がある。
ただ、無料版も提供されているものの、Premiumという有料版でないと使えない機能も多いのが残念。
そうはいっても、普通に使っている分には基本無料のままで十分。
（正直、39ドル90セントも払う必要があるほど、よく使うプレミアム機能があるわけではないと感じる）
【公式ページ】
インストール方法
WordPress管理画面 ＞左側メニュー「プラグイン」 ＞新規追加 ＞画面右上の「キーワード」入力覧で「FIFU」を検索 ＞検索結果から「今すぐインストール」 ＞インストール完了後「有効化」
FTPなどを使ってファイルを直接アップロードする方法は、いろいろと間違いが起きやすいのでやめておこう。
設定したほうがいい機能
デフォルト画像の設定
WordPress管理画面 ＞左側メニュー「Featured Image from URL」 ＞タブ「Featured Image」 ＞Default External Featured Image
この入力欄に画像URLを指定してsubmitボタンを押し、トグルボタンを「ON」にすると有効化される。
もちろん、外部サイトのURLも指定可能。
筆者の環境だけかもしれないが、他のプラグインやテーマによってはこのFIFUでサムネイル画像を設定していても、「何もない」と判断されてしまうことがある。
その際、このデフォルト画像を設定しておくと改善されることもある。
【注意点】
その場合、今度は逆にサムネイルが個別に設定されていないにもかかわらず、WordPressのシステム側からは「設定されている」と判断されてしまう。
正確に「サムネイルは設定されていない」とシステムに判断させ、他のプラグインやテーマなどの機能が誤認しないようにする方法は今のところないようだ。
状況に応じて使い分けるようにしよう。
CSS関連
WordPress管理画面 ＞左側メニュー「Featured Image from URL」 ＞タブ「Featured Image」 ＞Add Class
このFIFUで出力される画像のimg要素に「fifu-class」というクラス名をつける。
これで、テーマのスタイルシートなどでFIFUの画像のみデザインを変更できるようになる。
逆に、自分でテーマなどのHTMLをいじって独自のクラスなどをつける場合は、オフのままにしておく。
なお、「CSS Style」というCSSをimgタグのstyle属性にインラインで直接書き込む機能もあるが、style要素やCSSファイルの設定より優先されてしまうので、正直あまり使わないほうがいいだろう。
lazyload
WordPress管理画面 ＞左側メニュー「Featured Image from URL」 ＞タブ「Performance」 ＞Lazy Load
画像やiframeなどを遅延読み込みする機能が、FIFUにもある。
テーマやプラグインでlazy loadをすでに導入している場合は、機能がバッティングしてまったく画像が表示されなくなることがあるので、かならずどちらかをオフにする。
（特にWordPressテーマLuxeritasやJetPackプラグインを使用中の場合）
img要素のalt/title
WordPress管理画面 ＞左側メニュー「Featured Image from URL」 ＞タブ「Text」
FIFUで設定されるimg要素のalt属性とtitle属性の文字列を自動で、該当記事のタイトル名にする機能。
便利なようにも思えるが、これも他のテーマ/プラグインにおける同様の機能とバッティングしやすいので、設定をよく考えてから決めよう。
copy the post title to FIFU alt/title field (it will have effect when you click on publish/update button of your post/page)
上段の設定。
各記事の保存時に、FIFU用のカスタムフィールドにその投稿のタイトルをコピーする。
つまり、FIFU導入前に投稿された既存の記事は、それが更新されるまで何も設定されないが、カスタムフィールドで自分で自由に値をいじれるということ。
always use the post title as image alt/title (it will ignore FIFU alt/title field)
下段の設定。
FIFUのカスタムフィールドは無視して、常に記事タイトルを割り当てる。
こちらのほうが既存の記事にも自動でalt/titleに値が割り振られるが、自分でカスタマイズすることはできない。
WooCommerce
WordPress管理画面 ＞左側メニュー「Featured Image from URL」 ＞タブ「WooCommerce」 ＞Lightbox and Zoom
eコマース向けのWordPressプラグイン「WooCommerce」で表示する製品画像で使う、lightboxとzoom機能のための設定。
そもそもWooCommerceを使わないなら、もちろんONにする必要はない。
それどころか安易に使うと、必要のないWooCommerce用のCSSが読み込まれたり、他のプラグインによるlightbox機能などとバッティングしてしまったりするので、要注意。
FIFUのJavaScript・CSSを出力させない
FIFUは基本的にサムネイルの外部URLを指定する「だけ」のプラグインだが、他のオプションとの兼ね合いで、このプラグイン固有のJavaScriptファイルやCSS（スタイルシート）をデフォルトで出力する。
（上記WooCommerceなど）
ほとんどの場合、特に他の機能を使わず、自分でCSSを書いている場合は必要ないものなので、余計な読み込み・パースを減らすために削除してしまったほうがいいだろう。
方法
今使っているテーマ（子テーマ）のfunctions.phpに、以下の記述を追加する。
// プラグイン「FIFU」のJavaScript・CSSを削除するための関数
function dequeue_fifu_options() {
wp_dequeue_script('fifu-image-js'); // JavaScriptファイルを外す
wp_dequeue_style('fifu-woo-css-inline'); // インラインのCSSを外す
}
// 上記の関数をWordPressシステムに登録
add_action('wp_enqueue_scripts', 'dequeue_fifu_options', 100);
もちろん、他の要素を外すために同様の記述がある場合は、「dequeue_fifu_options」の処理をそこへ追記するだけでいい。
（たとえば、ブロックエディタ用CSSの削除など）
注意点・デメリット
一部、動作しないことも
一部のプラグインやテーマと相性が悪く、画像が表示されないどころか「アイキャッチが指定されていない」と判定されることがある。
その場合は基本的に、自分でテーマなどをいじるしかないようだ。
サイズ変更ができない
画像サイズの指定は有料版の機能なので、FIFUでは無料のままではできない。
しかし、CSSや画像そのもののサイズを変更すればいいだけの話なので、特に困りはしないだろう。
類似のプラグイン
ほぼ同様の機能だが、更新が止まっている。