WP Render Blogroll Linksのカスタマイズ

WP Render Blogroll LinksはWordPressのリンク機能を使って登録したサイトを指定したページ（固定ページなど）にリンク集として一覧を自動的に作成してくれるプラグイン

【参考記事】
WP Render Blogroll Links（リンク集を作成・設置するプラグイン）

WP Render Blogroll Linksのショートコードにパラメータを付けることで自分の好きなように表示方法が変えられる。
さらにスタイルも変更し以下のように表示することもできる。

【該当ページ】
My Bookmark（リンク集）

WP Render Blogroll Linksのカスタマイズ方法

多少アナログ的なやり方ではあるが、以下のようにカスタマイズできる。

・縦1列の表示　→　横2列に変更
・リンクカテゴリー名の前にフォルダなどの画像を表示する
・最初の1回だけ設定すれば後は自動で表示してくれる

リンクカテゴリー名を決め、最初の1回だけ該当ページ（リンク集ページ）に設定すれば後はリンクを追加するたび自動で一覧が表示される。

使用するショートコード

今回は、リンクカテゴリーの数だけそれぞれショートコードも使用する。（カテゴリーが5個あればショートコードも5個使う）

▼ショートコード

ショートコードの説明

・catname=”カテゴリー名”　→　一覧を表示するカテゴリー名
・notitle=1　→　タイトル非表示
・forcerel=”nofollow”　→　nofollow属性をリンクに付ける

※［←と→］のカッコは半角に変更する
※「カテゴリー名」は自分のカテゴリーに変更する

スタイルの設定

テーブルタグを使って横2列で表示する。

列数：2
行数：2
見出し：上1列

thタグ：リンクカテゴリー名を入力
tdタグ：ショートコードを入力

▼HTMLコード

<div class="mybookmark">
<table>
<tr>
<th>レンタルサーバー</th>
<th>独自ドメイン登録代行業者</th>
</tr>
<tr>
<td>［wp-blogroll catname=”レンタルサーバー” notitle=1 forcerel=”nofollow”］</td>
<td>［wp-blogroll catname=”独自ドメイン登録代行業者” notitle=1 forcerel=”nofollow”］</td>
</tr>
</table>
</div>

※［←と→］のカッコは半角に変更する
※「カテゴリー名」は自分のカテゴリーに変更する

▼cssコード

/*リンク集ページ*/
.mybookmark table {
width: 100%;
margin-bottom: 30px;
}

.mybookmark td {
text-align: left;
vertical-align: top;
width: 50%;
}

.mybookmark th {
padding: 10px 0 10px 28px;
text-align: left;
vertical-align: top;
background: url(画像URL) left center no-repeat;
font-size: 13pt!important;
}

※画像URLは好きな画像に

以上

WordPress、プラグイン

この投稿のトラックバックURL: