趣味でwordpressのサイトをいじっていますが、ここの所スライドショー(ギャラリー)プラグインがないか色々と試行錯誤していました。
最初に当ったのはjQueryプラグインの「nivo slider」。wordpressでも「nivo slider light」がありますね。
こちらは最初の当りがよくギャラリー表示は快適にできるようになったのですが、サムネイルが上手く表示できずに断念しました。
続いてトライしたのが「Photospace」というプラグインです。
こちらもjQueryは利用するのですが、wordpressのショートコードで画像(メディア)指定をする点で「nivo slider light」と大きく異なります。HTMLタグをphpで出力させるので、より(私のような)初心者向きでしょうか。
インストール
導入は簡単です。プラグインの新規追加から「Photospace」を検索します。
「Photospace Gallery」が恐らくトップに表示されるのでインストールします。
「Photospace Gallery」を設定するには設定から「Photospace Gallery Options」を選びます。
設定
私はギャラリー目的で利用することから「Show Title」「Auto play」のみチェックを入れています。タイトル、キャプション、説明は各画像(メディア)の情報が採用されますので、忘れずに入力してください。
Auto playを利用する際には自動切替わり時間(デフォルト3.5秒)を調整してください。
注意すべき点が1点あります。
「Photospace Gallery」ではサムネイル画像を事前に準備する必要があります。サムネイルサイズに適した画像がない場合は、「Use AJAX thumbnail rebuild」や「Regenerate Thumbnails」を使ってサムネイル用の画像にリサイズしてねとご丁寧に記載されております。この内容についてはI So Wantedさんで紹介されていますので割愛します。私の場合はこれまでの画像をリサイズしたくなかったのでCSSで調整することにしました。
gallery.css
「Photospace Gallery」ではgallery.cssを参照しているため、こちらに修正・追加を行います。
私の意図するところはスライドショー用の画像とサムネイル用の画像は同一とし、サムネイルのみリサイズすることです。そこで始めにfirebugを利用してcssの構成をざっと調べることにしました。
「Photospace Gallery」が管理するコンテナの大枠はphotospaceクラスです。中でもサムネイルはthumbsクラスに属します。今回はサムネイル画像のリサイズを行いたいので、両クラスに属するタグの幅を小さくする指定を追加しました。
.photospace .thumb img{
width:75px;
}
これでサムネイルに使われる画像の幅は75pxに統一されます。
一方で「Use AJAX thumbnail rebuild」や「Regenerate Thumbnails」を使わないことからスライドショーに用いる画像も大きさを制限しておく必要があります。
firebugを見るとスライドショー画像はslideshowクラス下のタグでimage-wrapperクラス指定されているので、こちらを追加します。
.photospace .slideshow span.image-wrapper img{
max-width:350px;
}
例では最大幅を350pxに指定していますが、ピクセル値や最大高さについても追加した方がいいケースもあるでしょう。
photospace.php
Photospace Gallery本体も一部変更します。標準ではサムネイルサイズは「Photospace Gallery Options」で指定するサイズとなりますが、本件ではスライド用の画像と兼務させるため、この指定を解除します。
photospace.php変更前
if ( !empty($attachments) ) {
foreach ( $attachments as $aid => $attachment ) {
$img = wp_get_attachment_image_src( $aid , 'photospace_full');
$thumb = wp_get_attachment_image_src( $aid , 'photospace_thumbnails');/***/
$full = wp_get_attachment_image_src( $aid , 'full');
$_post = & get_post($aid);
photospace.php変更後
if ( !empty($attachments) ) {
foreach ( $attachments as $aid => $attachment ) {
$img = wp_get_attachment_image_src( $aid , 'photospace_full');
$thumb = wp_get_attachment_image_src( $aid , 'photospace_full');/***/
$full = wp_get_attachment_image_src( $aid , 'full');
$_post = & get_post($aid);
今回はcssと本体を一部を修正・追加することで、Photospace Galleryのサムネイルサイズの調整を行いました。画像本体をリサイズすることに比べて作業が軽量ではあります。
欠点を上げるなら、プラグイン更新時にcssが上書きされてしまうことでしょうか。テーマ(子テーマ)とは違い、プラグインは子プラグインは持てませんので、アップデート時は要注意です。
