リンク集を簡単作成「WP Render Blogroll Links」

WordPressの「リンク」メニューを使って、とても簡単にリンク集ページを作れるプラグインを発見しました。もちろん「ページ」にサイト名や概要を書き、リンクを貼る、っていう手もありますが、ちょっと面倒。自動で体裁も整えたいし……。

で、このプラグイン「WP Render Blogroll Links」。通常のプラグイン同様、サーバーにインストールして、管理画面で有効化。

使い方は……

リンク先の情報を入力.管理画面の「リンク」メニューから、リンク集の情報をアップする。

入力する項目は、表示させたい項目となるけれど、少なくともリンク先のサイト名とウェブアドレスは必須ですよ、やっぱり(笑)。

あと、私は「説明」と「リンクターゲット」、詳細の「画像のアドレス」を使いました。

「説明」は、リンク先の概要。サイトタイトルとあまりマッチしていないコンテンツとか、全然想像出来ない内容……というのもありますから。

「リンクターゲット」は「 _blank」。新規ウィンドウは、右クリックでコントロールできるので、コントロールできない同一ウィンドウの設定が良いのだ、という意見もあるけれど、私が便利と思うのは、サイト内は同一ウィンドウ、外部サイトは新規ウィンドウ。なので、この設定。

「画像のアドレス」は、予めFTPソフトでアップロードしてある画像のパスを入力。サムネールなどの機能はないので、表示サイズそのままの画像を用意する。私は100px×100px。
新規ページにコードを.新規のページにリンク情報を読み出すためのコードを1行書く(コピペ)。

私は概要(description)を表示させたいので、

[wp-blogroll showdesc=1](カッコは全角にしてあります)

表示のさせ方が沢山ありますので、かなり自分好みに出来るとおもいます。

詳しい説明とコードはこちら

出来上がったリンク集.こんな感じに出来上がり!

いや待って、まだあった。上記で一応、リンク集のページは出来るけれど、あまりにも素っ気ない。

それにテキスト量が少ないと、次の画像が食い込んでくるし……。

なので、チョコッとスタイルシートで格好を付けてみました。

<li class=”brlink”>リンク情報</li>(カッコは全角にしてあります)と、brlink で括られているので、下記のように……。

.brlink{
min-height:104px;
border-bottom: dotted 1px #999;
clear:both;
padding-bottom:5px;
margin-bottom:5px;
}

追記 テキストを右側に回り込ませる。

.brlink img {
float: left;
padding-right:5px;
}

出来上がったリンク集のページ

WP Render Blogroll Links のダウンロードはこちら

コメント

  1. どらごん より:

    WordPressを中心にWEBデザイン関連のリンク集を自分なりに作ろうとしていたところ、プラグインを使った方が便利と考え検索しており、こちらのサイトにたどり着きました!
    とても参考になりました。まだカスタマイズはできてないですが、早速導入させて頂きました。このプラグインのことを記事にして頂き感謝です!

  2. marimo より:

    どらごんさん

    コメント、ありがとうございます。お役に立てて、本当に嬉しいです。

    私もどらごんさんのサイトで教えてもらう事があると思うので、どうぞよろしくお願いします。

    ところで、リンクページのテキストが画像の下辺から始まっていますけれど、私は下記のようにして、上辺から流すようにしています。上記の記事に、その部分のCSSを書き忘れてしまいました。

    .brlink img {
    float: left;
    padding-right:5px;
    }

    とか書くと、テキストが右に回り込んで良いかな、と思います(今から追記します)。

  3. iRailgun より:

    こんにちわ。WordPressでリンクを作成できるプラグインを探してたどり着きました。
    こちらで丁寧に導入方法が載せてあったので導入してみたのですが、このサイトのリンク集のように画像の説明が上から始まりません。
    上に記載されていたものをスタイルシートの末端にコピペしたのですが、ボーダーライン等は反映されるのですが、回り込みがうまくいきません。とても便利だと思うのでで導入したいのですが、ここをミスしているというような場所はありませんでしょうか?

    Style.css

    リンク集:

  4. iRailgun より:

    上記のようにstyle.cssに書き込みをしましたが、画像を回りこんでテキストが表示されません。
    ボーダライン等は表示されるのですが、なぜなんでしょう?
    教えていただけませんか?

  5. marimo より:

    iRailgunさん

    お返事が遅くなってすみません。珍しく「主婦」をやっていたもので……。

    お尋ねの件ですが、私の記述ミスでした。お手間と時間を取らせて本当に申し訳なく思っています。

    .brlink img {  ← 正解

    .brlink img {  ← ミス記述 imgの前が全角(2バイト文字)になっていました。

    .brlink縲img {  ← iRailgunさんのスタイルシートの記述(上記のコピペ&文字コードがSHIFT-JISで全角スペース文字化け)

    スペースを半角にすれば、テキストが右に回り込みます。記事も訂正しました。

    お待たせ&記述ミス、重ねてお詫びします。
    上記で上手くいかないなど問題がありましたら、ご連絡ください。

  6. より:

    リンク集をこちらのサイトを参考に作成致しました。
    とってもわかりやすかったです。
    ありがとうございました。

  7. marimo より:

    わざわざの書き込み、ありがとうございます。私も嬉しいです。
    都さんの「あみものぺーじ」サイト、キレイで可愛くてセンス抜群。
    参考になる部分もたくさんありました。
    ちょくちょくおじゃまさせていただきます。

タイトルとURLをコピーしました