カスタム三兄弟：画像ギャラリーを作ってみよう

今回の投稿は、松戸WordPress部の勉強会「カスタム三兄弟（応用編）画像ギャラリーを作ってみよう」のフォローアップです。

レベル：初級から中級者になりたい人向け

WordPressのメディア挿入のギャラリーを使えば、とっても簡単にギャラリーを投稿記事に掲載することができます。
でも、関連付けられた画像を思い通りに取得できるようになれば、自由にレイアウトしたり、Ajaxを利用してステキなギャラリーを設置できるようになります。今回はその第一歩です。

アジェンダ

題材と環境
カスタム投稿タイプ設置
画像登録用のカスタムフィールドを設置（ループ）
フロントエンドに表示する
自由自在にギャラリーを設置する

題材と環境

今回の題材の設定：

各地のシェアオフィスを紹介するカスタム投稿タイプを設置して、カスタムフィールドに登録された写真のギャラリーを詳細ページに設置する
というものです。

チュートリアル環境（参考）：

TwentyTwelve（テーマ）
Custom Post Type UI：カスタム投稿タイプおよびカスタムタクソノミを実装するプラグイン
Custom Field Suite：カスタムフィールドを実装するプラグイン
Show Current Template：ページ表示に読み込まれているテンプレートファイルを調べる
WP Multibyte Patch：WPデフォルトのプラグイン

カスタム投稿タイプ設置

WordPressのプラグイン Custom Post Type UI を使って実装します。詳しい使用法は割愛します。
以下の設定で、カスタム投稿タイプ「シェアオフィス（shareoffice）」を作成。

投稿タイプ名：shareoffice
ラベル：シェアオフィス
単数形のラベル：シェアオフィス
Menu Name：シェアオフィス
新規追加：新規追加
新規項目追加：新規シェアオフィス
編集：編集
項目を編集：シェアオフィスを編集
新規項目：新規シェアオフィス
表示：シェアオフィスを表示
項目を表示：シェアオフィスを表示
項目検索：シェアオフィスを検索
見つかりません：見つかりません
ゴミ箱にはありません：ゴミ箱にはありません
親：親
Has Archive：true

その他はデフォルトで作成すると、管理メニューに「シェアオフィス」というカスタム投稿タイプのメニューが表示されているはずです。

画像登録用のカスタムフィールドを設置（ループ）

今回は Custom Field Suite（以下CFS）で実装してみます。オススメは Advanced Custom Fields（以下ACF）ですが、特定の同一カスタムフィールドをリピート（ループ）設置したいため、フリーで使えるCFSを使います。（ACFは有料で可能です。）

CFS をインストールして有効化すると、「フィールドグループ」というメニューができているはずです。フィールドグループを新規作成します。手順は以下のとおり：

タイトル：ギャラリー
［新規フィールドを追加］をクリックして新規フィールドを三つ追加
　　一つ目のフィールド
　　　　ラベル：ギャラリー
　　　　名前：cfgallery
　　　　フィールドタイプ：ループ（複製フィールド）
　　　　行ラベル：画像ループ
　　　　ボタンラベル：ギャラリーを追加
　　二つ目のフィールド：
　　　　ラベル：画像選択
　　　　名前：cfimage
　　　　フィールドタイプ：ファイルのアップロード
　　　　返り値：添付ファイルID
　　三つ目のフィールド：
　　　　ラベル：キャプション
　　　　名前：cfcaption
　　　　フィールドタイプ：単一行テキスト
配置ルール/投稿タイプ：「等しい」を選択し、その右のフィールドで「shareoffice」を選択

［更新］ボタンをクリックしてフィールドグループを保存します。そうすると次のような画面になるはずです。フィールド「ギャラリー」の下の青いボーダーに注目！

フィールド「画像追加」の左にある下駄マークをドラッグして「ギャラリー」の下にうまくドロップすると次のように「ギャラリー」の下に「画像追加」「キャプション」を階層化できます。

この状態で保存して、「シェアオフィス」の新規追加ページを開いてみてください。そうすると、カスタムフィールドが［コンテンツエディタ］の下に表示されているはずです。

［ギャラリーを追加］ボタンをクリックすると、複数の画像セットを追加していくことができます。（ループもしくはリピート）

フロントエンドに表示する

新規「シェアオフィス」で、「コンテンツエディタ」、「ギャラリー」CFに画像を5～6枚など、適当に登録して［公開］します。

まだ画像は表示できていません

タイトルバー下の［シェアオフィスを表示］をクリックしてさっそく記事を表示してみます。
タイトルとコンテンツエディターの内容は正しく表示されているものの、画像は表示されていません。
CFの値を取得して表示するコードを書き込んでいかなければならないからです。

ステップ1：編集するテンプレートファイルはどれ？

参考：WordPressのテンプレート階層を理解する：　codex の テンプレート階層/概観図

