ふわっと表示される固定式ヘッダーの作り方と【HABONE】テーマでの設定方法（jQuery+PHP+CSS）

  • 公開日：

カテゴリー:【HABONE】の機能 テーマカスタマイズ

ふわっと表示される固定式ヘッダーの作り方と【HABONE】テーマでの設定方法（jQuery+PHP+CSS）
このページについて
比較的簡単にWordPressサイトへjQueryとCSSを使って、スクロールされると上部に固定表示されるヘッダーを追加する方法と、【HABONE】テーマでの設定方法を紹介します。

スクロールするとふわっと表示されるヘッダー、おしゃれで格好いいですよね。

本記事では【HABONE】テーマ1.8で実装した固定式ヘッダーの設定の仕方と、他テーマでも流用してカスタマイズする方法を紹介します。

【HABONE】設定マニュアルの記事ですので、先に設定方法を紹介しますので、この記事を参考に自サイトへカスタマイズしたい方は後半まで読み飛ばしてください

ページ上部へ戻る▲

【HABONE】固定式ヘッダーの設定方法

ページ上部にサイトタイトルとメニューが入ったヘッダーを出力する機能の設定方法です（実際にこのページ上部にも表示させています）。

固定式ヘッダーの設定は、「外観」→「カスタマイズ」→「表示設定」→「固定ヘッダー」から行うことができます。

画面では以下の項目が設定できます。

  • 固定式ヘッダーを表示させるか
  • 文字の色をどうするか
  • 背景の色をどうするか
  • 背景の透過度をどうするか
  • ヘッダー内のレイアウトをどうするか

「固定ヘッダーを表示させる」にチェックを入れると、固定ヘッダーが表示されるようになります

文字の色や背景、背景を透明にするかどうかの調整が簡単にできますので、サイトの色や雰囲気に合わせて調整してください。

「外観」→「メニュー」から、メニューを追加して、「固定ヘッダーナビゲーション」に設定することでメニューが表示されます。

既存のメニューを表示させる場合は単純に「固定ヘッダーナビゲーション」にチェックを入れればOKです

サイトタイトルは「サイトのタイトルとキャッチフレーズを表示」が有効になっている場合に表示されます。

また、ロゴ画像が設定されている場合はロゴ画像が表示されます。

本機能はパソコンからのアクセス時のみ固定ヘッダーが表示されるようにしています。タブレット・モバイルでは表示されませんのでご注意ください

ページ上部へ戻る▲

他テーマで固定式ヘッダーを実装する方法

他のテーマをお使いの方で、固定式ヘッダー機能を追加したいという方向けに、【HABONE】の技術情報も兼ねて実装方法を紹介します。

この方法は【HABONE】テーマに実装している機能を汎用に使えるようにして紹介しているものであり、すべてのテーマでコピペで実装できるものではありませんのでご注意ください

また、本記事の内容を参考に固定式ヘッダー機能を実装するには、以下のスキルが必要です

  • FTPクライアントツールなどを使ってファイルをテーマ（子テーマ）内へ転送できる
  • テーマ（子テーマ）のfunctions.phpへ何かの記述をしたことがある
  • 自身でCSSの記述・調整ができる

今回の機能の追加では、WordPress標準で読み込まれるjQuery（Java Scriptを使いやすくするプログラム）を使って機能させますので、何等かの方法でjQueryの読み込みを停止しているサイトでは動作しません

１．必要なファイルを用意する

①JS(jQuery)ファイルの準備

以下のコードを挿入した「sticky-header.js」という名前・拡張子のファイルを作ります。

(function(jQuery) {
 
jQuery(function () {
//×で表示非表示の切り替え
	var display = function () {
//↓スクロール量によって表示／非表示
//スクロール量の変数を指定
var fixContact = jQuery('.is_fix');
var scrollHeight = jQuery(document).height();
var scrollPosition = jQuery(window).height() + jQuery(window).scrollTop();
var scrollPositionTop = jQuery(window).scrollTop();		
//画面上から200ピクセルを超える、または、画面最下部から1%以内のときだけ表示させる
if((scrollPositionTop > 200)){
             fixContact.fadeIn(400);
    } else {
            fixContact.fadeOut(400);
    }
    };

  jQuery(window).on("scroll", display);
});
})(jQuery);

②PHPファイルの準備

以下のコードを挿入した「sticky-header.php」という名前・拡張子のファイルを作ります。

<div class="habone-sheader is_fix">
<div class="habone-sheader-content">
	<!-- カスタムタイトル -->
