Wordpress.comでREST API経由で画像にalt属性を付与するときの罠

今日の懲りずにWordpress.comの記事です。

Wordpress.comでWordpress.orgのREST APIを使っています。

Wordopress.comのREST APIにはalt属性を設定するインターフェースがあります。

Wordpress.com のREST API

Wordpress.org のREST API

これを使う上で注意しないといけないのは、ここでalt属性を設定した画像を記事中で使用するとき、

• REST API経由で文章を投稿している
• 投稿した画像のURLを記事中に img タグで埋め込んでいる
• 記事の文書をHTMLやMarkdownで作成している

ときは、imgタグのalt属性を自分で取得してあげる必要があります。

サンプル

画像アップロードする処理の例

/**
 * Wordpress APIを使って画像をアップロードする
 * @param mixed $baseUrl WordPressのURL
 * @param mixed $user WordPressのユーザー
 * @param mixed $password WordPressのアプリケーションパスワード
 * @param mixed $contentType 画像のcontent-type
 * @param mixed $content 画像のバイナリデータ
 * @param mixed $filename 画像のファイル名
 * @param string $altText 画像のaltテキスト
 * @return mixed
 */
public function uploadMedia($baseUrl, $user, $password, $contentType, $content, $filename, string $altText = "")
{
    $response = Http::withBody(
            $content,
            $contentType
        )
        ->withHeaders([
            'Authorization' => 'Bearer '.$this->getToken($user, $password),
            'Content-Disposition' => 'attachment; filename='.$filename,
            'Content-Type', 'application/json',
        ])
        ->post(config('services.wordpress.endpoint'). "/wp/v2/sites/". parse_url($baseUrl, PHP_URL_HOST). "/media");
    if (! $response->successful()) {
        Log::error('画像アップロードエラー: '.$response->reason(), [
            'body' => $response->body(),
        ]);

        return null;
    }

    return $response->json() ?? null;
}

token取得の処理は、以下を参考にしてください。

こうして投稿した画像は、メディアライブラリ上では全てalt属性がきちんと付与されています。
しかし、サムネとして設定すると自動でaltが設定されますが、記事中の画像は、img タグにalt属性を付与する処理をこちらで実装する必要があります。

alt属性を付与する処理

/**
 * 記事文章マークダウン内のimgタグにalt属性を付与する
 * @param mixed $content マークダウン
 * @param mixed $altText altテキスト
 * @return string
 */
public static function insertAltTag($content, $altText): string
{
    $pattern = '/<img\s[^>]+>/i';

    $replacement = function ($matches) use ($altText) {
        $img = $matches[0];
        if (preg_match('/alt\s*=\s*("[^"]*"|\'[^\']*\'|[^\s>]+)/i', $img)) {
            // 既存の alt 属性がある場合の処理
            if (preg_match('/alt\s*=\s*(["\'])\s*\1/i', $img)) {
                // alt 属性が空の場合、新しい内容で置換
                return preg_replace('/alt\s*=\s*(["\'])\s*\1/i', 'alt="' . htmlspecialchars($altText, ENT_QUOTES) . '"', $img);
            }
        } else {
            // alt 属性がない場合、新しく追加
            return substr_replace($img, ' alt="' . htmlspecialchars($altText, ENT_QUOTES) . '"', -1, 0);
        }
        return $img; // 既存の alt 属性が有効な値を持っている場合は変更しない
    };

    return preg_replace_callback($pattern, $replacement, $content);
}

これで2時間ぐらいハマったので、参考になればと思います。