ウサヲブログ  HOME

ウェブ制作に関わる備忘録などを綴ります

このページの位置: HomeWordpress「本文の「メディアに追加」ボタンで画像に任意のクラスを追加する」の記事

本文の「メディアに追加」ボタンで画像に任意のクラスを追加する

wordpressロゴ

ウサヲです。

投稿の本文に、メディアを追加ボタンをポチッとして画像を追加することが頻繁にあります。こんな感じです。→google_icon

その画像の背景が白色だった時に、サイトの背景も白色だと、画像と本文の境目、区切り目がわかりづらく困ってしまいます。ウサヲの画像も例外ではありません。

そこで薄いボーダーをつけることにしました。自動的に追加した画像にボーダ用のクラスがつく、ということをフィルターフックでやってみました。

ウサヲがやったこと

参考にしたのは、WP公認のCodexサイトです。

another-image-classの直前にスペースがありますよ!!これ削除しないでください!

function my_image_class_filter($classes) {
    return $classes . ' another-image-class';
}
add_filter('get_image_tag_class', 'my_image_class_filter');

 

で、ウサヲはこのように↓functions.phpに追記しました。追加したクラス名はimg_border01です。上記のソースコードの中の(another-image-class)を任意のクラス名にします。

/* 「メディアを追加」で追加される画像の既存のクラスに任意のクラスを追加する */
function my_image_class_filter($classes) {
    return $classes . ' img_border01';
}
add_filter('get_image_tag_class', 'my_image_class_filter');

 

ウサヲが困ったこと

この処理をする以前に困ったことがあったので、それも書き残しておきます。(処理自体は上記で問題ないので興味のない方はスルー)

実は、最初に試したフィルターフックは以下のソースだったのであります。とあるウェブ関連のサイトを参考にしたものでありました。

function my_image_class_filter($class)
{
  $class = 'img_border01';
  return $class;
}
add_filter('get_image_tag_class', 'my_image_class_filter');

 

これ↑はつまり、既存のクラスをすべて破棄し、任意のクラスに置き換える、という処理です。

このフィルターフックでも目的はきちんと達成されましたし、特に問題はなかったはずでした・・・が、大変なことが起こっていたのであります。

それは・・

スクリーンショット 2016-06-30 8.30.42

 

↑・・・。

この画像にもあるように、画像の編集画面で当然あるべき項目「サイズ ホニャララ」が、マルッとごっそり消えてしまっていたのであります・・。

どうしたものか、原因がわからずオロオロするウサヲでしたが、ここは初心に戻り、Codex様におすがり申した結果、やっぱ既存のものはあんまりいじくらない方がいいという結論に達しました。削除とかせずに、追加して更新することで収まったのであります。

処理としては問題なく機能したのですが、ごっそり消えたのが何故なのか、未だに原因がわかりません・・。

 

 

 

コメントを残す

日本語でお願いします。「テスト投稿」のような短い文は無視されます。

TOP