jQueryで作る         カスタム投稿の画像スライダーライブラリ                                 2012.9.8                            WordBench神戸 上村崇S...
自己紹介                            @uemera   uemura           • 上村崇 ( うえむらたかし )           • フリーランスのシステムエンジニア           • サーバイ...
最近のオレ                                              XOOPS                                      勉強会準備                       ...
本日の流れ                     • まずは完成形のデモ                     • jQueryスライダーbxsliderとは?                     • カスタム投稿タイプとは?     ...
デモ                                 http://localhost/wordpress341/?post_type=akb48Saturday, September 8, 12
このスライダーの特徴                     • 画像スライダーとしても使える。                     • スライダーに記事(画像)を追加・編集できる。Saturday, September 8, 12
本日の流れ                     • 完成形のデモ                     • jQueryスライダーbxsliderとは?                     • カスタム投稿タイプとは?        ...
Saturday, September 8, 12
Saturday, September 8, 12
divブロックまるごとスライダー化できる                      <div	  id="slider1">                            <div>Slide	  one	  content</div>...
css、js読み込み                             スライダー操作のためのID                                コンテンツ                            「画面表示...
デモ                                 http://localhost/bxslider/index.htmlSaturday, September 8, 12
本日の流れ                     • 完成形のデモ                     • jQueryスライダーbxsliderとは?                     • カスタム投稿タイプとは?        ...
・投稿     ・固定ページ     ・カスタム投稿タイプSaturday, September 8, 12
投   稿   ブログを投稿する                                    のに使う                            固定ページ   静的ページを作る                      ...
固定ページはここに出るSaturday, September 8, 12
Custom Post Type UISaturday, September 8, 12
投稿タイプ名           akb48                            (URLとして使用される文字列)                            ラベル             AKB48       ...
投   稿                            AKB48のカスタム投稿タイプができた                            固 定 ペ ージSaturday, September 8, 12
functions.phpに書く方法                                投稿タイプのラベル(日本語可)                                メニューに表示する位置              ...
詳しい使い方は register_post_type で検索                                http://wpdocs.sourceforge.jp/関数リファレンス/register_post_typeSatu...
参考リンク   WordPressのカスタム投稿(ポスト)タイプを作成するまでの手順リスト - かちびと.net   http://kachibito.net/wordpress/custom-post-type-list.html   カスタ...
AKB48の記事一覧を表示する                              アーカイブページ        http://localhost/wordpress341/?post_type=akb48Saturday, Septe...
本日の流れ                     • 完成形のデモ                     • jQueryスライダーbxsliderとは?                     • カスタム投稿タイプとは?        ...
記事1                            記事2                            記事3Saturday, September 8, 12
wordpress                              wp-­‐content                               themes                                tw...
テンプレートの優先順位  インデックスページ  (最新投稿順の一覧ページ)                               index.php                                           優先...
AKB48スライダー用のテンプレートを作る               テンプレートの原点はindex.php               → カスタム投稿タイプのアーカイブ記事は、                 archive.php があ...
詳しい使い方は テンプレート階層 で検索                                      http://wpdocs.sourceforge.jp/テンプレート階層Saturday, September 8, 12
bxSliderの起動                            ループの外側を slider1 のdivで囲む                                                      記事ループS...
完 成 !Saturday, September 8, 12
ありがとうございましたSaturday, September 8, 12
Upcoming SlideShare
Loading in …5
×

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

3,858
-1

Published on

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

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,858
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×