WordPressで画像挿入時のHTMLをカスタマイズする方法

上記のような内容でお困りですか？ この記事では画像挿入時に自動で挿入されるimgタグをカスタマイズする方法について解説したいと思います。

WordPressで画像挿入時のHTMLをカスタマイズする方法

まず、何をしたいのかと言うと、 ビジュアルモードでは無くテキストモードで私は記事を書いているのですが、 記事を書いているときに画像を挿入したくなって、記事に画像をドラッグすると以下の画面になりますよね。 そして以下のように画像のアップロードがされて、メディアの選択画面が出てきます。 挿入を押すと、 上記のような感じでWordPressが自動で画像のリンクを記事に組み込んでくれます。 そこで問題が起きるわけですね。 width=”1600″ height=”757″・・・・ という固定値で画像のサイズを指定してくれちゃってます。 一つ前の「メディアを挿入」画面で画像の表示設定をいじるとここの部分が変わるのですが、変わってほしいのではなくそもそも設定しないでほしいということなんですよね。 以下の画像のように alt=””で終わってほしいっていうのが今回の課題です。 毎度この部分を手動で削除するのが意外と手間で、記事の作成効率が悪くなるので、カスタマイズしちゃいましょう。

挿入時のコードを改変する

functions.phpにコードを追加します。 今回はimgタグについてalt=””より後ろの部分を削除してしまいたいということなので、 「メディアを挿入」で入力されるimgタグのフック関数であるget_image_tagに自作の関数でフィルターしていきます。 条件を考えましょう。 上記の画像のコードが編集前の何もしない状態で挿入した場合のコードです。 中間のサイズ等は色々と変わることがありますが、 頭とお尻を考えるとパターンがありますね。 width*************/> こんなイメージのパターンで検出できそうです。

/** 画像挿入時の入ってほしくない画像サイズをすべて削除するコード */
function img_not_set_size($html, $id, $alt, $title, $align, $size) {
	return preg_replace('/width(.*)\/>/','/>',$html);
}
add_filter('get_image_tag','img_not_set_size', 10, 6);

このコードで消すことが出来ます。

/width(.*)\/>/

この表現が重要なのですが、正規表現というものになります。 正規表現は初めての方には少し難易度が高いかもしれませんが、 文字列の一致等を表現するのに必ず必要になる知識なので知っておいて損はありません。 興味がある方は調べてみて下さいね！ ここではwidthの後に任意の文字が0文字以上入ってその後に/>で終わるようなパターンにマッチする部分を/>で置き換えているというわけです。 色々と工夫するとクラスを挿入したりの設定が簡単に出来るようになります。 ワンランク上を目指してみましょう！ 良いWordPressライフを応援しています！