Blog

WordPressでアイキャッチ画像とColorboxを利用してギャラリーサイトを作る

2014.06.08 2020.10.25 WordPress

写真のギャラリーサイトなどではサムネイル画像を一覧で表示し、それをクリックするとLightbox系のjQueryプラグインで写真を拡大表示する、というような動作をさせることがよくあります。

今回はWordPressでアイキャッチ画像機能と「Colorbox」というjQueryプラグインを利用してギャラリーサイトを構築する方法をご紹介します。

まずは仕様説明

  • カスタムポストタイプを作成し、そこに追加した記事のアイキャッチ画像をサムネイルとして一覧表示する
  • サムネイルをクリックすると「Colorbox」で画像を拡大表示する

シンプルな仕様ですが、ギャラリーサイトを構築する上ではけっこう重宝すると思います。

これからご説明する手順を応用していろいろ試してみてください。

アイキャッチ画像を有効にする

WordPressにはアイキャッチ画像を設定できる機能があります。
今回はこれを使用してサムネイル画像を生成していこうと思います。

まず、WordPressでアイキャッチ画像を利用できるようにします。
WordPressテーマのfunctions.phpに下記のソースを追加します。

functions.php
//アイキャッチ画像
add_theme_support('post-thumbnails');
add_image_size(120,90,true);

上記の記述でアイキャッチ画像が有効になりました。

これにより記事編集画面の向かって右側、公開設定エリアの下にアイキャッチ画像を指定するエリアが追加されます。

ここでアイキャッチ画像を設定すると、横120px・縦90pxのアイキャッチ画像が生成されるようになりました。

3行目のところの数字を変えればお好きなサイズに変更できます。

WordPressでアイキャッチ画像とColorboxを利用してギャラリーサイトを作る

Colorboxを設置する

次にjQueryプラグイン「Colorbox」を設置します。

まずは下記のページからファイルをダウンロードして解凍します。

Colorbox – a jQuery lightbox

解凍すると「colorbox-master」というフォルダができますので、その中の「example1～5」の5つのフォルダをブラウザで開いてお好みのものを選びます。

選んだらそのフォルダ(example1～5のどれか)の中にある「images」フォルダの画像をwordPressテーマの画像が入っているフォルダにアップロードします。

それができたら、WordPressテーマ(「wp-content」→「themes」の中にあります)のフォルダ内に「js」というフォルダを新規作成し、「colorbox-master」フォルダにある「jquery.colorbox-min.js」というファイルをアップロードします。

次に「example1～5」フォルダ(上記で選んだもの)内にある「colorbox.css」というファイルをWordPressテーマのフォルダ内にアップロードします。

ちょっとややこしいかもしれませんが、下記のようになっていれば大丈夫です。

WordPressでアイキャッチ画像とColorboxを利用してギャラリーサイトを作る

カスタムポストタイプを使えるようにする

WordPressには初期状態で「投稿」「固定ページ」という投稿形式がありますが、カスタムポスト機能を使うと「投稿」「固定ページ」以外に独自の投稿形式を作ることができます。

特に必要がなければ「投稿」を利用してもいいのですが、クリエイターさんのギャラリーサイトなどの場合、サイト内にブログも併設するケースが多いと思うので、ついでにカスタムポストを利用する手順もご紹介します。

WordPressテーマのfunctions.phpに下記のソースを追加します。

functions.php
//カスタムポストタイプ(写真)の追加
register_post_type(
    'photos',
    array(
        'label' => '写真',
        'public' => true,
        'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'custom-fields' ,'comments' ),
        'menu_position' => 5,
        'has_archive' => true
    )
);

5行目の「label」のところは「写真」となっていますが、これが「投稿」「固定ページ」のようにWordPressダッシュボードのサイドバーに表示されます。

お好みで変更してください。

これでカスタムポストタイプを使えるようになりました。

WordPressテーマを編集する

最後に、WordPressテーマの編集をします。

まずheader.phpなどhead要素が記述してあるところを開いて、jQueryを読み込むための記述をします。

header.php
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.colorbox-min.js"></script>

上記ソースを記述したすぐ下にColorboxを動かすため、下記のように記述します。

jQuery
<script type="text/javascript">
	$(function(){
		$("a[rel='gallery']").colorbox();
	});
</script>

次に、ソース内のサムネイル一覧を表示させたい箇所に下記ソースを記述します。

index.phpなど（任意の箇所）
<?php query_posts('post_type=photos&showposts=-1'); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div class="thumb">

<?php if (get_post_thumbnail_id()): ?><?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID) ,'full'); ?><a rel="gallery" href="<?php echo $src[0]; ?>" ><?php the_post_thumbnail();?></a><?php endif; ?>

</div><!-- .thumb -->

<?php endwhile; endif; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>

1行目の「post_type=photos」は前工程でカスタムポストタイプを使うためにfunctions.phpに記述したソース3行目の「photos」と紐づいていますので、変更する際には注意してください。

上記では表示数を無制限(投稿されている分すべて)に指定してありますが、1行目の「-1」を変更することで表示数を設定することもできます。

たとえば6件のみ表示させたい場合は

<?php query_posts('post_type=photos&showposts=6'); ?>

というように変更します。

<?php echo $src[0]; ?>はサムネイル画像の元になっている画像のURLを呼び出しています。

また<?php the_post_thumbnail();?>はサムネイルのimg要素を呼び出すものです。

a要素の「rel=”gallery”」はColorboxを動かすためのものですので、忘れずに記述しておきましょう。

これでテーマの編集は完了です。

上記ソースにより生成されるHTMLソースは以下のようになります。

HTML
<div class="thumb">

<a rel="gallery" href="Colorboxで表示する画像のパス" ><img width="120" height="90" src="アイキャッチ画像のパス" /></a>

</div><!-- .thumb -->

まとめ

今回ご紹介した内容は、ギャラリーサイトを構築する際に最低限必要とされる機能のみ実装する手順です。

いろいろと応用できると思いますのでどうか参考にして頂ければうれしいです。

それでは！