小粋空間  -  a cheap joke and a play on words site

WordPressで作成したFacebookページのIFrameタブデザインを崩さない方法

WordPressで作成したFacebookページのIFrameタブで、デザインを崩さずにきちんと表示させるためのTipsを紹介します。

１．問題点

次のような、WordPressとjQuery Tabs UIを使ったタブページを、FacebookページのIFrameタブに表示するものと仮定します。

上の場合は期待通りの表示になっていますが、場合によっては次のようにjQuery UI Tabsのスタイルが適用されず、崩れて表示される可能性があります。

余談ですが、WordPressを使って上記のjQuery UI Tabsによるタブページを表示するカスタマイズは「Facebookページプロフェッショナルガイド」に掲載しています。宣伝です（笑）。

Facebookページ　プロフェッショナルガイド

posted with amazlet at 11.07.16

蒲生トシヒロ 竹村詠美 原裕 大元隆志 井出一誠 マクラケン直子 ホシナカズキ 藤本壱 荒木勇次郎 関根元和
毎日コミュニケーションズ
売り上げランキング: 699

Amazon.co.jp で詳細を見る

２．原因

レイアウトが崩れる原因は次の3つの条件が重なった場合です。

1つめの条件は、ユーザーがFacebookの「セキュリティ設定」でセキュア接続を利用していることです（下）。

2つめの条件は、WordPressのIFrameタブ表示用のテンプレートに次のようにhome_url()を利用していることです。

<link type="text/css"
  href="<?php echo home_url(); ?>/css/jquery-ui-1.8.11.custom.css"
  rel="stylesheet" />

そして3つめの条件は、「https」のドメインが「http」のドメインと異なる場合です。さくらインターネットの場合、独自ドメインのSSLは次のようになります。

• http://user-domain/
• https://secureXXXXm.sakura.ne.jp/user-domain/

これら3つの条件が揃うと、ユーザーがセキュア接続でIFrameタブを閲覧した場合、home_url()で出力されるスキーム名は自動判別で「https」になります。ですが、WordPressの管理画面で設定している「サイトのアドレス」が「http」を想定したURLになっている場合、正しいURLが出力されません。

例えば、上記のさくらインターネットの例では、home_url()の出力は、

• https://user-domain/

となり、jQuery UI TabsのCSSを正常に取得できず、デザインが崩れるという結果になります。

３．対策

対策は何通りかあると思いますが、次のようにhome_url()の第2パラメータにスキームを指定することで解消します。スキームを指定すれば「https」で出力されなくなります。ユーザーがセキュア接続を利用していても、IFrameタブの中ではhttpスキームによるアクセスが可能です。

<link type="text/css"
  href="<?php echo home_url('','http'); ?>/css/jquery-ui-1.8.11.custom.css"
  rel="stylesheet" />

このケースではCSSファイルのURLを例に説明しましたが、JavaScriptファイルや画像ファイルなどのアクセスでhome_url()を使っている場合も同様です。

４．その他

IFrameタブの動作確認を行う場合、セキュア接続の有無によるテストも忘れずに行いましょう。