WordPressプラグイン Show Current Template を有効にしていると、上部アドミンバーに現在の表示に使っているテンプレートファイルが表示されているはずです。それによると、single.php がメインになっていることでしょう。

この single.php から　<?php get_template_part( ‘content’, get_post_format() ); ?>　により、content.php を読み込んでいるはずです。

いくつか方法はあるんですけど、この度は、
single.php から、表示する記事のpost_type が shareoffice なら content-shareoffice.php を読み込む
という条件にすることにします。

ステップ1-1： content.php をコピーして、content-shareoffice.php を作成する
ステップ1-2： 条件に合うように single.php 内の上記コードを書き換える

<?php
if ( $post_type == 'shareoffice' ) {
    get_template_part( 'content', 'shareoffice' );
} else {
    get_template_part( 'content', get_post_format() );
}
?>

アドミンバーを確認すると、single.php そして content-shareoffice.php になっているはず！OKなら・・・

ステップ2：content-shareoffice.php を編集する

content-shareoffice.php で the_content という関数を見つけてください。これは、コンテンツエディタの記述を出力するための関数です。この下に、コードを挿入します。

<?php
// Custom Field Suiteの関数を使った例
$cfgallery = $cfs->get('cfgallery'); // CFSの場合

echo '<pre>';
var_dump($cfgallery);
echo '</pre>';

?>

これで、ページを見ると、CFの値を取得できていることを確認することができます。使用するプラグインによって値の取得方法は異なります。
プラグインの取得方法に依存せず、WordPress の関数で取得する場合は、

<?php
// WordPressの関数を使った例
$cfimage = get_post_meta($post->ID, 'cfimage', false);
$cfcaption = get_post_meta($post->ID, 'cfcaption', false);

echo '<pre>';
var_dump($cfimage, $cfcaption);
echo '</pre>';

?>

プラグインの関数を使うならフィールドグループごとに下層の値も取得できるのに対して、後者のWordPressの関数を使う場合は下層のCFごとに値を取得することになります。プラグインの関数があるならそちらのほうが簡単そうですね。

参考：php の関数 var_dump() でデバッグ（解説参考：PHPを学ぶ時、最初に憶えて欲しいvar_dump）

ポイント：必ず、取得したい値が取得できているかを確認しながら開発を進める！

コード例1：CFSの関数を使った場合

<?php
$cfgallery = $cfs->get('cfgallery');
$i = 0;

if ( count($cfgallery) > 0 ) : ?>
<ul class="soGallery">
    <?php
    foreach ( $cfgallery as $arr ) :
    
    // 画像を取得
    $imgSTag = wp_get_attachment_image( $arr["cfimage"], 'thumbnail', false );
    $imgLArr = wp_get_attachment_image_src( $arr["cfimage"], 'large', false );
    $imgLSrc = $imgLArr[0];
    $imgCap = $arr["cfcaption"];
    
    // フロート解除行の設置（1行4枚の場合）
    if ( $i%4 == 0 ) : ?>
    <li class="clear"> </li>
    <?php
    endif;
    
    // 画像とキャプションを表示 ?>
    <li><a href="<?php echo $imgLSrc; ?>"><?php echo $imgSTag; ?></a><?php if ($imgCap) echo "<p>{$imgCap}</p>"; ?></li>
    <?php
    $i++;
    endforeach; ?>
</ul>
<?php
endif; ?>

17行目：「$i を 4 で割った値が 0 つまり割り切れる場合」という意味

コード例2：WordPressの関数を使った場合

<?php
$cfimages = get_post_meta($post->ID, 'cfimage', false);
$cfcaptions = get_post_meta($post->ID, 'cfcaption', false);

if ( count($cfimages) > 0 ) : ?>
<ul class="soGallery">
    <?php
    for ( $i=0; $i <= count($cfimages)-1; $i++ ) :
    
    // 画像を取得
    $imgSTag = wp_get_attachment_image( $cfimages[$i], 'thumbnail', false );
    $imgLArr = wp_get_attachment_image_src( $cfimages[$i], 'large', false );
    $imgLSrc = $imgLArr[0];
    $imgCap = $cfcaptions[$i];
    
    // フロート解除行の設置（1行4枚の場合）
    if ( $i%4 == 0 ) : ?>
    <li class="clear"> </li>
    <?php
    endif;
    
    // 画像とキャプションを表示 ?>
    <li><a href="<?php echo $imgLSrc; ?>"><?php echo $imgSTag; ?></a><?php if ($imgCap) echo "<p>{$imgCap}</p>"; ?></li>
    <?php

    endfor; ?>
</ul>
<?php
endif; ?>

コード例1とコード例2を並べてみると、たいした違いはないですね。好みというところでしょうか。

style.cssの記述例

ul.soGallery {
}
ul.soGallery li {
    list-style:none;
    margin:0 5px 0 0;
    float:left;
}
ul.soGallery li.clear {
    clear:both;
    height:10px;
    width:100%;
}
ul.soGallery li p {
    margin:0;
    text-align:center;
}

