ブログ内の画像をページに一覧表示＆絞込み検索で表示させるプラグイン
「Image Browser」
表示された画像は、投稿へのリンクになる。
サンプル
「Image Browserプラグインサイト」に、あるフォーム
便利なプラグインです。
NOTE;
ファイルアップロードでアップロードした画像に限る。
このブログのように、FTPで画像フォルダディレクトリーにアップロードしてる画像はヒットしない。
1、プラグインのアップロードと有効化。
2、管理メニュー – 設定 – “Image Browser”を開く
3、「画像一覧」などのページを作成し、ショートコードを入れて公開。
デフォルトショートコード
[imagebrowser]
オプション付加ショートコード例
[imagebrowser year=2009 category=10]
ページを開いた時に最初に表示される条件付きショートコードです。上の場合、カテゴリーID 10 の 2009年の画像が最初に表示される。
Image Browser Options プラグインオプション
デフォルトショートコードで表示させる際に、画像の表示数やカテゴリーなどを予め指定しておく場合
ショートコードにオプションを付加できるので、ここはデフォルトでも大丈夫です。
“Year”
年
“Month:”
月
“Number of columns:”
カラム表示の数
NOTE;
テストではうまく動作せず。エントリー内の画像をCSSで指定しているとカラム表示されないかも。
“Images per page:”
1ページに表示する最大数
“Start at page:”
絞込み後に最初に表示するページナンバー
NOTE;
“4″と入力すると4ページ目が表示されるが、画像がそこまで無い場合何も表示されないので、デフォルトの”1″推奨
“Image Size:”
表示する画像サイズ
サムネイルやミディアム、フルサイズなど
“Sort by:”
並び替
“Sort in:”
並び順
“Category:”
All or カテゴリー名
“Keywords:”
推奨 未入力
“ビスコ”と入力すると、フォームのキーワード検索欄にビスコと表示された状態に
設定が終わったら「変更を保存」をクリック
デフォルトの状態でのフォームは英語表示なので、日本語に変更する場合はプラグインフォルダのimage-browser/image-browser.phpを修正する。
サーバーによってはファイルの文字コードをUTF-8に
各修正箇所
"年"
<label for='year'>year</label>
変更例
<label for='year'>年</label>
"月"
<label for='month'>month</label>
変更例
<label for='month'>月</label>
"カテゴリー"
<label for='img_cat'>Category</label>
変更例
<label for='img_cat'>カテゴリー</label>
"キーワード"
<label for='keywords'>" . __('keywords') . "</label>
変更例
<label for='keywords'>" . __('キーワード') . "</label>
"並び替"
<label for='sortby'>" . __('Sort by') ."</label>
変更例
<label for='sortby'>" . __('並び替') ."</label>
インプット内
'post_title' => 'Post Title',
'post_date' => 'Date',
'post_excerpt' => 'Caption'
変更例
'post_title' => 'タイトル',
'post_date' => '更新日',
'post_excerpt' => '内容'
"表示数"
<label for='limit'>" . __('items per page') . "</label>
変更例
<label for='limit'>" . __('最大表示数') . "</label>
"実行ボタン"
<input type='submit' value='browse images' />
変更例
<input type='submit' value='画像表示' />
絞込みに該当する画像が無かった時に表示されるメッセージ
"No images were found for the criteria you selected"
該当箇所
return __("No images were found for the criteria you selected");
変更例
return __("絞込みに該当する画像はありません");
画像がヒットした時に表示されるメッセージ
"Displaying images 1-12 of 12 images"
該当箇所
<div style='float:left'>Displaying images $min-$max of
$image_count images</div>
変更例
<div style='float:left'>$image_count 件中 $min-$max 表示</div>
変更後の表示例
12 件中 1-12 表示
以上。
フォームのレイアウトはCSSで行って下さい。
PR
