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.

WordPress プラグイン Infinite Scroll を試してみた

10,878 views

Published on

2012年10月開催の WordBench 神戸での発表資料です。シェアするにあたって、発表時とはタイトルのみ変更させて頂いています。

  • Be the first to comment

WordPress プラグイン Infinite Scroll を試してみた

  1. 1. Infinite Scroll を試してみた オートページローディング
  2. 2. 自己紹介‣ ノジマユウジ ‣ プログラムが好き @yuka2py ‣ PythonとJavascriptが‣ 株式会社フォーエンキー 大好き♪ 代表 ‣ おしゃれも大好き☆‣ システム開発、 グラフィックデザイン、 ‣ リボンやお花が好き☆ DTPや印刷など
  3. 3. 自己紹介‣ ノジマユウジ ‣ プログラムが好き @yuka2py ‣ PythonとJavascriptが‣ 株式会社フォーエンキー 大好き♪ 代表 ‣ おしゃれも大好き☆‣ システム開発、 グラフィックデザイン、 ‣ リボンやお花が好き☆ DTPや印刷など
  4. 4. 自己紹介‣ ノジマユウジ ‣ プログラムが好き @yuka2py ‣ PythonとJavascriptが‣ 株式会社フォーエンキー 大好き♪ 代表 ‣ おしゃれも大好き☆‣ システム開発、 グラフィックデザイン、 ‣ リボンやお花が好き☆ DTPや印刷など (´∀`〃)ゝ
  5. 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日株式会社フォーエンキー調べ
  6. 6. オートページローディングとは?
  7. 7. オートページローディングとは?‣ スマートフォンとかで、よくあるUI
  8. 8. オートページローディングとは?‣ スマートフォンとかで、よくあるUI‣ 下の方までスクロールしたら、
  9. 9. オートページローディングとは?‣ スマートフォンとかで、よくあるUI‣ 下の方までスクロールしたら、‣ 自動で次のページのロードが開始され、
  10. 10. オートページローディングとは?‣ スマートフォンとかで、よくあるUI‣ 下の方までスクロールしたら、‣ 自動で次のページのロードが開始され、‣ ぐるぐるぐるーっと回ったりして、
  11. 11. オートページローディングとは?‣ スマートフォンとかで、よくあるUI‣ 下の方までスクロールしたら、‣ 自動で次のページのロードが開始され、‣ ぐるぐるぐるーっと回ったりして、‣ 現在のページに追加して表示されるやつ。
  12. 12. オートページローディングとは? ページの一番下でこんなんなって
  13. 13. オートページローディングとは? 続き記事が追加されるアレです
  14. 14. 実現する方法
  15. 15. 実現する方法‣ WordPressのプラグインでやっちゃう (́ `〃)ゝキャハ
  16. 16. 実現する方法‣ WordPressのプラグインでやっちゃう (́ `〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/
  17. 17. 実現する方法‣ WordPressのプラグインでやっちゃう (́ `〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● Infinite Scroll http://www.infinite-scroll.com/
  18. 18. 実現する方法‣ WordPressのプラグインでやっちゃう (́ `〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● Infinite Scroll http://www.infinite-scroll.com/‣ jQueryのプラグインでやっちゃう (`・ω・́)ノ
  19. 19. 実現する方法‣ WordPressのプラグインでやっちゃう (́ `〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● Infinite Scroll http://www.infinite-scroll.com/‣ jQueryのプラグインでやっちゃう (`・ω・́)ノ ● jQuery.autopager http://lagoscript.org/jquery/autopager
  20. 20. 実現する方法‣ WordPressのプラグインでやっちゃう (́ `〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● Infinite Scroll http://www.infinite-scroll.com/‣ jQueryのプラグインでやっちゃう (`・ω・́)ノ ● jQuery.autopager http://lagoscript.org/jquery/autopager‣ 修行だと思って全部自分で作ってみる (,,・`_́・)、キリッ
  21. 21. 実現する方法‣ WordPressのプラグインでやっちゃう (́ `〃)ゝキャハ ● WP-AutoPager http://wppluginsj.sourceforge.jp/wp-autopager/ ● Infinite Scroll http://www.infinite-scroll.com/ 今回はコチラ‣ jQueryのプラグインでやっちゃう (`・ω・́)ノ ● jQuery.autopager http://lagoscript.org/jquery/autopager‣ 修行だと思って全部自分で作ってみる (,,・`_́・)、キリッ
  22. 22. Infinite Scroll を試した理由‣ WordPress なので、プラグイン使いたい‣ WP-AutoPager は、プラグインディレク トリに無かった(たぶん)‣ Infinite Scroll の方が高機能っぽかった
  23. 23. インストール1. 管理画面から、 [プラグイン] > [新規追加]
  24. 24. インストール1. 管理画面から、 [プラグイン] > [新規追加]2. 検索結果から、 [いますぐインストール]
  25. 25. 設定画面• 管理画面から[設定] > [Infinite Scroll]で設定画面へ
  26. 26. 設定画面• 管理画面から[設定] > [Infinite Scroll]で設定画面へ
  27. 27. 全般設定(1)
  28. 28. 全般設定(1)タブが2つ
  29. 29. 全般設定(1)全般的な設定
  30. 30. 全般設定(2)
  31. 31. 全般設定(2)プラグインの有効範囲 OFF 管理者以外ON 管理者のみON 全員ON
  32. 32. 全般設定(2)プラグインの有効範囲 OFF 管理者以外ON 管理者のみON 全員ON デバッグモードのON/OFF Javascript Console にログが出る。便利
  33. 33. 全般設定(3)
  34. 34. 全般設定(3)続きのページを<自動>で読み込むか続きのページを<手動>で読み込むか
  35. 35. 全般設定(4)
  36. 36. 全般設定(4)続きの記事を読み込んだ後に、実行したい Javascript を書く
  37. 37. 全般設定(4)続きの記事を読み込んだ後に、実行したい Javascript を書く ページ読み込み完了後の フラッシュとか?
  38. 38. 全般設定(5)
  39. 39. 全般設定(5)ローディング中に表示する画像を変更できる
  40. 40. 全般設定(5)ローディング中に表示する画像を変更できる デフォルトはこんな画像
  41. 41. 全般設定(6)
  42. 42. 全般設定(6)ローディング画像の位置
  43. 43. 全般設定(7)
  44. 44. 全般設定(7) ローディング中のテキスト
  45. 45. 全般設定(7) ローディング中のテキスト もう記事が無い時のテキスト
  46. 46. 全般設定(7) ローディング中のテキスト編集出来ます もう記事が無い時のテキスト編集出来ます
  47. 47. セレクタの設定(1)
  48. 48. セレクタの設定(1)
  49. 49. セレクタの設定(1) セレクタ設定
  50. 50. セレクタの設定(1) 実は セレクタ設定 こちらが 重要
  51. 51. セレクタの設定(1) 実は セレクタ設定 こちらが 重要 テーマのHTML構造に合わせて、うまく設定しないとちゃんと動かない!
  52. 52. セレクタの設定(2)
  53. 53. セレクタの設定(2)記事全体を囲むブロックを特定するCSSセレクタ
  54. 54. セレクタの設定(2)記事全体を囲むブロックを特定するCSSセレクタ個別の記事ブロックを特定するCSSセレクタ
  55. 55. セレクタの設定(3)
  56. 56. セレクタの設定(3)ナビゲーションブロックを特定するセレクタ
  57. 57. セレクタの設定(3) ナビゲーションブロックを特定するセレクタ次ページへのリンク(aタグ)を特定するCSSセレクタ
  58. 58. 実際にやってみます (実演)
  59. 59. カスタマイズのヒント
  60. 60. カスタマイズのヒント‣ 特定のページに適用するには?
  61. 61. カスタマイズのヒント‣ 特定のページに適用するには?● Navigation Selector を工夫する
  62. 62. カスタマイズのヒント‣ 特定のページに適用するには?● Navigation Selector を工夫する● 例) body.category-A #navigation-block
  63. 63. カスタマイズのヒント‣ 特定のページに適用するには?● Navigation Selector を工夫する● 例) body.category-A #navigation-block‣ カテゴリやページ毎に異なる読み込み方をさせたい
  64. 64. カスタマイズのヒント‣ 特定のページに適用するには?● Navigation Selector を工夫する● 例) body.category-A #navigation-block‣ カテゴリやページ毎に異なる読み込み方をさせたい● それはHTMLとCSSで出来る
  65. 65. カスタマイズのヒント‣ 特定のページに適用するには?● Navigation Selector を工夫する● 例) body.category-A #navigation-block‣ カテゴリやページ毎に異なる読み込み方をさせたい● それはHTMLとCSSで出来る● Infinite Scroll はあくまでも、Ajaxで次の記事を読 み込んで、DOMに追加しているだけ
  66. 66. カスタマイズのヒント‣ 特定のページに適用するには?● Navigation Selector を工夫する● 例) body.category-A #navigation-block‣ カテゴリやページ毎に異なる読み込み方をさせたい● それはHTMLとCSSで出来る● Infinite Scroll はあくまでも、Ajaxで次の記事を読 み込んで、DOMに追加しているだけ ここ 重要
  67. 67. カスタマイズのヒント 結構 いろいろ‣ 特定のページに適用するには? 出来る!!● Navigation Selector を工夫する● 例) body.category-A #navigation-block‣ カテゴリやページ毎に異なる読み込み方をさせたい● それはHTMLとCSSで出来る● Infinite Scroll はあくまでも、Ajaxで次の記事を読 み込んで、DOMに追加しているだけ ここ 重要
  68. 68. 最後 に アイデア次第で色々と
  69. 69. 最後 に アイデア次第で色々と‣ 画像をたくさん並べたら
  70. 70. 最後 に アイデア次第で色々と‣ 画像をたくさん並べたら● グーグルの画像検索結果ページみたいな感じに
  71. 71. 最後 に アイデア次第で色々と‣ 画像をたくさん並べたら ● グーグルの画像検索結果ページみたいな感じに‣ Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに
  72. 72. 最後 に アイデア次第で色々と‣ 画像をたくさん並べたら ● グーグルの画像検索結果ページみたいな感じに‣ Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに ● つまりユーザーアクションで次の記事を読み込める。 ([もっと●●を表示] ボタン的なやつ)
  73. 73. 最後 に アイデア次第で色々と‣ 画像をたくさん並べたら ● グーグルの画像検索結果ページみたいな感じに‣ Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに ● つまりユーザーアクションで次の記事を読み込める。 ([もっと●●を表示] ボタン的なやつ) ● 読込ボタンに onclick を仕込み、 Javascript to be called after... と組合せれば、記事の入れ替えも可能
  74. 74. 最後 に アイデア次第で色々と 楽しい こと考え‣ 画像をたくさん並べたら よう☆ ● グーグルの画像検索結果ページみたいな感じに‣ Scrolling Behavior の切り替えで、自動ロードを オフにできることも忘れずに ● つまりユーザーアクションで次の記事を読み込める。 ([もっと●●を表示] ボタン的なやつ) ● 読込ボタンに onclick を仕込み、 Javascript to be called after... と組合せれば、記事の入れ替えも可能
  75. 75. ありがとうございました! ©copyright 2012 Foreignkey, inc. All right reserved.
  76. 76. ©copyright 2012 Foreignkey, inc. All right reserved.

×