今回は、WordPressで「ヘッダーメニュー」の作り方と設定方法について解説していきます。
という方は、本記事が参考になるはずです。
また、WordPressテーマ「SIMPLE」ではヘッダーメニューを実装済みなので、すぐに使いたい方はダウンロードしてみてください。
※↓のようなヘッダーメニューを設定できます。
【WordPress】ヘッダーメニューの作り方【テーマ開発】
具体的な手順は、下記のとおりです。
- header.phpにHTMLコードを追加する
- style.cssにCSSコードを追加する
- ヘッダーメニュー用の「メニューの位置」を追加する
- 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管理画面で作成したメニューを呼び出しています。
メニューの作成方法は、後ほど解説するので安心してください。
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;で、メニューの項目を横並びにしています。
ヘッダーメニュー用の「メニューの位置」を追加する
最後に、WordPress管理画面にヘッダーメニュー用の設定を追加します。
テーマディレクトリ直下にある「functions.php」に↓のコードを追加します。
register_nav_menus(array(
'slide-menu' => 'ヘッダースライドメニュー',
)
);コードを追加すると、WordPress管理画面の「外観→メニュー」ページに、「ヘッダースライドメニュー」というメニューの位置が追加されます。
WordPress管理画面でヘッダーメニューを作成する
ここまできたら、あとはWordPress管理画面でメニューを作るだけです。
具体的な手順は、以下の通り。
- メニューを作成する
- メニューに項目を追加する
- メニューの位置を「ヘッダースライドメニュー」に設定する
メニューを作成する
まずは、WordPressの管理画面にログインして、「外観 → メニュー」に移動します。
「新しいメニューを作成しましょう。」をクリックして、メニューの作成画面に移動します。
メニューの名前を入力し、「メニューを作成」をクリックします。
WordPressでメニューを作成する詳しい方法は、以下の記事をご覧ください。
メニューに項目を追加する
ヘッダーメニューに表示したいコンテンツを選んで、追加します。
上記の例では、固定ページを追加しています。
メニューの位置を「ヘッダースライドメニュー」に設定する
画面下の方に、「メニューの位置」という項目があるので、「ヘッダースライドメニュー」のチェックボックスにチェックを入れます。
これで、さきほど追加した項目がヘッダーメニューに表示されます。
以上になります。本記事を参考にして、ヘッダーメニューを実装してみてください。
おすすめの独自ドメイン取得サービス【お名前.com】
オススメのWordPress向けレンタルサーバー【Mixhost】
WordPressテーマ「SIMPLE」
「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。
RELATED POSTS
【WordPress】メニューの使い方と作成方法を解説【コードあり】
【WordPress】ハンバーガーメニューの作り方【テーマ開発】
【WordPress】ピックアップコンテンツを設定する方法
【WordPress】スマホ用メニューの作り方【テーマ開発】
PREV POST
【WordPress】ハンバーガーメニューの作り方【テーマ開発】
NEXT POST
【WordPress】スマホ用メニューの作り方【テーマ開発】
