イメージ画像

WP Render Blogroll Linksのカスタマイズ

この記事の所要時間: 326

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列

WP Render Blogroll Linksのカスタマイズ


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は好きな画像に


以上


あわせて読みたい関連記事

タグ

2012年10月9日 | コメント/トラックバック(0) |

カテゴリー:プラグイン

トラックバック&コメント

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

コメントをどうぞ

このページの先頭へ