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

ウィジェット

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

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

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

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

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

  3. メニュー名に任意の名前を入力して「メニューを作成」をクリックします。
  4. Create a new menu

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

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

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

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

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

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

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

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

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

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

bookmark-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;
}

bookmark-3

あとがき

現在のWordPressのバージョンは4.9.1ですが、以前のバージョンには標準でリンク機能があったそうです。
Dashboard
今もプラグインLink Managerをインストールすれば追加することができますが、プラグイン自体が全く更新されていないので、セキュリティ面を考えても、どちらかというと使わない方がいいのかもしれません。
試しに使ってみたら、私がやりたいと思っていたことが全部できました。
bookmark
画像サイズを小さくしたり、と少しCSSで調整しましたが、きれいに並びますね。
並び順を「ランダム」にしておくと、ページを読み込むたびに順番が変わっていて新鮮ですw
もちろん自由に順番をコントロールすることも可能ですし。
たまたまお役所のサイトをリンクしてみて驚きました。まだSSL化されてませんよ!そんなものなんですね。

0
この記事を書いた人
どらみ

パソコン歴はWindows98からの元パソコンインストラクターです。以前はMS Office系のソフトウェアを主に教えていました。 今はWordPressのテーマLuxeritasにはまっています♪ 質問されると、つい親身になってしまう自称「ポジネガ人間」です。

応援する にほんブログ村 ブログブログ ブログノウハウへ