2020年6月31日更新

賢威サイトにイメージギャラリーを作る方法：Gridder.js

Thumbnail

今回の記事では、Gridder.jsというjQueryライブラリと、カスタムテンプレートを使用して、WordPressテーマ：賢威7のサイトにイメージギャラリーを作る方法を紹介したいと思います。

ここで使用テーマしたテーマは賢威7のスタンダード版です。
（他のテーマを使う場合は、テーマに合わせた調整が必要になる場合があります）

カスタマイズ後

↓　デモ動画

↓ 画像をクリックする前の状態

gridder-gallery-after

↓　画像をクリックしたとき

gridder-gallery-image-open

gridder-gallery-image-open-2

※　今回はPHPファイルを編集していきます。画面が真っ白になることもあるので、PHPコードは注意して編集して下さい。

1. Gridder.js をダウンロード

まずは公式サイトから Gridder.js 本体をダウンロードします。

https://github.com/oriongunning/gridder

ダウンロードしたフォルダの中に dist フォルダーがあると思いますが、ここではその中の

  • jquery.gridder.min.js
  • jquery.gridder.min.css

を使っていきます。

gridder-folder

2. Gridder.js を動かすためのJSファイルを作成

今回使用する Gridder.js はWordPressのプラグインではなく、jQueryライブラリなので、必要なファイルをアップロードするだけでは動きません。

Gridder.js を動かすためのJSコードが必要になるので、custom-script.js というファイルを作成し、その中に以下のコードを書き込みます。

JS
コピーする
jQuery(document).ready(function($){
    $(".gridder").gridderExpander({
        scroll: true,
        scrollOffset : 60,
        scrollTo : "panel", // "panel" or "listitem"
        animationSpeed : 400,
        animationEasing : "easeInOutExpo",
        showNav: true,
        nextText: "<i class="fa fa-arrow-right"></i>",
        prevText: "<i class="fa fa-arrow-left"></i>",
        closeText: "<i class="fa fa-times"></i>",
        onExpanded : function(object){
            $(".carousel").carousel();
        },
    });
});

上のコードにある scroll: true や nextText: ... はイメージギャラリーを動かすときのオプションです。

なので、アニメーションのスピードやナビゲーションのアイコンをカスタマイズしたい時には、この $(".gridder").gridderExpander() の()内を編集することになります。

ざっくりしていますが、一応GitHubのページにも説明が書いてあります。
https://github.com/oriongunning/gridder

3. ギャラリーで使用する画像をアップロード

後の方で画像のURLを使うので、早めにギャラリーで表示させる画像を用意し、（WordPressの）メディアライブラリにアップロードしておきます。

※　ここでは 1040px * 613px の画像を12枚使用しました。

↓　下の画像でハイライトしているURLを下の方で使います

gridder-gallery-media-upload

4. Gridder.js 関連のファイルをアップロード

次にGridder.js関連のファイルを、FTPなどを使ってアップロードします。

今回は子テーマを使用したので、jsフォルダや cssフォルダが無い場合には、それらのファイルを作り、以下のようにアップロードします。

  • jsフォルダ： jquery.gridder.min.js と custom-script.js
  • cssフォルダ： jquery.gridder.min.css

5. functions.php からファイルを読み込み

以下のコードを子テーマの functions.php に追加し、先ほどアップロードしたファイルを読み込みます。

PHP
コピーする
// カスタムスクリプト の読み込み
add_action( 'wp_enqueue_scripts', 'wcl_enqueue_gridder' );
function wcl_enqueue_gridder() {
    wp_enqueue_style( 'gridder-css', get_stylesheet_directory_uri() . '/css/jquery.gridder.min.css' );
    // ↓  FontAweome の読み込み
    wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
    wp_enqueue_script( 'gridder', get_stylesheet_directory_uri() . '/js/jquery.gridder.min.js', array( 'jquery' ), '', true );
    wp_enqueue_script( 'custom-script',  get_stylesheet_directory_uri() . '/js/custom-script.js', array( 'gridder' ), '', true );
}

5-1. すでに FontAwesome を使っている場合

