[WordPress]ボックスメニューを導入する。

Wordpressメニュー

当サイトにボックスメニューを導入しました。

こちらのサイトを参考にさせて頂きました。ありがとうございます。

ボックスメニューを導入するには以下の二つを編集する必要があります。

  • functions.php
  • styles.css

上記サイトに記載されていたコードをコピペだけで実装しましたのでコードについて本サイトでは記載しません。手順のみ記載します。

functions.phpの編集

[外観][テーマエディター][Theme Functions (functions.php)]と移動します。

[選択したファイルの内容]の下部、?>の上に「寝ログ」様のサイトのfunctions.php用のコードをコピペします。

貼り付けたら[ファイルを更新]をクリックして保存。

以上でfunctions.phpの編集は完了

style.cssの編集

[外観][テーマエディター][Theme Functions (Stylesheet (style.css))]と移動します。

[選択したファイルの内容]の下部上に「寝ログ」様のサイトのstyle.css用のコードをコピペします。

貼り付けたら[ファイルを更新]をクリックして保存。

以上でstyle.cssの編集は完了

メニューの作成

ボックスメニューで表示するメニューを作成します。

[外観][メニュー][新しいメニューを作成しましょう。]と移動。

[表示オプション]をクリックして[CSSクラス][説明]にチェックを入れる。

[メニュー名]に適当な名前を付け、[メニューを作成]をクリックする。

※名前は半角英数字が良いと思います。

メニューに追加するページを左側から追加する。

メニュー項目にアイコンを追加

追加した項目の左側にある▼をクリックして展開

[CSS class]Font Awesomeで取得したアイコンのクラスを入力。クラスの取得方法は次項の説明をご覧ください。

説明にはメニューの説明を入力する。(省略可能)

Font AwesomeアイコンのClass取得方法

以下のサイトから必要なアイコンを検索してアイコン詳細ページに移動する。

移動したページに表示されているiタグのクラスをコピーする。

※以下の画像はHomeアイコンの詳細ページになります。

赤枠部分の文字列をCSS Classに入力します。

Font Awesomeの読み込み

テーマによってはボックスメニューで使用するFont Awesomeが読み込まれていない場合があります。一通りやって表示されない場合、テーマの<head>タグ内に以下のタグを挿入してください。(Font Awesome5の前提です。)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

ショートコードの入力

メニューの作成が完了したらボックスメニューを表示したい場所に以下のショートコードを入力。

[box_menu name="作成したメニュー名"]

以下は当サイトのサイドバーウイジェットに表示されているものになります。

CSSのカスタマイズ

CSSのカスタマイズも可能です。

当サイトではアイコンの色とマウスオンしたときの色のみ変更しています。

CSSの以下の部分の色をサイトの基本色に変更しました。

.box-menus .box-menu:hover {}
.box-menus .box-menu-icon {}

Wordpressメニュー