俺のフックがこんなに簡単なわけがない。

4,024 views
3,889 views

Published on

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

No Downloads
Views
Total views
4,024
On SlideShare
0
From Embeds
0
Number of Embeds
220
Actions
Shares
0
Downloads
21
Comments
0
Likes
31
Embeds 0
No embeds

No notes for slide

俺のフックがこんなに簡単なわけがない。

  1. 1. 俺 の フック が こ んなに ore no hook ga konna ni kantan na wakega nai. 簡単 な わけ がない。 WordBench KOBE #21
  2. 2. こんな説明みたことありませんか?抜粋の [...] を消すには、functions.phpに以下のコードをコピー&ペーストしましょう。 function new_excerpt_more($more) { return ; } add_filter(excerpt_more, new_excerpt_more);
  3. 3. これ、実は「フック」といいます。抜粋の [...] を消すには、functions.phpに以下のコードをコピー&ペーストしましょう。 function new_excerpt_more($more) { return ; } add_filter(excerpt_more, new_excerpt_more);
  4. 4. フックの中でもこれは「フィルターフック」抜粋の [...] を消すには、functions.phpに以下のコードをコピー&ペーストしましょう。 function new_excerpt_more($more) { return ; } add_filter(excerpt_more, new_excerpt_more);
  5. 5. 今日は「フック」のしくみについてのお話。
  6. 6. フックには2つある。アクションフックフィルターフック
  7. 7. WordPressを料理だと考えてみましょう
  8. 8. WordPressの処理はレシピ通り作られる料理のようなもの
  9. 9. バター60gを混ぜる。砂糖60gを加える。ふんわりするまで混ぜる。バニラエッセンスを加える。...
  10. 10. バター60gを混ぜる。 全ての処理には順番がありますが、 それぞれは独立しています。砂糖60gを加える。ふんわりするまで混ぜる。バニラエッセンスを加える。...
  11. 11. バター60gを混ぜる。砂糖60gを加える。ふんわりするまで混ぜる。 溶き卵を加える。 処理を追加バニラエッセンスを加える。...
  12. 12. バター60gを混ぜる。砂糖60gを加える。 アクションフックふんわりするまで混ぜる。 = 溶き卵を加える。 処理を追加バニラエッセンスを加える。...
  13. 13. バター60gを混ぜる。砂糖60gを加える。ふんわりするまで混ぜる。 溶き卵を加える。 どこに追加したか?バニラエッセンスを加える。...
  14. 14. バター60gを混ぜる。砂糖60gを加える。ふんわりするまで混ぜる。 「ふんわりするまで 溶き卵を加える。 混ぜた後」バニラエッセンスを加える。...
  15. 15. アクションフックを書いてみたfunction 溶き卵を加える() {}add_action(ふんわりするまで混ぜた後, 溶き卵を加える);
  16. 16. なぜこんなめんどくさいことをするのか?
  17. 17. レシピ=ソースコードはアップデートされる。書き換えてしまうとあとでどこを編集したかわからなくなる。
  18. 18. カスタマイズはフックで行うのが原則。テンプレートに書いてしまうと、テーマを変えた時に処理が消えてしまう。 Web制作者はしばしばサイトのテーマは変わ らないものだと思うが、一応特殊な例で本来 はユーザーが変えるもの
  19. 19. バター60gを混ぜる。砂糖60gを加える。ふんわりするまで混ぜる。バニラエッセンスを加える。...
  20. 20. バター60gを混ぜる。 レシピの中には複数の処理に砂糖60gを加える。共通した動作があります。ふんわりするまで混ぜる。バニラエッセンスを加える。...
  21. 21. バター60gをよく混ぜる。 「混ぜる」を砂糖60gを加える。 「よく混ぜる」に フィルターをかけたふんわりするまでよく混ぜる。バニラエッセンスを加える。...
  22. 22. バター60gをよく混ぜる。 「混ぜる」を砂糖60gを加える。 「よく混ぜる」に フィルターをかけたふんわりするまでよく混ぜる。 = フィルターフックバニラエッセンスを加える。...
  23. 23. フィルターフックを書いてみたfunction 混ぜるによくを足す($text) { return ‘よく’ . $text;}add_filter(混ぜる, 混ぜるによくを足す);
  24. 24. バター60gをよく混ぜる。 「砂糖60gを加える」 を処理しないふんわりするまでよく混ぜる。バニラエッセンスを加える。...
  25. 25. バター60gをよく混ぜる。 「砂糖60gを加える」 を処理しないふんわりするまでよく混ぜる。 = これもフィルターフックバニラエッセンスを加える。...
  26. 26. フィルターフックを書いてみたfunction やめておく() { return false;}add_filter(砂糖を加えるかどうか, やめておく);
  27. 27. アクションフックのおさらいfunction 溶き卵を加える() {}add_action(ふんわりするまで混ぜた後, 溶き卵を加える);あくまで処理の追加。
  28. 28. フィルターフックのおさらいfunction 混ぜるによくを足す($text) { return ‘よく’ . $text;}add_filter(混ぜる, 混ぜるによくを足す);あくまで既存の処理の変更。
  29. 29. アクションフックは基本的に既存の処理の変更はできない。フィルターフックは基本的に処理自体を追加することはできない。
  30. 30. ただし、例外…グローバル変数を使えばアクションフィルターでも既存の処理の結果を変更したりフィルターすることができる。 グローバル変数 = テーマやプラグインをまたいで WordPressの処理中で共通で使用できる変数 $post, $wp_query, $wp_rewrite など 一応、変数を渡してフィルターのようにも使えてしまう…(ややこしい)
  31. 31. 冒頭のコードをもういちど見てみましょうfunction new_excerpt_more($more) { return ;}add_filter(excerpt_more,new_excerpt_more);
  32. 32. 冒頭のコードをもういちど見てみましょうfunction new_excerpt_more($more) { return ;}add_filter(excerpt_more,new_excerpt_more); フィルターフックの登録
  33. 33. 冒頭のコードをもういちど見てみましょうfunction new_excerpt_more($more) { return ;}add_filter(excerpt_more,new_excerpt_more); フィルターを実行する 関数名
  34. 34. 冒頭のコードをもういちど見てみましょうfunction new_excerpt_more($more) { return ;}add_filter(excerpt_more,new_excerpt_more); フィルターを実行する 関数
  35. 35. 冒頭のコードをもういちど見てみましょうfunction new_excerpt_more($more) { return ;}add_filter(excerpt_more,new_excerpt_more); 何らかの値を受け取って…
  36. 36. 冒頭のコードをもういちど見てみましょうfunction new_excerpt_more($more) { return ;}add_filter(excerpt_more,new_excerpt_more); 空の文字列を返している
  37. 37. 冒頭のコードをもういちど見てみましょうfunction new_excerpt_more($more) { return ;}add_filter(excerpt_more,new_excerpt_more); この $more は 何に使われてるの…
  38. 38. ソースを読むしかない!
  39. 39. 冒頭のコードをもういちど見てみましょうfunction new_excerpt_more($more) { return ;}add_filter(excerpt_more,new_excerpt_more); フックを登録する処理名
  40. 40. 冒頭のコードをもういちど見てみましょうfunction new_excerpt_more($more) { return ;}add_filter(excerpt_more,new_excerpt_more); apply_filters(excerpt_more でソースコードを検索!
  41. 41. 該当部分のコードfunction wp_trim_excerpt($text = ) { $raw_excerpt = $text; if ( == $text ) { $text = get_the_content(); $text = strip_shortcodes( $text ); $text = apply_filters(the_content, $text); $text = str_replace(]]>, ]]>, $text); $excerpt_length = apply_filters(excerpt_length, 55); $excerpt_more = apply_filters(excerpt_more, .[...]); $text = wp_trim_words( $text, $excerpt_length,$excerpt_more ); } return apply_filters(wp_trim_excerpt, $text, $raw_excerpt);} wp-includes/formatting.php
  42. 42. 該当部分のコードfunction wp_trim_excerpt($text = ) { $raw_excerpt = $text; apply_filters() フィルターをかける if ( == $text ) { $text = get_the_content(); $text = strip_shortcodes( $text ); $text = apply_filters(the_content, $text); $text = str_replace(]]>, ]]>, $text); $excerpt_length = apply_filters(excerpt_length, 55); $excerpt_more = apply_filters(excerpt_more, .[...]); $text = wp_trim_words( $text, $excerpt_length,$excerpt_more ); } return apply_filters(wp_trim_excerpt, $text, $raw_excerpt);}
  43. 43. 該当部分のコードfunction wp_trim_excerpt($text = ) { $raw_excerpt = $text; 先ほどの $more の中身が判明。 if ( == $text ) { 半角スペース + [...] だった。 $text = get_the_content(); $text = strip_shortcodes( $text ); $text = apply_filters(the_content, $text); $text = str_replace(]]>, ]]>, $text); $excerpt_length = apply_filters(excerpt_length, 55); $excerpt_more = apply_filters(excerpt_more, .[...]); $text = wp_trim_words( $text, $excerpt_length,$excerpt_more ); } return apply_filters(wp_trim_excerpt, $text, $raw_excerpt);}
  44. 44. さらに実践編。
  45. 45. WordPressのカテゴリーウィジェット並び順を変えたいなぁ…
  46. 46. ウィジェットのUIには並び順がない…
  47. 47. さてここで質問。カテゴリーウィジェットが表示するカテゴリーの並び順を変えたい。これはアクションフック?フィルターフック?
  48. 48. /** * Categories widget class * 該当部分のコード * @since 2.8.0 */class WP_Widget_Categories extends WP_Widget {...! ! $cat_args = array(orderby => name, show_count => $c,hierarchical => $h);...! ! <ul><?php! ! $cat_args[title_li] = ;! ! wp_list_categories(apply_filters(widget_categories_args,$cat_args));?>! ! </ul>... wp-includes/default-widget.php
  49. 49. /** * Categories widget class * 該当部分のコード * @since 2.8.0 */class WP_Widget_Categories extends WP_Widget {... wp_list_categories() 関数で! ! $cat_args = array(orderby => name, show_count => $c,hierarchical => $h);... カテゴリーの一覧を出力してるようだ。! ! <ul><?php! ! $cat_args[title_li] = ;! ! wp_list_categories(apply_filters(widget_categories_args,$cat_args));?>! ! </ul>...
  50. 50. /** * Categories widget class * 該当部分のコード * @since 2.8.0 */class WP_Widget_Categories extends WP_Widget {... オプション値 $cat_args に フィルターを通してある!! ! $cat_args = array(orderby => name, show_count => $c,hierarchical => $h);... これで並び順も変更できそう。! ! <ul><?php! ! $cat_args[title_li] = ;! ! wp_list_categories(apply_filters(widget_categories_args,$cat_args));?>! ! </ul>...
  51. 51. /** * Categories widget class * 該当部分のコード * @since 2.8.0 */class WP_Widget_Categories extends WP_Widget {...! ! $cat_args = array(orderby => name, show_count => $c,hierarchical => $h);...! ! <ul><?php オプション値 $cat_args は 配列なんだな。! ! $cat_args[title_li] = ; 並び順は名前順になっているな。! ! wp_list_categories(apply_filters(widget_categories_args,$cat_args));?>! ! </ul>...
  52. 52. /** * Categories widget class * 該当部分のコード * @since 2.8.0 */class WP_Widget_Categories extends WP_Widget {... フィルター名は! ! $cat_args = array(orderby => name, show_count => $c, 「widget_categories_args」か。hierarchical => $h);...! ! <ul><?php! ! $cat_args[title_li] = ;! ! wp_list_categories(apply_filters(widget_categories_args,$cat_args));?>! ! </ul>...
  53. 53. FUNCTIONS.PHPに記載するコードfunction change_widget_category_orderby( $cat_args ){ $cat_args[orderby] = count; $cat_args[order] = DESC; return $cat_args;}add_filter( widget_categories_args,change_widget_category_orderby );
  54. 54. FUNCTIONS.PHPに記載するコードfunction change_widget_category_orderby( $cat_args ){ $cat_args[orderby] = count; $cat_args[order] = DESC; wp_list_categories()の return $cat_args;} オプション値を配列で受け取って…add_filter( widget_categories_args,change_widget_category_orderby ); ↑ これがソースを読まないと分からない
  55. 55. FUNCTIONS.PHPに記載するコードfunction change_widget_category_orderby( $cat_args ){ $cat_args[orderby] = count; $cat_args[order] = DESC; return $cat_args;} 変更したいオプション値を 設定して…add_filter( widget_categories_args,change_widget_category_orderby ); ↑ こっちはCodexのwp_list_categoriesの ページを見ないと分からない
  56. 56. FUNCTIONS.PHPに記載するコードfunction change_widget_category_orderby( $cat_args ){ $cat_args[orderby] = count; $cat_args[order] = DESC; return $cat_args; 返す}add_filter( widget_categories_args,change_widget_category_orderby );
  57. 57. できた!カテゴリーの 投稿数順 & 降順
  58. 58. このように、フィルターフックはフィルターされる値が何でどのように使われるのかは、フックによって異なるし、ソースを見ないと分からない。
  59. 59. さらに、アクションフックはWordPressがどんな順番で何を処理しているのか、ある程度わかってないとどこにフックしていいのか分からない。
  60. 60. え?結局難しいじゃないかって…? ?
  61. 61. 俺 の フック は そ んなに 簡単 な わけ がない。
  62. 62. アクションフックとフィルターフックの違い、基本的な考え方を知っておけばそんなに怖くないよ! フィルターフックには Debug Bar Extender プラグインの Variable Lookup 機能が便利 http://wordpress.org/extend/plugins/debug-bar-extender/
  63. 63. フックに関するブログを色々アップしてます。フィルターフック:カスタムメニューの項目に付与されるクラスをカスタマイズするhttp://notnil-creative.com/blog/archives/1615フィルターフック:検索結果で投稿タイプごとに違うテンプレートファイルを使うhttp://notnil-creative.com/blog/archives/1566アクションフック:テーマからJavascriptやCSSを読み込む書き方まとめhttp://notnil-creative.com/blog/archives/1299アクションフック:ツールバーをカスタマイズするhttp://notnil-creative.com/blog/archives/1163アクションフック:パンくずナビゲーション(Breadcrumb NavXT)をカスタマイズするhttp://notnil-creative.com/blog/archives/981フィルターフック:ギャラリーをカスタマイズして好きなjQueryプラグインを使うhttp://notnil-creative.com/blog/archives/969
  64. 64. Thanks!

×