ホーム > WordPress > プラグイン > リンク > リンク集を簡単に作るプラグイン→WP Render Blogroll Links

リンク集を簡単に作るプラグイン→WP Render Blogroll Links

Posted on 2010年04月2日 | 6 Comments| Clip to Evernote

WordPress のリンク(ブログロール)がいっぱいで
サイドバーに表示させるにはちょっと多すぎる…。
というときに便利そうなプラグインを試してみた。

WP Render Blogroll Links

投稿やページにショートコードで簡単にリンクを表示させられて、
特定のカテゴリーだけとか、特定のカテゴリーを除くとか、
リンクの説明を表示するとか、カテゴリー名を非表示とか…
豊富なオプションが使える素敵なプラグイン。

リンク集を作る

リンク集を作る

このブログで今動かしてないので↑の画像でなんとなく想像してくださいw

インストールはいつも通りプラグインディレクトリにアップロードして有効化。
特に設定画面はないので、リンクを表示させたい投稿やページを作って
[wp-blogroll] とショートコードを書いて完成。

ショートコードにはパラメータを付けることでいろんな表示方法が。
詳しくはFaqに載ってるんだけど、試してみてたものを少しだけ紹介。

  • 「リンク」というカテゴリーだけ表示する
    [wp-blogroll catname=リンク]
    カテゴリースラッグじゃなくて日本語のカテゴリー名で大丈夫。
  • カテゴリーID1だけ表示する
    [wp-blogroll catid=1]
  • カテゴリーID1と5を表示する
    [wp-blogroll catid=1,5]
  • カテゴリー名は表示しない
    [wp-blogroll notitle=1]
  • リンクの説明を表示する
    [wp-blogroll showdesc=1]
  • リンクの下にリンクの説明を表示する
    [wp-blogroll showdesc=1 showbrk=1]
  • カテゴリーID1だけ表示しない
    [wp-blogroll excludecat=1]

他にもリンクの並び替え、カテゴリーの並べ替え、イメージの表示などなど
結構いろんなことができるみたい。

一番上の画像はどうやって作ったかというと、
リンク集を表示させるページ用にCSSを作って、
dl,dt,ddで並べてfloatさせただけ。
別にテーブルでやってもいいと思うんだけど。
参考までにソース

HTML:
  1. <div id="block">
  2. <dt>カテゴリー名</dt>
  3. <dd>[wp-blogroll catid=9 notitle=1 showdesc=1 showbrk=1]</dd>
  4. </dl>
  5. </div>
  6. <div class="clear"> </div>

こんな感じで1つのカテゴリーずつ、表示させたい数だけ並べていって、
最後にfloatを解除させるためだけのdivを適当にぶっこんで…。(非推奨w)

CSS:
  1. #block {
  2.     width:500px;
  3. }
  4.  
  5. dl{
  6.     margin:0px;
  7.     margin-right:10px;
  8.     margin-bottom:1em;
  9.     padding:0px;
  10.     float:left;
  11.     width:155px;
  12. }
  13.  
  14. dt {
  15.     font-weight:bold;
  16.     padding-top:10px;
  17. }
  18.  
  19. dd{
  20.     margin:0px;
  21.     height:400px;
  22.     padding:0;
  23. }
  24.  
  25. ul {
  26.     list-style-type:none;
  27.     padding:0;
  28.     margin-left:-30px;
  29.     margin-top:-20px;
  30. }
  31.  
  32. .clear {
  33.     clear:both;
  34. }

CSSでは使ってるテーマでレイアウトが崩れないように適当に調整して
clear:both でfloatを解除するっと。
なにげにマイナスマージンやめろよとか突っ込みどころ満載だけど
細かいことは(・ε・)キニシナイ!!

で、このスタイルシートをリンクページにだけ読み込ませるんだけども、
そういうこともさくっとできちゃう HeadSpace2 というプラグインでやってしまえばもうホント簡単。
アップロードも画像とかアップするときと同じようにブラウザでアップして
アップロードされたURLをコピーして HeadSpace の「スタイルシート」欄にペースト。

そんな感じでテキトーに作ってキャプチャしてテキトーに加工したのが
上の画像ってわけです。はい。
トップページをブログじゃなくて、ページにしてて、
自分の各サイトや関連サイトとかへのナビゲーションにしてる時に
こういうプラグインがあったら便利かなという想定で入れてみたので
このブログでは稼働してないんだけど、ショートコードも分かりやすいし
なかなか使いやすそうなプラグインなんじゃないかな。
どっかで使おうw

関連記事:

  1. サイトのどの辺をクリックされてるか調べるプラグイン
  2. Absolute Links Pluginで記事中のリンクを絶対パスに変更
  3. Broken links RemoverでBad Linksを削除
  4. lightboxで画像をかっこよく表示させる – Shadowbox JS
  5. リンクを並べ替えたり折りたたんだり

この記事は 2010年04月2日金曜日 の 9:50 PM に書きました。 
この記事のフィードはRSS 2.0で購読できます。

« | »

2 Comments for this entry

  • zakuro

    リンクページの編集どうすればいいかわかんなかったんです。
    これいいなって思いました。うまく設置できるかわかりませんが。
    わたしのサイト、リンク集を見る人けっこういますよ~。
    コメントせず、リンクのページだけすごくアクセスのあるときもあるんです。
    編集したら、訪問者もわかりやすくて使い安いでしょうね。

    • 唯奈

      >zakuroさん
      ふむふむ。
      そっか。目的のあるリンク集は役に立ちますよね。
      「お友達」とかじゃなくて、しっかりカテゴリー分けしたらリンクもコンテンツになりますよね。
      あ、ちょっとやってみたくなりました>m<

4 Trackbacks / Pingbacks for this entry

ADgger -3/3

堅実に儲かるアフィリエイト
デザイナー 求人 プログラマー 求人 コーディング ITエンジニア 求人 ソーシャルゲーム 求人 PHP 求人

ADgger2 -3/3

調剤薬局 独立支援 コピー機 レンタル レンタルサーバー 比較 高品質印刷 異業種交流会 東京 フランス 会計事務所