投稿に添付した画像を一覧表示する方法

建設会社の施工実績やネイルサロンの施術実績など、納品先のユーザーが随時更新するコンテンツで、画像を一覧表示するギャラリー機能を実装した際のカスタマイズ方法を整理してみました。

カスタマイズの概要

まずはユーザーサイドの操作手順を追いながら、カスタマイズの概要を説明します。

howtolistimages01ギャラリーの画像は記事編集画面で「メディアを追加」ボタンからアップロードします。
念のため画像をアップロードする前に「下書きとして保存」ボタンをクリックして記事IDを確定させておきます。

howtolistimages02メディア挿入ウインドウの初期画面はデフォルトでは「すべてのメディア」が選択されていますので、「この投稿へのアップロード」に選択し直す必要がありますが、毎回切り替えるのは面倒なので、初期画面が「この投稿へのアップロード」になるようにfunctions.phpに記述を追加しておきます。

howtolistimages03デスクトップからウインドウ上へ画像ファイルをまとめてドラッグ&ドロップしてアップロードします。

howtolistimages04アップロード後、必要に応じてドラッグ&ドロップで画像を並べ替えます。
ここでの並び順が一覧表示に反映されれるようにテンプレートファイルをカスタマイズします。

howtolistimages05メディア挿入ウインドウ上に画像をアップロードしたり並べ替えたりした操作結果は、記事を更新する操作等をしなくても公開ページ上に直接反映されます。
公開ページ上のギャラリー部分は、サムネイルのみ並べてLightbox系プラグインで拡大画像を表示したり、jQueryのスライダーを組み込むケースなど、色々な一覧表示の方法が可能です。
今回はCSS3だけで作るスライダーを試しに組み込んでみました。

続いて、カスタマイズ手順について一つずつ解説します。

メディア挿入ウインドウのカスタマイズ

何故か近頃のバージョンのWordPressはメディア挿入ウインドウを開いた時の初期画面が「すべてのメディア」になっているのですが、これをユーザーに毎回「この投稿へのアップロード」に切り替えてもらったり、ユーザーへの説明にこの操作手順を加えるのが少々煩わしいので、初期状態で「この投稿へのアップロード」が表示されるようにカスタマイズしてしまいます。

カスタマイズにはテーマフォルダのfunctions.phpに以下の記述を追加するだけです。

テンプレートファイルのカスタマイズ

次にテンプレートファイルにギャラリー部分の記述を追加します。
このページのカスタマイズ例では、「投稿」のテンプレートファイルsingle.phpに以下の記述を追加しました。

▼single.phpに追加

コードを表示

howtolistimages06なお、この記事の設置サンプルにはこちらのResponsive CSS3 Sliderを使用しました。
ここでは添付ファイルの取得とHTMLコードの出力に絞ってカスタマイズ方法を説明していきたいと思いますので、スライダーの実装方法についてはリンク先をご参照ください。

コードの各詳細は次の通りです。

特定のカテゴリーの投稿にのみギャラリーを表示

「投稿」のテンプレートファイルsingle.phpにコードを追加する場合は、新着情報やブログ記事などと区別するためにギャラリー(gallery)カテゴリーを作成し、このカテゴリーに該当する記事のみギャラリー部分を表示するように分岐処理をします。

「投稿」に限らず、ギャラリー専用のカスタム投稿タイプを作成しても良いですし、特定の固定ページにのみギャラリーを表示させたい場合には、page.phpis_page(【ページのスラッグ】)で分岐処理させる、もしくはpage-【ページのスラッグ】.phpファイルを別途作成するなど、サイトの構成に応じてギャラリーは自由に設置可能です。

添付ファイルを取得

添付ファイルの取得にはWordPressの関数get_children()を使用して、パラメータを以下のように設定します。

記事本文に使用する画像と区別する

本文に挿入された画像とギャラリー用の画像を区別したい場合は、記事本文に画像が使用されているかをstrposでチェックして該当する画像を除外します。

ギャラリー表示の分岐処理

ギャラリーの表示部分は、まず添付ファイルの有無で出力する/しないを分岐処理します。

スライダーの各部の出力

スライダーの動作に必要なラジオボタンは、for文で画像点数分出力します。

出力結果のHTMLを表示

スライダーのメイン画像を表示するimgタグを、wp_get_attachment_image()で取得します。

出力結果のHTMLを表示

メイン画像左右のコントローラー(矢印)は、ラジオボタンと同様にfor文で画像点数分出力します。

出力結果のHTMLを表示

サムネイル一覧の部分はメイン画像と同様に、wp_get_attachment_image()imgタグを取得します。

出力結果のHTMLを表示

single.phpへのギャラリー部分の記述は以上です。

Lightbox系プラグインを利用してサムネイル一覧を表示するだけの場合の記述はごく簡単です。
ギャラリー部分の出力には下記のようにwp_get_attachment_image()の代わりにwp_get_attachment_link()を使用します。

今回は実験的にCSS3スライダーを導入してみましたが、CSS3のみで作成するスライダーの場合、画像点数に応じてcssファイルを書き換える必要がありますので、動的な使用にはheader.phpのカスタマイズが少々手間になるかも知れません。

プログラムが得意でない自分には、JavaScriptよりCSS3だけでスライダーギャラリーが実装できたら、デザインのカスタマイズが楽になるかなと思うのですが、また折を見てじっくり取り組んでみたいと思います。
下記のような自動でスライドを繰り返すCSS3スライダーもいずれ取り入れてみたいなーと思ったりもしつつ、とりあえずメモメモ…

(参考)Pure CSS3 Cycle Slider
(参考)CSSだけでスライドショーはつくれるよ。

PR

Responsive CSS3 Slider 設置サンプル

Lightbox系 設置サンプル

DO WP 管理人