[WordPress] アイキャッチ画像をURLで指定するプラグイン『Featured Image from Url』(FIFU)の使い方【おすすめ】

2020 年 5 月 9 日

サムネイル画像(アイキャッチ画像)に外部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でサムネイル画像を設定していても、「何もない」と判断されてしまうことがある。

その際、このデフォルト画像を設定しておくと改善されることもある。

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機能などとバッティングしてしまったりするので、要注意。

注意点・デメリット

h3{一部、動作しないことも}

一部のプラグインやテーマと相性が悪く、画像が表示されないどころか「アイキャッチが指定されていない」と判定されることがある。

その場合は基本的に、自分でテーマなどをいじるしかないようだ。

サイズ変更ができない

画像サイズの指定は有料版の機能なので、FIFUでは無料のままではできない。

しかし、CSSや画像そのもののサイズを変更すればいいだけの話なので、特に困りはしないだろう。

類似のプラグイン

External URL Featured Image

ほぼ同様の機能だが、更新が止まっている。

ITWordPress

Posted by takasho