スマホでもナビゲーションを画面上部に固定する方法

Twenty Seventeenでは、PCのレイアウトだと、下にスクロールすると、画面上部にナビゲーションが固定されるようになっています。

↓ 下にスクロールすると画面上部に貼り付く。

スマホのナビゲーションは、下にスクロールすると上に流れて行ってしまい、固定されません。

スマホのナビゲーションも固定する方法です。

手順

追加CSSに以下を追加

.site-navigation-fixed.navigation-top {
	bottom: auto;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 7;
}

JavaScriptを修正

・本体を書き換える場合

以下のファイルを編集する。

wp-content/themes/twentyseventeen/assets/js/global.js

adjustScrollClass関数を以下のように編集する(赤文字部分を追加)。

	// Make navigation 'stick'.
	function adjustScrollClass() {

		// Make sure we're not on a mobile screen.
		if ( 'none' === $menuToggle.css( 'display' ) ) {

			// Make sure the nav isn't taller than two rows.
			if ( navIsNotTooTall ) {

				// When there's a custom header image or video, the header offset includes the height of the navigation.
				if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
					headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
				} else {
					headerOffset = $customHeader.innerHeight();
				}

				// If the scroll is more than the custom header, set the fixed class.
				if ( $( window ).scrollTop() >= headerOffset ) {
					$navigation.addClass( navigationFixedClass );
				} else {
					$navigation.removeClass( navigationFixedClass );
				}

			} else {

				// Remove 'fixed' class if nav is taller than two rows.
				$navigation.removeClass( navigationFixedClass );
			}
		} else {
			headerOffset = $customHeader.innerHeight();
			if ( $( window ).scrollTop() >= headerOffset ) {
				$navigation.addClass( navigationFixedClass );
			} else {
				$navigation.removeClass( navigationFixedClass );
			}
		}
	}

・子テーマの場合

本体を直接編集すると手っ取り早いのですが、テーマのアップデートで修正が上書きされて、元に戻ることがあります。アップデートにも対応するには、子テーマで処理を上書きするのがよいです。

子テーマを作って、親テーマ(TwentySeventeen)から子テーマに assets/js/global.js をコピーして、子テーマ側で、上のように必要個所を編集します。

解説

PCの画面幅のときナビゲーションが固定されるのは、以下のCSSが効いているため。

@media screen and (min-width: 48em) { /* ← 画面が広いときに適用 */
	/* 略 */

	.site-navigation-fixed.navigation-top {
		bottom: auto;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 7;
	}

	/* 略 */
}

メディアクエリなしで追加CSSに書くことで、どの画面の幅でも適用されるようになります。

.site-navigation-fixed というクラスは、JavaScriptによって付与されています。

ヘッダ部分が隠れるまで画面を下にスクロールしたときにCSSのクラス(.site-navigation-fixed)が追加され、上にスクロールすると削除されます。

この処理がスマホの画面幅のときは除外されていて、PCの画面幅のときしか実行されないので、スマホの場合も処理をするようにしました。また、ヘッダやメニューの高さの計算がPC用になっているので、その部分も調整しています。

トップのコーヒーやサンドイッチの画像の変え方、消し方

TwentySeventeenの初期状態では、トップページの各セクションの背景に、コーヒー画像やサンドイッチ画像が入っています。

これをどうやって変更したり、削除したりできるのかというと、

お問い合わせや会社概要など、各セクションに対応する固定ページがあるので、その固定ページのアイキャッチ画像を変更することで対応できます。

子テーマにするほどでもないカスタマイズをプラグインで対応する方法

Twenty Seventeen のようなよくできたテーマに基本は乗っかりたい。

親テーマは直接変更したくない。

だけど、以下のようなことはしたい。

  • ちょっとだけフックを使ったカスタマイズをしたい。
  • スタイルシートの追加

であれば、プラグインで対応する方法があります。

自作するというとテーマのほうが注目されがちですが、テンプレートを変更するほどでもない場合はプラグインで対応できます。

プラグイン

ダウンロード

実物を見るのが簡単だと思います。

ダウンロード(myplugin.zip 434バイト)

これを、管理画面 > プラグイン > 新規追加 > プラグインのアップロード で、ファイル選択、今すぐインストールで、インストール完了です。

style.css に何も書いていないので、インストール後、すぐ有効化しても、見た目には何も変わりません。

ファイル構成

phpが1個と、cssが1個のシンプル構成です。

wordpress
|-- plugins
|   `-- myplugin
|       |-- myplugin.php
|       `-- style.css

具体的な中身

myplugin.php は、style.css を追加で読み込むことしか書いていません。追加のカスタマイズを続きで書いていくとよいです。

<?php
/*
Plugin Name: myplugin
*/

// style.css を読み込ませる
add_action('wp_enqueue_scripts', 'my_wp_enqueue_scripts', 20);
function my_wp_enqueue_scripts() {
	wp_enqueue_style('myplugin-style', plugins_url('style.css', __FILE__));
}

// 続きは自由に追記してください

プラグインの style.css を、テーマのCSSが読み込まれた後に読み込ませたいですが、テーマが不明だと指定が難しいので、優先順位を下げて、あとのほうに読み込まれるようにしています。

style.css は何も書いていないので、追加のCSSを自由に書いていくとよいです。

バージョンアップされて勝手に消えたりもしないので、安心して書き込めます。