サイドバーのリンクをリンクウイジェットではなくテキストウイジェットに書いてみた。

スポンサー

サイドバーにリンク（ブックマーク）を表示する時、リンクウイジェットを追加すれば、ダッシュボードのリンクで追加したブックマークが表示されます。

今まで、このやり方で表示していたんですが、このリンク全体に対してクラスを付加した状態にしたかったので、以前リンク集を固定ページとして追加したときのことを思い出しながらテキストウイジェットに追加してみました。

PostSnipetsに追加

<?php wp_list_bookmarks('title_before=<h4>&title_after=</h4>&show_images=0');?>

プラグイン：WordPress › Post Snippets « WordPress Plugins

テキストウイジェットを追加

<ul class="bookmark">
お友達
	

whiteroseの日々
◆◇LOHASちっく◇◆
いくもん姉妹の日々♪
つばめ屋、日々ありがとう
ケダマ画報
サロン・ド・ライン
光と・・風を感じて・・・♪
花の散歩道
薔薇の館

	

ポイントサイト
	

Get Money（ゲットマネー）
ポイントサイト ちょびリッチ

	

作成サイト
	

whiteroseの日々
サロン・ド・ライン
ステンレス周南(株)
新南陽若山ライオンズクラブ
有限会社　アリイ
生活サポーターおりづる
社会福祉法人つくし園
社会福祉法人ひとつの会
花の散歩道
菓子工房　ボン・クラージュ！
薔薇の館

	

山口県関連
	

山口ブログ

	

応援してます！
	

新南陽若山ライオンズクラブ
農業生産法人㈱ロカヴォ

	

猫ブログ
	

かご猫　blog
くり(猫)もっと元気になぁ～れ☆
こころとからだがかたちんば
しゃべるねこ、しおちゃん
ねこ日和-別館-
ケダマ画報
ネコネコブログ
ファラオたちの日常
湾岸猫玉家

	


</ul>

 

リンクウイジェットの使い方をお探しの方はこちらをどうぞ♪
リンクウィジェットの有効化 – WordPressの使い方

HTML

吐きだされるHTMLは以下になります。

<li id="text-56" class="widget-container widget_text">
<h3 class="widget-title">BookMarks &amp; Thanks</h3>
<div class="textwidget">
<ul class="bookmark">
<li id="linkcat-28" class="linkcat"><h4>お友達</h4>
<ul class='xoxo blogroll'>
<li><a href="http://rose.hughughag.net/" title="whiteroseの日々　びっくりする程豪勢な食卓事情や趣味のプリザーブドフラワー作品やガーデニングのことや・・・楽しいブログですよ♪ねこもりや作。" target="_blank">whiteroseの日々</a></li>
<li><a href="http://memepi.blog86.fc2.com/" title="◆◇LOHASちっく◇◆　Ｌifestyle　Ｏf　Ｈappy　Ａlcohol　Ｓatisfaction ぐうたら独身女の日常。と題されたとってもおもしろおかしいHappyになれる癒しブログ" target="_blank">◆◇LOHASちっく◇◆</a></li>
<li><a href="http://ameblo.jp/toramomoe/" title="つばめ屋、日々ありがとう　姪っ子のブログ　つばめ一家の日々が綴られています♪" target="_blank">つばめ屋、日々ありがとう</a></li>
<li><a href="http://kedamagaho.blog64.fc2.com/" title="ケダマ画報　「家庭画報」をもじったようなブログタイトルが妙に癒されます。ケダマさんのセンスの感じられるあったかいサイトですよ！" target="_blank">ケダマ画報</a></li>
<li><a href="http://line.hughughag.net/" title="サロン・ド・ライン　岩国市周東町の片田舎のちいさなちいさな美容室サロン・ド・ライン。日々のちょっとしたできごとや思うこと感じたこと思いつくままに。" target="_blank">サロン・ド・ライン</a></li>
<li><a href="http://yellowcamelia.blog18.fc2.com/" title="光と・・風を感じて・・・♪　とにかく美しい写真に癒されます。元々楽天でお知り合いになった猫仲間。pansyのハンドルネームどおりの透明感あふれるページは必見！" target="_blank">光と・・風を感じて・・・♪</a></li>
<li><a href="http://masae.hughughag.net/" title="散歩道で出会った綺麗な花や空たち。" target="_blank">花の散歩道</a></li>
<li><a href="http://otake.hughughag.net/" title="花と美味しいものと旅の思い出と・・・" target="_blank">薔薇の館</a></li>
</ul>
</li>
・・・・・・
</ul>
</div>
</li>

スタイルシート（CSS）

参考までにスタイルシートを・・・

ul.sidebar ul.bookmark {
	margin:0px 0px 0px 0px;
	padding:5px 0px 5px 0px;
}
ul.sidebar ul.bookmark h4{
	background:url(img/bookmark_bg.gif);
	cursor:pointer;
	padding:10px 0 10px 10px;
	font-size: 16px;
	}
ul.sidebar ul.bookmark h4.active:after{
	content:url(img/close.png);
	margin-left:15px;
	}
ul.sidebar ul.bookmark h4:after{
	content:url(img/open.png);
	margin-left:15px;
	}
ul.sidebar ul.bookmark li.linkcat{
	margin:0 0 10px 0;
}
ul.sidebar ul.bookmark li li{
	border-bottom: 1px dashed #c7deef;
	padding-left:10px;
}

ul.sidebar ul.bookmark ul{
	display:none;
}
ul.sidebar ul.bookmark li li:last-child{
	border-bottom:none;
}

ダッシュボードに「リンク」項目が見当たらない方

wordpress3.5以上から使いはじめた方はダッシュボードに「リンク」項目がないかもしれません。

以下を参考にプラグインWordPress › Link Manager « WordPress Pluginsをインストールしてみてくださいませ。
WordPress無料テンプレートのリンクウィジェット追加 | SEO初心者の検索エンジン上位表示！WordPressでSEO対策

参考サイト

WordPress無料テンプレートのリンクウィジェット追加 | SEO初心者の検索エンジン上位表示！WordPressでSEO対策

リンクウィジェットの有効化 – WordPressの使い方

リンクをリストタグで表示するwp list bookmarks | WordPress攻略本

サイドバーをアコーディオン（折りたたみ）化したときの投稿はこちら

スポンサー

ニュースレターを購読する

このフィールドは空白のままにしてください

更新情報をメールで受け取ることができます。

メールアドレス *

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。