Snow Monkey でもヘッダーをブロックでレイアウトしたい

投稿日 2024年12月16日
著者つぶ
カテゴリーブログ

この記事は「Snow Monkey / unitone Advent Calendar 2024」16日目の記事です。

「Snow Monkey / unitone Advent Calendar 2022」から2年がたちました。
昨年は「Snow Monkey / unitone Advent Calendar 2023」が開催されなかったのですが12月16日に記事を出したので今回で6年連続16日の投稿になります。

https://tbshiki.com/walkstoryismadeofunitone/

昨年はunitone でWeb サービスを公開したという記事を書きました。
今年は3年ぶりにSnow Monkey について書いてみようと思います。

これからはブロックテーマの時代になっていくと思うのですが、まだクラシックテーマを使われている方も多くいらっしゃると思います。

Snow Monkey はクラシックテーマです。

テーマを自由に編集したり難しいことはしなくていいという場合はまだまだクラシックテーマも有用です。

「ヘッダー」のレイアウトをブロックで作れないんでしょ？

そんなことはありません。

少し工夫するだけでSnow Monkey でもヘッダーをブロックで作ることができます。

今日はそんなお話です。

どうしてこうなった

Snow Monkey は素早くWeb サイトを立ち上げることができてとても便利です。

ウィジェットはブロックが使えるようになったので、あとヘッダーだけどうにかできたらなと思うわけです。

https://snow-monkey.2inc.org/manual/manual-advanced/add-template-root/

https://snow-monkey.2inc.org/2020/04/28/inject-content-to-above-the-columns-that-has-sidebar/

Snow Monkey ユーザーならこの2つの記事は穴の開くほどに見られたと思います。

ある日、お風呂に入っていた時に

「この2つを組み合わせたらSnow Monkey でもヘッダーをブロックで作れんじゃね？」

ってひらめいたんです。
あ、Snow Monkey でも自由にヘッダーをレイアウトできるわって。

決してAdvent Calendar のネタが思いつかなくて絞り出してきたわけではありません。絞り出してきたわけではありません。

準備1 – プラグイン

ヘッダーをブロックでレイアウトする為の準備をします。

Snow Monkey のカスタマイズをするにはプラグインを使うのがオススメ！とのことなので自作プラグインをインストールします。

公式サイトでもカスタマイズ用のMy Snow Monkey プラグインが配布されているので簡単に導入が可能です。

https://snow-monkey.2inc.org/2019/02/04/my-snow-monkey-plugin/

My Snow Monkey プラグインを使わないといけないということではありません。
他のオレオレプラグインがある場合はそちらを使っていただいてOKです。

準備2 – 固定ページ

ヘッダー用のブロックを置いておく固定ページを作成します。

固定ページの名前は自由にしていただいてOKです。

リンク(以前の名称はslug)も自由にしていただいてOKですが、今回はわかりやすくheaderとしておきます。

ヘッダー用固定ページにパターンなどからお好みのヘッダーにしたいブロックを配置してください。

この固定ページは下書きもしくは公開済みにしておいてください。
公開にする場合、該当ページを見られたくない場合はリダイレクトするなどして別ページに遷移させることなどで対応する方がいいかもしれません。

固定ページを使わずにカスタム投稿を使うことも可能ですが、今回はわかりやすくしたいので固定ぺージをヘッダーのテンプレートの置き場にしています。

実装1 my-snow-monkey.php

https://happy-snow-monkey.olein-design.com/preparing-to-overwrite-the-snow-monkey-template-file-from-my-snow-monkey

Snow Monkey のフックの場所がひと目でわかるSnow Monkey ユーザー御用達 HAPPY SNOW MONKEY さんからコードをお借りします。

以下のコードをmy-snow-monkey.php 内の好きな場所に記述してください。
プラグイン作成に慣れていない方は下の方に書き足すようにしていただく方がいいかもしれません。

add_filter(
	'snow_monkey_template_part_root_hierarchy',
	function( $hierarchy ) {
		$hierarchy[] = untrailingslashit( __DIR__ ) . '/view';
		return $hierarchy;
	}
);

ディレクトリ名以外はMy Snow Monkey でテンプレートの追加/上書きをできるようにする（テンプレートルートの追加）と同じです。

記事のタイトル通りですが、テンプレートファイルをプラグインから上書きする為のルートディレクトリを設定しています。

実装2 simple.php

今回、simple.php というヘッダー用のテンプレートを上書きします。

カスタマイザー(外観 -> カスタマイズ) のデザイン -> ヘッダーのヘッダーテンプレート「シンプル」を上書きして使用します。

