WordPress プラグイン Infinite Scroll を試してみた
Download as KEY, PDF6 likes8,073 views
2012年10月開催の WordBench 神戸での発表資料です。シェアするにあたって、発表時とはタイトルのみ変更させて頂いています。
![インストール
1. 管理画面から、
[プラグイン] > [新規追加]](https://image.slidesharecdn.com/wp-autopageloading-121013183350-phpapp01/85/WordPress-Infinite-Scroll-23-320.jpg)
![インストール
1. 管理画面から、
[プラグイン] > [新規追加]
2. 検索結果から、
[いますぐインストール]](https://image.slidesharecdn.com/wp-autopageloading-121013183350-phpapp01/85/WordPress-Infinite-Scroll-24-320.jpg)
![設定画面
? 管理画面から
[設定] > [In?nite Scroll]
で設定画面へ](https://image.slidesharecdn.com/wp-autopageloading-121013183350-phpapp01/85/WordPress-Infinite-Scroll-25-320.jpg)
![設定画面
? 管理画面から
[設定] > [In?nite Scroll]
で設定画面へ](https://image.slidesharecdn.com/wp-autopageloading-121013183350-phpapp01/85/WordPress-Infinite-Scroll-26-320.jpg)
![最後
に アイデア次第で色々と
? 画像をたくさん並べたら
●
グーグルの画像検索結果ページみたいな感じに
? Scrolling Behavior の切り替えで、自動ロードを
オフにできることも忘れずに
●
つまりユーザーアクションで次の記事を読み込める。
（[もっと●●を表示] ボタン的なやつ）](https://image.slidesharecdn.com/wp-autopageloading-121013183350-phpapp01/85/WordPress-Infinite-Scroll-72-320.jpg)
![最後
に アイデア次第で色々と
? 画像をたくさん並べたら
●
グーグルの画像検索結果ページみたいな感じに
? Scrolling Behavior の切り替えで、自動ロードを
オフにできることも忘れずに
●
つまりユーザーアクションで次の記事を読み込める。
（[もっと●●を表示] ボタン的なやつ）
●
読込ボタンに onclick を仕込み、 Javascript to be
called after... と組合せれば、記事の入れ替えも可能](https://image.slidesharecdn.com/wp-autopageloading-121013183350-phpapp01/85/WordPress-Infinite-Scroll-73-320.jpg)
![最後
に アイデア次第で色々と
楽しい
こと考え
? 画像をたくさん並べたら よう☆
●
グーグルの画像検索結果ページみたいな感じに
? Scrolling Behavior の切り替えで、自動ロードを
オフにできることも忘れずに
●
つまりユーザーアクションで次の記事を読み込める。
（[もっと●●を表示] ボタン的なやつ）
●
読込ボタンに onclick を仕込み、 Javascript to be
called after... と組合せれば、記事の入れ替えも可能](https://image.slidesharecdn.com/wp-autopageloading-121013183350-phpapp01/85/WordPress-Infinite-Scroll-74-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (12)
Similar to WordPress プラグイン Infinite Scroll を試してみた (20)
WordPress プラグイン Infinite Scroll を試してみた
- 1. In?nite Scroll を試してみた オートページローディング
- 2. 自己紹介 ? ノジマユウジ ? プログラムが好き @yuka2py ? PythonとJavascriptが ? 株式会社フォーエンキー 大好き? 代表 ? おしゃれも大好き☆ ? システム開発、 グラフィックデザイン、 ? リボンやお花が好き☆ DTPや印刷など
- 3. 自己紹介 ? ノジマユウジ ? プログラムが好き @yuka2py ? PythonとJavascriptが ? 株式会社フォーエンキー 大好き? 代表 ? おしゃれも大好き☆ ? システム開発、 グラフィックデザイン、 ? リボンやお花が好き☆ DTPや印刷など
- 4. 自己紹介 ? ノジマユウジ ? プログラムが好き @yuka2py ? PythonとJavascriptが ? 株式会社フォーエンキー 大好き? 代表 ? おしゃれも大好き☆ ? システム開発、 グラフィックデザイン、 ? リボンやお花が好き☆ DTPや印刷など (??`〃)ゝ
- 5. 最近のオレ Py 2% GraphicDesign iOS 14% お嫁 3% Windows(C#) Android お嫁 We b ( P H P / J S ) 7% Android 46% iOS Web(PHP/JS) GraphicDesign Py 9% Windows(C#) 19% 2012年10月13日 株式会社フォーエンキー調べ
- 9. オートページローディングとは？ ? スマートフォンとかで、よくあるUI ? 下の方までスクロールしたら、 ? 自动で次のページのロードが开始され、
- 10. オートページローディングとは？ ? スマートフォンとかで、よくあるUI ? 下の方までスクロールしたら、 ? 自动で次のページのロードが开始され、 ? ぐるぐるぐるーっと回ったりして、
- 11. オートページローディングとは？ ? スマートフォンとかで、よくあるUI ? 下の方までスクロールしたら、 ? 自动で次のページのロードが开始され、 ? ぐるぐるぐるーっと回ったりして、 ? 現在のページに追加して表示されるやつ。
- 13. オートページローディングとは？ 続き记事が追加されるアレです
- 14. 実现する方法
- 15. 実现する方法 ? WordPressのプラグインでやっちゃう (? 缚〃)ゝ???
- 16. 実现する方法 ? WordPressのプラグインでやっちゃう (? 缚〃)ゝ??? ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/
- 17. 実现する方法 ? WordPressのプラグインでやっちゃう (? 缚〃)ゝ??? ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● In?nite Scroll http://www.in?nite-scroll.com/
- 18. 実现する方法 ? WordPressのプラグインでやっちゃう (? 缚〃)ゝ??? ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● In?nite Scroll http://www.in?nite-scroll.com/ ? jQueryのプラグインでやっちゃう (｀?ω??)?
- 19. 実现する方法 ? WordPressのプラグインでやっちゃう (? 缚〃)ゝ??? ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● In?nite Scroll http://www.in?nite-scroll.com/ ? jQueryのプラグインでやっちゃう (｀?ω??)? ● jQuery.autopager http://lagoscript.org/jquery/autopager
- 20. 実现する方法 ? WordPressのプラグインでやっちゃう (? 缚〃)ゝ??? ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● In?nite Scroll http://www.in?nite-scroll.com/ ? jQueryのプラグインでやっちゃう (｀?ω??)? ● jQuery.autopager http://lagoscript.org/jquery/autopager ? 修行だと思って全部自分で作ってみる (,,?`_??)、???
- 21. 実现する方法 ? WordPressのプラグインでやっちゃう (? 缚〃)ゝ??? ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● In?nite Scroll http://www.in?nite-scroll.com/ 今回はコチラ ? jQueryのプラグインでやっちゃう (｀?ω??)? ● jQuery.autopager http://lagoscript.org/jquery/autopager ? 修行だと思って全部自分で作ってみる (,,?`_??)、???
- 22. In?nite Scroll を試した理由 ? WordPress なので、プラグイン使いたい ? WP-AutoPager は、プラグインディレク トリに無かった（たぶん） ? In?nite Scroll の方が高機能っぽかった
- 23. インストール 1. 管理画面から、 [プラグイン] > [新規追加]
- 24. インストール 1. 管理画面から、 [プラグイン] > [新規追加] 2. 検索結果から、 [いますぐインストール]
- 25. 設定画面 ? 管理画面から [設定] > [In?nite Scroll] で設定画面へ
- 26. 設定画面 ? 管理画面から [設定] > [In?nite Scroll] で設定画面へ
- 27. 全般设定(1)
- 28. 全般设定(1) タブが２つ
- 29. 全般设定(1) 全般的な設定
- 30. 全般设定(2)
- 31. 全般设定(2) プラグインの有効範囲 OFF 管理者以外ON 管理者のみON 全員ON
- 32. 全般设定(2) プラグインの有効範囲 OFF 管理者以外ON 管理者のみON 全員ON デバッグモードのON/OFF Javascript Console にログが出る。便利
- 33. 全般设定(3)
- 35. 全般设定(4)
- 37. 全般设定(4) 続きの記事を読み込んだ後に、 実行したい Javascript を書く ページ読み込み完了後の フラッシュとか？
- 38. 全般设定(5)
- 40. 全般设定(5) ローディング中に表示する画像を変更できる デフォルトはこんな画像
- 41. 全般设定(6)
- 43. 全般设定(7)
- 44. 全般设定(7) ローディング中のテキスト
- 45. 全般设定(7) ローディング中のテキスト もう記事が無い時のテキスト
- 46. 全般设定(7) ローディング中のテキスト 編集出来ます もう記事が無い時のテキスト 編集出来ます
- 47. セレクタの设定(1)
- 48. セレクタの设定(1)
- 50. セレクタの设定(1) 実は セレクタ設定 こちらが 重要
- 51. セレクタの设定(1) 実は セレクタ設定 こちらが 重要 テーマのHTML構造に合わせて、 うまく設定しないとちゃんと動かない！
- 52. セレクタの设定(2)
- 55. セレクタの设定(3)
- 58. 実際にやってみます （実演）
- 59. カスタマイズのヒント
- 61. カスタマイズのヒント ? 特定のページに適用するには？ ● Navigation Selector を工夫する
- 62. カスタマイズのヒント ? 特定のページに適用するには？ ● Navigation Selector を工夫する ● 例) body.category-A #navigation-block
- 63. カスタマイズのヒント ? 特定のページに適用するには？ ● Navigation Selector を工夫する ● 例) body.category-A #navigation-block ? カテゴリやページ毎に異なる読み込み方をさせたい
- 64. カスタマイズのヒント ? 特定のページに適用するには？ ● Navigation Selector を工夫する ● 例) body.category-A #navigation-block ? カテゴリやページ毎に異なる読み込み方をさせたい ● それはHTMLとCSSで出来る
- 65. カスタマイズのヒント ? 特定のページに適用するには？ ● Navigation Selector を工夫する ● 例) body.category-A #navigation-block ? カテゴリやページ毎に異なる読み込み方をさせたい ● それはHTMLとCSSで出来る ● In?nite Scroll はあくまでも、Ajaxで次の記事を読 み込んで、DOMに追加しているだけ
- 66. カスタマイズのヒント ? 特定のページに適用するには？ ● Navigation Selector を工夫する ● 例) body.category-A #navigation-block ? カテゴリやページ毎に異なる読み込み方をさせたい ● それはHTMLとCSSで出来る ● In?nite Scroll はあくまでも、Ajaxで次の記事を読 み込んで、DOMに追加しているだけ ここ 重要
- 67. カスタマイズのヒント 結構 いろいろ ? 特定のページに適用するには？ 出来る!! ● Navigation Selector を工夫する ● 例) body.category-A #navigation-block ? カテゴリやページ毎に異なる読み込み方をさせたい ● それはHTMLとCSSで出来る ● In?nite Scroll はあくまでも、Ajaxで次の記事を読 み込んで、DOMに追加しているだけ ここ 重要
- 68. 最後 に アイデア次第で色々と
- 69. 最後 に アイデア次第で色々と ? 画像をたくさん並べたら
- 70. 最後 に アイデア次第で色々と ? 画像をたくさん並べたら ● グーグルの画像検索結果ページみたいな感じに
- 71. 最後 に アイデア次第で色々と ? 画像をたくさん並べたら ● グーグルの画像検索結果ページみたいな感じに ? Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに
- 72. 最後 に アイデア次第で色々と ? 画像をたくさん並べたら ● グーグルの画像検索結果ページみたいな感じに ? Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに ● つまりユーザーアクションで次の記事を読み込める。 （[もっと●●を表示] ボタン的なやつ）
- 73. 最後 に アイデア次第で色々と ? 画像をたくさん並べたら ● グーグルの画像検索結果ページみたいな感じに ? Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに ● つまりユーザーアクションで次の記事を読み込める。 （[もっと●●を表示] ボタン的なやつ） ● 読込ボタンに onclick を仕込み、 Javascript to be called after... と組合せれば、記事の入れ替えも可能
- 74. 最後 に アイデア次第で色々と 楽しい こと考え ? 画像をたくさん並べたら よう☆ ● グーグルの画像検索結果ページみたいな感じに ? Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに ● つまりユーザーアクションで次の記事を読み込める。 （[もっと●●を表示] ボタン的なやつ） ● 読込ボタンに onclick を仕込み、 Javascript to be called after... と組合せれば、記事の入れ替えも可能
- 75. ありがとうございました！ ?copyright 2012 Foreignkey, inc. All right reserved.
- 76. ?copyright 2012 Foreignkey, inc. All right reserved.
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n