もし既に FontAwesome というアイコンフォントをサイト内で使っている、という場合には、ダブって読み込まれてしまうので、上のコードの中から

PHP
コピーする
// ↓  FontAweome の読み込み
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );

の部分を削除して下さい。

5-2. 親テーマを使用する場合

先ほどのPHPコードは子テーマを使用した場合のコードなので、親テーマを使用する場合には、

PHP
コピーする
get_stylesheet_directory_uri(...)

の部分を

PHP
コピーする
get_template_directory_uri(...)

に変更します。
あとは子テーマと同じように編集すれば大丈夫です。

6. カスタムテンプレート＋固定ページを作成

今回、サイドバー無しでイメージギャラリーを動かしたいので、そのような場合に便利なカスタムテンプレートを利用します。

（↑　最初から用意されている1カラムのレイアウトでは、コンテンツの下にサイドバーが表示されてしまうので）

gridder-gallery.php という名前のPHPファイルを作成し、以下のコードを gridder-gallery.php の先頭に書き込みます。

PHP
コピーする
<?php
/*
Template Name: Gridder Image Gallery
*/
?>

これで固定ページの編集画面から、先ほど作った Gridder Image Gallery というテンプレートを選択できるようになりました。

page-attribute

イメージギャラリー自体はPHPファイルに書いていくので、ここではタイトルだけ入力して公開します。

↓　この状態ではサイドバーが表示されずに、ヘッダーとフッターだけが表示されるようになります

gridder-page-template

7. カスタムテンプレート（gridder-gallery.php）を編集

それではここから gridder-gallery.php ファイルを編集して、イメージギャラリーを表示させるための構造（HTML部分）を作っていきましょう。

（7-1 から 7-3 までは簡単な説明です）

7-1. 構造について

今回はHTMLサイト風にイメージギャラリーを作るので、大枠は下のようになります。

HTML
コピーする
<!--▼メインコンテンツ-->
<main>
    <div class="gridder-wrap">  
        <ul class="gridder">
            <li class="gridder-list" ...>　←　サムネイルのような、クリック前の画像
                ..
            </li>
            ..
        </ul>
        <div class="gridder-content" id="...">
        ...　　　　←　クリックすると拡大表示される画像がここに入る
        </div>
        ...
    </div>
</main>
<!--▲メインコンテンツ-->

<li class="gridder-list" ...> と <div class="gridder-content" id="..."> の2つで1セットとなり、このセットが表示させたい画像の分だけ必要になります。

7-2. IDについて（gridder-list と gridder-content を連携）

先ほど <li class="gridder-list" ...> と <div class="gridder-content" id="..."> の2つで1セットになると書きましたが、これらを連携するにはIDと data-… が必要になります。

gridder-gallery-php-1

例えば、クリックしたときの画像にIDを gridder-content-101 と付ける場合、サムネイルとなる方のliタグには、data-griddercontent="#gridder-content-101 を追加するという感じです。

これをコードとして書くと、下のようになります。

HTML
コピーする
↓　サムネイル
<li class="gridder-list" data-griddercontent="#gridder-content-101">...</li>
↓　表示させたい画像
<div id="gridder-content-101" class="gridder-content">...</div>

7-3. 画像について

Gridder.js では、一つの画像からサムネイルのようなものを作ってくれるので、サムネイルとクリック時に表示させる画像で分けて用意する必要はありません。

サムネイルについてもクリック時の画像についても、アップロードしたメディアライブラリから、URLを下のようにコピペすれば大丈夫です。

↓ .gridder-list：

HTML
コピーする
<div class="image" style="background-image: url('http://local.wordpress.dev/wp-content/uploads/2013/03/unicorn-wallpaper.jpg');">

↓ .gridder-content：

HTML
コピーする
<img src="http://local.wordpress.dev/wp-content/uploads/2013/03/unicorn-wallpaper.jpg">

gridder-gallery-media-upload

7-4. カスタムテンプレート（gridder-gallery.php）のコードを仕上げ

ここまでを踏まえて gridder-gallery.php ファイルを編集すると、コード全文は以下のようになります。

http://..../img/画像○○.jpg の部分を表示させたい画像のURL（パス）に変更して下さい。

