ワードプレスで文章を書くときは、もっぱらビジュアル入力です。
ただ、任意のclass名を付けたりする時は、テキスト入力に画面を切り替えてコードを編集する必要があります。
このサイトでは、記事に挿入するキャプチャ画像に、輪郭の影をつけるCSSクラスを１つ追加しています。
画像に同じクラス名を繰り返しつける作業
class名の追加は、毎回「ビジュアル入力」から「テキスト入力」にチェンジし、画面の一番上から下に向かってスクロールしてコード場所を探します。
記事が長くなり画像が増えると、これがけっこう大変です。
毎回同じclass名を付けるだけなのに、、。
「これ自動的に付かないかな？」ってふと思いました。
挿入する画像に、自動で任意のclass名を追加できた！
自力では無理そうだったので、検索して調べてみると、、、やった！それらしき記事に出会えました。
こちらの記事を参考にさせて頂きました。
わんどのweb 「記事に挿入する画像のclassを変更・追加する」
読んでみると「functions.php」にたった３行の追加でＯＫ！とのこと。
さっそく実践してみます。
子テーマのfunctions.phpにコードを追加する
追加するコードは以下の通り。
functions.phpへの追加コード
add_filter('get_image_tag_class', function($class){
return $class . ' abc';
});
「abc」の箇所を、任意のclass名に置き換えればOK！とのことで、実際にやってみました。※class名の前に「半角スペース」が必要です。
追加したいclass名は「shadow-01」です。「abc」を「shadow-01」に置き換えて、functions.phpにコードを追加します。
コード追加「前」の画像例
コード追加「後」の画像例
やった！うまく動作しています。
画像に付与されたclass名を確認すると
自動で「shadow-01」が追加されていました。
classの自動付与で気をつけること！
- 新規に追加する画像からclass名が付きます。既存分は変更されません。
- 記事に追加する画像すべてに追加したclass名が付きます。
- functions.phpに記述するコードに無名関数が使用されているので、php5.3以降対応とのこと！
- 追加するclass名の前に半角スペースを入れること！これをしないと、追加されたクラス名が前のクラス名とくっついて合体し、読み込まれなくなります。
いくつか注意する点もありますが、おかげ様で画像追加時にテキスト入力へチェンジする必要がなくなり、とっても楽ちんになりました！
