こんにちは！ゆいです！
今回は、「WordPressでサムネイル画像にそれぞれ異なるクラスを設定する方法」を記します。
こんなときに役立ちます！
- WordPressで「ニュース記事」「ブログ記事」など2つ以上のカテゴリーを設定するとき
- それぞれのカテゴリーでそれぞれのアイキャッチ画像に異なるCSSを当てたいとき
- 複数のアイキャッチ画像に異なるクラスを設定したいとき
- 複数のアイキャッチ画像に異なるサイズ指定を行いたいとき
- アイキャッチ画像にオリジナルのクラスを付けたいとき
- オリジナルテーマを作成しているとき
ゆいなんだか難しそうだけど、簡単にできるよ♪
1. アイキャッチ画像を有効にして表示
まずはアイキャッチ画像を有効にして表示させましょう。
こちらを記述しないと、アイキャッチ画像が使えません。
くまこの記述がないと、投稿ページで「アイキャッチ画像」の欄が出ない・・
// アイキャッチ画像を有効にする。
add_theme_support('post-thumbnails');2. サイズ指定を削除する
WordPressでは、そのままだと勝手に画像タグに画像のwidth/heightが埋め込まれてしまいます。
そのためサイズ指定を削除する必要があります。
add_filter( 'post_thumbnail_html', 'custom_attribute' );
function custom_attribute( $html ){
// width height を削除する
$html = preg_replace('/(width|height)="\d*"\s/', '', $html);
return $html;
}これでfunctions.phpの設定は終わりだよ！
3. それぞれのサムネイルに新しいクラスを付ける
// news-imageというクラスを付ける
<?php the_post_thumbnail( '', array( 'class' => 'news-image' ) ); ?>// blog-imageというクラスを付ける
<?php the_post_thumbnail( '', array( 'class' => 'blog-image' ) ); ?>これでarchive.phpの設定完了！
4. それぞれのクラスにCSSを当てる（例）
.news-image {
width:100%;
border-radius:5px;
display:block;
}
@media (min-width: 768px) {
.news-image {
width:80%;
}
}.blog-image {
width:100%;
}
@media (min-width: 768px) {
.blog-image {
width:40%;
}
}
くまえ、これだけ？！
ゆいこれで完了！
＜おまけ＞うまく表示されなかった方法
ゆい色々と試してみて、うまく表示されなかった方法。
参考程度にどうぞ。
1. 独自のクラスを付けるとき
$myclassに複数のクラス設定はできない
add_filter( ‘post_thumbnail_html’, ‘custom_attribute’ );
function custom_attribute( $html ){
$myclass = ‘news-image blog-image’; // クラス名２つ ここがダメ！
return preg_replace(‘/class=”.*\w+”/’, ‘class=”‘. $myclass .'”‘, $html);
}$myclassは１つのクラスなら機能する
add_filter( ‘post_thumbnail_html’, ‘custom_attribute’ );
function custom_attribute( $html ){
$myclass = ‘news-image’; // クラス名１つ
return preg_replace(‘/class=”.*\w+”/’, ‘class=”‘. $myclass .'”‘, $html);
}2. 正規表現のパターンを正してみた
add_filter( ‘post_thumbnail_html’, ‘custom_attribute’ );
function custom_attribute( $html ){
$pattern = '/class="(.*?)"/';
$myclass = 'news-image web-image';
return preg_replace($pattern, 'class=”${1} '. $myclass .'”', $html);
}これも上手くいきませんでした・・。
もしかしたら正規表現が異なっているのかもしれませんが。
（詳しい方、教えてください）
まとめ
いかがでしたでしょうか？
もし、「アイキャッチ画像に複数のクラスの付け方が分からない！」という方はぜひ参考にしてみてくださいね！
ビジネスや副業・起業に関するご相談を承ります
1. 60分単発コンサル
事業相談、サイト制作方法、集客など、どんなご相談でもOKです。
60分間の個人セッションの中で、あなたの目的やお悩みごとに今やるべきことや解決につながる行動を一緒に導き出します。
困ったときや行き詰まったときなどにお気軽にご利用ください。
2. ノーコード / ローコードWeb制作 完全マスターコーチング
WebデザイナーとしてWeb制作で副業・起業したい方に向けての個別コーチングです。
ご案内は公式LINEで行なっています。
【公式LINE登録者限定】今なら有料級6大プレゼントを配布中。
- 「案件が獲得できるようになるためのスキルを身につける、超具体的な学習ロードマップ」
- 「6つのサイト制作ツールのメリット・デメリットをわかりやすく比較したスライド」
- 59枚の「Web制作に必須の画像素材サイトの紹介スライド」
- 42枚の「知らないとヤバい！ビジネスマナー35選のスライド」
- 学習に挫折しないための助けになる！「自分振り返りワークシート」
- 無料個別相談
3. ホームページ制作・リニューアル
訴求力が高いホームページを制作し、売上アップや採用効果アップ、ブランド力の向上など事業の活性化に繋げます。
アクセス解析などの数値やデータなどの分析に加え、女性ならではの感性と直感力を活かしたご提案や、女性向けデザインが得意です。
コメント