2011年12月31日

ワードプレスにスマホ用フォトギャラリー設置

そういえば、ホームページがWordPressになっていました。

ワードプレスにした理由は、細かい更新が楽なのと、マルチプラットフォーム(クロスを超えた!)が楽。
現にプラグインでガラケーと、スマホスタイルを獲得済み。

今までの念願だった、撮り貯めたどうしようもない写真をかっこ良く見せるためのフォトギャラリーを、jQueryで難なくクリア♪
まるでタイムマシンの様な無駄にリッチで、しかしユーザービリティーの低い(前の写真に戻れないとかw)いろんな意味でいい感じのフォトギャラリーを作る事ができました。

しかし、モバイルには大分にが重かったようで・・・(だいたい写真も大きめですしね。
そこで、スマホ用テンプレートに、別途jQueryフォトギャラリーを導入する事にしました。

そこで、今回は何故かパソコン用のスライドショーの作り方ではなく、スマホ用のスライドショーをWordPressで作るに際したポイントを書き記そうと思います。


まず、WordPressにWPtouchを入れます。
そしてWPtouch内に有るテンプレートフォルダ内のファイルを普通のテンプレートと同じように編集します。

今回は、固定記事でフォトギャラリーページを作成しました。
フォトギャラリーの写真は、カスタムフィールドで1枚ずつ登録します。
テンプレートファイル側では、ループでimgタグにして吐き出します。
この時、使用するjQueryプラグインによってはリスト形式にする必要が有ります。
なので今回はこの様なコードを追加しました
<?php
$meta_value= get_post_meta($post->ID, 'photo-gallery', false);
  if($meta_value){?>
    <div id="photo-gallery">
      <ul class="jCarousel">
        <?php
  foreach($meta_value as $key){
            echo '<li>'.wp_get_attachment_image($key,'medium').'</li>';
  } ?>
      </ul>
    </div> 
<?php }?>
後はこれに、くらげだらけさんが作成したjQueryプラグインを読み込むだけ。
iPhone SafariでCarousel風のUIを実現するjQuery Plugin「jCarousel」作りました - くらげだらけ(くだくらげのBLOG)
実行などせずに、HTML側のクラスを設定するというのはなかなか無いですね。

しかし、WordPressをフレームワークにしていると、これでは動きません。
WordPressではjQueryを使う際$をjQueryと各必要があります。
その使用のおかげで、このプラグインはそのままでは使用できません。。。
そもそも、厳密なjQueryプラグインならそんな筈は無いのですが、

そこで、申し訳有りませんが、くらげだらけさんのソースを、丸っと置換してしまいましょう。
そうすれば問題なく使用できるようになります。

ただ、ページが表示された直後は画像の左右のマージン(か何か)が固定幅で、左に寄った状態で表示されてしまいますね。
少しでもスクロールしたり、写真を切り替えたりすればばっちりいい感じに真ん中に表示されるのですが。。。
しばらく頑張ればちゃんとできそうなきもしたけど、手間をかけたくないので個人的にはもう満足ですw
仕事のノウハウとして、記憶しておきましょう。

それにしても、デザイン糞いな・・