こんなイメージになります。

自由自在にオリジナルギャラリーを設置する

カスタムフィールドの設置の仕方、値の取得方法などについて理解すると、ギャラリー（だけではない）を自由自在に設置できるようになります。
ここではJqueryで実装した完全オリジナルの例を紹介します。（下記コードとは別にJqueryを読み込んでおく必要があります。）

<?php
$cfimages = get_post_meta($post->ID, 'cfimage', false);
$cfcaptions = get_post_meta($post->ID, 'cfcaption', false);

if ( count($cfimages) > 0 ) : ?>
<div class="soGallery">
    <div id="soImage"></div>
    <ul>
    <?php
    for ( $i=0; $i <= count($cfimages)-1; $i++ ) :
    
    // 画像を取得
    $imgSTag = wp_get_attachment_image( $cfimages[$i], 'thumbnail', false );
    $imgMArr = wp_get_attachment_image_src( $cfimages[$i], 'medium', false );
    $imgMSrc = $imgMArr[0];
    $imgCap = $cfcaptions[$i];
    
    // 画像とキャプションを表示 ?>
        <li <?php if ( $i==0 ) echo "class='cur'"; ?>><a href="<?php echo $imgMSrc; ?>" title="<?php echo $imgCap; ?>"><?php echo $imgSTag; ?></a></li>
    <?php

    endfor; ?>
    </ul>
    <div class="both"></div>
</div>

<script type="text/javascript">
jQuery(function ($) {
    
    var ini_atag = $('.soGallery ul li:first-child a');
    display_large_image ( ini_atag );

    function display_large_image ( atag ) {
        var img = atag.attr('href');
        var cap = (atag.attr('title')) ? '<p>' + atag.attr('title') + '</p>' : '';
        $('#soImage').html('<img src=' + img + '>' + cap);
    }
    
    $('.soGallery ul li a').live('click', function(){
        var atag = $(this);
        display_large_image ( atag );
        $('.soGallery ul li').removeClass('cur');
        $(this).parent('li').addClass('cur');
        return false;
    });

});
</script>
<style type="text/css">
<!--
.soGallery {
    background-color:#000;
    padding:10px 0 5px 0;
}
#soImage {
    height:440px;
    text-align:center;
}
#soImage p {
    color:#FFF;
}
.soGallery ul{
    padding-left:17px;
}
.soGallery ul li {
    list-style:none;
    margin:0 5px 0 0;
    float:left;
}
.soGallery ul li a img {
    -webkit-transition: all 0.4s ease;
       -moz-transition: all 0.4s ease;
           -o-transition: all 0.4s ease;
                transition: all 0.4s ease;
    opacity: 0.6;
    filter: alpha(opacity=60);
}
.soGallery ul li.cur a img,
.soGallery ul li a:hover img {
    opacity: 1;
    filter: alpha(opacity=100);
}
.both {
    clear:both;
    height:1px;
    width:100%;
}
-->
</style>
<?php
endif; ?>

こんなイメージです

この例での画像サイズ（［管理画面/設定/メディア］）
サムネイルのサイズ：80ｘ80
中サイズ：600ｘ400

参考：
［管理画面/設定/メディア］でサイズを変更した場合、登録済みの画像のサムネイル等をジェネレートしなおすには WordPressプラグイン Force Regenerate Thumbnails が便利です。

サンプルで使用した画像

今回の勉強会を開催させていただいた松戸のコワーキングスペース Banana Cluster です。

前/次の記事

« Advanced Custom Fieldsで定義したすべてのフィールドを取得する方法

カスタム三兄弟：画像ギャラリーを作ってみよう

アジェンダ

題材と環境

今回の題材の設定：

チュートリアル環境（参考）：

カスタム投稿タイプ設置

画像登録用のカスタムフィールドを設置（ループ）

フロントエンドに表示する

まだ画像は表示できていません

ステップ1：編集するテンプレートファイルはどれ？

ステップ2：content-shareoffice.php を編集する

自由自在にオリジナルギャラリーを設置する

サンプルで使用した画像

前/次の記事

直接メールしてみる

コメントを残すコメントをキャンセル

Advertisement

Twitter

Facebook

アジェンダ

題材と環境

今回の題材の設定：

チュートリアル環境（参考）：

カスタム投稿タイプ設置

画像登録用のカスタムフィールドを設置（ループ）

フロントエンドに表示する

まだ画像は表示できていません

ステップ1：編集するテンプレートファイルはどれ？

ステップ2：content-shareoffice.php を編集する

自由自在にオリジナルギャラリーを設置する

サンプルで使用した画像

前/次の記事

直接メールしてみる

コメントを残す コメントをキャンセル

Advertisement

Twitter

Facebook

コメントを残すコメントをキャンセル