Snow Monkey のテーマ内にあるtemplate-parts/header/simple.phpをコピーしたものを以下の構造で配置します。

my-snow-monkey
│  my-snow-monkey.php
│  README.md
│  style.css
│
└─view
    └─template-parts
        └─header
                simple.php

simple.php の以下の部分

$hamburger_btn_position = get_theme_mod( 'hamburger-btn-position' );
?>

<!-- ここに追記 -->

<div class="l-<?php echo esc_attr( $header_type ); ?>">

の部分に以下のコードを追記してください。

// 固定ページのコンテンツを取得
$new_query = new \WP_Query(
    [
        'pagename'       => 'header', // 固定ページのスラッグを指定
        'post_type'      => 'page',
        'post_status'    => [ 'publish', 'draft' ],
        'posts_per_page' => 1,
    ]
);

if ( $new_query->have_posts() ) :
    $new_query->the_post();
    ?>
    <div class="p-entry-content" id="front-page-top-content">
        <?php the_content(); ?>
    </div>
    <?php
    wp_reset_postdata();
    return; // 既存のヘッダー出力をスキップ
endif;
?>

追記後のsimple.php 全文はこちら

<?php
/**
 * @package snow-monkey
 * @author inc2734
 * @license GPL-2.0+
 * @version 19.0.0-beta1
 *
 * renamed: template-parts/simple-header.php
 */

use Framework\Helper;

$args = wp_parse_args(
    // phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
    $args,
    // phpcs:enable
    array(
        '_title_tag' => 'div',
    )
);

$header_content         = get_theme_mod( 'header-content' );
$header_type            = get_theme_mod( 'header-layout' ) . '-header';
$header_alignfull       = get_theme_mod( 'header-alignfull' );
$has_drawer_nav         = has_nav_menu( 'drawer-nav' ) || has_nav_menu( 'drawer-sub-nav' );
$container_class        = $header_alignfull ? 'c-fluid-container' : 'c-container';
$hamburger_btn_position = get_theme_mod( 'hamburger-btn-position' );

// 固定ページのコンテンツを取得
$new_query = new \WP_Query(
    [
        'pagename'       => 'header', // 固定ページのスラッグを指定
        'post_type'      => 'page',
        'post_status'    => [ 'publish', 'draft' ],
        'posts_per_page' => 1,
    ]
);

if ( $new_query->have_posts() ) :
    $new_query->the_post();
    ?>
    <div class="p-entry-content" id="front-page-top-content">
        <?php the_content(); ?>
    </div>
    <?php
    wp_reset_postdata();
    return; // 既存のヘッダー出力をスキップ
endif;
?>

<div class="l-<?php echo esc_attr( $header_type ); ?>">
    <div class="<?php echo esc_attr( $container_class ); ?>">
        <div class="l-<?php echo esc_attr( $header_type ); ?>__row">
            <div class="c-row c-row--margin-s c-row--lg-margin c-row--middle c-row--nowrap">
                <?php if ( $has_drawer_nav && 'left' === $hamburger_btn_position ) : ?>
                    <div class="c-row__col c-row__col--fit">
                        <?php
                        Helper::get_template_part(
                            'template-parts/header/hamburger-btn',
                            null,
                            array(
                                '_id' => false,
                            )
                        );
                        ?>
                    </div>
                <?php endif; ?>

                <?php do_action( 'snow_monkey_before_header_site_branding_column' ); ?>

                <div class="c-row__col c-row__col--auto">
                    <?php
                    Helper::get_template_part(
                        'template-parts/header/site-branding',
                        null,
                        array(
                            '_title_tag' => $args['_title_tag'],
                        )
                    );
                    ?>
                </div>

                <?php do_action( 'snow_monkey_after_header_site_branding_column' ); ?>

                <?php if ( $header_content ) : ?>
                    <div class="c-row__col c-row__col--fit u-invisible-md-down">
                        <?php Helper::get_template_part( 'template-parts/header/content', 'lg' ); ?>
                    </div>
                <?php endif; ?>

                <?php if ( $has_drawer_nav && 'right' === $hamburger_btn_position ) : ?>
                    <div class="c-row__col c-row__col--fit">
                        <?php
                        Helper::get_template_part(
                            'template-parts/header/hamburger-btn',
                            null,
                            array(
                                '_id' => false,
                            )
                        );
                        ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

実装をわかりやすくする為に「シンプル」を上書きしていますが、ヘッダーテンプレートのシンプルを他で使いたい場合は他のテンプレートパーツを上書きしていただいてもOKです。