実用6. Simple Lightbox

WordPressには標準で写真アルバム用の『ギャラリー』機能がありますね。でもカッコよくない。
Lightboxというプログラムを動かすプラグインが有ればOKです。
わたしは最近『Simple Lightbox』に変えました。
名前の通りシンプルに使えます。

追加・設定

プラグイン追加

ダッシュボードから「プラグイン>新規追加」をクリックします。

 

インストール・有効化

キーワード:『Simple Lightbox』で名前が完全一致のものを今すぐインストールして、有効化します。

 

外観・Lightbox

外観に追加されました。
ダッシュボードから「外観>Lightbox」をクリックします。

 

Lightbox 設定

画像が縦長なので分割して2列にしています。
『有効化』と『グループ化』はデフォルトのままで触っていません。
『UI』テーマはライトかダークが選択できます。ピンク下線は無効に変更しました。スライドショーにする場合はピンク下線を有効にして秒数等も設定して下さい。
『ラベル』も触っていません。変更できます。
全ての設定が終了したら変更を保存をクリックします。

 

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]用のタグをコピペで入れます。
あとは、いつも通りパーマリンクを設定して公開して下さい。

※有料サーバーの場合は問題有りませんが、無料サーバーでは(2)で再度『ビジュアルエディター』に切り替えると「エラーが発生したためプレビューできません」と言う表示になります。
 

アルバム表示例

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

 

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

 

サンプルアルバム

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