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

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

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

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

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

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

参考 メニューボックスをウィジェットやページに表示する方法SANGOカスタマイズ

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

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

サイドバーにロゴ付きメニューを追加する

追加したカスタム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>メニュー1</a>
  </li>
  <li>
    <a href="★リンク先URL★"><i class="fas fa-book" style="color: #000000"></i>メニュー2</a>
  </li>
  <li>
    <a href="★リンク先URL★"><i class="fab fa-maxcdn" style="color: #000000"></i>メニュー3</a>
  </li>
  <li>
    <a href="★リンク先URL★"><i class="fab fa-wordpress" style="color: #000000"></i>メニュー4</a>
  </li>
 <li>
    <a href="★リンク先URL★"><i class="fas fa-coffee" style="color: #000000"></i>メニュー5</a>
  </li>
 <li>
    <a href="★リンク先URL★"><i class="fas fa-gamepad" style="color: #000000"></i>メニュー6</a>
  </li>
</ul>

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

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

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

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

注意
バージョンや設定によっては使用出来るアイコンが異なるようなのでご注意ください。

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

FontAwesome5

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

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

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

FontAwesome5

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

FontAwesome5

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

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

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

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

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

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

参考 カラーコード一覧表HTML,CSSカラーコード一覧表|背景色や文字色の設定

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

メニューを減らしたい場合…
もし6個も必要ない場合は、<li>〜</li>の部分を消せば数を減らせます。

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



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

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

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

ぜひご参考ください。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)