• SIMPLEとは

  • デモ

  • マニュアル

  • アップデート

  • ダウンロード

【WordPress】ハンバーガーメニューの作り方【テーマ開発】

今回は、WordPressでハンバーガーメニューの作り方について解説していきます。

ハンバーガーメニューを表示したいけど、やり方がわからない・・・
使っているテーマがハンバーガーメニューに対応していない
ハンバーガーメニューを自作したい

という方は、本記事が参考になるはずです。

また、WordPressテーマ「SIMPLE」ではハンバーガーメニューを実装済みです。すぐに使ってみたい方は、ダウンロードをオススメします。

【WordPress】ハンバーガーメニューの作り方【テーマ開発】

具体的な手順は、下記のとおりです。

  1. 「header.php」にハンバーガーメニューのHTMLコードを追加する
  2. 「style.css」にハンバーガーメニューのCSSコードを追加する
  3. ハンバーガーメニュー用の「メニューの位置」を追加する
  4. WordPress管理画面でハンバーガーメニューを作成する

「header.php」にHTMLコードを追加する

まずは、テーマディレクトリ直下にあるheader.phpにHTMLコードを追加して、ハンバーガーメニューを作成していきます。

追加するコードは、下記の通り。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<?php wp_head(); ?>
	</head>
	<body id="body">
		<header id="header">

			//↓のコードを追加
			<?php if ( wp_is_mobile() ) : ?>
				<div class="hamburger-menu-wrapper">
					<input type="checkbox" id="hamburger-menu-button">
					<label for="hamburger-menu-button" class="hamburger-menu-open">
						<i class="fas fa-bars"></i>
					</label>
					<label for="hamburger-menu-button" class="hamburger-menu-close"></label>
					<div class="hamburger-menu-content">
						<nav class="hamburger-menu">
							<?php wp_nav_menu( array( 'theme_location' => 'hamburger-menu' , 'fallback_cb' => 'false' ) ); ?>
						</nav>
					</div>
				</div>
			<?php endif; ?>
			//ココまでコード追加

		</header>

if ( wp_is_mobile() )」を挟むことで、スマホ・タブレットなどのモバイル端末のみハンバーガーメニューを表示させることができます。PCでは表示されません。

・PC表示↓

・モバイル端末↓

関数リファレンス/wp is mobile

「style.css」にCSSコードを追加する

続いて、テーマディレクトリ直下の「style.css」にコードを追加していきます。

.hamburger-menu-wrapper {
	position: relative;
}

#hamburger-menu-button {
	display: none;
}

#hamburger-menu-button:checked ~ .hamburger-menu-close {
	display: block;
	opacity: 0.5;
}

#hamburger-menu-button:checked ~ .hamburger-menu-content {
	transform: translate3d(0,0,0);
}

.hamburger-menu-open .fa-bars {
	color: #f4f4f4;
	font-size: 20px;
}

.hamburger-menu-open {
	position: absolute;
	margin-bottom: 0;
	width: 20px;
	top: 20px;
	height: 20px;
	transition: 0.3s ease;
	animation: site-title 0.8s ease 0.5s 1 normal;
	animation-fill-mode: forwards;
	opacity: 0;
	z-index: 4;
	cursor: pointer;
}

.hamburger-menu-close {
	display: none;
	opacity: 0;
	background: #000;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	cursor: pointer;
	transition: 0.3s ease;
	z-index: 3;
}

.hamburger-menu-content {
	background: #fff;
	position: fixed;
	left: 0;
	width: 80%;
	height: 100%;
	transition: 0.3s ease;
	transform: translate3d(-100%,0,0);
	overflow: auto;
	z-index: 5;
}

.hamburger-menu {
	padding: 15px;
}

.hamburger-menu li {
	padding: 10px;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	font-size: 18px;
	text-align: left;
	transition: 0.3s ease;
}

.hamburger-menu li a {
	color: #555555;
}

.hamburger-menu li:before {
	color: #ff69b4;
	padding-right: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f054";
}

.hamburger-menu li:hover {
	transform: translateX(5px);
}

本記事では、

  1. アイコンをタップしたらメニューを開く
  2. 再度タップでメニューを閉じる

この動作を、CSSのセレクタとアニメーションを使用して実現しています。

CSSについては、下記のサイトが参考になると思います。

CSSとは?-CSSの基本 ーHTMLクイックリファレンスー

CSSセレクタのチートシート|37パターンを一覧で解説 ーWeblikerー

ハンバーガーメニュー用の「メニューの位置」を追加する

最後に、WordPress管理画面にハンバーガーメニュー用の設定を追加します。

テーマディレクトリ直下にある「functions.php」に、↓のコードを追加します。

<?php

register_nav_menus(array(
	'hamburger-menu' => 'ハンバーガーメニュー',
)
);

このコードを追加すると、WordPress管理画面の「外観→メニュー」ページに、「ハンバーガーメニュー」という新しいメニューの位置が追加されるはずです。

ここにチェックを入れてメニューを作成することで、ハンバーガーメニューが表示されます。

WordPress管理画面でハンバーガーメニューを作成する

あとは、WordPress管理画面でハンバーガーメニューを作成するだけです。

具体的な手順は、以下の通り。

  • 新しいメニューを作成する
  • メニューに項目を追加する
  • メニューの位置を「ハンバーガーメニュー」に設定する

新しいメニューを作成する

まずは、WordPressの管理画面にログインして「外観 → メニュー」に移動します。

「新しいメニューを作成しましょう。」をクリックして、メニューの作成画面に移動します。

メニューの名前を入力して、「メニューを作成」をクリックします。

WordPressで新規メニューを作成する詳しい方法は、以下の記事をご覧ください。

【WordPress】メニューの使い方と作成方法を解説【コードあり】 今回は、WordPressでメニューを作成する方法と、使い方について解説していきます。 #wordpressテーマ制作 3日くらい試行錯誤してよ…

メニューに項目を追加する

ハンバーガーメニューに表示したいコンテンツを選んで、追加します。

上記の例では、固定ページを追加しています。

メニューの位置を「ハンバーガーメニュー」に設定する

画面下の方に、「メニューの位置」という項目があるので、「ハンバーガーメニュー」のチェックボックスにチェックを入れます。

これで、さきほど追加した項目がハンバーガーメニューに表示されます。

以上になります。本記事を参考にして、ハンバーガーメニューを実装してみてください。

WordPressテーマ「SIMPLE」

simple

「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。

RELATED POSTS