【WordPress】自作ヘッダーメニューを作成する方法

2019-02-192019-04-13WordPressWordPressカスタマイズ

WordPressテーマのヘッダーナビゲーションメニューを使わずに自作のヘッダーナビゲーションメニューを作って設置する方法です

サンプル画像

モバイル表示時というか、レスポンジブになっていて、画面幅が狭くなると2段、数が多ければ3段表示となります

1. HTML
2. CSS
3. CSSの簡単な説明
4. マルチサイトで共有して使う方法

HTML

ウィジェットの「ヘッダー下」に「カスタムHTML」を挿入して自作のヘッダーナビゲーションメニューを書いたHTMLを記述します

サンプルコードは記事作成時の当サイトのままです

<ul class="header-navi">
<li><a href="https://1-notes.com/">TOP</a></li>
<li><a href="https://1-notes.com/php/">PHP</a></li>
<li><a href="https://1-notes.com/word-press/">WordPress</a></li>
<li><a href="https://1-notes.com/amp/">AMP</a></li>
<li><a href="https://1-notes.com/phaser/">Phaser</a></li>
<li><a href="https://1-notes.com/google-tools/">Google</a></li>
</ul>

CSS

「style.css」に自作ヘッダーメニューのCSSを追加します

.header-navi{
	list-style-type:none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-template-rows: 40px;
	grid-auto-rows:40px;
	background:#31769e;
        box-shadow: 0px 6px 8px rgba(0,0,0,0.50);
}

.header-navi li{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing:border-box;
	transition: .5s;
}

.header-navi li a{
	display:flex;
	align-items: center;
	justify-content: center;
	width:100%;
	height:100%;
	color:#FFF;
}

.header-navi li:hover{
	background:#74a1b2;
}

CSSの簡単な説明

.header-navi

list-style-type:none;	リストマークなし
display: grid;	グリッドレイアウトするよ
grid-template-columns:	横レイアウトの指定リンクの文字数が多い場合はmin-widthを増やして対応
grid-template-rows:40px;	縦レイアウトの指定（１段目の高さ）
grid-auto-rows:40px;	縦レイアウトの指定（２段目以降の高さ）
display: flex; align-items: center; justify-content: center;	親要素内で上下左右中央揃え
box-sizing:border-box;	枠線の重なり対策（上記コードは枠線ない）
transition: .5s;	アニメーションする時間（ホバー時の色変え用に）

.header-navi li

display: flex; align-items: center; justify-content: center;	親要素内で上下左右中央揃え
box-sizing:border-box;	枠線の重なり対策（上記コードは枠線ない）
transition: .5s;	アニメーションする時間（ホバー時の色変え用に）

.header-navi li a

display: flex; align-items: center; justify-content: center;	親要素内で上下左右中央揃え
width:100%; height:100%;	リンク領域を広げる（もっと良い方法が・・！？）

.header-navi li:hover

background:#74a1b2;

マウスホバー時の色

※WordPressのエディタだと2019年2月現在、1frでエラーアイコンが出ます

マルチサイトで共有して使う方法

WordPressマルチサイト化で作った複数のブログを同時に反映させる方法です

当サイトのブログもマルチサイトで作成しておりますので、ついでに書いておきます

WordPressマルチサイト化は、デフォルトではテーマの「style.css」や「functions.php」などは親サイトのものを共有して使える状態です

ウィジェット設定は子サイト単位なので、ウィジェットの「ヘッダー下」に自作ヘッダーナビゲーションメニュー用のショートコードを設定しておいて、「functions.php」でショートコードを読み込んでいます

これで自作ヘッダーナビゲーションメニューをfunctions.phpで更新するだけで一括で複数のマルチサイト（ブログ）を変更できる様になります

ショートコード

[header_menu]

functions.php

function header__function(){

	echo '<ul class="header-menu">
	<li><a href="https://1-notes.com/">TOP</a></li>
	<li><a href="https://1-notes.com/php/">PHP</a></li>
	<li><a href="https://1-notes.com/word-press/">WordPress</a></li>
	<li><a href="https://1-notes.com/amp/">AMP</a></li>
	<li><a href="https://1-notes.com/phaser/">Phaser</a></li>
	<li><a href="https://1-notes.com/google-tools/">Google</a></li>
	</ul>';

}

add_shortcode('header_menu', 'header_menu_function');

またマルチサイト（ブログ）毎に表示を切り替えたい場合はheader__function()関数内で表示された子サイトのタイトルとか取得して振り分けても良いかもですね

function header__function(){
$siteName = get_bloginfo('name');

　if($siteName == "サイト名"){

	echo '<ul class="header-menu">
	<li><a href="https://1-notes.com/">TOP</a></li>
	<li><a href="https://1-notes.com/php/">PHP</a></li>
	<li><a href="https://1-notes.com/word-press/">WordPress</a></li>
	<li><a href="https://1-notes.com/amp/">AMP</a></li>
	<li><a href="https://1-notes.com/phaser/">Phaser</a></li>
	<li><a href="https://1-notes.com/google-tools/">Google</a></li>
	</ul>';

  }else{

	echo '<ul class="header-menu">
	<li><a href="https://1-notes.com/">TOP</a></li>
	<li><a href="https://1-notes.com/php/">PHP</a></li>
	<li><a href="https://1-notes.com/word-press/">WordPress</a></li>
	<li><a href="https://1-notes.com/amp/">AMP</a></li>
	<li><a href="https://1-notes.com/phaser/">Phaser</a></li>
	<li><a href="https://1-notes.com/google-tools/">Google</a></li>
	</ul>';

  }

}

add_shortcode('header_menu', 'header_menu_function');

2019-02-192019-04-13WordPressWordPressカスタマイズ

Posted by Yousuke.U