ほぼほぼ完成です。

Lightboxで写真アルバム

WordPressには標準で写真アルバム用の『ギャラリー』機能がありますね。でもカッコよくない。
Lightboxというプログラムを動かすプラグインが有ればOKです。
そして我等がCocoonには最初から標準装備されています。

Cocoon 設定

Cocoon設定:画像>画像の拡大効果:Lightbox に設定します。
同様に Cocoon設定:AMP > 画像の拡大効果:AMP Lightbox (単一拡大) に設定します。
 

Lightbox 使い方

基本タグ

<a href="大きな画像のパス" rel="lightbox"><img src="小さな画像のパス" alt=""></a>

を どこかにメモっておいて下さい。このタグが重要です。
 

メディアに追加

アルバム用の画像をメディアに追加します。
この時、画像の名前を揃えておきましょう。

(例)アルバム1 (パーマリンク:alb1)
画像名:alb1-01.jpg、alb1-02.jpg、、、alb1-20.jpg、

 
と言う感じです。
 

1枚目のタグの加工

1枚目の画像のURLは、https://******/wp-content/uploads/alb1-01.jpg といったものになりますよね。それを例のタグの『大きな画像のパス』に入れます。

<a href="大きな画像のパス" rel="lightbox"><img src="小さな画像のパス" alt=""></a>
<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="小さな画像のパス" alt=""></a>

 

『小さな画像のパス』には本来サムネイル画像のURLを入れますが、同じ画像のURLにしてサイズを指定する方が簡単です。

<a href="大きな画像のURL" rel="lightbox"><img src="大きな画像のURL" alt="" width="横幅ピクセル" height="高さピクセル"></a>

 

大きな画像のサイズが 640×480ピクセルだった場合、『width="160" height="120"』のように同じ比率でサイズを指定してやればOKです。
以上を踏まえて、1枚目のタグが下のように完成しました。

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a>

 

2枚目以降のタグの加工

次はこれを画像の数だけコピペしたテキストをエディターで作成します。

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a>

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a>

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a>

………………………………………………

それの画像名を変えていきます。

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a>

<a href="https://******/wp-content/uploads/alb1-02.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-02.jpg" alt="" width="160" height="120"></a>

<a href="https://******/wp-content/uploads/alb1-03.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-03.jpg" alt="" width="160" height="120"></a>

………………………………………………

<a href="https://******/wp-content/uploads/alb1-20.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-20.jpg" alt="" width="160" height="120"></a>

 

タグの整形

次は完成したタグのスキマを埋める作業です。
</a>は1枚の画像の最後の部分で、<a が次の画像の最初の部分です。
それを </a><a という風にスペースを消します。
</a> <a とすると半角分のスペースが空きます。

<a href="https://******/wp-content/uploads/alb1-01.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-01.jpg" alt="" width="160" height="120"></a><a href="https://******/wp-content/uploads/alb1-02.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-02.jpg" alt="" width="160" height="120"></a><a href="https://******/wp-content/uploads/alb1-19.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-19.jpg" alt="" width="160" height="120"></a><a href="https://******/wp-content/uploads/alb1-20.jpg" rel="lightbox"><img src="https://******/wp-content/uploads/alb1-20.jpg" alt="" width="160" height="120"></a>

 

画像にタイトルを入れる場合

<a title="画像タイトル" href="大きな画像のURL" rel="lightbox"><img src="大きな画像のURL" alt="" width="横幅ピクセル" height="高さピクセル"></a>

 

アルバムを追加

アルバム1用の画像をメディアに追加しましたね。

(例)アルバム1 (パーマリンク:alb1)
画像名:alb1-01.jpg、alb1-02.jpg、、、alb1-20.jpg、

 
2つ目がアルバム2だった場合の画像名は、以下のようにします。

(例)アルバム2 (パーマリンク:alb2)
画像名:alb2-01.jpg、alb2-02.jpg、、、alb2-20.jpg、

 
エディターで作成したアルバム1用のタグのタイトルのパーマリンク部分だけをエディターの『検索・置換』で変更すれば、面倒なタグ作成も一瞬です。
画像の通し番号も、01、02 とかではなく、シンプルに 1 、2、3 とかの方がいいかも知れませんね。

 

固定ページでアルバム作成

新規固定ページ

写真アルバムは固定ページの方がいいと思います。
新規>固定ページをクリックします。
タグを入力するので、『コードエディター』に切り替えます。
(1)のボタンをクリックすると、黄色枠が表示されるので、(2)『コードエディター』をクリックします。(3)タイトルを入力して、(4)切り替わった本文エリアに先ほど完成させた[Lightbox]用のタグをコピペで入れます。
あとは、いつも通りパーマリンクを設定して公開して下さい。

 

アルバム表示例

タグをキチンと入力出来ていればこんな風に表示されます。
サムネイル(赤枠)をクリックします。

 

写真本体は下のように表示されます。
ついでなので各ボタンの説明も入れておきました。

 

サンプルアルバム

よかったら参照してみてください。
サンプルアルバム