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

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

本連載では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 アルバム説明文が設定されていない場合に自動非表示化

タグの自動非表示化

アルバム説明文と同様に、タグも設定されていない場合には「⁠⁠タグなし...⁠⁠」という代替文が自動的に表示されます。

図3 タグが設定されていない場合の代替文
図3 タグが設定されていない場合の代替文

こちらも設定されているならば表示して、されていないければ代替文も含めて何も表示しない、というカスタマイズをしてみましょう。

設定されているタグは、album.phpの55行目あたりにあるprintTags()というコードが出力を行っています。

album.php 52-55行目:タグを出力するコード「printTags()」
52 :    </div>
53
54 :    <?php printPageListWithNav("« ".gettext("prev"), gettext("next")." »"); ?>
55 :    <?php printTags('links', gettext('<strong>Tags:</strong>').' ', 'taglist', ''); ?>

printTagsも特定の引数を与えてやることで、設定されているタグが無いときには何も表示されなくなります。この場合は6番目の引数にfalseを与えればOKです。

album.php 55行目:printTags() の編集
<?php printTags('links', gettext('<strong>Tags:</strong>').' ', 'taglist', '',true,'',false); ?>

これで、アルバム説明文とあわせて、設定がされていなかったらどちらも何も表示しない、というスッキリしたページになりました。

図4 タグが設定されていない場合に自動非表示化
図4 タグが設定されていない場合に自動非表示化

ランダムで画像を一枚表示

余分なものを省くカスタマイズから、今度は新たに追加していくカスタマイズをおこなってみましょう。ギャラリーのトップページの冒頭に、ランダムで切り替わる1枚の大きな画像が表示されるようにします。

図5 ギャラリートップページの冒頭をカスタマイズ
図5 ギャラリートップページの冒頭をカスタマイズ

トップページのカスタマイズなので、編集するテンプレートファイルは「index.php」です。そしてZenphotoには、ランダムでギャラリーの中から一枚の画像を表示するコードが最初から備わっています。それがprintRandomImages()です。

index.php 30行目:printRandomImages() の挿入
26 :<div id="gallerytitle">
27 :    <?php if (getOption('Allow_search')) {  printSearchForm(''); } ?>
28 :    <h2><?php printHomeLink('', ' | '); echo getGalleryTitle(); ?></h2>
29 :</div>
30 :<?php printRandomImages(1,null,'all','',630,420); ?>
31 :    <div id="padbox">

printRandomImagesはランダムでピックアップする数や出力時のhtmlに付与するclass、ランダムの選択範囲や表示するサイズなどを引数で指定することができます。上記の場合はギャラリー全体から、1枚の画像を、横630px、縦420pxで出力するように引数を設定しています。

出力されるHTMLをCSSで調整することで、ギャラリー説明文の上に大きな画像がランダムで1枚表示されるようになりました。

図6 ギャラリートップページの冒頭に画像をランダムで表示
図6 ギャラリートップページの冒頭に画像をランダムで表示

ソーシャルブックマークの設置

CMSといえば、その動的な出力を活かして、ソーシャルブックマークと連動させるのが昨今のよく使われる手法です。そこで、このギャラリーの詳細画像ページにもTwitterのツイートボタンを導入してみます。Twitter公式ページから取得したツイートボタンの埋め込み用コードを利用します。

図7 ツイートボタン埋め込み用コード
図7 ツイートボタン埋め込み用コード

詳細画像ページの場合、編集するテンプレートファイルは「image.php」です。

図8 詳細画像ページ
図8 詳細画像ページ

image.phpの任意の場所に、ツイートボタン埋め込み用のコードを挿入します。また挿入する際に、アルバムと同様で説明文とタグが設定されていない場合は非表示になるように編集しています。

image.php 71-84行目:ツイートボタン埋め込み用コードの挿入
71 :<div id="narrow">
72 :    <?php printImageDesc(true,'',false); ?>
73 :    <?php if (function_exists('printSlideShowLink')) printSlideShowLink(gettext('View Slideshow')); ?>
74 :    <br />
75 :    <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
76 :    <?php if(getTags()): ?> 
77 :    <hr /><br />
78 :    <?php endif; ?>
79 :    <?php
80 :        if (getImageMetaData()) {echo "<div id=\"exif_link\"><a href=\"#\" title=\"".gettext("Image Info")."\" class=\"colorbox\">".gettext("Image Info")."</a></div>";
81 :            echo "<div style='display:none'>"; printImageMetadata('', false); echo "</div>";
82 :        }
83 :    ?>
84 :    <?php printTags('links', gettext('<strong>Tags:</strong>').' ', 'taglist', '', '',true,'',false); ?>

これで詳細画像ページにツイートボタンが実装されました。その他のソーシャルブックマークの追加や、挿入の位置など、お好みにあわせて調整してください。

図9 ツイートボタンの付いた詳細画像ページ
図9 ツイートボタンの付いた詳細画像ページ

いかがでしたでしょうか。この最終回では、前回までの話を引き継いだ上で、少し技術的な面に足を踏み入れました。CMSはソースコードを理解できればできるほど、使い勝手を向上することができます。ぜひ技術的な面にも触れてみてください。

連載を通して、Zenphotoに魅力を感じていただけたならば幸いです。紹介していない機能などもありますので、ぜひ色々と試していただき、オリジナルのギャラリーサイトを制作してみてください。

最後までお読みいただきまして、ありがとうございました。

おすすめ記事

記事・ニュース一覧