Archive for 11月, 2011

複数のRSSフィードをまとめて日付順に表示する方法 「Google Feed API」利用

11月 30th, 2011 by berry | No Comments | Filed in RSSフィード

wordpressの更新情報をwordpressでないページに一覧表示、
その他ブログサービスの更新情報を一覧表示する方法は「Google Feed API」の利用がおすすめです。

RSSフィードを登録するだけで簡単に一覧表示のコードを生成してくれるサービスもあるのですが、カスタマイズ性が低く、また広告入りになったりするので非常に使いづらいものでした。
「Google Feed API」はカスタマイズ性が高く、広告も表示されません。また、phpなどの特別なファイルを用意しなくてもhtmlファイル内で扱うことができるのが利点です。

「Google Feed API」を利用するには、まず「APIキー」を取得する必要があります。取得は簡単で1分でできます。

次のサイトに行き、「sign up for a API key」をクリックします。
http://code.google.com/intl/ja/apis/ajaxfeeds/

サイトのURLを入れろと言ってきますので、自分のサイトのURLを入れます。

 API keyが表示されます。これで取得完了です。

次はhtmlにコードを記載します。
<head></head>内または直接<body></body>内に以下のスクリプトを入力します。

<script type=”text/javascript” src=”http://www.google.com/jsapi?key=取得したAPIキー“></script>
<script type=”text/javascript”>
<!–//
google.load(“feeds”, “1″);
var entryArray = new Array();
var entryNum = 0;
function initialize() {
feedAdd(“フィードURL“, 3);
feedAdd(“フィードURL“, 2);
feedAdd(“フィードURL“, 1);
}//フィードURLを増やすごとに4、5、6と数値も増やす
function feedAdd(rssUrl, boolNum) {
var feed = new google.feeds.Feed(rssUrl);
feed.setNumEntries(3);//1つのフィードごとに取得したい記事数を入れる
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
entryArray[entryNum] = result.feed.entries[i];
var date = new Date(result.feed.entries[i].publishedDate);
entryArray[entryNum].sortDate = ( date.getFullYear()*1000000 ) + ( (date.getMonth() + 1)*3600*32 ) + ( date.getDate()*3600 ) + ( date.getHours()*60 ) + date.getMinutes();
entryArray[entryNum].blogName = result.feed.title;
entryNum+=1;
}
}
if(boolNum==1){
feedOutput(“feed”, 100);
}
});
}function feedOutput(feedId, listNum){
var container = document.getElementById(feedId);
entryArray = asort(entryArray, “sortDate”);
if(listNum > entryNum){ //修正箇所
listNum = entryNum;
}
for (var i = 0; i < listNum; i++) {
var entry = entryArray[i];
var date = new Date(entry.publishedDate);
var eTitle = entry.title;
var eCont = entry.contentSnippet.substring(0, 50);
var eLink = entry.link;
var eimg = “”;
var wrap = document.createElement(“ul”);
wrap.innerHTML = eimg + ‘<li><span>’ + date.getFullYear() + ‘年’ + (date.getMonth() + 1 ) + ‘月’ + date.getDate() + ‘日</span><a href=”‘ + eLink + ‘” target=”_blank”>’ + eTitle + ‘</a>(’ + entry.blogName + ‘)</li>’;
container.appendChild(wrap);
}
}
function asort(myArray, key){
return myArray.sort ( function (b1, b2) { return b1[key] > b2[key] ? -1 : 1; } );
}google.setOnLoadCallback(initialize);
//–>
</script>

最後に<body></body>内に

<div id=”feed”></div>

を記載

うまく動作すればこれで「日付」「記事タイトル」「ブログタイトル」の順でリスト表示されると思います。<li>にクラスをつけたり、#feed要素にスタイルを記述するなどして見た目をカスタマイズできます。

コードは以下のサイト様を参考にさせていただきました。
Google AJAX Feed API で複数のブログからフィードを取得して、しかも日付順に並び替えるコード

ログインしなくてもページ上からテーマの変更ができる「Theme Switcher」

11月 25th, 2011 by berry | No Comments | Filed in wordpress

wordpressを使ってサンプルテンプレートのサイトを作成しています。
色んな種類のテンプレートを観覧してもらうために、ログインしなくても訪問者側からwordpressテーマの変更が出来たら案内しやすいのになぁ。

