WordPress 記事に挿入する画像にclassを追加する方法 ホームページ制作 | 墨田区

WordPress 記事に挿入する画像にclassを追加する方法

LINEで送る
Pocket

WordPressの記事に挿入する画像にclassを追加する方法をご紹介します。
WordPressの記事に挿入する画像にclassを追加する方法

WordPressで記事中に、「メディアを追加」から画像を挿入すると、img の class はこんな感じですね。

class="alignnone size-medium wp-image-9"

この名前を利用してスタイルシートを記述するのもいいのですが、class を追加したい場合にちょっと困ります。というのは、Bootstrap でレスポンシブな画像を表示するためには「img-responsive」を必ず追加しなければなりません。

クライアント側で WordPress の管理画面から記事追加とか編集されると、class なんて間違いなく付加してくれません。当たり前ですよね、私もそう頼まれても忘れちゃうし、素人さんならできるだけ html はみたくないって感じですもんね。

となれば、挿入のタイミングで自動で付加するしかありませんね。

そんなわけで WordPressの記事に挿入する画像にclassを追加する方法 をご紹介します。ついでに width と height も削除しちゃいましょう。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


get_image_tag_classをフックする

とはいえ、WordPressのソースを直接変更してしまうとバージョンアップの時に困ったことになります。どうやってやろうかと、とりあえずWordPressのソースを見ていたら media.php に以下の記述がありました。

$class = apply_filters( 'get_image_tag_class', $class, $id, $align, $size );

これをフックしてclassを追加することにしました。function.phpに以下を追記します。

/**
 * Bootstrap用レスポンシブ表示
 */
add_filter('get_image_tag_class', function($class) {
    return $class . ' img-responsive';
});

するとこんな感じで表示されます。

class="alignnone size-medium wp-image-9 img-responsive"

これで完璧!

っと思ったら、

width="300" height="200"

って記述もあった・・・orz..

これじゃ「img-responsive」を追加しても意味がないですね。
なので width と height も削除する記述を追記します。

add_filter('post_thumbnail_html', 'remove_width_attribute', 10);
add_filter('image_send_to_editor', 'remove_width_attribute', 10);
function remove_width_attribute( $html ) {
  $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
  return $html;
}

すると、こんな感じで表示されます。

<img src="/wp-content/uploads/2016/05/noimage-300x200.jpg" alt="noimage" class="alignnone size-medium wp-image-9 img-responsive" />

ふむ、きれいにおさまった^^

皆さんも試してみてください。


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

Wordpressの勉強が思うように進まないときは!

Wordpressの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Wordpressコースあり!オンライン完結型 テックアカデミー TechAcademy [テックアカデミー]

どこかに通う必要なく、自宅でプログラミングやアプリ開発を学ぶことができるのが特徴のスクールです。未経験からプロになるまで最短4週間という、超短期集中型の学習ができます。年齢層は10代〜40代の男女が中心で、学引があり多くの学生が受講しているそうですよ。オンラインで受講ができるスクールですので、全国どこからでも学習ができますね。

更にさらに、パーソナルメンターにチャット質問できちゃうんです!!

これは素晴らしいことですよ!ハマったり困ったことが起こるのがプログラミングの世界。知っている誰かに聞けば数分で解決することが、自分だけだと何時間もかかったりしますから!

いやー、便利な世の中になりましたよねー。講師もバリバリのエンジニアということですから、なんとも素晴らしいスクールがあったものですね。学割を使えば社会人より半額以下で受講できますから、学生さんには超おすすめです。

オンラインスクールですから営業エリアは全国です。
気になる方は一度チェックしてみてください。無料の動画説明会も常時開催していますよ。


Wordpressコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Wordpressコースあり!現場のプロが直接教えてくれる 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL