気になる備忘録

VPSやWordPressの設定記録、ゲームや趣味から時事評論まで気になる事を書き残す

WordPress

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

wordpress-logo-002

投稿日:

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

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

 

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

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

スポンサードリンク

1.BizVektor標準機能で作成できるか試す

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

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

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

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

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

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

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

161114_ss3

そして表示結果はこれ。

161114_ss4

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

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

2.固定ページにRSSエントリーを表示させてみよう!!

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

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

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

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

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

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

使い方

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

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

161114_ss5

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

【表示オプション】

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とタグの格闘をしてました・・・)

3.CSSを使ってデザインを

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

参考ページ
ノートのように罫線(下線)を引くデザインの作り方
( https://allabout.co.jp/gm/gc/24003/ )

 

結果

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

スポンサードリンク

広告

広告

-WordPress
-, ,


comment

メールアドレスが公開されることはありません。

関連記事

wordpress-logo-001

スマホ用デザインの難しさ

久しぶりにブログのカスタマイズをしてみたんだけど、その際、スマホ用のデザインを確認してみたら色々と大変な状況になってた。 スポンサードリンク 記事がはみ出す 自分の使っているスマホは、これ NTTドコ …

wordpress-logo-001

WordPressで記事が表示されない状態に陥った話

4月15日の夕方頃から、WordPressが謎の動作不良になってしまい 6時間近く悪戦苦闘してました。 ひたすら、検索、検索、検索 しまくって、結局当てはまる解決策にたどり着けず 最後の手段でとってお …

wordpress-logo-002

子テーマを利用してみる

タグとCSSとの関連性がだいぶ判ってきたので、もうすこし大胆にデザインをいじってみたくなってきた。 そこで、デザインをいじる際にWordPressで推奨されている子テーマを作成してのカスタマイズに挑戦 …

wordpress-logo-001

マルチサイト化したwordpressのファイルアップロード制限

今まで画像をアップロードする際に制限に掛かったことがなかったので気にしてなかったんだけど、ついさっき アップロード出来なかったので 制限を上げる事に。 検索して出てくるのは、レンタルサーバーの事ばかり …

wordpress-logo-002

RSSの記事投稿日がUTC?

今の所、このブログのみの運用だけど いずれはテーマ毎に何種類かコンテンツを作成しようと思ってて  サイトトップに更新情報 として RSS を元に投稿内容の概要を表示するよう構成中。 そんな中、ふと 一 …

検索

管理人のシルビアです。
広島県在住。
熱しやすく冷めやすい慎重派。
興味のある事はトコトン調べてから行動。始める前に冷める事も・・・