SereneBachにZenPhotoを・・・

スポンサーリンク
エントリー内リンクはアフィリエイト広告を含みます。
エントリー内リンクはアフィリエイト広告を含みます。

　SereneBachにZenPhotoを別に組み込んだわけではない。そんな技術は持ってない。と言うような話ではなく、ただ以前書いたエントリーで試しに設置していたZenPhotoをこのblogで利用するためにthemeをカスタマイズしました。

　以前から書いているようにZenPhotoはカスタマイズが楽でお気に入り。日本一周のサイトやこちらでも使っているようにthemeのカスタマイズが楽なので結構重宝している。そんなわけで、どんなわけだ？要するにこのblogでもちゃんと使おうかと思ってthemeのカスタマイズをしDesign、レイアウトを統一させました。

PhotoGalleryとして使おうと思います。こちら：http://blog.planting-field.com/photo/

　一応メモ書きをしておきます。

　今まではMovableTypeとWordPressで運営しているサイトにZenPhotoを設置したのですが、今回はSereneBach。Design統一する上でちょっとやったことだけを記載。

  1. ZenPhotoの独自タグを解析する。
    何が必要で、どんな表示をするタグなのかを解析。

  2. Serene Bachで構築してるblogのthemeをローカルにコピー。
    SBの独自タグ状態ではなくちゃんと絶対パスで書かれている状態のものをテキストエディタなどで保存しておく。（ページ表示させてソースを見てコピーしたらOK！）
    もちろんstyle(CSS)もコピー（直接SereneBach上のスタイルシートを読み込むとIE6でレイアウトが崩れたため。）

  3. ZenPhoto用にthemeを作る。
    themeの種類は

    • index.php（インデックスページ）
    • album.php（アルバムごとのインデックス）
    • image.php（個別写真のページ）
    • zen.css（独自タグで読み込むスタイルシート）

    の４種類。

      theme制作時の注意点

    1. 文字コードに注意。
      ここのblogはEUC-JPで運営しているのですが、ZenPhotoはUTF-8にしてました。euc-jpに出来るのかな？と思ったのですが、既に設置してあったZenPhotoは弄らないでそのままUTF-8化のthemeを作ることにしました。（強引にeuc-jpにしたら文字化けしたのでめんどくさいからutf-8で(^^ゞ）

    2. Serene Bachの独自タグは効かないので各独自タグ部分は以下のようにして読み込ませました。文字コードがEUC-JPのものを読み込むのでcharsetを設定。

      • 最新記事部分：<script type="text/javascript" src="http://blog.planting-field.com/archives/entry.js" charset="euc-jp"></script>

      • 月別アーカイブ部分：<script type="text/javascript" src="http://blog.planting-field.com/archives/arc.js" charset="euc-jp"></script>

      • カテゴリー部分：<script type="text/javascript" src="http://blog.planting-field.com/archives/cat.js" charset="euc-jp"></script>

      • ユーザー表示部分：<script type="text/javascript" src="http://blog.planting-field.com/archives/user.js" charset="euc-jp"></script>

      • 横型カレンダー部分：<script type="text/javascript" src="http://blog.planting-field.com/archives/calh.js" charset="euc-jp"></script>

  4. zen.cssにSereneBachで使っていたcssをコピー。もちろん新たにZenPhotoで画像を表示させる部分に使うスタイルは記述する。
    元々デフォルトで入っているthemeのスタイルを参考にすると解りやすいですね。

  5. theme.txtを作る。中には以下のように記述。

    # Zenphoto theme definition file
    name::themeの名前
    author::制作者の名前
    version::バージョン
    date::日付

  6. theme.pngを作る。
    自分のthemeを表示させキャプチャーしpngで保存。サイズは150px角

  7. ローマ字で任意の名前のfolderを作る。その中に作ったファイルを入れる。
    • index.php
    • album.php
    • image.php
    • zen.css
    • theme.txt
    • theme.png

  8. folderに全部入れたらそれをサーバーにUP。

    ZenPhoto設置ディレクトリ/themes/ここに入れる。

  9. ZenPhoto管理画面のOptionで自分の作ったthemeが表示されればそれを選択する。
    以上、おしまい。

ZenPhotono独自タグ。（ごく一部、めんどくさいので少しだけ）

  • <?php printGalleryTitle(); ?>：ギャラリーのタイトル

  • <?=getAlbumTitle();?>：アルバムのタイトル

  • <?=getImageTitle();?>：各imageの名称

  • <?= $_zp_themeroot ?>：選択したthemeのrootアドレス

  • <link rel="stylesheet" href="<?= $_zp_themeroot ?>/zen.css" type="text/css" />：cssのアドレス

  • <?php zenJavascript(); ?>：ZenPhotoのJavaScript

  • <?php echo getGalleryTitle(); ?>：ギャラリーのタイトル

  • <?=getAlbumTitle();?>：アルバムのタイトル

  • <?=getGalleryIndexURL();?>：ギャラリーのURL

  • <?=getAlbumLinkURL();?>：アルバムのURL

  • <?php printImageTitle(true); ?>：imageの名称

基本的にはphpのコードなので独自タグって言うのかはよく解りませんが、WordPressをカスタマイズできるならもっと色々表示のさせ方に応用が利くかもしれませんね。私はめんどくさがり屋なのでこの辺で・・・独自タグはデフォルトで入っているthemeを見て何処がどんな表示かを確認しコピペしたらいいのではないかしらね。下手にいじくると変になりそうだし。

と、言うわけでフォトギャラリー設置しました。でも写真がないや。

スポンサーリンク

コメント

タイトルとURLをコピーしました