ワードプレス６．２以降で追加されたWP_HTML_Tag_Processorでimgタグを探し出してクラスを追加する

ワードプレス６．２以降で追加されたWP_HTML_Tag_Processorでimgタグを探し出してクラスを追加するコードをご紹介いたします。

WP_HTML_Tag_Processorとは？

WP_HTML_Tag_Processorはワードプレス6.2以降で追加されたHTML文書のタグ等を簡単に置き換えたり、追加したりできるワードプレスの独自関数です。
これまではHTMLの置換にはstr_replace等の関数を使っていた場合も多いのですが、今後はWP_HTML_Tag_Processorでも簡単に同様の処理ができるようになりました。

まずはワードプレスのコンテンツのHTMLを取得します

function your_custom_function_name( $content ) {
   //ここでコンテンツを置き換える処理を追加します
    return $content;
}
add_filter( 'the_content', 'your_custom_function_name' );

つぎにこのコンテンツをWP_HTML_Tag_Processorに入れ込むと、タグの分解などを行った構造体を変換してくれます。

function your_custom_function_name( $content ) {
    $processor = new WP_HTML_Tag_Processor( $content );
    return $content;
}
add_filter( 'the_content', 'your_custom_function_name' );

全てのIMG(画像)に一気にmycoolframeというクラスを付与,アトリビュートも一つ追加してみましょう。

function your_custom_function_name( $content ) {
    $processor = new WP_HTML_Tag_Processor( $content );
    // img タグを探してループを回す
    while ( $processor->next_tag( 'img' ) ) {
        // クラスを追加（既存のクラスがあれば保持される）
        $processor->add_class( 'mycoolframe' );
        // 属性を設定（既存なら上書き、なければ追加）
        $processor->set_attribute( 'loading', 'lazy' );
    }
    // 変更後のHTMLを取得
    $content = $processor->get_updated_html();
    return $content;
}
add_filter( 'the_content', 'your_custom_function_name' );

これでワードプレスの全ページのコンテンツのすべての画像タグに’mycoolframe’というクラスとloadingアトリビュートにlazyが追加されました。

ご参考になりましたら幸いです。

WordPress ワードプレスのコーディングやテーマのカスタマイズのご依頼・ご相談はWPドクターまでお気軽にお送りください