スマフォにも最適化し、ファンゲート対応のFacebookページも作成できるフリーのWPテーマ・Flexibleがなかなか良さそう

iPhoneのようなスマートフォンや、iPad のようなタブレットデバイスだけでなく、 Facebookページにも対応できる様に工夫されているフリーのWordPress テーマ・Flexibleをご紹介します。ベースはTwenty Tenみたいですね。 css3のMedia QueryでiPhoneやiPadにレイアウトを自動調整し、ファンゲート対応のFacebookページの作成にも対応している珍しいテーマです。ファンゲートとは、FBページを﹁いいね！﹂した人だけ見れるようにする、というFB独自の機能です。※後述 [note]以前書いたMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWPテーマいろいろもご参考下さい。[/note] シンプルながら機能が凝縮されたテーマなのでフレームワーク的にも使えそうです。

Flexible

ベースはTwenty Tenだそうですが、かなりソースを削ってくれています。Twenty Tenはよほど慣れてない人でない限り、カスタムしやすい構成とは思えないのでこれはありがたい。ざっと特徴を。 (一)MediaQueryでiPhone、iPadといったデバイスにもレイアウトを最適化済み (二)Tumblrライクな記事属性アイコン (三)ファンゲート対応のFacebookページ作成 (四)クロスブラウザ対応 (五)シンプルなファイル構成 (六)カスタムメニュー対応 (七)ヘッダ画像や背景も簡単に変更可能 (八)ライセンスはGPLで、無料以下、簡単に機能をご紹介します。

様々なデバイスに対応

Media Queries Tester︵←割と便利︶でのキャプチャ。iPhone、Android、BlackberryやNotebook、iPad等でもレイアウトを綺麗に保ってくれます。

Tumblrライクな記事属性アイコン

投稿画面には上図左手のようなラジオボタン︵日本語化されてます︶があり、Tumblrのように記事コンテンツに応じたアイコンを加えることも出来ます。

Facebookページも作れる

未検証ですが、上記のようにFacebookページも作成できるようです。MediaQueryでレイアウトを調整し、 FB.Canvas.setAutoResize();を使ってスクロールが出るのを防いでいます。また、﹁いいね！﹂した人だけがコンテンツを見ることが出来るように設定出来るFanGate︵ファンゲート︶にも対応してくれています。以下に、ざっと作り方をメモしておきます。

ページのテンプレートで作成

Facebookページはページ属性→テンプレートでFanpressを選択します。作成したページをFacebookアプリ登録する、という流れですかね。アプリ登録に関してはオリジナルコンテンツを加えたFacebookページの作り方を書いたのでご参照下さい。

オーバーレイがかかる

Facebookのファンゲートは、﹁いいね！﹂した人だけがコンテンツを見れるように出来る、というもので、作成当初はオーバーレイがかかって見えない状態です。ファンゲートは以下のスクリプトで対応します。

ファンゲートに対応する為のコード

if(isset($_REQUEST['signed_request']) && $_REQUEST['signed_request']){
 $signed_request = $_REQUEST['signed_request'];
} else {
 $signed_request = "";
}
function parsePageSignedRequest() {
 if (isset($_REQUEST['signed_request'])) {
 $encoded_sig = null;
 $payload = null;
 list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);
 $sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
 $data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true));
 return $data;
 }
 return false;
}

このコードが、ページ属性→テンプレートで選べるFanpress用のPHPファイルに含まれています。ファンゲートはFacebook側で﹁いいね！﹂しなくても見れる、という設定も可能だそうです。ファンゲートに関しては以下が参考になりますよ。 ●JS+PHPでFacebookページをカスタマイズ！ ●FBMLサポートがいよいよ米国3/10で終了。あなたのウェルカムページは大丈夫？ ●Iframeで﹃いいね！﹄を押した人限定で見れるコンテンツを作る覚書-ファンゲート-

テーマのデザインも簡単に

Twenty Ten同様に、ヘッダ画像や背景なども管理画面で変更できます。

無駄のないファイル構成

Twenty Tenベースだけど、無くても構わないファイルが削がれているのが個人的に嬉しいです。functions.phpも割とスッキリしているのでカスタマイズしやすい印象でした。ライセンスはGPLです。このクオリティで無料はちょっと凄い気がします。WP×FBページを作る際にもソースが参考にもなりそう。これは覚えておいて損はないと思います。 Flexible