一度に書くとかなりの長文になってしまいますが、編集が必要になるのはそこまで多くありません。

↓　gridder-gallery.php 全文

PHP
コピーする
<?php
/*
Template Name: Gridder Image Gallery
*/
?>
<?php get_header(); ?>
<div class="main-body">
<div class="main-body-in">
<?php if ((is_front_page() && get_query_var('paged') > 1) || is_home() || is_front_page() && (isset($_GET['post_type']) && $_GET['post_type'] != "")) { ?>
<!--▼パン屑ナビ-->
<?php the_breadcrumbs(); ?>
<!--▲パン屑ナビ-->
<?php } ?>
    <h2><?php the_title(); ?></h2>
    <!--▼メインコンテンツ-->
    <main>
        <div class="gridder-wrap">
            <ul class="gridder">
                <li class="gridder-list" data-griddercontent="#gridder-content-101">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Thresh</span><br>
                            <span class="description">the Chain Warden</span>
                        </div>
                    </div>
                </li>
                <li class="gridder-list" data-griddercontent="#gridder-content-102">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Aatrox</span><br>
                            <span class="description">the Darkin Blade</span>
                        </div>
                    </div>
                </li>
                <li class="gridder-list" data-griddercontent="#gridder-content-103">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Tryndamere</span><br>
                            <span class="description">the Barbarian King</span>
                        </div>
                    </div>
                </li>
                <li class="gridder-list" data-griddercontent="#gridder-content-104">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Gragas</span><br>
                            <span class="description">the Rabble Rouser</span>
                        </div>
                    </div>
                </li>
                <li class="gridder-list" data-griddercontent="#gridder-content-105">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Cassiopeia</span><br>
                            <span class="description">the Serpent's Embrace</span>
                        </div>
                    </div>
                </li>
                <li class="gridder-list" data-griddercontent="#gridder-content-106">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Poppy</span><br>
                            <span class="description">the Iron Ambassador</span>
                        </div>
                    </div>
                </li>
                <li class="gridder-list" data-griddercontent="#gridder-content-107">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Ryze</span><br>
                            <span class="description">the Rogue Mage</span>
                        </div>
                    </div>
                </li>
                <li class="gridder-list" data-griddercontent="#gridder-content-108">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Sion</span><br>
                            <span class="description">The Undead Juggernaut</span>
                        </div>
                    </div>
                </li>
                <li class="gridder-list" data-griddercontent="#gridder-content-109">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Annie</span><br>
                            <span class="description">the Dark Child</span>
                        </div>
                    </div>
                </li>
                <li class="gridder-list" data-griddercontent="#gridder-content-110">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Karma</span><br>
                            <span class="description">the Enlightened One</span>
                        </div>
                    </div>
                </li>
                <li class="gridder-list" data-griddercontent="#gridder-content-111">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Nautilus</span><br>
                            <span class="description">the Titan of the Depths</span>
                        </div>
                    </div>
                </li>
                <li class="gridder-list" data-griddercontent="#gridder-content-112">
                    <div class="image" style="background-image: url('http://..../img/画像○○.jpg');">
                        <div class="overlay">
                            <span class="title">Lux</span><br>
                            <span class="description">the Lady of Luminosity</span>
                        </div>
                    </div>
                </li>
            </ul>
            <div id="gridder-content-101" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Thresh</h2><br />
                    <h3>the Chain Warden</h3>
                </div>
            </div>
            <div id="gridder-content-102" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Aatrox</h2><br />
                    <h3>the Darkin Blade</h3>
                </div>
            </div>
            <div id="gridder-content-103" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Tryndamere</h2><br />
                    <h3>the Barbarian King</h3>
                </div>
            </div>
            <div id="gridder-content-104" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Gragas</h2><br />
                    <h3>the Rabble Rouser</h3>
                </div>
            </div>
            <div id="gridder-content-105" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Cassiopeia</h2><br />
                    <h3>the Serpent's Embrace</h3>
                </div>
            </div>
            <div id="gridder-content-106" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Poppy</h2><br />
                    <h3>the Iron Ambassador</h3>
                </div>
            </div>
            <div id="gridder-content-107" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Ryze</h2><br />
                    <h3>the Rogue Mage</h3>
                </div>
            </div>
            <div id="gridder-content-108" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Sion</h2><br />
                    <h3>The Undead Juggernaut</h3>
                </div>
            </div>
            <div id="gridder-content-109" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Annie</h2><br />
                    <h3>the Dark Child</h3>
                </div>
            </div>
            <div id="gridder-content-110" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Karma</h2><br />
                    <h3>the Enlightened One</h3>
                </div>
            </div>
            <div id="gridder-content-111" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Nautilus</h2><br />
                    <h3>the Titan of the Depths</h3>
                </div>
            </div>
            <div id="gridder-content-112" class="gridder-content">
                <img src="http://..../img/画像○○.jpg">
                <div class="description">
                    <h2>Lux</h2><br />
                    <h3>the Lady of Luminosity</h3>
                </div>
            </div>
    </main>
    <!--▲メインコンテンツ-->
