WordPrsss投稿画面での挿入した画像のクラスをCode Snippets プラグインを使って変更

  • ブックマーク
この記事は2年以上前に公開された記事です。情報が古くなっています。現在は状況が異なる可能性があります。

画像に自動で付くクラスが使いずらい

WordPressの投稿画面にて、画像を挿入すると自動的にクラスが追加される(下の画像 参照)のですが、使い勝手がイマイチです。自分の場合は「entry-img」のクラスを指定することで、画像に薄めの枠線を描画しています。

もともとのクラス

投稿画面から画像をアップするときの面倒くさいを解決したい

今までは、MarsEditを使ったら、クラスを指定できるので、なるべく投稿画面から画像を挿入せずにしていました。それでも、投稿画面から画像をアップしたときは、手作業で書き換えていました。最近はWindowsマシンからもブログを更新することが多くなり、MarsEditのない状況でも、サクサクっとブログを書きたいわけです。

Windowsでもブログを書く

面倒くさいわけなぁということで調べたら、数行のコードを書くことで、このクラスを自動で「entry-img」にすることができました。

WordPressのフィルターフックを使って解決

調べてみると、同じ悩みを解決されている事例を見つけました。

ここで、functions.phpを編集するように説明があるのですが、使っているテーマは頻繁にアップデートがあるので、直接に functions.php を書き換えると、後々のアップデートの度に面倒くさいことになります。

Code Snippets プラグイン

functions.php を編集することなく、今回の機能を実現できるのが「Code Snippets プラグイン」です。

このプラグインをインストール・有効化して、スニペッツとして追加登録することで、無事に画像アップしたときにのクラスを書き換えできました。

Code Snippetsに追記したコード

上で紹介したサイトさんのコードを参考に、クラスを書き換えたのコードがこちらです。

[code]
function image_class_filter($class)
{
$class = ‘entry-img’;
return $class;
}
add_filter(‘get_image_tag_class’, ‘image_class_filter’);
[/code]

これをCode Snippetsの設定画面に設定・有効化しました。今回は「entry-img」を指定していますが、ここの行を書き換えると、自由にクラスを指定できます。

スニペッツ

この設定を有効化した後、投稿画面から画像をアップした結果がこちらです。

クラスが書き換わった

補足 entry-img クラスのCSS

entry-img クラスにて指定しているスタイルシート(CSS)はこちらです。

.entry-img {
display: block;
margin: 0 auto !important;
padding: 4px;
background: #fff;
border: 1px solid #bfbfbf;
}

散財したアイテム

最近の散財はこちら!

出張に便利そうなコンセントを買った!塩は、ぬちまーす。

【WordPressブログ スタートアップ講座 開催決定しました】

11月3日 祝日 水曜日
・10時から18時
・Kitchen Bee(4名)とオンライン(4名)のハイブリッド開催です。
お申し込みページはこちら

12月30日  木曜日
・10時から18時
・Kitchen Bee(4名)とオンライン(4名)のハイブリッド開催です。
お申し込みページはこちら

オンラインのスタートアップ講座、気になっていたけど、4日間に分かれていて、スケジュールが、、というあなた。オンラインでも1日でOKなスケジュールを作りました。

ぜひ、この機会に、情報発信の母艦を一緒に作りましょう。

また、「ブログをスタートしたい」という方に、すごく良い講座あるよっと、ご紹介いただけると、飛び上がって喜びます。

よろしくお願いします。

(なお、リアルの会場は、Kitchen Beeにて人数を制限し、感染症対策を行って開催します。)

追伸、

また、11月3日の19時から20時の1時間、ものくろキャンプ交流会を開催します。こちらは、少人数ですが、Kitchen Beeのお席もご用意できる予定です。

オンラインとハイブリッド開催しますので、オンライン参加も大歓迎です。イベントを立ち上げますが、まずは、カレンダーに丸印を!

ブログスタートアップ講座のお申し込み告知ページを見逃したくない!という方は、下のメールマガジンにご登録ください。

お申し込み開始時にご案内をお送りします。

無料メルマガ発行中

メルマガも2021年は頑張って書いています。ぜひ登録して読んでくださいね。(無料です)

メールマガジン
無料で購読
メールアドレス *
* 必須項目

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。


Youtube

  • ブックマーク

この記事を書いた人

テストテスト