本連載では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ということもあり、文章は載せずに作品のみを見せれば良いこともあります。
しかし標準テーマでは、項目としては必須で無いものの、アルバム説明文を設定してない場合には、アルバムページ冒頭に「(説明なし...)」という説明文に代わる文章が自動的に表示されてしまいます。
すべてのアルバムに説明文を設定するのであれば、必須項目と変わらず好ましくありません。そこで、説明文が設定されていれば表示して、されていないければ代替文も含めて何も表示しない、というカスタマイズをしてみましょう。
アルバムページのカスタマイズなので、編集するテンプレートファイルは「album.php」です。album.phpの27行目あたりにある「printAlbumDesc()」というコードがアルバムの説明文(とその代替文)を出力しています。
「printAlbumDesc()」は3つ目の引数にfalseを与えることで、説明文が設定されていなければ表示をしない、という機能があります。そこで、以下のように編集すると、説明文が無いときには何も表示されなります。
これで少し画面をスッキリさせることができました。説明文が設定されている場合には当初の位置に表示されます。
タグの自動非表示化
アルバム説明文と同様に、タグも設定されていない場合には「(タグなし...)」という代替文が自動的に表示されます。
こちらも設定されているならば表示して、されていないければ代替文も含めて何も表示しない、というカスタマイズをしてみましょう。
設定されているタグは、album.phpの55行目あたりにある「printTags()」というコードが出力を行っています。
printTagsも特定の引数を与えてやることで、設定されているタグが無いときには何も表示されなくなります。この場合は6番目の引数にfalseを与えればOKです。
これで、アルバム説明文とあわせて、設定がされていなかったらどちらも何も表示しない、というスッキリしたページになりました。
ランダムで画像を一枚表示
余分なものを省くカスタマイズから、今度は新たに追加していくカスタマイズをおこなってみましょう。ギャラリーのトップページの冒頭に、ランダムで切り替わる1枚の大きな画像が表示されるようにします。
トップページのカスタマイズなので、編集するテンプレートファイルは「index.php」です。そしてZenphotoには、ランダムでギャラリーの中から一枚の画像を表示するコードが最初から備わっています。それが「printRandomImages()」です。
printRandomImagesはランダムでピックアップする数や出力時のhtmlに付与するclass、ランダムの選択範囲や表示するサイズなどを引数で指定することができます。上記の場合はギャラリー全体から、1枚の画像を、横630px、縦420pxで出力するように引数を設定しています。
出力されるHTMLをCSSで調整することで、ギャラリー説明文の上に大きな画像がランダムで1枚表示されるようになりました。
ソーシャルブックマークの設置
CMSといえば、その動的な出力を活かして、ソーシャルブックマークと連動させるのが昨今のよく使われる手法です。そこで、このギャラリーの詳細画像ページにもTwitterのツイートボタンを導入してみます。Twitter公式ページから取得したツイートボタンの埋め込み用コードを利用します。
詳細画像ページの場合、編集するテンプレートファイルは「image.php」です。
image.phpの任意の場所に、ツイートボタン埋め込み用のコードを挿入します。また挿入する際に、アルバムと同様で説明文とタグが設定されていない場合は非表示になるように編集しています。
これで詳細画像ページにツイートボタンが実装されました。その他のソーシャルブックマークの追加や、挿入の位置など、お好みにあわせて調整してください。
いかがでしたでしょうか。この最終回では、前回までの話を引き継いだ上で、少し技術的な面に足を踏み入れました。CMSはソースコードを理解できればできるほど、使い勝手を向上することができます。ぜひ技術的な面にも触れてみてください。
連載を通して、Zenphotoに魅力を感じていただけたならば幸いです。紹介していない機能などもありますので、ぜひ色々と試していただき、オリジナルのギャラリーサイトを制作してみてください。
最後までお読みいただきまして、ありがとうございました。