O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

デザイナさん向けWordPressフックの勉強

897 visualizações

Publicada em

デザイナーさん向けにWordPressのフックの仕組みを簡単に説明しています。
WordBench京都 2013年7月勉強会スライド

Publicada em: Engenharia
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Seja a primeira pessoa a gostar disto

デザイナさん向けWordPressフックの勉強

  1. 1. デザイナさん向けフックの勉強 2013/07/28 瀬戸 貴弘
  2. 2. 自己紹介 Twenty Thirteen hook 瀬戸 貴弘 Twitter : as.chachamaru : エンジニア : @as_chachamaru Facebook 職業 Web アプリ (Java) WordPress その他 最近の使っている開発言語(仕事・プライベート)
  3. 3. Codex:プラグイン API http://p.tl/4rxb Codex hook いきなりですが・・・ デザイナーさんを睡魔に誘う魔法の言葉デザイナーさんを睡魔に誘う魔法の言葉 のご紹介
  4. 4. Codex:プラグイン API http://p.tl/4rxb Codex hook WordPress はプラグインを WordPress 本体に “引っ 張り込む (hook into)” ためのフックを提供しています。 これはつまり、特定のタイミングでプラグインの関数を 呼び出したり、それによってプラグインを作動させたりす るためのものです。フックには次の 2 種類があります: フックとは
  5. 5. Codex:プラグイン API http://p.tl/4rxb Codex hook アクションは、実行中の特定のポイントもしくは特定のイ ベント発生時に WordPress のコアが起動させるフック です。アクション API を使用して、これらのポイントで実 行中の PHP 関数を一つ以上指定することができます。 アクション
  6. 6. Codex:プラグイン API http://p.tl/4rxb Codex hook フィルターは、データベースに追加する前やブラウザの スクリーンに送り出す前にさまざまなタイプのテキストを 改造するために WordPress が起動させるフックです。 プラグインは、フィルター API を使用して、これらのタイ ミングで特定のタイプのテキストを改造するために一つ 以上の PHP 関数の実行を指定することがきます。 フィルター
  7. 7. Codex hook (゚▽゚`*)ハイ? わからなくてOK!
  8. 8. まずは、3つのキーワードだけを覚えといてください。 Codex hook 3つのキーワード ・フック ・アクション ・フィルター
  9. 9. いきなり使い方を説明しても難しいので3つのキーワードが何かイメージできるようになりましょう。 フックとは hook まずは・・・・ フック・アクション・フィルターフック・アクション・フィルター       とは何かをイメージしてみよう!      とは何かをイメージしてみよう!
  10. 10. フック・アクション・フィルターって何? hook ということでアクションゲーム風の画面で説明していきます。
  11. 11. フック・アクション・フィルターって何? hook 基本的なプログラムの動き ということでアクションゲーム風の画面で説明していきます。
  12. 12. スス Codex hook スススス ゴゴ ひたすら前進!ひたすら前進! ひたすら前進!ひたすら前進! ひたすら前進!ひたすら前進! 一般的な簡単なプログラム。ひたすら前進!後戻りできない。
  13. 13. フック・アクション・フィルターって何? hook 何か処理があれば、処理をしながら進む! 処理処理 処理処理
  14. 14. フック・アクション・フィルターって何? hook 条件が全く同じならば何度動かしても動きの内容は変わりません。 何度動かしても動きの内容は同じ何度動かしても動きの内容は同じ
  15. 15. フック・アクション・フィルターって何? 何度動かしても動きの内容は同じ何度動かしても動きの内容は同じ ポイント hook プログラムは決められたことを       決められ通りにしか処理しない!
  16. 16. フック・アクション・フィルターって何? WordPressWordPressもプログラムもプログラム hook 投稿内容や設定などの条件が全く同じならば 何度アクセスしても決められたことを処理し、 同じ内容を表示する。
  17. 17. フック・アクション・フィルターって何? hook WordPressの決められた動きを変更したい! アレンジ
  18. 18. フック・アクション・フィルターって何? hook WordPress本体(コア)を書き換えちゃえ! WordPressもPHPで記述されているのでPHPの知識があれば可能ですね。でもやめましょう! X WordPressは常にバージョンアップしてる。 アレンジしたところが上書きされちゃうよ。 コア触って影響箇所把握できるの?
  19. 19. フック・アクション・フィルターって何? hook WordPress本体(コア)を     アレンジしたいときはどうするの?
  20. 20. フック・アクション・フィルターって何? hook そこで出てくるのが フックフック という仕組み
  21. 21. フック・アクション・フィルターって何? hook 部屋を準備します! ただし目的や場所はこっちで決めます!  扉の種類は2つです。
  22. 22. フック・アクション・フィルターって何? hook アレンジする処理は部屋の中でしてください。外は常に変化してるので触らないでください。 アレンジする処理アレンジする処理
  23. 23. フック・アクション・フィルターって何? hook 目的や場所は決められています。名前を変更したい場合は、名前を変更できる部屋を探します。 例1:名前をアレンジする部屋
  24. 24. フック・アクション・フィルターって何? アレンジする処理がなければ特に変化はなくて名前は “ちゃちゃ丸” のまま hook アレンジする処理がない場合アレンジする処理がない場合
  25. 25. フック・アクション・フィルターって何? 名前の前に ”スーパー” と ”超” を追加するアレンジ処理。名前が “超スーパーちゃちゃ丸” になる。 hook 「スーパー」追加「スーパー」追加 「超」追加「超」追加 アレンジする処理がある場合アレンジする処理がある場合
  26. 26. フック・アクション・フィルターって何? hook 目的や場所は決められたいます。食事をしたい場合は、食事ができる部屋を探します。 例2:食事をする部屋
  27. 27. フック・アクション・フィルターって何? ”食事をする” という動作をする部屋です。動作に対して処理の変更や追加などを行います。 “名前を変更する” のように特定の情報を変更するための部屋ではありません。 hook 水を交換する水を交換する おやつをあげるおやつをあげる
  28. 28. 3つのキーワードを思い出してください。 Codex hook 3つのキーワード ・フック ・アクション ・フィルター
  29. 29. Codex:プラグイン API http://p.tl/4rxb Codex hook WordPress はプラグインを WordPress 本体に “引っ 張り込む (hook into)” ためのフックを提供しています。 フックとは 目的や場所が決まった部屋を準備します。目的や場所が決まった部屋を準備します。
  30. 30. Codex:プラグイン API http://p.tl/4rxb Codex hook アクションは、実行中の特定のポイントもしくは特定のイ ベント発生時に WordPress のコアが起動させるフック です。 アクション ””食事をする”などある特定の行動に対し、食事をする”などある特定の行動に対し、 他の処理を追加するために準備された部屋他の処理を追加するために準備された部屋
  31. 31. Codex:プラグイン API http://p.tl/4rxb Codex hook フィルターは、データベースに追加する前やブラウザの スクリーンに送り出す前にさまざまなタイプのテキストを 改造するために WordPress が起動させるフックです。 フィルター ””名前を変更する”などある特定の情報を名前を変更する”などある特定の情報を 変更するために準備された部屋変更するために準備された部屋
  32. 32. フック・アクション・フィルターって何? hook ということで フック・アクション・フィルターフック・アクション・フィルター のイメージついたでしょうか?
  33. 33. しばらく休憩しましょう!しばらく休憩しましょう!
  34. 34. フック・アクション・フィルターの使い方 hook では、どのように フック・アクション・フィルターフック・アクション・フィルター を使うのか・・・・
  35. 35. Codex:プラグイン API http://p.tl/4rxb Codex hook またまたですが・・・ デザイナーさんを睡魔に誘う魔法の言葉デザイナーさんを睡魔に誘う魔法の言葉 のご紹介 第二弾
  36. 36. Codex:プラグイン API http://p.tl/4rxb Codex hook ●イベント発生時に実行する PHP 関数を作成 ●add_action を呼び出して WordPress にフック ●プラグイン内の PHP 関数が挿入され、始動される アクション実行の基本ステップ
  37. 37. Codex:プラグイン API http://p.tl/4rxb Codex hook ● データをフィルタリングする関数を作成 ●add_filter を呼び出す ●作成した PHP 関数をプラグインファイルに入れ、有効化 フィルター実行の基本ステップ
  38. 38. Codex hook (゚▽゚`*)ハイ? わからなくてOK!
  39. 39. フック・アクション・フィルターの使い方 hook アクションもフィルターも難しく 違うステップのように書かれていますが・・・・ 簡単で基本ステップは同じ!簡単で基本ステップは同じ!
  40. 40. フック・アクション・フィルターの使い方 hook フックの基本ステップ 1.1. プレゼントボックスを準備するプレゼントボックスを準備する 2.2. 部屋を選んでプレゼントボックスを置く部屋を選んでプレゼントボックスを置く 3.3. ちゃちゃ丸が部屋に入ってプレゼントを開封ちゃちゃ丸が部屋に入ってプレゼントを開封
  41. 41. フック・アクション・フィルターの使い方 hook フックの基本ステップ 1.1. 2.2. 3.3. プレゼントボックス準備 部屋に置く ちゃちゃ丸開封
  42. 42. フック・アクション・フィルターの使い方 hook フックの基本ステップ 1.1. 2.2. 3.3. プレゼントボックス準備 部屋に置く ちゃちゃ丸開封
  43. 43. フック・アクション・フィルターの使い方 hook フックの基本ステップ 3.3. ちゃちゃ丸開封 WordPressWordPress本体(コア)がする作業。本体(コア)がする作業。 3. はWordPress本体(コア)がする作業なので、1. と 2. だけすればよい
  44. 44. フック・アクション・フィルターの使い方 hook プレゼントボックスを置く注意点! スーパー 超 超 スーパー 超スーパーちゃちゃ丸 スーパー超ちゃちゃ丸 プログラムは先にあったプレゼントボックスから開封する。よって置く順番によって結果が変わる。
  45. 45. フック・アクション・フィルターの使い方 hook フックの基本ステップ 1.1. プレゼントボックスを準備するプレゼントボックスを準備する 2.2. 部屋を選んでプレゼントボックスを置く部屋を選んでプレゼントボックスを置く ● プレゼントボックスに名前をつけます。 ● プレゼントボックスはいくつでも作れます。※ 同じ名前はつけれません。 ● プレゼントの中身はご自由に ● たくさんの部屋の中からプレゼントボックスを置く部屋を決めます。 ● 部屋に置くプレゼントボックスを選びます。 ● 置く順番を決めてプレゼントボックスを起きます。   ※順番は連番でなく飛び番でもOK! 10でも20でも ※ プレゼントボックスは番号の小さい順に置かれます。
  46. 46. フック・アクション・フィルターの使い方 hook フックの基本ステップ プレゼント名プレゼント名 どの部屋にどの部屋に どのプレゼントボックスをどのプレゼントボックスを どの順番にどの順番に 中身1.1. 2.2.
  47. 47. フック・アクション・フィルターの使い方 hook アクションフックの基本ステップ 1.1. 2.2. function プレゼント名プレゼント名() { } add_action( どの部屋にどの部屋に ,プレゼント名プレゼント名 , どの順番にどの順番に)
  48. 48. フック・アクション・フィルターの使い方 hook フィルターフックの基本ステップ 1.1. 2.2. function プレゼント名プレゼント名() { } add_filter( どの部屋にどの部屋に ,プレゼント名プレゼント名 , どの順番にどの順番に)
  49. 49. Codex hook ワヵッタァァァ━!!>ヽ(o>Д<○ヽ☆☆ 簡単でしょ?
  50. 50. サンプルをみていきましょう!サンプルをみていきましょう!
  51. 51. まとめ Twenty Thirteen jQuery WordPressのアレンジを本体(コア)改造でしちゃダメよ! フック(※専用の部屋)を使ってください。 フック(※専用の部屋)はたくさんあります。 まずはどんな部屋があるが軽く目を通そう! フック(※専用の部屋)は2種類(アクション・フィルター)! 基本動作はほぼ同じ。違いだけ軽く理解しておこう。 ・ ・ ・ ・ 部屋へプレゼントボックスを置く方法は非常に簡単。 add_action、add_filterの使い方を覚えましょう! 部屋へプレゼントボックスを置く方法は非常に簡単。 add_action、add_filterの使い方を覚えましょう! フックで難しいのはプレゼントボックスを作るところ。 余裕があったらPHPの勉強を。 ・
  52. 52. まとめ jQuery 今回の勉強会はフックの基本! いろいろ試して経験積んでいってください。 e(^。^)9 ファイト!!
  53. 53. おわり jQuery ありがとうございました。 Twitter : as.chachamaru : @as_chachamaru Facebook

×