simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.12.13

WordPressで投稿画像に任意のclass名をつける方法

WordPress

WordPressで記事内に画像を挿入するとき、多くの場合は「メディアを追加」から操作を行うかと思います。

差し込みたい画像を選択するだけで良いので非常に便利なのですが、この操作で画像を挿入すると、<img>に「class=”alignnone size-full wp-image-1380″」というようなclassが自動的に付与されます。

このメディア追加の際に自動的に付けられてしまうclass名を、任意のものに変更する方法を今日は紹介します。意外と役立ったりしますので、覚えておいて損は無いかと。もちろん、プラグインは使いません。

functions.phpにちょっと追記するだけ

WordPressのフィルターフックというものを使うだけで簡単に実現出来てしまいます。プラグインなんかもありそうですが、もしかしたらそちらより簡単かも知れません。

ということで、functions.phpに下記を追記してください。

function image_class_filter($class)
{
  $class = 'sample';
  return $class;
}
  
add_filter('get_image_tag_class', 'image_class_filter');

上記コード内の「sample」となっている部分が、挿入した画像に付与されるclass名になります。これだけです。これでCSSで自由にスタイリングすることもできるので、結構使える小技です。

他にも色々方法はあるようなのですが、ビジュアルエディタで編集すると指定したclass名がきちんと反映されなかったり、あまり使い勝手がよくないものもありました。なので、今のところこれがベストかと思っています。

SNSボタンを<a>タグで簡単に実装する方法

WEB

SNSボタンを<a>タグで簡単に実装する方法

時間にルーズな人間について思うこと

THOUGHT

時間にルーズな人間について思うこと

痴漢問題になると女性に甘すぎやしないか?

THOUGHT

痴漢問題になると女性に甘すぎやしないか?

楽天マガジンをつかってみた

LIFE

楽天マガジンをつかってみた

これまでに買った赤ちゃんグッズその2

LIFE

これまでに買った赤ちゃんグッズその2

【WordPress】シンプルなオリジナルテーマの作り方(5)~投稿記事ページ~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(5)~投稿記事ページ~

プロレスについて考えること

THOUGHT

プロレスについて考えること

僕の偏愛スニーカーVansのERA

FASHION

僕の偏愛スニーカーVansのERA