</div>
</div>
<?php get_footer(); ?>

8.最後にCSSでスタイリング

あとはCSSでスタイリングすれば完成です。

以下のコードをお使いのCSSファイルに追加します。

CSS
コピーする
.main-body .main-body-in {
    width: 1170px;
}
.gridder-wrap {
    width: 80%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.gridder-wrap:before {
    content: "";
    display: table;
}
.gridder-wrap:after {
    display: table;
    content: "";
    clear: both;
}
.gridder.hasSelectedItem .gridder-list {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
}
.gridder .gridder-list {
    display: inline-block;
    position: relative;
    cursor: pointer;
    width: 32.66667%;
}
.gridder-list:nth-child(n) {
    margin-bottom: 1%;
    margin-right: 1%;
}
.gridder .gridder-list:nth-of-type(3n) {
    margin-right: 0;
    margin-bottom: 0;
}
.gridder-list .image {
    background-color: #EEE;
    background-size: cover;
    background-position: center;
    height: 250px;
}
.gridder-list .overlay {
    position: absolute;
    left: 15px;
    top: 15px;
    color: #FFF;
}
.gridder-list .overlay .title {
    font-weight: 800;
    font-size: 16px;
}
.gridder-list img {
    width: 100%;
    max-width: 100%;
}
.gridder.hasSelectedItem .gridder-list.selectedItem {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 100;
}
.gridder-show {
    float: left;
    display: block;
    padding: 0px;
    margin-bottom: 20px;
    -webkit-box-shadow: inset 0px 0px 20px 5px rgba(0,0,0,0.16);
    -moz-box-shadow: inset 0px 0px 20px 5px rgba(0,0,0,0.16);
    box-shadow: inset 0px 0px 20px 5px rgba(0,0,0,0.16);
}
.gridder-show .description {
    position: absolute;
    top: 60px;
    left: 0px;
    right: 0px;
    text-align: center;
    font-family: Arial, serif;
    font-weight: 300;
    font-size: 16px;
    width: 100%;
    line-height: 170%;
    color: #FFF;
}
.gridder-show .description h2 {
    display: inline-block;
    background: #000;
    color: #FFF;
    padding: 20px;  
    margin-bottom: 5px;
    font-size: 60px;
    font-weight: bold;
}
.gridder-show .description h3 {
    display: inline-block;
    background: #000;
    color: #FFF;
    padding: 5px;
    font-size: 20px;
    margin-bottom: 5px;
    border-bottom: none;
}
.gridder-navigation {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    text-align: center;
}
.gridder-navigation a {
    background: #FFF;
    display: inline-block;
    padding: 15px;
    color: #000;
    text-decoration: none;
    font-size: 24px;
    margin-right: 0px;
    transition: all .3s ease-in-out;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
}

これでイメージギャラリーの完成です！

↓　クリック前

gridder-gallery-after

↓　クリック時

gridder-gallery-image-open

gridder-gallery-image-open-2

今回のカスタマイズは以上になります。
最後まで閲覧ありがとうございました。

Home

関連記事

トップに戻る

Copyrights © WebCraftLogAll Rights Reserved.