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

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

2013/07/28 瀬戸貴弘

自己紹介

Twenty Thirteen

hook

瀬戸貴弘

Twitter

: as.chachamaru

: エンジニア

: @as_chachamaru

Facebook

職業

Web アプリ (Java)

WordPress

その他

最近の使っている開発言語（仕事・プライベート）

Codex:プラグイン API http://p.tl/4rxb

Codex hook

いきなりですが・・・

デザイナーさんを睡魔に誘う魔法の言葉デザイナーさんを睡魔に誘う魔法の言葉

のご紹介


Codex hook

WordPress はプラグインを WordPress 本体に “引っ

張り込む (hook into)” ためのフックを提供しています。

これはつまり、特定のタイミングでプラグインの関数を

呼び出したり、それによってプラグインを作動させたりす

るためのものです。フックには次の 2 種類があります:

フックとは


Codex hook

アクションは、実行中の特定のポイントもしくは特定のイ

ベント発生時に WordPress のコアが起動させるフック

です。アクション API を使用して、これらのポイントで実

行中の PHP 関数を一つ以上指定することができます。

アクション


Codex hook

フィルターは、データベースに追加する前やブラウザの

スクリーンに送り出す前にさまざまなタイプのテキストを

改造するために WordPress が起動させるフックです。

プラグインは、フィルター API を使用して、これらのタイ

ミングで特定のタイプのテキストを改造するために一つ

以上の PHP 関数の実行を指定することがきます。

フィルター

Codex hook

(ﾟ▽ﾟ｀*)ﾊｲ?

わからなくてOK！

まずは、3つのキーワードだけを覚えといてください。

Codex hook

3つのキーワード

・フック

・アクション

・フィルター

いきなり使い方を説明しても難しいので3つのキーワードが何かイメージできるようになりましょう。

フックとは hook

まずは・・・・

フック・アクション・フィルターフック・アクション・フィルター

　　　　　　とは何かをイメージしてみよう！　　　　　　とは何かをイメージしてみよう！

フック・アクション・フィルターって何？ hook

ということでアクションゲーム風の画面で説明していきます。


基本的なプログラムの動き

ということでアクションゲーム風の画面で説明していきます。

スス

Codex hook

スススス

ゴゴ

ひたすら前進！ひたすら前進！



一般的な簡単なプログラム。ひたすら前進！後戻りできない。


何か処理があれば、処理をしながら進む！

処理処理

処理処理


条件が全く同じならば何度動かしても動きの内容は変わりません。

何度動かしても動きの内容は同じ何度動かしても動きの内容は同じ

フック・アクション・フィルターって何？

何度動かしても動きの内容は同じ何度動かしても動きの内容は同じポイント

hook

プログラムは決められたことを

　　　　　　決められ通りにしか処理しない！


WordPressWordPressもプログラムもプログラム

hook

投稿内容や設定などの条件が全く同じならば

何度アクセスしても決められたことを処理し、

同じ内容を表示する。


WordPressの決められた動きを変更したい！

アレンジ


WordPress本体（コア）を書き換えちゃえ！

WordPressもPHPで記述されているのでPHPの知識があれば可能ですね。でもやめましょう！

XWordPressは常にバージョンアップしてる。

アレンジしたところが上書きされちゃうよ。

コア触って影響箇所把握できるの？


WordPress本体（コア）を

　　　　アレンジしたいときはどうするの？


そこで出てくるのが

フックフックという仕組み


部屋を準備します！ただし目的や場所はこっちで決めます！　扉の種類は2つです。


アレンジする処理は部屋の中でしてください。外は常に変化してるので触らないでください。

アレンジする処理アレンジする処理


目的や場所は決められています。名前を変更したい場合は、名前を変更できる部屋を探します。

例1：名前をアレンジする部屋


アレンジする処理がなければ特に変化はなくて名前は “ちゃちゃ丸” のまま

hook

アレンジする処理がない場合アレンジする処理がない場合


名前の前に ”スーパー” と ”超” を追加するアレンジ処理。名前が “超スーパーちゃちゃ丸” になる。

hook

「スーパー」追加「スーパー」追加「超」追加「超」追加

アレンジする処理がある場合アレンジする処理がある場合


目的や場所は決められたいます。食事をしたい場合は、食事ができる部屋を探します。

例2：食事をする部屋


”食事をする” という動作をする部屋です。動作に対して処理の変更や追加などを行います。

“名前を変更する” のように特定の情報を変更するための部屋ではありません。

hook

水を交換する水を交換するおやつをあげるおやつをあげる

3つのキーワードを思い出してください。

Codex hook

3つのキーワード

・フック

・アクション

・フィルター


Codex hook

WordPress はプラグインを WordPress 本体に “引っ

張り込む (hook into)” ためのフックを提供しています。

フックとは

目的や場所が決まった部屋を準備します。目的や場所が決まった部屋を準備します。


Codex hook

アクションは、実行中の特定のポイントもしくは特定のイ

ベント発生時に WordPress のコアが起動させるフック

です。

アクション