<?php if(has_custom_logo()): ?>
		<p class="s-site-title"><?php the_custom_logo(); ?></p>
		<?php else: ?>
			<p class="s-site-title"><a href="<?php echo esc_url(home_url( '/' )); ?>"><?php bloginfo( 'name' ); ?></a></p>
		<?php endif; ?>

	<?php wp_nav_menu( array(
		'theme_location' => 'header-nav',
		'container' => 'nav',
		'container_class' => 's-header-nav',
		'container_id' => 's-header-nav',
		'fallback_cb' => ''
		) ); ?>
</div>
</div>

theme_locationの「header-nav」の部分はテーマによって異なりますので調べて変更してください

③CSSファイルの準備

以下のコードを挿入した「sticky-header.css」という名前・拡張子のファイルを作ります。

/** ページ表示時に一旦隠す */
.habone-sheader {
display:none;
}

/** 外枠 **/
.habone-sheader {
	position:fixed;
	top: 0;
	margin: 0 calc(50% - 50vw);
	padding: 0;
	width:100%;
	background:#000000B3;
	z-index:9999;
}

/** 中のコンテンツ部分 **/
.habone-sheader-content{
	height:auto;
	margin:0 auto;
	max-width:1260px;
	
}
/*
.habone-sheader-content {
    text-align: center;
}
*/
p.s-site-title {
    font-size: 1.3em;
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
}

p.s-site-title a {
    text-decoration: none;
    color:#ffffff;
}

/* メニュー */
.s-header-nav ul {
	display: flex;
	justify-content: center;
	gap: 1.5em;
	list-style: none;
	padding-left:0;
	align-items: baseline;
}

.s-header-nav ul {
	margin-block-start: 0.3em;
	margin-block-end: 0.3em;
}

/* サブメニューを隠す */
.s-header-nav ul.sub-menu{
	display:none;
}

/* 親メニューホーバー時にサブメニューを表示 */
.s-header-nav li:hover ul.sub-menu{
	display: block;
	font-weight:normal;
	padding:12px;
}

/* サブメニューホーバー時に太字 */
.s-header-nav .sub-menu li:hover{
	font-weight:bold;
}

/* メニューホーバー時に太字 */
.s-header-nav li:hover{
	font-weight:bold;
}

/* サブメニューの表示 */
.s-header-nav  ul.sub-menu {
	list-style: none;
	text-align: left;
}

/* サブメニューを重ねて表示 */
.s-header-nav .sub-menu {
	position: absolute;
	background:#000000B3;
	z-index:9999;
	width: auto;
  }

#s-header-nav a {
	text-decoration:none;
	font-size:0.8em;
        color:#ffffff;
}

/* タイトルがカスタムロゴの場合 */
.s-site-title img.custom-logo {
    height: 50px;
    min-height: 50px;
    width: auto;
    object-fit: cover;
}

お使いのテーマに合わせて調整が必要な場合があります

3つのファイルを作成したら、「sticky-header」という名前のフォルダへまとめておきます。

２．ファイルの転送

前項で作成した「sticky-header」フォルダを子テーマのディレクトリ直下（style.cssのある場所）へアップロードします。

３．サイトへの読み込み

以下のコードを子テーマのfunctions.phpへ追記します。

/***** 固定ヘッダー *****/
/* スクリプトとスタイルの読み込み */
if ( !function_exists( 'ha_sticky_header_enqueue_script' ) ){
function ha_sticky_header_enqueue_script(){
if(!wp_is_mobile()){
wp_enqueue_script('ha-shead',get_stylesheet_directory_uri() .'/sticky-header/sticky-header.js', array('jquery'), '1.0', false);
wp_enqueue_style('ha-shead',get_stylesheet_directory_uri() .'/sticky-header/sticky-header.css', array(), '1.0', false);
}
}
}
add_action('wp_enqueue_scripts','ha_sticky_header_enqueue_script');

/* ヘッダーコンテンツの読み込み */
if ( !function_exists( 'ha_sticky_header_content' ) ){
function ha_sticky_header_content(){
if(!wp_is_mobile()){
$head_contetnt = get_template_part('/sticky-header/sticky-header' );
return $head_content;
}
}
}

add_action('wp_footer','ha_sticky_header_content');

/* 管理バーがある場合に表示をずらす */
if ( !function_exists( 'ha_sticky_header_admin_bar' ) ){
function ha_sticky_header_admin_bar(){
if(!wp_is_mobile()){
if ( is_admin_bar_showing()) {
  echo '<style>.habone-sheader {
	margin-top:32px;}</style>';
}
}
}
}

add_action('wp_head','ha_sticky_header_admin_bar');