って探してたらありました。
「Theme Switcher」

インストール後、管理画面からプラグインを有効化して完了。
ヴィジェットに追加されているので、タイトルを決めて、リスト形式かドロップダウン形式かを選択するだけです。

theme switcher

phpファイル内に直接以下を記述してもリストを吐き出します。

リスト形式
<?php wp_theme_switcher(); ?>
ドロップダウン形式
<?php wp_theme_switcher(‘dropdown’); ?> 

こんな感じでインストールしているテーマ名が一覧で表示されます。

どんなリンクで切り替えてるのか確認してみると、、、
http://ドメイン/blog?wptheme=テーマ名
となっています。

Theme Switcherはインストールされているテーマ全てを表示してしまうので、このリンクを使えば複雑なphpをいじらなくても表示させたいテーマだけを記載することも可能になります。
他に、テーマのサムネイル画像を用意してリンクにする。といった使い方もできますね。

WordPressのページに「イイネ!」ボタンやgoogle+ボタンを簡単に設置できるプラグイン

11月 24th, 2011 by berry | No Comments | Filed in wordpress

元々Facebookやツイッターの「イイネ」ボタンなどのコードはsingle.phpなどの中に直接書いてましたが、「WP Social Bookmarking Light」というプラグインを使うと簡単にあらゆるソーシャルブックマークのボタンが設置できて便利です。

インストール後管理画面の「設定」>「WP Social Bookmarking Light」で設定を行えます。

表示したい ソーシャルブックマークのボタンを右から左にドラックするだけ。必要なければ「×」で消すだけです。
一部のボタンには個別の間隔設定やアカウントの設定を行えるようになっています。

デフォルトだと個別ページにも表示されてしまいますが、記事ページのみの設定にもできます。
間隔や整列など微調整も可能です。

Social Bookmarking Light

■表示可能なソーシャルブックマークボタン一覧

  • Hatena
  • Facebook
  • Facebook Like Button
  • Facebook Send Button
  • Twitter
  • Livedoor Clip
  • BuzzURL
  • @nifty clip
  • Tumblr
  • FC2 Bookmark
  • newsing
  • Choix
  • Yahoo!JAPAN Bookmark
  • Yahoo!Buzz
  • Google Bookmark
  • Google Buzz
  • Google +1
  • Delicious
  • Digg
  • FriendFeed
  • reddit
  • LinkedIn
  • Evernote
  • Instapaper
  • StumbleUpon
  • mixi Check
  • mixi Like
  • GREE Social Feedback
  • atode (toread)
  • Grow!

 

 

パーマリンクの設定(動的URLから静的URLに)

11月 21st, 2011 by berry | No Comments | Filed in wordpress

wordpressで記事を投稿すると動的にページが生成されるので、何も設定しないままだと記事のURLが
「berry.org.cn/blog/?p=35」
みたいに「?」とか「=」が混じってしまいます。 こういうのを動的URLと言います。

昔はこの動的URLがクローラーにインデックスされにくく、SEOでは不利とされていました。
現在Googleさんはクローラの性能が向上しているので動的URLでもちゃんとインデックスできるよ。と言っておるようで、動的だろうが静的だろうが問題ないというのが現状です。

えー。でもURLスッキリしてた方がいいしー。

そうなんですね。動的URLを気にする人がいる限りは静的URLにしておいた方がいいでしょう。

—-やり方—-
ワードプレスの管理画面の「設定」→「パーマリンク設定」 から
デフォルトにチェックが入っているのを「日付と投稿名」「月と投稿名」などに変更すればいいだけです。

おすすめはカスタム構造です。
「カスタム構造」にチェックを入れ、入力枠に
/%category%/%post_id%/
と入れると
URLが 「berry.org.cn/blog/カテゴリ名/35/」
というふうになるのでわかりやすいですね。
/%category%/%post_id%.html
と入れると  「berry.org.cn/blog/カテゴリ名/35.html」
というふうにもできます。

また
/%category%/%postname%/
と入れると
記事の投稿時に○○の部分に好きな名前をつける事が出来ます。「berry.org.cn/blog/カテゴリ名/○○」
/%category%/%postname%.html のかたちももちろんも可能です。

名前を変えるのがめんどくさいので管理としては/%category%/%post_id%/がいいように思います。