Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQueryで作るカスタム投稿の画像スライダーライブラリ

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

  • Login to see the comments

jQueryで作るカスタム投稿の画像スライダーライブラリ

  1. 1. jQueryで作る カスタム投稿の画像スライダーライブラリ 2012.9.8 WordBench神戸 上村崇Saturday, September 8, 12
  2. 2. 自己紹介 @uemera uemura • 上村崇 ( うえむらたかし ) • フリーランスのシステムエンジニア • サーバインフラ、組込みシステム、Web とか。 • C、PHP。最近はCodeIgniterとかFuelPHPが ブーム。 • IT 業界のキャリア 10 年ちょっと • 西宮在住Saturday, September 8, 12
  3. 3. 最近のオレ XOOPS 勉強会準備 WordBench, サーバ関係 PHPフレームワーク JavaScript FuelPHP、CodeIgniter jQuery WordPress サーバインフラ 主に技術サポート さくらVPS(CentOS)、LAMP、 メールサーバ、git、samba、netatalkSaturday, September 8, 12
  4. 4. 本日の流れ • まずは完成形のデモ • jQueryスライダーbxsliderとは? • カスタム投稿タイプとは? • WordPressで画像スライダーを作るSaturday, September 8, 12
  5. 5. デモ http://localhost/wordpress341/?post_type=akb48Saturday, September 8, 12
  6. 6. このスライダーの特徴 • 画像スライダーとしても使える。 • スライダーに記事(画像)を追加・編集できる。Saturday, September 8, 12
  7. 7. 本日の流れ • 完成形のデモ • jQueryスライダーbxsliderとは? • カスタム投稿タイプとは? • WordPressで画像スライダーを作るSaturday, September 8, 12
  8. 8. Saturday, September 8, 12
  9. 9. Saturday, September 8, 12
  10. 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. 11. css、js読み込み スライダー操作のためのID コンテンツ 「画面表示時に foo をスライダー化する」処 理を行うJavaScriptSaturday, September 8, 12
  12. 12. デモ http://localhost/bxslider/index.htmlSaturday, September 8, 12
  13. 13. 本日の流れ • 完成形のデモ • jQueryスライダーbxsliderとは? • カスタム投稿タイプとは? • WordPressで画像スライダーを作るSaturday, September 8, 12
  14. 14. ・投稿 ・固定ページ ・カスタム投稿タイプSaturday, September 8, 12
  15. 15. 投 稿 ブログを投稿する のに使う 固定ページ 静的ページを作る のに使うSaturday, September 8, 12
  16. 16. 固定ページはここに出るSaturday, September 8, 12
  17. 17. Custom Post Type UISaturday, September 8, 12
  18. 18. 投稿タイプ名 akb48 (URLとして使用される文字列) ラベル AKB48 (人が識別するための名前)Saturday, September 8, 12
  19. 19. 投 稿 AKB48のカスタム投稿タイプができた 固 定 ペ ージSaturday, September 8, 12
  20. 20. functions.phpに書く方法 投稿タイプのラベル(日本語可) メニューに表示する位置 公開する アーカイブ表示ON カスタム投稿タイプ名(半角小文字で)Saturday, September 8, 12
  21. 21. 詳しい使い方は register_post_type で検索 http://wpdocs.sourceforge.jp/関数リファレンス/register_post_typeSaturday, September 8, 12
  22. 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. 23. AKB48の記事一覧を表示する アーカイブページ http://localhost/wordpress341/?post_type=akb48Saturday, September 8, 12
  24. 24. 本日の流れ • 完成形のデモ • jQueryスライダーbxsliderとは? • カスタム投稿タイプとは? • WordPressで画像スライダーを作るSaturday, September 8, 12
  25. 25. 記事1 記事2 記事3Saturday, September 8, 12
  26. 26. wordpress wp-­‐content themes twentyelevenSaturday, September 8, 12
  27. 27. テンプレートの優先順位 インデックスページ (最新投稿順の一覧ページ) index.php 優先 シングルページ (1記事のみのページ) index.php single.php 優先 優先 カテゴリーごとページ (カテゴリごとに分けたページ一覧) index.php archive.php category.php 優先 優先 日付ごとページ (月毎に分けたページ一覧) index.php archive.php date.phpSaturday, September 8, 12
  28. 28. AKB48スライダー用のテンプレートを作る テンプレートの原点はindex.php → カスタム投稿タイプのアーカイブ記事は、   archive.php があればこれを使う。 → archive-akb48.phpがあればこれを使う。 archive-投稿タイプ名.php (archive.php をコピーして作る。)Saturday, September 8, 12
  29. 29. 詳しい使い方は テンプレート階層 で検索 http://wpdocs.sourceforge.jp/テンプレート階層Saturday, September 8, 12
  30. 30. bxSliderの起動 ループの外側を slider1 のdivで囲む 記事ループSaturday, September 8, 12
  31. 31. 完 成 !Saturday, September 8, 12
  32. 32. ありがとうございましたSaturday, September 8, 12

×