RSSフィードをサイトに表示するjQueryプラグイン「zRSS」

「Google Feed API」を使うよりは、手軽な感じがします。パフォーマンスに関しては不明です。

プラグインのダウンロードと設置

RSS Feeds Reader Plugin for jQuery – Zazar Online Website Builder

Downloadから最新版をダウンロードして下さい。

ダウンロードしたら、jsファイルをheadで読み込ませておきます。(jQuery1.7.2で稼働確認済)


スクリプトの記述とオプション設定

続けてhead内に以下を記述します。

<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('RSSのURL', {
limit: 5
});
});
</script>

オプションで表示件数を5件にしてあります。(limit: 5)


RSSを表示させたいところに以下を記述します。

<div id="test"><p>Loading…</p></div>

id名は適宜変更して下さい。


オプションの詳細については「RSS Feeds Reader Plugin for jQuery – Zazar Online Website Builder」で確認できます。

例:表示件数5件。ページタイトル非表示。HTML表示。記事タイトルをh3に変更。日付非表示。

<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('RSSのURL', {
limit: 5,
header: false,
snippet: false,
titletag: "h3",
date: false
});
});
</script>

もしも訪問者100/日のサイトに、検索連動型広告を設置したら

訪問者数レポート

すみません、訪問者数ちょっと盛りました。あとタイトルが香ばしくてごめんなさい。

期間と詳細と結果

  • 期間:2012年4月12日~19日
  • 掲載広告:ジェイ・リスティングad
  • サイトジャンル:まとめ系
  • 広告配置:
  • レイアウト


  • 結果:PV1600、クリック数1
  • ジェイ・リスティングtest

メモ:

  • ジャンルに沿った広告、または単価の高いアフィ広告をテストする。
  • アフィ用コンテンツを増設する。
  • Adの情報公開範囲が不明。

Feed43の使い方

※生成したRSSフィードには、Feed43のリンクが挟まります。「Yahoo!Pipes」の代替サービスとして覚えておく程度のメモです。Pipesに食わせる用のフィードだとタイムラグが気になるので、面倒でも最初からPipesで生成したほうがいいと思います。

Feed43 : Convert any web page to news feed on the fly

チュートリアル:Feed43 : Tutorial(英語)

手順

  1. Create your own feed をクリック
  2. URLを入力してReload
  3. Global Search Pattern で読み込む場所の、初めと終わりを指定。

  4. 【例】初め{%}終わり→

    <h1>Local news:</h1>{%}<h1>
  5. Item (repeatable) Search Pattern で取得する部分(繰り返し部分)を指定。

  6. 【例】

    <h2>{%}</h2>{*}<a href="{%}">{*}</a>{%}<h2>
  7. Extra で取得アイテムを確認。ちゃんと取得できると、{%N}に情報が振り分けられる。

  8. 【例】

    {%1}=URL
    {%2}=aタグではさまれた文字列
  9. Define output format でフィードの出力形式を定義する。
    • profile は適当。
    • properties にはそれぞれ該当する{%N}を入力。
    • Preview で表示を確認。XML 形式で出力される。

リンクのみの取得(本文取得がよくわからなかった)なので、「ふるふぃーど」などの全文配信化サービスで、本文の表示もできます。

「Twenty Eleven」の日付リンクを削除

外観のテーマ編集からfunction.phpを開きます。

