RSSを利用して、ブログの更新状況を表示

ブログ工房のHPに、このブログの更新情報を載せるように設定。
今後作成するブログも同様にリスト化して表示する予定なんだけど・・・どうしてもデザインがダサくて悲しい。　ほんとセンス無いんだよなぁ。

CSSとHTMLタグの関連を調べながら何時間も掛けてようやくそれっぽく表示できたのがコレ。

ここまでくるのに苦労したのに、なんだかデザインが古い感じ。

それはともかく、表示までの手順とプラグインをメモとして残しておこう。

１．BizVektor標準機能で作成できるか試す

BizVektorには、トップページにブログの新着載せたり、外部RSSから新着載せるウィジェットが標準で搭載されてるので試してみる。

BV_トップ用_ブログリスト　ウィジェットを試す

これは　基本的には自サイトのブログ（デフォルトではスタッフブログ）に対して新着リストを表示する機能となってる。
だけど、設定部分を見てみると　ブログURLを入力できるので　このブログのURLを入力して試してみる。

ダメうまく表示されない。

たとえこれがうまくいったとしても、重大な欠点がある。
ウィジットを、2つ目、3つ目と追加しても、このURL設定部分は１つしかないのである。
表示形式はこんな感じで結構気に入ってるんだけどなぁ。

BV_トップ用_RSSエントリー　ウィジェットを試す。

これは、多分想定通りの動作はしてくれるだろう。
今やろうと思ってる　ブログ更新を表示する　為のウィジェットなんだから。
あとは、表示項目をどれだけ制御できるかに期待。なんだけど・・・設定項目はこれだけ。

そして表示結果はこれ。

シンプル。超絶シンプル！！　どう考えても、サイドバー用だよね。せめて記事の抜粋くらいは表示したい。
多分ウィジェットのphpを触れば色々カスタムできるんだろうけど、デザイン修正の為に毎回phpを修正ってのは効率悪いよね。

ということで、BizVektor標準機能での作成は断念。

２．固定ページにRSSエントリーを表示させてみよう！！

BizVektorの売りでもある、ページトップに固定ページを配置。
これを利用して、固定ページにRSSエントリーを呼び出して表示できれば　他の箇所をHTMLで装飾したり、自由に編集もできて便利な気がする！！！
HPな訳だから、phpを埋め込むのはなんの問題もないハズ。

という訳で、色々と調べると素敵なプラグインの存在を確認！

RSSImport
PHP、ウィジェットまたはショートコードを使用して、ブログにフィードをインポートして表示します。プラグインは標準のWordPress機能しか使用しないので、外部ライブラリは必要ありません。

プラグインのインストール

特に変わった操作は不要。他のプラグインと同様にプラグインの検索で「RSSImport」で検索⇒プラグインの有効化　でok

このプラグインには特に設定画面などはありませんので、すぐ使えます。

使い方

RSSを表示したい固定ページなどで以下のコードを入力

又はWordPressのエディタをテキストに切り替えてRSSImportボタンを押すと全部のオプションが記入されたコードが貼り付けされます。

必要に応じて、オプション項目を設定。不要なオプションコードは省略できます。

【表示オプション】

display …… 表示するアイテム数（初期設定は5）
feedurl …… フィードのURL
before_desc …… 説明文の前に付ける文字列
displaydescriptions …… trueで説明文を表示する（初期設定はfalse）
after_desc …… 説明文の後に付ける文字列
html …… trueにすると説明文にHTMLを含ませることができます（初期設定はfalse）
truncatedescchar …… 説明文の最大文字列（初期設定は200）
truncatedescstring …… 説明文を切り捨てたあとに付ける文字列（初期設定は…）
truncatetitlechar …… タイトルの最大文字数
truncatetitlestring …… タイトルを切り捨てたあとに付ける文字列（初期設定は…）
before_date …… 日付の前に挿入する文字列（初期設定は<small>）
date …… trueで日付を表示（初期設定はfalse）
after_date …… 日付の後に挿入する文字列（初期設定は</small>）
date_format …… 日付の表示フォーマットを指定
before_creator …… 投稿者の前に挿入する文字列（初期設定は<small>）
creator …… trueで投稿者を表示（初期設定はfalse）
after_creator …… 投稿者の後に挿入する文字列（初期設定は</small>）
start_items …… リストの項目の前に付ける文字列（初期設定は<ul>）
end_items …… リストの項目の後に付ける文字列（初期設定は</ul>）
start_item …… 各項目の前に付ける文字列（初期設定は<li>）
end_item …… 各項目の後に付ける文字列（初期設定は</li>）
target …… ターゲットの設定
rel …… rel属性を設定
desc4title …… title属性で使用（初期設定はfalse）

実は、このオプションが肝で各項目の前後に付ける文字列を上手く組み合わせて　CSSと連携させると、色々と凝った表示方法に出来るのです。

最初は、色々試行錯誤して各項目にタグを付けたりしてたけど、実は初期値のままでも、ほぼ全項目別タグでくくられてるので　このコード自体を<DIV>タグでくくってCSSを書いてやれば、デザインできちゃうんですよね。
（自分は、気づくまでに丸1日くらい、CSSとタグの格闘をしてました・・・）

３．CSSを使ってデザインを

何かイイ表示方法はないかな？と検索してたときに目に付いた「ノートのように罫線(下線)を引くデザイン」　を利用してみることに。
CSS関連はまだ理解しきってないので　リンク先の解説でお楽しみください。

結果

以上の様な手順を経て、冒頭のSSのようなデザインでRSSを表示する事ができました。