• SIMPLEとは

  • デモ

  • マニュアル

  • アップデート

  • ダウンロード

【WordPress】ヘッダーメニューの作り方【テーマ開発】

今回は、WordPressで「ヘッダーメニュー」の作り方と設定方法について解説していきます。

ヘッダーメニューを自作したい
ヘッダーメニューを表示したいけど、使っているテーマが対応していない・・・
ヘッダーメニューを設定したいけど、やり方がわからない

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

また、WordPressテーマ「SIMPLE」ではヘッダーメニューを実装済みなので、すぐに使いたい方はダウンロードしてみてください。

※↓のようなヘッダーメニューを設定できます。

【WordPress】ヘッダーメニューの作り方【テーマ開発】

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

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

順番に解説していきます。

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

まずは、テーマディレクトリ直下にある「header.php」にヘッダーメニューのコードを追加します。

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

			//↓のコードを追加
			<div class="slide-menu">
				<?php wp_nav_menu( array( 'menu_class' => 'scroll-menu' , 'theme_location' => 'slide-menu' , 'fallback_cb' => 'false' ) ); ?>
			</div>
			//ココまでコード追加

		</header>

WordPressの関数 wp_nav_menuで、WordPress管理画面で作成したメニューを呼び出しています。

テンプレートタグ/wp nav menu

メニューの作成方法は、後ほど解説するので安心してください。

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

次に、テーマディレクトリ直下にある「style.css」にCSSコードを追加します。

.slide-menu ul {
	margin-bottom: 0;
	padding-bottom: 10px;
}

.slide-menu {
	text-align: -webkit-center;
	animation: site-title 0.8s ease 0.5s 1 normal;
	animation-fill-mode: forwards;
	opacity: 0;
}

.scroll-menu {
	overflow-x: auto;
	overflow: scroll;
}

.scroll-menu::-webkit-scrollbar {
	display: none;
}

.scroll-menu-item {
	display: table-cell;
	font-size: 14px;
	white-space: nowrap;
}

.scroll-menu-item a {
	display: block;
	color: #f4f4f4;
	padding-left: 10px;
	padding-right: 10px;
}

.scroll-menu-item:first-child a {
	padding-left: 0;
}

.scroll-menu-item:last-child a {
	padding-right: 0;
}


/* PC表示 */
@media (min-width: 768px) {

	.scroll-menu-item {
		font-size: 16px;
	}

	.scroll-menu-item a {
		padding: 0 25px;
		letter-spacing: 1px;
	}

}

スマートフォン表示では、メニューの項目が多いと画面からはみ出してしまうことがあります。この場合、CSSでoverflow: scroll;を指定することで、スクロールが可能になります。

overflow – CSS: カスケーディングスタイルシート | MDN

また、display: table-cell;で、メニューの項目を横並びにしています。

CSSのdisplay: table-cellを使って要素横並びに配置する方法 – UX MILK

ヘッダーメニュー用の「メニューの位置」を追加する

最後に、WordPress管理画面にヘッダーメニュー用の設定を追加します。

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

register_nav_menus(array(
	'slide-menu' => 'ヘッダースライドメニュー',
)
);

コードを追加すると、WordPress管理画面の「外観→メニュー」ページに、「ヘッダースライドメニュー」というメニューの位置が追加されます。

WordPress管理画面でヘッダーメニューを作成する

ここまできたら、あとはWordPress管理画面でメニューを作るだけです。

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

  1. メニューを作成する
  2. メニューに項目を追加する
  3. メニューの位置を「ヘッダースライドメニュー」に設定する

メニューを作成する

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

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

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

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

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

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

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

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

メニューの位置を「ヘッダースライドメニュー」に設定する

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

これで、さきほど追加した項目がヘッダーメニューに表示されます。

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

WordPressテーマ「SIMPLE」

simple

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

RELATED POSTS