【WordPressカスタマイズ】サイドバーに簡単にリンクリストを設置する方法

こんにちは、ぽこみちです。

今回紹介するのは、僕のサイトのサイドバーに設置しているリンクリストの設置方法です。

《リンクリストの完成形》

リンクリスト

このサイトのテーマはSANGOを利用しているのですが、同じくSANGOを使っている人はカスタムHTMLに紹介するソースを入力するだけで簡単に設置ができます。

ただ、今回は他のテーマを利用している方向けにCSSも紹介しますので、必要な人は是非活用してください。

リンクリストの設置方法

ここからはSANGOとそれ以外の場合に分けて導入方法を説明していきます。

SANGOを利用している人

SANGOを使っている人は特にCSS等の編集は必要ありません。

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="リンク"><i class="fas fa-mobile-alt" style="color: #ff9191"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fab fa-app-store" style="color: #FFD700"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fas fa-desktop" style="color: #ffb776"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fas fa-edit" style="color: #92ceff"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fas fa-suitcase" style="color: #77d477"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fas fa-torii-gate" style="color: #ff0000"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fas fa-hot-tub" style="color: #f7952d"></i>メニュー名/a></li>
<li><a href="リンク"><i class="fas fa-running" style="color: #92ceff"></i>メニュー名</a></li>
</ul>
メモ

各アイコンの色はstyle="color: #ff9191"この部分を編集すると変えることができます。

また、メニューの数も<li>〜</li>の部分を増減させることで変更できます。

各アイコンはFont Awesomeで検索して、コードをコピーして利用しましょう。

Font Awesome

SANGO以外のテーマを利用している人

SANGO以外のテーマを利用している人は、まずCSSを編集する必要があります。

style.cssにソースコードを追記する

テーマによっては重複箇所もあるかもしれませんが、下記ソースをstyle.cssに貼り付けます。

WordPress管理画面「外観 ⇒ テーマエディター ⇒ 右側のバーのスタイルシート(style.css)」からも編集できますが、個人的にはFTPソフトを使うのがおすすめです。

※編集する場合は、子テーマを作成するのがいいですよ。

style.css
.widget-menu__title {
padding: 10px;
font-size: 1.1em;
color: #fff;/* お好みの色に変更してください。 */
}
.ct {
text-align: center;
}
.main-bc {
background-color: #6bb6ff;/* お好みの色に変更してください。 */
}
.widget ul {
margin: 0;
padding: 0;
}
.widget-menu {
text-align: center;
}
.widget ul li {
margin: 0;
font-weight: bold;
list-style: none;
}
.widget-menu li {
float: left;
width: 50%;
border-bottom: solid 2px #efefef;
font-size: 12px;
vertical-align: middle;
background: #fff;
}
.widget-menu li:nth-child(even) {
border-left: solid 2px #efefef;
}
.widget ul li a {
display: block;
padding: 7px;
color: #626262;
text-decoration: none;
transition: 0.3s ease-in-out;
}
.widget ul li a:hover {
background: #efefef;
text-decoration: none;
}
.widget-menu i {
display: block;
font-size: 3em;
}
.cf:before, .cf:after {
display: table;
content: "";
}
.cf:after {
clear: both;
}

ウィジェットでカスタムHTMLを導入、編集する

style.cssの編集が完了したら、後の手順はSANGOと同じです。

補足は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="リンク"><i class="fas fa-mobile-alt" style="color: #ff9191"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fab fa-app-store" style="color: #FFD700"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fas fa-desktop" style="color: #ffb776"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fas fa-edit" style="color: #92ceff"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fas fa-suitcase" style="color: #77d477"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fas fa-torii-gate" style="color: #ff0000"></i>メニュー名</a></li>
<li><a href="リンク"><i class="fas fa-hot-tub" style="color: #f7952d"></i>メニュー名/a></li>
<li><a href="リンク"><i class="fas fa-running" style="color: #92ceff"></i>メニュー名</a></li>
</ul>

補足:アイコンが表示されない場合の対策

アイコンが表示されない場合は、サイト自体でFont Awesomeの読み込み準備ができていない可能性があります。

その場合はheader.phpに該当のソースコードを追記する必要があります。

header.php
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

「外観 ⇒ テーマエディター ⇒ 右側のバーのheader.php」または、FTPソフトでheader.phpの<head>〜</head>の間に上記ソースを貼り付けてください。

場所がわからないときは</head>の直前に貼り付けておけば問題ないですよ。

まとめ

いかがでしたか?

サイトを少しカスタマイズしたい人の参考になれば嬉しいです。

SANGO以外のテーマを使っている場合、ちょっとstyle.css(もしかしたらheader.phpも)触る必要があるのでハードルが高いかもしれませんが、一度触ってみると簡単なので、サイドバーにちょっとデザイン性あるメニューリストを入れたい人にはおすすめですよ。