WordPress/WebP画像サムネイルがメディアライブラリで表示されない時

- WordPress -
2020.09.14
WordPress

WordPressのメディアにWebP画像をアップロードしたら、以下のようにライブラリ一覧でWebp画像サムネイルが表示されない事象に遭遇しました。

Webp画像がメディアライブラリでサムネイル表示されない時

これだと何の画像かわからない...

これだと記事内に貼り付けたくとも貼り付けてみるまで何の画像か分からず不便...!ということで、メディアライブラリ内でWebP画像サムネイルを表示させる方法です。

WordPressテーマフォルダ内のfunctions.phpへコピペするだけなので簡単。

WebP画像サムネイルがWordPressのメディアライブラリで表示されない時

functions.phpを編集する方法例として、以下は管理画面エディターから操作する手順で説明しています。

ソースコードの編集は慎重に。もし「変なコトしちゃったかも」と感じた場合は、何も保存せずブラウザバックをしてページを戻りましょう。

1. functions.phpを編集

WordPress管理画面の 外観 >  テーマエディター をクリック。

Webp画像のサムネイルが表示されない

画面右側カラムにある「テーマのための関数(functions.php)」をクリック。

Webp画像のサムネイルが表示されない

以下コードをコピーします。

functions.php// メディアでWebP画像サムネイル表示
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }
    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

functions.phpの最下部(どこでもOKですが、分かりやすさのため...)へ貼り付けます。

もし最終行に " ?> " のPHP閉じタグ文字がある場合は、閉じタグより上の行に貼り付けるようにしてください。閉じタグより下へ貼り付けてしまうと保存時にエラーになってしまいます。

以下画像例のように閉じタグがない場合は気にしなくて大丈夫です。

Webp画像がメディアライブラリでサムネイル表示されない時

忘れずに保存し、「ファイルの編集に成功しました。」と出れば編集作業は成功です。

2. アップロードしたWebP画像をメディアから削除する

手順1で変更した設定は、変更後に新規アップロードした画像に対してのみ有効になります。

したがって、すでにメディアへアップロード済みでサムネ表示がされていないWebP画像は削除しておきます。

Webp画像がメディアライブラリでサムネイル表示されない時

3. 再アップロード

再度メディアへアップロードしてみると、メディアライブラリ上でWebP画像のサムネイルが表示され、どのファイルがどんな画像なのかが分かるようになりました。

Webp画像がメディアライブラリでサムネイル表示されない時

サムネイルが表示されるようになった

 

参考サイトstack overflow:Wordpress webp image previews

↑TOP