function twentyeleven_posted_on() {
	printf( __( '<span class="sep">Posted on </span><a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s" pubdate>%4$s</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="%5$s" title="%6$s" rel="author">%7$s</a></span></span>', 'twentyeleven' ),

以下の箇所を変更します。

  • 「posted on」を「投稿日:」
  • リンクタグの削除
function twentyeleven_posted_on() {
	printf( __( '<span class="sep">投稿日:</span><time class="entry-date" datetime="%3$s" pubdate>%4$s</time><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="%5$s" title="%6$s" rel="author">%7$s</a></span></span>', 'twentyeleven' ),

RSSフィード全文配信化サービス比較

結論から言うと、「ふるふぃーど」が最強。

まるごとRSS

日本語でシンプル。もっとも分かりやすいが、広告有り

ふるふぃーど

日本語で件数指定ができる。広告なし。

Full Text RSS Feed

英語。URLを入れるだけで全文化。取得を失敗することが多い。


代替サービスは、いくつか用意しておいたほうが安心。

RSSをTwitterBotでTLに流すライフハック

いくつかのRSSを購読していますが、溜まる一方でまったく処理できません。

Choromeの拡張機能で、件数を表示させたりしたのですが、それでも減らず、なんとかしようと思い、TwitterタイムラインにRSSを流すことにしました。少しは読むようになったと思います。

1.Bot用のTwitterアカウントを取得

Bot用のアカウントを取得してください。自分専用なので私は非公開にしました。

2.「twitterfeed.com」でBot用のアカウントにRSSを送信

  1. twitterfeed.com」にログインし、「Create New Feed」をクリックします。

  2. TwitterFeedログイン後

  3. FeedのURLと名前(適当)を入力し、testをクリックします。OKが出たら次のステップです。

  4. RSSの登録

  5. Botアカウントの登録を行います。

  6. Botアカウントの登録

    一度登録すると、次回からはプルダウンでアカウントを指定できます。

    BotアカウントのOAuth認証

    アカウント名が表示されていれば登録は完了です。

    Botアカウント登録完了

    トップページのダッシュボードで、登録RSSが確認できます。

    Botアカウントの登録確認

あとで読もうと思って、ふぁぼばかりしているので、状況はあまり変わってないのが、実際のところです。

RSSBot表示例

少々手間ですが、情報収集をTwitterに一元化できるのは便利だなと思いました。

※「RSSFeed」の代替サービス「dlvr.it : feed your blog to twitter and facebook」というのもある。

Twenty Eleven の基本カスタマイズ(サイドバー、パンくず、ページナビなど)

単一記事にサイドバーがないのですが・・・

専用カスタマイズプラグイン「Twenty Eleven Theme Extension」を使う。

  1. プラグインをインストールして有効化。
  2. 外観>Theme Extensions
  3. 上の2つにチェック。

参考:Twenty Eleven のシングル記事にサイドバーを1分で表示する2つの方法 | 8bitodyssey.com

素敵なパンくずリストをつけたい

今回は「WordPress Bootstrap CSS」というプラグインを使って、Twitter風のパンくずリストを実装します。

初めに、「WordPress Bootstrap CSS」を導入します。

  1. 「WordPress Bootstrap CSS」をインストール。
  2. 有効化し、一番上のバージョン(Twitter Bootstrap CSS)を選択。
  3. オプションのショートコードにチェックを入れる。

次に、パンくずリストを実装します。

参考:パンくずリストをTwenty Elevenテーマにプラグインなしで導入する方法+Twitter Bootstrap – はじめよう

「the_breadcrumb(); 」を、それぞれのテンプレートの「printf」前に配置すると、いい感じで表示されます。

単一と固定ページを「<div class=”page-title”>< ?php the_breadcrumb();?></div>」とすると、他のページともスタイルが揃います。

かっこいいページナビをつけたい

「WordPress Bootstrap CSS」が導入されているので、続けてこのスタイルを使います。

参考:ページ切り替えメニュー(Pagination)をTwenty Elevenテーマにプラグインなしで導入する方法+Twitter Bootstrap – はじめよう

First,Lastが外されてるので、つけなおしてもいいかもしれない。

ヘッダーの余白、取り過ぎ・・・

上部の余白などを削除します。

参考:Twenty Elevenのヘッダーをカスタマイズする | Webコンサルティング

記事中の見出しを目立たせたい

border-left: 5px solid #好きな色;

「Jing」→「Flickr」→「WordPress」でポストテスト

2012-04-06_1717
「オリジナルサイズが許可されていない。」と出てる。
Flickrの設定で、「不特定多数からのダウンロードを許可する」にしないとだめらしい。
プロアカウントでないとダウンロード許可ができない?


light box もうまくいかない?いや、そんなことなかった。

2012-04-06_1717

2012-04-06_1717
サイズ指定に難有り。しかし、Jingの画像編集機能は優秀。


2012-04-06_1717

WordPressを入れたら最初にやること

忘れっぽいので、目についた順でメモ。

コードとかをイジるのは億劫怖いので、やっとかないと後で困りそうなヤツだけ。必須プラグインについては別ポスト。

1.キャッチフレーズ(サブタイトル)の設定

設定>一般設定>キャッチフレーズ

2.デフォルトの「投稿」「リンク」「固定ページ」を削除

  • 投稿>投稿一覧>サンプルをゴミ箱へ(コメントも一緒に消える)
  • リンク>すべてのリンク>一括で削除
  • 固定ページ>固定ページ一覧>サンプルをゴミ箱へ

3.PING送信先の追加

設定>投稿設定>更新情報サービスのとこに追加する。
(効力がイマイチよく分かっていない)

4.RSSを一部表示にする

設定>表示設定>下の方の「抜粋のみを表示」にチェック
(どっちでもいいかもしれないけど一応)

5.自動ピンバックの解除

設定>ディスカッション>一番上の「この投稿に含まれるすべてのリンクへの通知を試みる」のチェックを外す。
これ外しとかないと、痴態を晒すことになるよ。こわいよこれ。

6.単一記事のURLを設定

設定>パーマリンク>カスタム構造に「/%year%/%monthnum%/%postname%.html」を入力
(年・月・タイトルになる。後で変えるとリンクジュースうんたらだから、初めに。)

7.ビジュアルエディタ-を無効化

ユーザ>あなたのプロフィール>「ビジュアルリッチエディターを使用しない」にチェック。

「ExpressWeb」でのWordPress設定方法

ExpressWebのコントロールパネルから、アプリケーションギャラリーを選択。
1333349025687.png

ドロップダウンから日本語版を選択し、WordPress日本語版パッケージのインストールをクリック。
1333349232796.png
1333349434547.png

次へを押すとダウンロードが開始される。
1333349564530.png

項目はそれぞれ、

  • Webサイトにインストール:該当するドメイン
  • 仮想ディレクトリ:空
  • データベース:MySQL5
  • 新しいデータベース
  • Database name:好きなの
  • Database username:好きなの
  • Database password:好きなの
  • 以下固有フレーズ:好きn(ry

完了画面が表示されインストール完了。

ドメインにアクセスして、タイトル、ユーザ名、パスワード、メールアドレスを登録。