ZenphotoでかんたんWebギャラリー

第6回 テンプレートをカスタマイズする

この記事を読むのに必要な時間:およそ 3 分

本連載ではZenphotoの基本的な機能やその使い方,ギャラリーにオリジナリティを出すために管理画面上でできるカスタマイズについて紹介してきました。いずれもZenphotoの使用言語であるPHPを知らない方でもセットアップを済ませればすべてブラウザ上で行えるものばかりでした。

最終回である今回は,標準テーマに対して,PHPを用いてテンプレートファイルのソースコードを編集することできる,より実践的なカスタマイズについて紹介します。ソースコードを編集できるようになると格段にカスタマイズの幅が広がりますので,難しいと感じる方も少しずつソースコードを読むことに慣れていきましょう。

Zenphotoにおけるコーディングの詳細は,以下の公式サイトのドキュメントを参考にしてください。標準テーマのソースコードと合わせて読み進めると,Zenphotoの仕組みを知る助けとなります。

テンプレートファイルの種類

テンプレートファイルはWebページの表示に必要な実際のHTMLと,Zenphotoのシステムを構築するPHPが組み合わされたファイルです。トップページや特定のアルバムのページ,詳細画像のページなど,表示するページによって使用しているテンプレートファイルが異なります。

標準テーマのある「http://<アップロードしたフォルダ>/Zenphoto/themes/default/」を見てみると,多くのファイルがあることがわかりますが,その中でも種別ごとの表示を担っているテンプレートファイルは主に以下のファイルになります。

  • index.php:ギャラリートップページ
  • album.php:アルバムページ
  • image.php:詳細画像ページ
  • archive.php:アーカイブページ
  • search.php:検索結果ページ
  • 404.php:404 not foundページ

カスタマイズを行いたいページがどの表示ページなのかを考え,対象のファイル把握して編集するようにしましょう。

今回は上記のうち,⁠index.php」⁠album.php」⁠image.php」の3つのテンプレートファイルを編集して,以下のカスタマイズを行います。

  • アルバム説明文やタグが不用な時に非表示にする
  • トップページでランダムにギャラリー内の画像を一枚表示する
  • ツイートボタンをつける

アルバム説明文の自動非表示化

ZenphotoはギャラリーCMSということもあり,文章は載せずに作品のみを見せれば良いこともあります。

しかし標準テーマでは,項目としては必須で無いものの,アルバム説明文を設定してない場合には,アルバムページ冒頭に「⁠説明なし...)⁠という説明文に代わる文章が自動的に表示されてしまいます。

図1 アルバム説明文が設定されていない場合の代替文

図1 アルバム説明文が設定されていない場合の代替文

すべてのアルバムに説明文を設定するのであれば,必須項目と変わらず好ましくありません。そこで,説明文が設定されていれば表示して,されていないければ代替文も含めて何も表示しない,というカスタマイズをしてみましょう。

アルバムページのカスタマイズなので,編集するテンプレートファイルは「album.php」です。album.phpの27行目あたりにあるprintAlbumDesc()というコードがアルバムの説明文(とその代替文)を出力しています。

album.php 25-28行目:アルバム説明文を出力するコード「printAlbumDesc()」

25 :    <div id="padbox">
26 :
27 :    <?php printAlbumDesc(true); ?>
28 :        <div id="albums">

「printAlbumDesc()」は3つ目の引数にfalseを与えることで,説明文が設定されていなければ表示をしない,という機能があります。そこで,以下のように編集すると,説明文が無いときには何も表示されなります。

album.php 27行目 printAlbumDesc() の編集

<?php printAlbumDesc(true,'',false); ?>

これで少し画面をスッキリさせることができました。説明文が設定されている場合には当初の位置に表示されます。

図2 アルバム説明文が設定されていない場合に自動非表示化

図2 アルバム説明文が設定されていない場合に自動非表示化

著者プロフィール

一戸健宏(いちのへたけひろ)

株式会社ロクナナにて,主にWeb案件のディレクションや,CMSの構築などを担当しているクリエイティブディレクター。

Webだけでなくイベントや撮影など様々な案件を扱うロクナナでは,イベント受付や撮影助手の他,体格を活かして荷物・機材運びなどの力仕事で最前線に立つことも。

URLhttp://rokunana.com/

コメント

コメントの記入