””食事をする”などある特定の行動に対し、食事をする”などある特定の行動に対し、

他の処理を追加するために準備された部屋他の処理を追加するために準備された部屋


Codex hook

フィルターは、データベースに追加する前やブラウザの

スクリーンに送り出す前にさまざまなタイプのテキストを

改造するために WordPress が起動させるフックです。

フィルター

””名前を変更する”などある特定の情報を名前を変更する”などある特定の情報を

変更するために準備された部屋変更するために準備された部屋


ということで

フック・アクション・フィルターフック・アクション・フィルター

のイメージついたでしょうか？

しばらく休憩しましょう！しばらく休憩しましょう！

フック・アクション・フィルターの使い方 hook

では、どのように

フック・アクション・フィルターフック・アクション・フィルターを使うのか・・・・


Codex hook

またまたですが・・・

デザイナーさんを睡魔に誘う魔法の言葉デザイナーさんを睡魔に誘う魔法の言葉

のご紹介

第二弾


Codex hook

●イベント発生時に実行する PHP 関数を作成

●add_action を呼び出して WordPress にフック

●プラグイン内の PHP 関数が挿入され、始動される

アクション実行の基本ステップ


Codex hook

●データをフィルタリングする関数を作成

●add_filter を呼び出す

●作成した PHP 関数をプラグインファイルに入れ、有効化

フィルター実行の基本ステップ

Codex hook

(ﾟ▽ﾟ｀*)ﾊｲ?

わからなくてOK！


アクションもフィルターも難しく違うステップのように書かれていますが・・・・

簡単で基本ステップは同じ！簡単で基本ステップは同じ！


フックの基本ステップ

1. 1. プレゼントボックスを準備するプレゼントボックスを準備する

2. 2. 部屋を選んでプレゼントボックスを置く部屋を選んでプレゼントボックスを置く

3. 3. ちゃちゃ丸が部屋に入ってプレゼントを開封ちゃちゃ丸が部屋に入ってプレゼントを開封



1. 1.

2. 2.

3. 3.

プレゼントボックス準備

部屋に置く

ちゃちゃ丸開封



3. 3. ちゃちゃ丸開封

WordPressWordPress本体（コア）がする作業。本体（コア）がする作業。

3. はWordPress本体（コア）がする作業なので、1. と 2. だけすればよい


プレゼントボックスを置く注意点！

スーパー超

超スーパー

超スーパーちゃちゃ丸

スーパー超ちゃちゃ丸

プログラムは先にあったプレゼントボックスから開封する。よって置く順番によって結果が変わる。



1. 1. プレゼントボックスを準備するプレゼントボックスを準備する

2. 2. 部屋を選んでプレゼントボックスを置く部屋を選んでプレゼントボックスを置く

● プレゼントボックスに名前をつけます。

● プレゼントボックスはいくつでも作れます。※ 同じ名前はつけれません。

● プレゼントの中身はご自由に

● たくさんの部屋の中からプレゼントボックスを置く部屋を決めます。

● 部屋に置くプレゼントボックスを選びます。

● 置く順番を決めてプレゼントボックスを起きます。

　　※順番は連番でなく飛び番でもOK！　10でも20でも

※ プレゼントボックスは番号の小さい順に置かれます。



プレゼント名プレゼント名

どの部屋にどの部屋に

どのプレゼントボックスをどのプレゼントボックスを

どの順番にどの順番に

中身1. 1.

2. 2.


アクションフックの基本ステップ

1. 1.

2. 2.

function プレゼント名プレゼント名() {

}

add_action( どの部屋にどの部屋に ,プレゼント名プレゼント名 , どの順番にどの順番に)


フィルターフックの基本ステップ

1. 1.

2. 2.

function プレゼント名プレゼント名() {

}

add_filter( どの部屋にどの部屋に ,プレゼント名プレゼント名 , どの順番にどの順番に)

Codex hook

ﾜヵｯﾀｧｧｧ━!!＞ヽ(o>Д<○ヽ☆☆

簡単でしょ？

サンプルをみていきましょう！サンプルをみていきましょう！

まとめ

Twenty Thirteen

jQuery

WordPressのアレンジを本体（コア）改造でしちゃダメよ！フック（※専用の部屋）を使ってください。

フック（※専用の部屋）はたくさんあります。まずはどんな部屋があるが軽く目を通そう！

フック(※専用の部屋）は2種類（アクション・フィルター）！基本動作はほぼ同じ。違いだけ軽く理解しておこう。

・

・

・

・部屋へプレゼントボックスを置く方法は非常に簡単。

add_action、add_filterの使い方を覚えましょう！部屋へプレゼントボックスを置く方法は非常に簡単。

add_action、add_filterの使い方を覚えましょう！

フックで難しいのはプレゼントボックスを作るところ。余裕があったらPHPの勉強を。・

まとめ jQuery

今回の勉強会はフックの基本！

いろいろ試して経験積んでいってください。

e(^。^)9　ファイト！！

おわり jQuery

ありがとうございました。

Twitter

: as.chachamaru

: @as_chachamaru

Facebook

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

Engineering

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