WordPressテーマSANGOの質問

ヘッダーアイキャッチ画像を、PCでは2分割表示、スマホでは分割なしで表示したい

kuma

2018/10/21

お世話になります。

ヘッダーアイキャッチ画像を、PCでは2分割表示、スマホでは分割なしで表示したいのですが、方法がありましたらご教示いただけると幸いです。
よろしくお願い致します。

ヘッダーアイキャッチ画像を設定しよう

コメントへの回答

サルワカくん

2018/10/22

テーマファイルのカスタマイズが必要です。

①子テーマ内に「parts」という名前のフォルダーを作成
②さらに「parts」フォルダー内に「home」という名前のフォルダーを作成
③さらに「home」フォルダー内に「featured-header.php」という名前のファイルを作成
④ ③の中身は親テーマからコピペ（複製）してください。これで子テーマの「featured-header.php」が読み込まれるようになります。
⑤ 6行目の

if(get_option('header_image_checkbox') && !is_paged()) {

を

if(get_option('header_image_checkbox') && !is_paged() && wp_is_mobile() ) {

に変更。
29行目の

if(get_option('header_divide_checkbox') && !is_paged()): ?>

を

if(get_option('header_divide_checkbox') && !is_paged() && !wp_is_mobile() ): ?>

とすればいけるかと思います。

返信する

kuma

2018/10/22

迅速なご返答、ありがとうございます。

追加CSSに下記コードを加えると簡単に実装することができました（PC/モバイルの条件分岐ではなく、画面サイズでの条件分岐ですが）ので、同じような機能を実装したい方の為に併せてご報告致します。

———–

@media screen and (max-width: 480px) {
.home #divheader
{
display:none;
}
}

@media screen and (min-width: 480px) {
.home #header-image {
display:none;
}
}
.header-image__text p {
margin-top: 35px;
}