Skip to content
さきどりふぁくとり~
  • Webマーケティング
  • WordPress
  • SEO
  • YouTube
  • お問い合わせ
  • 求人情報

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

更新日:2021年9月11日
  • WordPressで画像挿入時に入力されるリンクタグを自作したい
  • 画像挿入で大きさを指定されるのが逆に困る
  • WordPressの「メディアを追加」で画像を追加するときのコードをカスタマイズしたい
上記のような内容でお困りですか? この記事では画像挿入時に自動で挿入されるimgタグをカスタマイズする方法について解説したいと思います。

目次

  • 1 WordPressで画像挿入時のHTMLをカスタマイズする方法
  • 2 挿入時のコードを改変する

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ライフを応援しています!

カテゴリー

  • AWS (3)
  • SEO (50)
  • SNS (16)
    • Facebook (7)
  • Webマーケティング (38)
  • WordPress (62)
  • YouTube (43)
  • プライバシー・ポリシー (1)
  • 未分類 (2)

プロフィール

ブログ運営・執筆または監修:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

代表取締役:生田 寿行

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

目次

  • 1 WordPressで画像挿入時のHTMLをカスタマイズする方法
  • 2 挿入時のコードを改変する
© 2023 さきどりふぁくとり~