WordPress

【オリジナルテーマ】WordPress グローバルメニュー に子要素を追加する方法

グローバルメニュー に子要素を追加する方法のアイキャッチ画像

こんにちは、キムゴンです。

以前に グローバルメニュー の記事を上げましたが、このままでは子要素を追加することができません。

そのため、今回は子要素の作成方法についてまとめました。

以前の記事はこちら

目次

グローバルメニュー の子要素とは

グローバルメニュー の子要素とは以下のような親要素に紐づく子要素のことです。

通常は親要素をホバーしたときに子要素は表示されます。

CSSを編集しよう

以下が子要素を表示させるCSSです。

基本的にコピペでOKです。

li.menu-item-has-children {
    position: relative;
}
 
li.menu-item-has-children ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 50px;
    width: 100%;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
   	padding-left:0px;
}
 
li.menu-item-has-children:hover ul {
    visibility: visible;
    opacity: 1;
    top: 60px;
	background:#333;
}

li.menu-item-has-children ul li {
	list-style:none;
	height: 40px;
	vertical-align:middle;
	display:block;
}

li.menu-item-has-children ul li a {
	display:block;
	color: #fff;
	height:100%;
	padding-top:6px;
}

li.menu-item-has-children ul li a:hover {
	background: #666;
}

下矢印のCSS

「下矢印」とは以下のことです。

これがあることにより、どのメニューに子要素があるのかがわかります。

この下矢印部分は以下のCSSで記述可能です。

li.menu-item-has-children > a::after {
	margin-left:6px;
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;	
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

右と下のボーダーラインを記述し、そのボーダーラインを45°傾けることにより下矢印の完成です。

メニューを変更しよう

管理者画面から「外観」→「メニュー」を選択する。

メニュー構造から子要素化を行います。

子要素化については以前の既存テーマ者向けに作成した記事でも解説しています。

（既存テーマ使用者向けに作成した、グローバルメニュー作成方法解説記事はこちら）

まとめ

今回はオリジナルテーマ使用者向けに グローバルメニュー の子要素を追加する方法を解説しました。

CSSを記述して管理者から変更を加えると作成できるので１からコードを記述するより遥かに簡単です。

仮に、オリジナルな グローバルメニュー を作成したいがコーディングできない場合は twitter や お問い合わせ で連絡ください。

それでは、みなさん、今日も良い1日を！

-WordPress