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

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


モバイル表示時というか、レスポンジブになっていて、画面幅が狭くなると2段、数が多ければ3段表示となります
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; | 縦レイアウトの指定(1段目の高さ) |
grid-auto-rows:40px; | 縦レイアウトの指定(2段目以降の高さ) |
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');
ディスカッション
コメント一覧
まだ、コメントがありません