これでふわっと表示される固定ヘッダーが完成しました。

動作しない場合はページを表示させた状態でキャッシュのクリア（「Ctrl」＋「F5」）を行ってみてください。それでも解決しない場合は「動作しないときは」をご覧ください

４．表示方法の工夫

ここまでの作業で、ページ表示後にスクロールすると、タイトルとメニューがふわっと現れて固定表示されるヘッダーの機能実装ができました。

しかしながら、タイトルとメニューの表示についてはちょっと残念な感じがします。

そこで以下のいずれかのコードを先程の「sticky-header.css」へ追加して、いい感じに表示させます。

①中央にサイトタイトルとメニューを上下に表示

.habone-sheader-content {
    text-align: center;
}

②サイトタイトルを左に、メニューを右に表示（おすすめ）

.habone-sheader-content {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

お使いのテーマに合わせて調整が必要な場合があります

５．動作しないときは

動作しない要因は、ファイルの作り方の問題を除けば大きく以下のいずれかです。

  1. フォルダのアップロード先に誤りがある
  2. jQueryやCSSが正常に読み込まれていない

フォルダのアップロード先は、以下のように辿って行った場所になります

  1. サイトの収容されている場所
  2. wp-contentフォルダ
  3. themesフォルダ
  4. お使いのテーマのフォルダ

4を開いた状態で、通常の子テーマであれば「style.css」「functions.php」というファイルが見えているはずですので、そこへパソコンから「sticky-header」フォルダをアップロードしてください。

また、紹介したコードは子テーマ用に作っていますので、親テーマ（非推奨）へ実装する場合には、functions.phpへ追記したコードを以下と入れ替えてください。

/***** 固定ヘッダー *****/
/* スクリプトとスタイルの読み込み */
if ( !function_exists( 'ha_sticky_header_enqueue_script' ) ){
function ha_sticky_header_enqueue_script(){
if(!wp_is_mobile()){
wp_enqueue_script('ha-shead',get_template_directory_uri() .'/sticky-header/sticky-header.js', array('jquery'), '1.0', false);
wp_enqueue_style('ha-shead',get_template_directory_uri() .'/sticky-header/sticky-header.css', array(), '1.0', false);
}
}
}
add_action('wp_enqueue_scripts','ha_sticky_header_enqueue_script');

/* ヘッダーコンテンツの読み込み */
if ( !function_exists( 'ha_sticky_header_content' ) ){
function ha_sticky_header_content(){
if(!wp_is_mobile()){
$head_contetnt = get_template_part('/sticky-header/sticky-header' );
return $head_content;
}
}
}

add_action('wp_footer','ha_sticky_header_content');

/* 管理バーがある場合に表示をずらす */
if ( !function_exists( 'ha_sticky_header_admin_bar' ) ){
function ha_sticky_header_admin_bar(){
if(!wp_is_mobile()){
if ( is_admin_bar_showing()) {
  echo '<style>.habone-sheader {
	margin-top:32px;}</style>';
}
}
}
}

add_action('wp_head','ha_sticky_header_admin_bar');

jQueryやCSSが正常に読み込まれているかの確認方法

サイトのページ（トップページや投稿）のいずれかを開き、「右クリック」→「ページのソースを表示」でhtmlソースを開きます

「Ctrl」＋「F5」を押し、画面上部に出てきた小さい窓に「ha-shead-js」と入力し（鍵かっこは除く）ます。

結果がゼロとなる場合には正常に読み込まれていません。

読み込みは導入手順の「３．サイトへの読み込み」のコードで行っていますので、今一度functions.phpの記述を確認ください。

プログラムの話になりますが、確実にjQueryの後に読み込むようにしていているので、高速化プラグイン等を使っていても機能するようにしていますが、念のため、その類のプラグインを停止して確認してみてもいいかと思います。

これで解消できない場合は、ご自身でお調べいただくか、断念されるかのいずれかの判断をしてください。

ページ上部へ戻る▲

WordPressオリジナルテーマ制作入門
著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 監修:星野 邦敏, 監修:吉田 裕介
¥2,948 （2023/11/25 12:32時点 | Amazon調べ）
Amazon
＼楽天ポイント5倍セール！／
楽天市場
Yahooショッピング
1冊ですべて身につくWordPress入門講座
著:Mana
¥2,200 （2023/11/29 17:47時点 | Amazon調べ）
Amazon
＼楽天ポイント5倍セール！／
楽天市場
Yahooショッピング
アバター画像

作者:

WordPress用テーマ「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢：50代 趣味／園芸・ペット・卓球