• かちびと.net

    スマフォにも最適化し、ファンゲート対応のFacebookページも作成できるフリーのWPテーマ・Flexibleがなかなか良さそうだたtのでメモがてらご紹介。MediaQueryでレイアウトを様々なデバイスで最適化してくれます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

iPhoneのようなスマートフォンや、iPad
のようなタブレットデバイスだけでなく、
Facebookページにも対応できる様に
工夫されているフリーのWordPress
テーマ・Flexibleをご紹介します。ベース
はTwenty Tenみたいですね。

css3のMedia QueryでiPhoneやiPadにレイアウトを自動調整し、ファンゲート対応のFacebookページの作成にも対応している珍しいテーマです。ファンゲートとは、FBページを「いいね!」した人だけ見れるようにする、というFB独自の機能です。※後述

シンプルながら機能が凝縮されたテーマなのでフレームワーク的にも使えそうです。

Flexible


ベースはTwenty Tenだそうですが、かなりソースを削ってくれています。Twenty Tenはよほど慣れてない人でない限り、カスタムしやすい構成とは思えないのでこれはありがたい。ざっと特徴を。

  1. MediaQueryでiPhone、iPadといったデバイスにもレイアウトを最適化済み
  2. Tumblrライクな記事属性アイコン
  3. ファンゲート対応のFacebookページ作成
  4. クロスブラウザ対応
  5. シンプルなファイル構成
  6. カスタムメニュー対応
  7. ヘッダ画像や背景も簡単に変更可能
  8. ライセンスは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側で「いいね!」しなくても見れる、という設定も可能だそうです。

ファンゲートに関しては以下が参考になりますよ。

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


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

無駄のないファイル構成


Twenty Tenベースだけど、無くても構わないファイルが削がれているのが個人的に嬉しいです。functions.phpも割とスッキリしているのでカスタマイズしやすい印象でした。

ライセンスはGPLです。このクオリティで無料はちょっと凄い気がします。WP×FBページを作る際にもソースが参考にもなりそう。これは覚えておいて損はないと思います。

Flexible

URL :
TRB :

Ads

Posts

Contact

Services