WordPressでサイドバーにリンク（ブックマーク）をウィジェットを使用して表示させる

こちらのサイトはトップページにのみサイドバーに「ブックマーク」を表示しています。
CSSも指定して、他となじむようにして一件落着！と思っていたら、リンク先が同じウィンドウで開くことに気づき慌てました！
今日はサイドバーにリンクを表示させる方法についてご案内したいと思います。

ブックマークの一覧をウィジェットを使用して表示させる

リンク用のメニューを追加する

開く「外観」「メニュー」

1. 「新規メニューを作成」をクリックします。



2. メニュー名に任意の名前を入力して「メニューを作成」をクリックします。

メニューの表示オプションを変更する

1. 画面上にある「表示オプション」を開いて「詳細設定メニューを表示」から以下にチェックをつけます。

カスタムリンクを追加する

1. タイトル属性：マウスポインタを重ねた時に表示される文字
2. 自分とリンク先の関係/間柄：自分の所有サイトには「me」と入力



3. すべてのリンクが追加できたらメニューを保存します。

サイドバーにウィジェットを追加する

開く「外観」→「ウィジェット」

1. 「ナビゲーションメニュー」を選んで、サイドバーの表示したい位置へ追加します。



2. 任意のタイトルを入力し、メニューの一覧から「リンク」を選択し保存をクリックします。

サイドバーに「リンク」の一覧が表示されているのを確認する

CSSを調整する

先頭にFontAwesomeアイコンを表示

/*ブックマーク一覧 */
#side ul.menu li:before {
	content: "\f08e";
	font-family: FontAwesome;
	margin-right: 7px;
	display: inline-block;
	color: #E44D26; /* アイコンの色 */
}

リストに下線を引く

#side .widget_nav_menu ul li{
	border-bottom: 1px solid #e9e9e9;
	list-style: none outside;
}

あとがき

現在のWordPressのバージョンは4.9.1ですが、以前のバージョンには標準でリンク機能があったそうです。

今もプラグインLink Managerをインストールすれば追加することができますが、プラグイン自体が全く更新されていないので、セキュリティ面を考えても、どちらかというと使わない方がいいのかもしれません。
試しに使ってみたら、私がやりたいと思っていたことが全部できました。

画像サイズを小さくしたり、と少しCSSで調整しましたが、きれいに並びますね。
並び順を「ランダム」にしておくと、ページを読み込むたびに順番が変わっていて新鮮ですw
もちろん自由に順番をコントロールすることも可能ですし。
たまたまお役所のサイトをリンクしてみて驚きました。まだSSL化されてませんよ！そんなものなんですね。