このブログで画像を使用する際、「imageline」というクラスを使用しています。
imgタグに任意のクラスを自動的に設定する
この imageline クラスは
- 画像の周りに 10px の余白をつける
- ドロップシャドウをつける
- 角丸にする
というもの。
別に書くほどのものでもありませんが、CSSの内訳は以下のようになっています。
|
1 2 3 4 5 6 7 |
.imageline { box-sizing: border-box; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); border-radius: 3px; margin: 1em auto; padding: 10px; } |
これまでの私
で、私はポストを作成する際はこれまで延々とビジュアルエディタは使用せず、コードエディタを使用してきました。
で、画像を挿入する際は必ず自分で画像のタグのところに「 imageline」と手で打ってきたわけなんですね。
で、数日前のことなんですが、ビジュアルエディタとか、グーテンベルクを使用する機会に恵まれたのですが、どこをどうやってポストを作成するのか全然わからず、夜中に四苦八苦しました。
画像を挿入する段になって、どこに自分の希望するクラス名を指定すりゃいいのかもわからない状況に陥りました。よくこんな使いにくいエディタを考えついたものだと悪態をついていたわけですよ。
うん、初心者の気持ちが痛いほどよくわかりましたとも。
で、その時に思わったわけですね。
自動的にクラス名が入っていれば、少なくともいちいちコードエディタに切り替えてクラス名をコピペする手間も省けるものだろう、と。
というわけで、新たに得た知見はネタになるとの長年の経験から今回のポストとなったわけですね。
10年ぐらい前に気づけばよかったのに。。。
これからの私
ダッシュボードの「外観」→「テーマファイルエディタ」で function.php を開くか、昔ながらの方法ですと、FTPで最新の function.php をダウンロードしてきて、テキストエディタで開くなどします。
下記コードを追記してください。
|
1 2 3 4 |
// img タグに " imageline" を自動挿入する add_filter('get_image_tag_class', function($class){ return $class . ' imageline'; }); |
‘ imageline’ は私が使用しているクラス名ですので、任意のクラス名に変更してください。
また、クラス名の前に半角スペースが必要ですのでお気をつけください。
これで、次から新規に追加する画像からクラス名が挿入されます。
画像テスト
ビジュアルエディタでテストしてみました。
画像を貼った瞬間にドロップシャドウが効いており、ちょっと感動。
コードエディタで確認しても、もちろんクラス名が入っています。
|
1 |
<img class="aligncenter size-full wp-image-13764 imageline" src="xxx.png" alt="" width="512" height="512" /> |
なんだか思っていた以上にハッピーになれそうです（笑）
以上、今更ですが、ポスト作成の手間が一つ減る施策の紹介でした。
