2023/05/24便利なサイトに欠かせない機能の一つがメニュー機能だ。メニューがあることでサイトを訪れてくれた人にスムーズにコンテンツへアクセスしてもらうことが可能となる。本サイトは完全オリジナルのWordPressサイトなのでメニュー機能も自作したので作成している。今回はこのメニュー機能の自作方法について紹介する。本記事は以下の人におすすめだ。作成するメニューはレスポンシブ対応で、PCの場合とスマホの場合とでメニューの表示方法が変わるカラクリを仕込んでいる。スマホ版はハンバーガーメニューではなく、表示するタイプのメニューだ。ハンバーガーメニューを使用しなかった理由については下記記事に詳しく書いているので参考にしてもらいたい。今回はレスポンシブ対応のメニューにしたかったため、PCサイトとスマホサイトで表示を分けた。いうか、スマホ画面は表示領域が狭いのでそうせざるを得なかった。PCサイトメニューPC側のサイトメニューはこんな感じ。上のサイト名が記載されているヘッダーの帯の右側にリンクを配置している。したくなかったので今回はシンプルに文字だけのリンクとしている。スマホサイトメニュースマホサイト側のメニューはこんな感じ。画面いっぱいにアイコンとアイコンの下側にボタン名が表示されるようにしている。アイコンも自作したかったがとりあえずフリーのものを使用している。この辺は好きなものを使用すれば良いと思う。このメニューはちょっと工夫して押されたボタンのリンク先に移動した際に、ボタンの色を明るくするカラクリを仕込んでいる。メニュー作成プログラム(コピペOK)メニュー作成プログラムを紹介する。できるだけコメントを入れるようにしているので不要箇所などは独自カスタムしていくことをオススメする。ソースの紹介前に表示したいアイコンを事前に用意しておく。私は下記のフリーアイコンを使用させてもらった。MONOこのサイトでは色や大きさなどある程度変更できるので便利なのでおすすめだ。ありがたく活用していこう。メインのメニュー表示部分の処理はこんな感じ。画像のパスやリンク名は変更して使用しいて欲しい。リンクはWordPress独自関数を使用しているが、WordPressを使用していない場合は直接URLを記述してもらえば良い。</div></nav>内容としてはPC側リンクとモバイルリンクの両方を連続して記述している。「navLinksDesktop」クラスがPC側のリンク、「navLinksMbile」クラスがモバイル側のリンクだ。これらリンクをCSSを使用して表示、非表示を切り替えて制御を行う。そのためJavaScriptは基本表示するだけなら不要なのだ。CSSについては下記の通り。}}これに加え押したボタンに対応する画面が開いた際にボタンのカラーを変更するロジックは下記のJavaScriptで記述することで実現できる。このロジックではページのURLとメニューボタンに設定されているURLとを比較して一致している場合に、そのボタンへクラス「active」を設定している。この処理が反応しない場合はURLの最後に「/」の有無を確認してみよう。});ソース内容補足CSSについて補足すると、メニューの切り替えは下記の記述で実現している。この記述で通常の場合モバイルメニューを非表示にしている。<以下略>}モバイル側の表示制御は下記で実施する。}}見れば分かると思うが、モバイルサイズの場合は、PC側リンクを非表示にして、モバイルリンクを表示するように設定している。このようにして切り替え制御を行っている。ボタンの色制御については下記の記述で制御している。1;}通常はボタンを「opacity」で半透明にしておく。ボタンを押して画面遷移するとJavaScriptの処理で押したボタンのa要素に「active」クラスをつけることで透過無し状態にし、目立たせるというカラクリだ。最後にプラグイン無しでサイトへメニューボタンを作成する処理について紹介した。メニュー画面は以外と簡単に実現できることを分かって頂けたかと思う。メニュー機能の自作は簡単にできる(ただしCSSを除く)。それ故に結局は、やるやつはやるし、やらないやつはやらない。投稿ナビゲーション前のページへ次のページへ関連記事WordPressに関連記事表示機能を自作で導入!プラグイン不要ハンバーガーメニュー不要論:ユーザーエンゲージメント向上のためのウェブ...SEOに効果大!WordPressサイトの表示速度改善テクニックと実践...Bootstrapを使ってWordPressページネーションを自作する...SEOを強化するWordPressの目次の簡単自作法:プラグインは不要...WordPressでパンくずリストを自作!コピペでOKWordPressオリジナルテーマへのトップページへ戻るボタン追加(j...WordPressオリジナルテーマへのmetaディスクリプション追加(...NORIAKI昭和生まれ。大学は情報工学を専攻、都内IT関係企業に数年勤務→転職しメーカ社内SEになる。