【WordPress】画像をWebP形式にしてみた【プラグイン不使用】

この記事にはアフィリエイト広告が含まれています

WordPressは5.8からWebP形式の画像を正式にサポートしました。

当ブログにおいても5.8にアップデート後に作成した記事についてはWebP形式の画像を使用しています。
しかしそれよりも前に作成した記事についてはPNG形式やJPEG形式の画像を使用しています。
これらもWebP形式にする作業を行ったので記事にしたいと思います。

既存の画像をWebP形式に変換したり、メディアライブラリに登録する際に自動的にWebP形式に変換してくれるプラグインが存在しますが、そういったものは使いたくなかったので全て手作業で地道に行いました。
画像の情報の取得や当該画像を使っている記事の特定にはPHPとSQLを使います。
PHPとDBの操作にある程度慣れていないとこの記事の内容を実践するのは若干厳しいかと思いますのでそのような場合は前述のプラグインを使う方がよろしいかと思います。

大まかな作業の手順

大まかな作業の流れとしては下記のようになります。

画像の情報の取得
サムネイル画像の変換・登録
記事編集画面でサムネイル画像を変更
記事内で使っている画像の変換・登録
記事編集画面で記事内の画像を変更

特に何か難しいことをするわけではなく、WebP形式にした画像をメディアライブラリに登録して置き換えるだけです。

サムネイル画像の処理

WordPressに登録されている画像の情報はwp_postsテーブルに保存されています。
このテーブルからWebP形式以外の画像の情報を取得します。
また、サムネイル画像の情報はwp_postmetaテーブルに保存されていますのでこのテーブルも併せて使用します。

STEP

DBに接続

WordPressで使用しているDBに接続します。
接続方法については割愛します。

STEP

SQLを実行

下記のSQLを実行してWebP形式以外の画像をサムネイルに使っている記事を抽出します。

SELECT
    posts.ID '画像ID',
    article.post_id '記事ID',
    image.meta_value 'ファイル名',
    posts.post_mime_type '画像タイプ'
FROM
    wp_posts posts
INNER JOIN wp_postmeta article ON
    posts.ID = article.meta_value
INNER JOIN wp_postmeta image ON
    posts.ID = image.post_id
WHERE
    posts.post_type = 'attachment' AND posts.post_mime_type <> 'image/webp' AND article.meta_key = '_thumbnail_id' AND image.meta_key = '_wp_attached_file'
ORDER BY
    posts.ID,
    article.post_id;

STEP

サムネイル画像を登録

上記STEP2で抽出した画像について、WebP形式に変換して登録します。
WebP形式への変換方法については割愛します。

STEP

サムネイル画像を変更

上記STEP2で抽出した記事について、再編集してサムネイル画像を上記STEP3で登録した画像に変更します。

以上でサムネイル画像の処理については完了です。

記事内で使っている画像の処理

ある画像がどの記事で使われているかはWordPressの仕組み上、簡単には分かりません。
SQLだけだとちょっと厳しかったのでPHPで簡単なプログラムを組んで抽出しました。

STEP

プログラムを作成

WordPressで使用しているDBに接続して結果を画面に出力するプログラムをPHPで作成します。

<?php
    $mysqli = new mysqli('{DBホスト}', '{DBユーザー}', '{パスワード}', '{DB名}');
    if (mysqli_connect_errno()) {
        echo '接続失敗' . PHP_EOL;
        echo 'errno: ' . mysqli_connect_errno() . PHP_EOL;
        exit();
    }

    $mysqli->set_charset('utf8');

    $images = [];

    $query = <<<EOT
SELECT
    posts.ID,
    image.meta_value
FROM
    wp_posts posts
INNER JOIN wp_postmeta image ON
    posts.ID = image.post_id
WHERE
    posts.post_type = 'attachment' AND posts.post_mime_type <> 'image/webp' AND image.meta_key = '_wp_attached_file'
GROUP BY
    image.meta_value
ORDER BY
    image.meta_value
EOT;

    $stmt = $mysqli->prepare($query);
    $stmt->execute();
    $stmt->bind_result($imageId, $fileName);

    while($stmt->fetch()) {
        $image['id'] = $imageId;
        $image['fileName'] = $fileName;
        $images[] = $image;
    }

    $stmt->free_result();

    echo '画像ID,記事ID,記事タイトル' . PHP_EOL;

    foreach ($images as $image) {
        $query = <<<EOT
SELECT ID, post_title
FROM wp_posts
WHERE post_content LIKE '%{$image['fileName']}%'
  AND post_status = 'publish'
GROUP BY ID, post_title
EOT;

        $stmt = $mysqli->prepare($query);
        $stmt->execute();
        $stmt->bind_result($articleId, $title);

        while($stmt->fetch()) {
            echo "{$image['id']},$articleId,$title" . PHP_EOL;
        }

        $stmt->free_result();
    }

    $mysqli->close();

STEP

プログラムを実行

コマンドラインから上記のプログラムを実行します。
結果は画面に表示されるのでリダイレクトすればファイルに出力することも可能です。

画像ID,記事ID,記事タイトル
113,97,外付けモニタ
114,97,外付けモニタ
117,108,ロケールの変更
159,156,FireタブレットをVPNに繋いでみた
187,184,Androidアプリのファイルにアクセスする
188,184,Androidアプリのファイルにアクセスする
195,190,iBasso Audio DC03
282,277,ロジクール K380 マルチデバイス Bluetooth キーボード
299,296,ChromebookにLinuxをインストールしてみた
301,296,ChromebookにLinuxをインストールしてみた
302,296,ChromebookにLinuxをインストールしてみた
303,296,ChromebookにLinuxをインストールしてみた
317,316,iBasso DC03をChromebookに繋いでみた
318,316,iBasso DC03をChromebookに繋いでみた
319,316,iBasso DC03をChromebookに繋いでみた
320,316,iBasso DC03をChromebookに繋いでみた
363,358,MacBook Proがほぼ新品になりました
364,358,MacBook Proがほぼ新品になりました

STEP