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