LightBox風jQueryはは「colorBox」 Wordpressプラグインは「Custom Post Type UI」、「Advanced Custom Fields」を使用しています。

1. WordBench vol.10
LightBox風 jQueryを使ってポップアップ上で
カスタムフィールドを出力
2012.12.16

2. 自己紹介
秋 山 一 樹 〈アキヤマ カズキ〉
デザイナー歴もうすぐ2年
WordPressの経験は1年半程
twitter : akiyum
facebook: kazuki Akiyama

3. まず。 。
。
LightBox風 JavaScript を使って
ポップアップ上でカスタムフィールドを出力
って…？

4. 答え
ポートフォリオサイトなどにある
LightBoxとかで表示される要素で
画像 だけでなく 文字情報 もいれたい。
しかもその文字情報を、カスタムフィールドから
出力します。

5. 例えば
コレが

6. 例えば
こうなる
カスタムフィールドで出力

7. メリット
CMS管理でするから
webサイト制作の知識がない人でも入力できます。
（簡単なwebの知識は必要だけども）
いちいちhtmlに記述して
FTPから更新する手間が省けます。
クライアントワークだったら提案材料として使えるかも

8. おおまかな実装の手順
1. WordPressをいれる
（ここの説明は省きます）
2. カスタム投稿タイプとカスタムフィールドを導入
3. jQueryプラグイン
「colorBox」を導入
4. カスタム投稿が出力されるページをコチョコチョ
5. 管理画面からカスタム投稿を公開していく
6. 完 成！

9. 2. カスタム投稿タイプとカスタムフィールドを導入
のまえに

10. 2. カスタム投稿タイプとカスタムフィールドを導入
カスタム 投 稿 タイプ
カスタムフィー ルド
ってな に？

11. カスタム投稿とは
ざっくり説明すると
「投稿」をもう一つ作る、
みたいな感じ
ブログのために 「投稿」があるけれども、料理のレシピ集
とかも「投稿」にいれると、カテゴリーわけできたとしても
とっても管理しづらくなる。 だから 料理のレシピ集 専用の
「投稿」をつくろうということ
例えていうと、
本を入れる為に設計された本棚に
衣類を突っ込んじゃうのは嫌だからクローゼットも作ろう
…って感じだと思う
KACHIBITO.netさんのサイトを参照から一部抜粋（http://kachibito.net/wordpress/custom-post-type-list.html）

12. カスタムフィールドとは
投稿画面にあるデフォルトの入力フォームじゃ
物足りないから、独自の入力フォームを作ろうってこと
デフォルトの投稿画面はあくまでブログ用につくられたもの。
さっきも書いていた 料理のレシピ集 等の投稿タイプを
作りたいとなれば、ブログ用の入力フォームとかだけでなく、
チェックボタン等を作って、使う調味料のボタン押すだけで
サイト上に反映させたいときに便利
さっきの例えでいうと衣類をいれるためのクローゼットを作って、
ハンガーかける所や引き出しを作る感じ…だと思う

13. カスタム投稿&カスタムフィールド
（参考）
より詳しい説明は下記等、参照してください
takumadesign さん
http://www.slideshare.net/takuma2480/wordpress-15027418
W3Q（短時間でWordPressのカスタム投稿タイプを習得するのに役立つエントリまとめ6つ）
http://w3q.jp/t/968
8works 「カスタム投稿」「カスタムフィールドテンプレート」
（WordPressで と ）
http://8works-web.com/2011/06/29/
wordpress_register_post_type_custom_field_template/

14. 2. カスタム投稿タイプとカスタムフィールドを導入
で は 本 題 に 戻ります

15. 2. カスタム投稿タイプとカスタムフィールドを導入
まず「Custom Post Type UI 」と
「Advanced Custom Fields」
のプラグインを導入
「Custom Post Type UI 」
どちらも
カスタム投稿 を管理画面から生成
コードを
編集する
「Advanced Custom Fields 」 必要ナシ！
カスタムフィールド を管理画面から生成

16. Custom Post Type UI
有名なプラグインなので
「Custom Post Type UI 」
で
検索すると、
たくさん参考サイトが出てきます ！

17. Advanced Custom Fields
様々なカスタムフィールドが設定できるほか設置場所の
ルールも細かく決められるなど、とても便利なプラグイン！

18. 次は。。
設定完了したら、 「colorBox」
次は の導入！

19. 3. jQueryプラグイン
「colorBox」を導入
とりあえず jQuery」「colorBox」
「 と をダウンロード
（ jQuery はGoogle AJAX API を使ってもOK！）
ダウンロードしたら所定の位置に置いて〈head〉内に記入
※ちなみにjQuery.jsはwordpressに元から入っているから
いれなくても大丈夫かも 。 。

20. 3. jQueryプラグイン
「colorBox」を導入
header.php
htmlの要素を
カラーボックスで
出力？
カラーボックスが反応するタグを設定
基本的にサンプルデータのものから流用しましたので
プログラム部分の詳細はわかりません
（汗

21. 3. jQueryプラグイン
「colorBox」を導入
「colorBox」には色々なオプション設定があります。
こちらも jQuery プラグインでは有名なものなので
ググったらたくさん参考ページ出てきます。
それらを見ながらカスタマイズしていきましょう！

22. 4. カスタム投稿が出力されるページをコチョコチョ
ここから表題の通り
カスタム投稿が出力されるページを
コチョコチョしていきます。
具体的なことは次のページから

23. 4. カスタム投稿が出力されるページをコチョコチョ
今回は 投稿タイプ名を food にしましたので
「archive-food.php」をおき、
カスタム投稿のタイプを 料理 として
他、料理のフィールドの出力を
加熱法 、 ジャンル などに設定しました。
なお、カスタム投稿のアーカイブをweb上に表示する方法は
固定ページに登録とかでも出来るみたいですが、 僕はパーマリンク設定の
カスタム構造で /%category%/%postname% としたら
表示出来るようになりました ！

24. 4. カスタム投稿が出力されるページをコチョコチョ
archive-food.php（archive.php をコピペ）
※1 カスタム投稿の
出力宣言
サムネイル表示
部分
次のページへ続く➡
ちなみに※部分は最終ページ
「苦労したところ」
の説明用につけました

25. ※2
※3
カスタム投稿の
ポップアップ
表示部分
カスタム投稿の
ループ出力終了や
投稿がない時の
条件分岐

26. 4. カスタム投稿が出力されるページをコチョコチョ
これであとは
5. 管理画面からカスタム投稿を公開していく
をすれば完了です！

27. 5. 管理画面からカスタム投稿を公開していく
CLICK!

28. 5. 管理画面からカスタム投稿を公開していく
ブラウザで確認後、無事表示されていたら完了です！
CLICK!

29. 苦労したところ
「Custom
● Post Type UI」の設定で
has archive にチェックをいれないと 「archive.php」が
投稿タイプのスラッグを認識してくれない
のポップアップ表示を内包するコードのidを
「colorBox」
●
振り分けないとサムネイルごとのポップアップが出力されない
（archive-food.phpのコード※1、2を入力して解消）
Custom Fields」
「Advanced
● の画像フィールドの
出力コードが、参考サイトを見てその通りにしても
出力されなかった。archive-food.phpのコード※3を入力して解消）
（

30. ご清聴ありがとうございました！