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

- WordPress -

2020.10.25

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

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

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

WordPress管理画面からテーマフォルダ内のfunctions.phpというWordPressのファイルへコピペするだけなので簡単。

ーもくじー

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

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

WordPressのfunctions.phpというファイルを編集する方法例として、ブロガーさんなど非エンジニアのかた向けにWordPress管理画面のコードエディターから操作する手順で説明していきます。

ソースコードの編集は慎重に。万が一打ち間違えなどある場合はサイト表示ができなくなる等事故のもとです。

もし「変なコトしちゃったかも」と感じた場合は、何も保存せずブラウザバックをしてページを戻ってから再度編集するようにしましょう。

エンジニアの方はソースコードのみ参考にしてみてください。

1. WordPress管理画面から functions.php を編集

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

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

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

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

以下コードをコピーします(右上のCopyボタンを押すとコピーできます)。

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画像がメディアライブラリでサムネイル表示されない時