LION MEDIAにプルダウンメニューを実装してみた【WordPress】

えびかずき

こんにちは、えびかずきです。

今回はLION MEDIAにプルダウンメニューを実装してみました！

当ブログ『エビワークス』はWordPressテーマとしてLION MEDIAを使っています。

無料テーマなのにカッコいいブログが作れて割と満足しているのですが、以前からメニューを階層化してプルダウンできたらいいのになと思っていました。

ということで今回は、LION MEDIAにプルダウンメニューを実装してみました！

こんな方におすすめ:
・LION MEDIAのメニューをプルダウン化したい。

1. 結果
2. 開発環境
3. 手順
4. まとめ
5. 参考サイト

結果

こんな感じでプルダウンメニューをつくることができました。

うん、結構いい感じ。

開発環境

OS：MacOS Catalina10.15
WordPress：5.4
Theme : LION MEDIA
サーバー：Xserver/PHP 7.4.4
FTPソフト : FileZilla

手順

実装手順は以下のとおりです。

※FTPソフトなどを使ってバックアップを取ってから作業することをお勧めします。

header.phpの修正

LION MEDIAの『header.php』の153行目あたりの、

『’depth =>’』の数値を１から2に変更します。

※この数値が表示するメニューの階層数になります。

style.cssへの追記

style.cssへ以下のコードを追記します。

/*サブメニューの設定*/
.globalNavi .sub-menu {
  position: absolute;
  z-index: 20; 
  display: none;
  width: 200px;
  border: none;
  background-color: #000000; 
  opacity: 0.65;
  box-shadow: 4px 4px 10px 2px #3b3b3b;
}
.globalNavi .sub-menu li:first-child {
  margin-top:25px;
}
.globalNavi .sub-menu li {
  display: block;
  float: none;
  padding: 0;
}
.globalNavi li:hover .sub-menu {
  display: block;
}
.globalNavi .sub-menu li a {
  font-size: 1em;
  font-weight: normal;
  padding: 10px;
  text-align: left;
  color: #fff;
  border-bottom: 1px solid #fff;
}
.globalNavi .sub-menu li a:hover {
  background-color: #bed6ed;
  color: #000;
}
/*スマホ用サブメニュー設定*/
@media screen and (max-width: 768px) {
  .globalNavi .sub-menu {
    width: 120px;
    box-shadow: 1px 1px 3px 0px #3b3b3b;
  }
  .globalNavi .sub-menu li {
    padding: 6px 0 6px 0;
    height: auto;
  }
  .globalNavi .sub-menu li:first-child {
    margin-top:20px;
    padding: 6px 0 6px 0;
  }
  .globalNavi .sub-menu li a {
    padding: 3px 0 3px 4px;
  }
}