TojiTech No Programming, No Life.

Gutenbergで画像に任意のクラスを付与する

問題

当ブログのテーマを制作するにあたり、Bootstrap v4の.img-fluidを使用したかった。

ClassicEditorでは、get_image_tag_classを使えば良かったが、対応していなかったのでメモ。

解決策

function add_image_fluid_class($content) {
    global $post;
    $pattern        = "/<img(.*?)class=\"(.*?)\"(.*?)>/i";
    $replacement    = '<img$1class="$2 img-fluid"$3>';
    $content        = preg_replace($pattern,$replacement,$content);
    return $content;
 }
 add_filter('the_content','add_image_fluid_class');

参考

How to modify an image block in Gutenberg WordPress 5?

Profile

Yuki Tojima

RubyやPhp、JavaScriptまわりのことを徒然と記録に残す技術ブログです。

至らぬところもあると思いますが、見守っていただけると幸いです。

記事のリクエストや、間違いなどありましたら X (旧 Twitter) のDMなどでお気軽にご連絡ください。

ytojima @TojiTech
プロフィール画像