フロントページのセクションを増やす
|
1 2 3 4 5 |
/* フロントページセクションの数を設定 */ add_filter( 'twentyseventeen_front_page_sections', 'prefix_custom_front_page_sections' ); function prefix_custom_front_page_sections( $num_sections ) { return 6; } |
フロントページ ヘッダー画像を、固定ページ、投稿ページのヘッダー画像と同じサイズに変更
子テーマの functionss.php に追加。
|
1 2 3 4 5 6 7 |
// Eliminate twentyseventeen-front-page home css add_filter( 'body_class', 'my_body_class',20 ); function my_body_class( $classes ) { unset($classes[array_search("twentyseventeen-front-page",$classes)]); unset($classes[array_search("home",$classes)]); return $classes; } |
参考 twentyseventeen カスタマイズ【フロントページのヘッダー画像 高さ 変更】
ヘッダー画像をPC、スマホで画像を分ける
※コメントからの追記です。
いろいろな方法はあると思いますが簡単なのは
template-parts → header → header-image.php を小テーマにコピーして改造。
|
1 2 3 4 5 6 7 8 9 |
<div class="custom-header"> <div class="custom-header-media"> <?php the_custom_header_markup(); ?> </div> <?php get_template_part( 'template-parts/header/site', 'branding' ); ?> </div> |
↓
|
1 2 3 4 |
<div class="custom-header"> <img src="https://○○○.com/wp-content/uploads/●●●/top-pc.jpg" class="×××-topImg-pc" width="100%" alt="PC用画像"/> <img src="https://○○○.com/wp-content/uploads/●●●/top-sp.jpg" class="×××-topImg-sp" width="100%" alt="スマホ用画像"/> </div> |
そして子テーマのスタイルシートに分岐を記載。＜例＞
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.×××-topImg-pc{ display: block; } .×××-topImg-sp{ display: none; } @media screen and (max-width:782px){ .×××-topImg-pc{ display: none; } .×××-topImg-sp{ display: block; } } |
こんな感じです・・・・・
×××、●●●、○○○は環境、好みで必ず書き換えてくださいね。
TOPのみヘッダー画像を表示したい
フロントページのみヘッダー画像を表示したい場合は。
|
1 2 3 4 5 6 |
<div class="custom-header"> <div id="×××-topImg"> <img src="https://○○○.com/wp-content/uploads/●●●/top-pc.jpg" class="×××-topImg-pc" width="100%" alt="PC用画像"/> <img src="https://○○○.com/wp-content/uploads/●●●/top-sp.jpg" class="×××-topImg-sp" width="100%" alt="スマホ用画像"/> </div> </div> |
子テーマのスタイルシート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#×××-topImg{ display: none; } .page-id-△△ #×××-topImg{ display: block!important; } .×××-topImg-pc{ display: block; } .×××-topImg-sp{ display: none; } @media screen and (max-width:782px){ .×××-topImg-pc{ display: none; } .×××-topImg-sp{ display: block; } } |
※△△はフロントページに設定したページID。
追記（2021-08-24）
スタイルシートに下記を追加という情報をいただきました、ありがとうございます。
|
1 2 3 |
.custom-header { height: 100% !important; } |
コメント
お世話になります。
匿名で失礼いたします。
「ヘッダー画像をPC、スマホで画像を分ける」をぜひ投稿していただきたいです。
どうか宜しくお願いいたします。