jQueryを使って、画像スライダを作ることができますが、そこで表示する何枚かの画像を、WordPressの投稿機能を使って追加したり変更したりできると便利ですよね。 カスタム投稿タイプとjQueryを使って「動的に画像を差し替えられるスライダー」を実装する方法を紹介します。

1. jQueryで作る
カスタム投稿の画像スライダーライブラリ
2012.9.8
WordBench神戸 上村崇
Saturday, September 8, 12

2. 自己紹介
@uemera uemura
• 上村崇 ( うえむらたかし )
• フリーランスのシステムエンジニア
• サーバインフラ、組込みシステム、Web とか。
• C、PHP。最近はCodeIgniterとかFuelPHPが
ブーム。
• IT 業界のキャリア 10 年ちょっと
• 西宮在住
Saturday, September 8, 12

3. 最近のオレ
XOOPS
勉強会準備
WordBench,
サーバ関係
PHPフレームワーク
JavaScript
FuelPHP、CodeIgniter
jQuery
WordPress サーバインフラ
主に技術サポート
さくらVPS(CentOS)、LAMP、
メールサーバ、git、samba、netatalk
Saturday, September 8, 12

4. 本日の流れ
• まずは完成形のデモ
• jQueryスライダーbxsliderとは?
• カスタム投稿タイプとは?
• WordPressで画像スライダーを作る
Saturday, September 8, 12

5. デモ
http://localhost/wordpress341/?post_type=akb48
Saturday, September 8, 12

6. このスライダーの特徴
• 画像スライダーとしても使える。
• スライダーに記事(画像)を追加・編集できる。
Saturday, September 8, 12

7. 本日の流れ
• 完成形のデモ
• jQueryスライダーbxsliderとは?
• カスタム投稿タイプとは?
• WordPressで画像スライダーを作る
Saturday, September 8, 12

8. Saturday, September 8, 12

9. Saturday, September 8, 12

10. divブロックまるごとスライダー化できる
<div
id="slider1">
<div>Slide
one
content</div>
<div>Slide
two
content</div>
<div>Slide
three
content</div>
<div>And
so
on...</div>
</div>
Saturday, September 8, 12

11. css、js読み込み
スライダー操作のためのID
コンテンツ
「画面表示時に foo をスライダー化する」処
理を行うJavaScript
Saturday, September 8, 12

12. デモ
http://localhost/bxslider/index.html
Saturday, September 8, 12

13. 本日の流れ
• 完成形のデモ
• jQueryスライダーbxsliderとは?
• カスタム投稿タイプとは?
• WordPressで画像スライダーを作る
Saturday, September 8, 12

14. ・投稿
・固定ページ
・カスタム投稿タイプ
Saturday, September 8, 12

15. 投 稿 ブログを投稿する
のに使う
固定ページ 静的ページを作る
のに使う
Saturday, September 8, 12

16. 固定ページはここに出る
Saturday, September 8, 12

17. Custom Post Type UI
Saturday, September 8, 12

18. 投稿タイプ名 akb48
(URLとして使用される文字列)
ラベル AKB48
(人が識別するための名前)
Saturday, September 8, 12

19. 投 稿
AKB48のカスタム投稿タイプができた
固 定 ペ ージ
Saturday, September 8, 12

20. functions.phpに書く方法
投稿タイプのラベル(日本語可)
メニューに表示する位置
公開する
アーカイブ表示ON
カスタム投稿タイプ名(半角小文字で)
Saturday, September 8, 12

21. 詳しい使い方は register_post_type で検索
http://wpdocs.sourceforge.jp/関数リファレンス/register_post_type
Saturday, September 8, 12

22. 参考リンク
WordPressのカスタム投稿（ポスト）タイプを作成するまでの手順リスト - かちびと.net
http://kachibito.net/wordpress/custom-post-type-list.html
カスタム投稿タイプのアーカイブページを作成する | Cat Speak
http://cat-speak.net/2012/02/29/433/
Saturday, September 8, 12

23. AKB48の記事一覧を表示する
アーカイブページ
http://localhost/wordpress341/?post_type=akb48
Saturday, September 8, 12

24. 本日の流れ
• 完成形のデモ
• jQueryスライダーbxsliderとは?
• カスタム投稿タイプとは?
• WordPressで画像スライダーを作る
Saturday, September 8, 12

25. 記事1
記事2
記事3
Saturday, September 8, 12

26. wordpress
wp-­‐content
themes
twentyeleven
Saturday, September 8, 12

27. テンプレートの優先順位
インデックスページ
(最新投稿順の一覧ページ)
index.php
優先
シングルページ
(１記事のみのページ) index.php single.php
優先 優先
カテゴリーごとページ
(カテゴリごとに分けたページ一覧) index.php archive.php category.php
優先 優先
日付ごとページ
(月毎に分けたページ一覧) index.php archive.php date.php
Saturday, September 8, 12

28. AKB48スライダー用のテンプレートを作る
テンプレートの原点はindex.php
→ カスタム投稿タイプのアーカイブ記事は、
archive.php があればこれを使う。
→ archive-akb48.phpがあればこれを使う。
archive-投稿タイプ名.php
(archive.php をコピーして作る。)
Saturday, September 8, 12

29. 詳しい使い方は テンプレート階層 で検索
http://wpdocs.sourceforge.jp/テンプレート階層
Saturday, September 8, 12

30. bxSliderの起動
ループの外側を slider1 のdivで囲む
記事ループ
Saturday, September 8, 12

31. 完 成 !
Saturday, September 8, 12

32. ありがとうございました
Saturday, September 8, 12