【SWELL】関連記事ブロック画像のaltを設定してみた。

かんた🌊SWELLマニア

2024年11月30日 15:00

SWELLマニアのかんた（@swell_mania）です。

WordPressテーマSWELLのカスタマイズメモ、今回はSWELLカスタムブロックの関連記事ブロックです。

関連記事ブロックを利用すると、サイト内の記事、サイト外記事へのリンクをリンクカードで表示させることができます↓

画像のaltが空

関連記事ブロックの出力HTMLを見てみると、画像要素（img）のaltタグが空（から）です。

altだけで、中身がありません…

そんなわけで今回のカスタマイズです。関連記事ブロックのimgのaltに、記事タイトルを表示してみました。

カスタマイズの環境

WordPress：6.7.2
SWELL：2.13.0
Code Snippets：3.6.6.1

WordPress、SWELL、プラグインは記事公開時に利用可能な最新バージョンです。

【カスタマイズの概要】

Code Snippetsプラグインにコードを設置する方式です。
サンプルのコードを貼るだけなので作業時間は長くても1分です。

更新履歴

2024年11月28日　記事公開

カスタマイズ

次のコードをCode Snippetsプラグインに貼り付けます。

function customize_post_link_block( $block_content, $block ) {
    // 対象のブロック名をチェック
    if ( 'loos/post-link' === $block['blockName'] ) {
        // 初期化
        $link_text = '';

        // <a class="p-blogCard__title">のテキスト部分を取得
        if ( preg_match( '/<a[^>]*class="[^"]*p-blogCard__title[^"]*"[^>]*>(.*?)<\/a>/is', $block_content, $matches ) ) {
            $link_text = trim( $matches[1] ); // マッチしたリンクテキストを取得
        }

        // <img> タグが存在する場合のみ処理
        if ( ! empty( $link_text ) && preg_match( '/<img[^>]*>/i', $block_content ) ) {
            // 正規表現で <img> タグの alt 属性を探して置換
            $block_content = preg_replace(
                '/<img([^>]*?)alt=["\'].*?["\'](.*?)>/i', // alt 属性を探す
                '<img$1alt="' . esc_attr( $link_text ) . '"$2>', // alt 属性を $link_text に置き換える
                $block_content
            );
        }
    }

    return $block_content; // 加工したHTMLを返す
}
add_filter( 'render_block', 'customize_post_link_block', 10, 2 );

今回は以上です。

最後までお読みいただきありがとうございます。