【WordPress】サイドバーのメニューをアコーディオンに。プラグイン無しで超簡単

このページでわかること
素人でも超簡単にアコーディオンメニューが作れる方法!コピペあり!
【依頼内容】ワードプレスのサイドバーをなんとかして!!
今回のご依頼は「WordPress」でした。
ご相談主様のサイトは運営歴5年、
オリジナルテーマから市販テーマである「Lightning G3」に変更する過程とのことです。
そのサイトは・・・とある業界でSEO1位を取るほどSEOに強いこだわりのあるサイトです。
SEOはGoogleやYahooなどの検索エンジンでサイト検索した際に、
上位にサイトが表示されるようにサイトの出来を良くする活動全般を指します。
SEOは、ネット社会のおける出店戦略と同義であると私は思います。
なるべく人通りが多く目立つ位置にお店を出したいですよね。
SEOはまさにネット社会の出店戦略でとても重要なのです。
現在のSEOは、ユーザー中心であり、
コンテンツの質の良さや、ユーザー体験を重視する他、
今だとスマホやタブレットといったモバイル端末で閲覧する人が多数を占めるためサイトスピードも重要になります。
従って、「軽量で無駄なコードを書きたく無い」とのことでした。
WordPressのプラグインもできる限り使いたくない!
そんな方針の会社さんです。
さらに、希望する内容を聞いてみますと・・・
- メニューをアコーディオンにしたい
- jQueryは難しい。コードを書いてみたがエラーが解消されない。
- 元のオリジナルテーマの時のアコーディオンのjsをググると2012年のjsで、素人目でも古すぎると感じた
とのことです。
スナックjQuery
ちなみに、私に相談するまで3日間、非ITエンジニアであるその方は一人で、
色々なサイトを回ってコピペを繰り返していたそうです。
そんな方に、スナックjQueryのページを紹介してみました。
オチが秀逸で途中専門的な話も含まれますが、
ITエンジニアの世界においてjQueryの立ち位置についてをご理解頂いた。
「えええええ?そんな感じなの!?」
と仰ってましたが、
本人も、オリジナルテーマでアコーディオンにするために使っていたjsが200行以上のものを3つで動かしているのに気づいていたので、おかしいと感じていたようです。
こんな感じにしてみました
「え?サイドバーじゃないじゃん?」と思うかもしれませんが、
この方法は、WordPressの外観 > メニューで作るナビゲーションメニューを使うのではなく、
ウィジェットにカスタムhtmlを使って直接コードを書きこむ or 固定ページの本文をウィジェットで表示する方法を取ります。
複数箇所に同じメニューを表示して、一括変更できるようにしたい場合は固定ページで一つメニュー用のページを作ってそれをウィジェットの画面で固定ページ本文を挿入すると変更時にも便利かなと。
ではコードの中身はどんなかというとこんな感じです。
1つ目のカスタムHTMLブロックにはコレ↓
<details>
<summary>IT</summary>
<div class="details-content">
<p><a href="/it-nandemo-ya/">ITなんでも屋</a></p>
<p><a href="/">【googleスプレッドシート】メニューを追加する方法</a></p>
<p><a href="/">【gmail】Googleスプレッドシートから自動送信させる【自動送信】</a></p>
</div>
</details>
<details>
<summary>武蔵小杉情報</summary>
<div class="details-content">
<p><a href="/">木月大町公園</a></p>
<p><a href="https://takayuki-soft.com/kosugi/kosugicurry2021/">コスギカレーフェス</a></p>
</div>
</details>
2つ目のカスタムhtmlにcssを加えたら完成です。
<style>
summary {
position: relative;
display: block; /* 矢印を消す */
padding: 10px 10px 10px 30px; /* アイコンの余白を開ける */
cursor: pointer; /* カーソルをポインターに */
font-weight: bold;
background-color: #e2f0f7;
transition: 0.2s;
margin-bottom: 0.5em;
}
summary:hover {
background-color: #ccebfb;
}
summary::-webkit-details-marker {
display: none; /* 矢印を消す */
}
/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
content: "";
margin: auto 0 auto 10px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
summary:before {
width: 16px;
height: 16px;
border-radius: 4px;
background-color: #1da1ff;
}
summary:after {
left: 6px;
width: 5px;
height: 5px;
border: 4px solid transparent;
border-left: 5px solid #fff;
box-sizing: border-box;
transition: .1s;
}
/* オープン時のスタイル */
details[open] summary {
background-color: #ccebfb;
}
details[open] summary:after {
transform: rotate(90deg); /* アイコンを回転 */
left: 4px; /* 位置を調整 */
top: 5px; /* 位置を調整 */
}
/* アニメーション */
details[open] .details-content {
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: none;
}
}
/* コンテンツのデザイン */
.details-content p{
line-height: 1.2;
margin-block-end: 0.8em;
font-size: 0.9em;
display: block;
margin-left: 1em;
}
</style>
同じカスタムHTMLブロックに入れても良いけど、
あとから編集のしやすさを考えると別のブロックにしておいた方が良いと思います。
外観のメニューは使えなくなるものの、
非エンジニアの方であっても、とても簡単にコードを書くことができるかなと思います。
Lightning proならVKブロックのアコーディオンを使うのもあり
どうしてもコードを書くのは嫌!
な方はブロックの機能を拡張をするプラグインの中にあるアコーディオンを使うのも可。
Lightinigの有料テーマならVKブロックでアコーディオンブロックがあります。
↓こんな感じになります。
タイトル2 武蔵小杉情報
VKブロックのアコーディオンのコードは比較的スッキリしてるので、
これもありかなと。
ただ、プラグインがなかったらわざわざ入れるほどの話でもないので、
上記のコードで簡単にできます。
良かったらご活用ください!
アコーディオンメニューのまとめ
今回の依頼は「サイドバーのメニューを簡単にシンプルにアコーディオンにしたい」という依頼でしたが、
<details>を使うと簡単に質問コーナーFAQも作れます。
良くあるQ/Aです。
質問(Q)があって、それをクリックすると、回答(A)が開くやつです。
非常に簡単に作れますし、サイトがスッキリしてユーザビリティもあがるので、ぜひご活用ください!
ITなんでも屋では、ワードプレス、エクセルなどのプログラマー以外の人が使うソフトウエアでも最適化できるようにサポートしています。なにかご相談がありましたら是非ITなんでも屋おーやんにご相談ください。