【WordPress】記事内に画像挿入をしたら自動的にCSSクラスを追加する方法

テクノロジー

WordPressの標準機能として「メディアの追加」があります。記事に画像を挿入する時は、このメディアの追加から画像を選択して挿入します。テーマによっては自動的に画像の枠にボータやシャドウなどのCSSを適用したクラスを自動的に追加してくれます。

今回はfunction.php内に3行ほどのコードを、記述すれば画像挿入時に好きなCSSのクラスを追加する方法をご紹介します。

画像をそのまま挿入するとどうなる？

先程言った通り、テーマによっては最初から画像に枠などのCSSクラスを追加または反映している場合がありますが、デフォルトでは一切ありません。実際に画像を追加すると下記のようなコードとなります。

そして、実際に表示されるのは下記のようになります。

<a href="https://hyzstudioblog.com/wp-content/uploads/2018/04/sample-1.jpg"><img src="https://hyzstudioblog.com/wp-content/uploads/2018/04/sample-1.jpg" alt="" width="3232" height="2160" class="alignnone size-full wp-image-4019" /></a>

「THE・画像」ですね。枠とかなく、ただただ画像があるだけ。折角の画像なので格好良く・見やすくしたいですね。

元となるCSSを作る

画像に枠やシャドウを付けたい場合は、CSSで作るしかありません。今回は枠とシャドウと余白を設けます。そのCSSコードが下記になります。複雑なことはせずとりあえずシンプルにしました。

img.thumbnail {
	margin-bottom:13px;
	border:3px solid #fff;
	box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;
	-webkit-box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;
	-moz-box-shadow:rgb(179, 182, 186) 0px 7px 13px 0px;
}

「thumbnail」がクラス名となります。このクラス名は自由に変更できます。「img.gazou」とか「img.waku」でも良いです。

img.thumbnailと書くことで、特定のタグ（img）にしか適用されないクラス名（thumbnail）となります。aタグやpタグにthumbnailのクラスを使用しても使えません。簡単に言うとimgにしか使えないthumbnailということですね。

thumbnailというクラス名にどのような事をするか？というのを{ }内に書きます。「ちょっと何言ってるかわかんない」という方は、変更などせずに上記のコードをそのまま使用すれば大丈夫です。

  • margin-bottomは下方向の余白となります。数値と単位を指定します。
  • borderは枠となります。太さ・形・色を指定します。
  • box-shadowは影となります。影の色・水平方向の距離・垂直方向の距離・ぼかし距離・広がり距離を指定します。
  • webkitとmozに関しては書くとややこしくなるので割愛します。

上記CSSのコードをコピーして、使用中のテーマまたは子テーマ内の「style.css」に貼り付けてください。貼り付けが出来たら「ファイルを更新」ボタンをクリックして反映させてください。

style.cssの場所
外観 -> テーマの編集 -> スタイルシート（style.css）

これで、新しいCSSが追加されました。

function.phpにコードを書く

次に画像が挿入されたら、先程追加したCSSを自動的にclass内に挿入するというコードを書きます。そのコードが下記となります。「return $classes . ‘ thumbnail’;」で、先程のCSSのクラス名を書きます。クラス名を変更している場合は、thumbnailではなく、変更したクラス名に書き換えてください。

add_filter('get_image_tag_class', 'add_image_class');
function add_image_class( $classes ) {
 return $classes . ' thumbnail';
}
クラス名を書く際にはクラス名の前に半角スペースを必ず付けてください。半角スペースを付けないと正しく動作しません。

上記コードをコピーしてfunction.phpに貼り付けます。貼り付けが出来たら「ファイルを更新」ボタンをクリックして反映させてください。

function.phpの場所
外観 -> テーマの編集 -> テーマのための関数（function.php）

これで、画像が挿入されると自動的にClassの中にthumbnailが挿入されます。

それでは実際にやってみましょう。メディアの追加から画像を選択し「投稿に挿入」ボタンをクリックすると・・・

先ほどとは違い、枠と影が出来ていますね！コード見てみると、先程function.phpで追加した通り、imgのclassの末尾にthumbnailが挿入されています。

<a href="https://hyzstudioblog.com/wp-content/uploads/2018/04/sample-1.jpg"><img src="https://hyzstudioblog.com/wp-content/uploads/2018/04/sample-1.jpg" alt="" width="3232" height="2160" class="alignnone size-full wp-image-4019 thumbnail" /></a>

いかがでしょう？少しカスタマイズするだけで画像の見え方がガラッと変わりました。WordPressを使っていて画像の見え方が寂しいと感じたら、ぜひ使ってみてください！