【WordPress】SANGOのサイドバーにアイコン付きメニューを追加する方法

カテゴリーとは別に、より細かいメニュー一覧を作ってサイドバーに貼り付ける方法を紹介します。

筆者の場合は下写真のようなメニューを設置しています。

今回もSANGOカスタマイズを参考にさせていただきました。

サイドバーにアイコン付きメニューを追加する

「外観」→「ウィジェット」とクリックし、カスタムHTMLをサイドバーに追加します。

追加したカスタムHTMLを開いたらタイトル欄は空白のまま、内容欄に以下のHTMLコードを貼り付けます。

<div class="widget-menu__title main-bc ct strong">
  <i class="fa fa-map-marker"></i> メニュー
</div>
<ul class="widget-menu dfont cf">
  <li>
    <a href="★リンク先URL★"><i class="far fa-address-card" style="color: #000000"></i>メニュー１</a>
  </li>
  <li>
    <a href="★リンク先URL★"><i class="fas fa-book" style="color: #000000"></i>メニュー２</a>
  </li>
  <li>
    <a href="★リンク先URL★"><i class="fab fa-maxcdn" style="color: #000000"></i>メニュー３</a>
  </li>
  <li>
    <a href="★リンク先URL★"><i class="fab fa-wordpress" style="color: #000000"></i>メニュー４</a>
  </li>
 <li>
    <a href="★リンク先URL★"><i class="fas fa-coffee" style="color: #000000"></i>メニュー５</a>
  </li>
 <li>
    <a href="★リンク先URL★"><i class="fas fa-gamepad" style="color: #000000"></i>メニュー６</a>
  </li>
</ul>

リンク先URLとアイコンを設定する

このままだと筆者の利用しているデザインのまま、リンク先も指定されていないので、一つずつ設定していきます。

★リンク先URL★の部分には、クリックした際に飛びたいページのURLを貼り付けてください。

アイコンはFontAwesome5にてコードを取得できます。

実際に開くと以下のようなページになっています。

Search〜の部分に検索ワードを入れれば、関連したアイコンが表示されます。

検索の際には英語で検索するようにしてください。

WordPressで検索した場合、以下のようになります。

気に入ったアイコンを選択すると、下写真のような画面に切り替わるので、赤枠の部分をコピーします。

この際HTMLコード全体がコピーされてしまいますが、使用するのは赤枠の”と”に囲まれた部分のみになります。

あとは貼り付けたHTMLコード内『class=”〜”』の””内にコピペすればOKです。

アイコンカラーとメニュー名を設定する

アイコンはカラーを変更させることもできます。

現在はstyle=”color: #000000″と黒になっていますが、『#000000』の部分を変更すれば好きな色に変更できます。

カラーコード一覧はこちらから。

メニュー１〜６の部分も好きなように書き換えてください。
※文字数が多いとデザインが崩れてしまうので、短く設定する。

メニューの数は奇数にすると形が崩れるので、偶数で合わせてください。

より細かくメニューを表示したい際に便利

カテゴリー内からさらに目立たせたい記事がある場合には便利です。

ぜひご参考ください。

【WordPress】SANGOでサイドバーにプロフィールを見やすくカスタマイズする方法