Snow Monkeyでサイドバーありレイアウトのときに、TOPページのヘッダー画像を全幅にしたい時のカスタマイズ

こんな時ありませんか?

Snow Monkeyでテンプレートを右サイドバー(左サイドバー)ありを選択しているとページ全体が2カラムのレイアウトになりますよね。

最近よくある案件で、レイアウトは2カラム指定のご依頼なんだけど
TOPページのみもしくは下層ページもヘッダーのアイキャッチ画像は全幅に表示させたいというもの。

↓このレイアウトです!(実案件で、参考にリンク貼ってます〜。)

株式会社Macbe様〜マンション修繕公募サイト〜



カスタマイズ方法①

・全ページ(下層ページ)適応する場合

設定はとても簡単です!


・外観→カスタマイズ→デザイン→基本デザインから、デフォルトページヘッダー画像の箇所に画像を入れるだけです。
これで全ページのヘッダー画像として適用されます。

・TOPページ(フロントページ)のみ適用させたい場合

参照サイトの様に、TOPページのみ適用させたくて、その他のページはまたデザイン・レイアウトが変わる場合は

デフォルトページヘッダーではなく、フロントページ用の固定ページにアイキャッチ画像として設定となります。

私はこの方法↑に全然気付かずにいて、CSSにてフロントページのみに適用するコードをひたすら書いていました。。。それってなんか管理上スマートじゃないなぁと思い悩んで、Snow Monkeyフォーラムで質問したら
このようにあっさり回答を頂きました。その際は、本当にありがとうございました!

簡単!これだけです。

カスタマイズ方法②

My Snow Monkeyにてカスタマイズ(スライダーやコンテンツもOKです)

スライダーを設置したい場合

また別の案件でヘッダー画像ではなく、上記参照画像の様に「スライダー」でのご依頼もありましたので、
その時の編集方法も記載しますね。

要はSnow Monkey Blocksの「スライダー」や何かコンテンツを設定した場合は、先程の”アイキャッチ画像”に挿入はできないのでこの方法が良いと思います。

Snow Monkey公式サイトの”カスタマイズ”にキタジマさんがupしてくださっていますので、そちらを参考にしましたよ!

固定ページに編集用としてページを新規追加する。

タイトルは適当なものでOKなので、新規ページを作ります。その中にSnow Monkey Blocks のスライダーブロックでスライダーをつくります。この部分は適宜自分の内容に変更してくださいね。

パーマリンクのURLスラッグを編集
My Snow Monkeyにコードを書く

今回は、my-snow-monkey.phpにこの様にコードを書きました。

上記で設定したURLスラッグの場所 ‘top_fv_slider’ は適宜自分のものに書き換えてくださいね。


あと、どのページに適用させたいのかも、適宜変更してください

今回はフロントページのみのため(! is_front_page() && !is_paged() )と書いています。

//TOPページのみにfvスライダーを2カラム上に表示させる
	add_action(
		'snow_monkey_before_contents_inner',
		function() {
			$new_query = new \WP_Query(
				[
					'pagename'       => 'top_fv_slider',
					'post_type'      => 'page',
					'post_status'    => [ 'publish', 'draft' ],
					'posts_per_page' => 1,
				]
			);
	
			if (! is_front_page() && !is_paged() ) { /*フロントページのみに表示 */
				return;
			}
	
			$new_query->the_post();
			?>
			<div class="p-entry-content" id="front-page-top-content">
				<?php the_content(); ?>
			</div>
			<?php
			wp_reset_postdata();
		}
	);
必要であれば、CSSにて調整で完了

今回はスライダーを全幅表示にしたので、追加CSSに追記しました。ご参考までに。

/*スライダー全幅調整  */
#front-page-top-content .smb-spider-slider {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

以上です。
備忘録として・

My Snow Monkeyの使い方や注意点は公式サイトにきちんと説明があります。