Recommended
More Related Content
What's hot
What's hot (20)
Similar to WordPress widget api
Similar to WordPress widget api (20)
More from Takami Kazuya
More from Takami Kazuya (20)
WordPress widget api
- 1. © wordbonch.org WordPress Widget API WordBench宮崎 ver.1.0.0 【WordBench宮崎勉強会】
- 2. © wordbonch.org ⾃自⼰己紹介 2 ⾼高⾒見見 和也（Takami Kazuya） Twi5er@miiitaka Facebook@miiitaka 株式会社アラタナ フロントエンドエンジニア JavaScriptと友達です。
- 3. © wordbonch.org Let’s Programming !! 3 今回は野良良プラグインを作って 実装してみます。
- 7. © wordbonch.org 作成したディレクトリ内にディレクトリと同じ名前のPHPファイル（widget-‐‑‒plugin.php）を 作成して以下のコメントを書きます。 widget-‐‑‒plugin.phpに記述 7 <?php /* Plugin Name: Widget API PLUGIN DescripMon: This is a study plugin Author: Kazuya Takami Version: 0.1 */ 書いたら管理理画⾯面のプラグインメニューを確認しましょう。(^o^)
- 9. © wordbonch.org 先程のコメント欄の下に続けて以下のコードを記述します。 Widget APIの基本 9 class Widget_Plugin extends WP_Widget { public funcMon __construct() { parent::__construct( false, 'Widget Plugin Demo’ ); } public funcMon form( $instance ) { } public funcMon update( $new_instance, $old_instance ) { } public funcMon widget( $args, $instance ) { } }
- 10. © wordbonch.org 先程のコメント欄の下に続けて以下のコードを記述します。 Widget APIの基本 10 class Widget_Plugin extends WP_Widget { public funcMon __construct() { parent::__construct( false, 'Widget Plugin Demo’ ); } public funcMon form( $instance ) { } public funcMon update( $new_instance, $old_instance ) { } public funcMon widget( $args, $instance ) { } } WP_Widgetクラスを継承
- 11. © wordbonch.org 先程のコメント欄の下に続けて以下のコードを記述します。 Widget APIの基本 11 class Widget_Plugin extends WP_Widget { public funcMon __construct() { parent::__construct( false, ‘Widget Plugin Demo’ ); } public funcMon form( $instance ) { } public funcMon update( $new_instance, $old_instance ) { } public funcMon widget( $args, $instance ) { } } WP_Widgetクラス（スーパ ークラス）のコンストラク タ呼び出し
- 12. © wordbonch.org 先程のコメント欄の下に続けて以下のコードを記述します。 Widget APIの基本 12 class Widget_Plugin extends WP_Widget { public funcMon __construct() { parent::__construct( false, 'Widget Plugin Demo’ ); } public funcMon form( $instance ) { } public funcMon update( $new_instance, $old_instance ) { } public funcMon widget( $args, $instance ) { } } 管理理画⾯面のウィジェットに ⼊入⼒力力項⽬目などを表⽰示する関数 $instance に連想配列列で 登録した項⽬目値が来る
- 13. © wordbonch.org 先程のコメント欄の下に続けて以下のコードを記述します。 Widget APIの基本 13 class Widget_Plugin extends WP_Widget { public funcMon __construct() { parent::__construct( false, 'Widget Plugin Demo’ ); } public funcMon form( $instance ) { } public funcMon update( $new_instance, $old_instance ) { } public funcMon widget( $args, $instance ) { } } 管理理画⾯面のウィジェット で「保存」ボタンを押した 時に動作する関数 $new_instance が今回、 $old_instanceが前回⼊入 ⼒力力した値
- 14. © wordbonch.org 先程のコメント欄の下に続けて以下のコードを記述します。 Widget APIの基本 14 class Widget_Plugin extends WP_Widget { public funcMon __construct() { parent::__construct( false, 'Widget Plugin Demo’ ); } public funcMon form( $instance ) { } public funcMon update( $new_instance, $old_instance ) { } public funcMon widget( $args, $instance ) { } } サイト側のウィジェットを 配置した場所に表⽰示される 内容を記述 $new_instance が今回、 $old_instanceが前回⼊入 ⼒力力した値
- 15. © wordbonch.org 出来上がったクラスをウィジェットに登録して、フックポイント（widget_̲init）に仕掛けます。 Widget API：フックポイントの登録 15 add_acMon( 'widgets_init', funcMon () { register_widget( 'Widget_Plugin’ ); }); クラス名を登録します。 （無名関数パターン） funcMon register_widget_plugin () { register_widget( 'Widget_Plugin’ ); } add_acMon( 'widgets_init’, ‘register_widget_plugin’); 関数を作ってフックさ せるパターン。
- 17. © wordbonch.org Widget API：ウィジェット画⾯面 17 追加された！＼(^o^)／
- 18. © wordbonch.org Widget API：ウィジェット画⾯面 18 けどまだ何も起きない (´・ω・｀)
- 20. © wordbonch.org スーパークラスのコンストラクタを呼び出します。 Widget API：コンストラクタの定義 20 public funcMon __construct() { $widget_opMons = array( 'descripMon' => 'This is a study plugin' ); parent::__construct( false, 'Widget Plugin Demo', $widget_opMons); }
- 22. © wordbonch.org Widget API：formメソッド定義 22 public funcMon form( $instance ) { echo '<p>タイトル：'; prina( '<input type="text" id="%s" name="%s" value="%s">', $this-‐>get_field_id( 'Mtle' ), $this-‐>get_field_name( 'Mtle' ), esc_a5r( $instance['Mtle'] ) ); echo '</p>'; } public funcMon get_field_id( $field_name ) { return 'widget-‐' . $this-‐>id_base . '-‐' . $this-‐>number . '-‐' . $field_name; } widget.php ⼀一意な⽂文字列列を作成し てくれる。 public funcMon get_field_name($field_name) { return 'widget-‐' . $this-‐>id_base . '[' . $this-‐>number . '][' . $field_name . ']'; } name属性は配列列にし てくれる。すてき。
- 23. © wordbonch.org Widget API：ウィジェット画⾯面確認 23 ⼊入⼒力力ボックスが出た！ ( ´ ▽ ` )ﾉ
- 24. © wordbonch.org Widget API：ウィジェット画⾯面確認 24 けどまだ保存できない (´・ω・｀)
- 26. © wordbonch.org $new_̲instance に⼊入⼒力力した値が⼊入っているのでreturnするだけ。 Widget API：updateメソッド定義 26 public funcMon update( $new_instance, $old_instance ) { return $new_instance; } これだけ！( ´ ▽ ` )ﾉ ⼊入⼒力力した値＋何かを保存したい場合には、ここで仕掛けてあげます。 $new_̲instance[ʻ‘titleʼ’] = $new_̲instance[ʻ‘titleʼ’] . ʻ‘追加ʼ’; 的な。
- 28. © wordbonch.org タイトルとコンテンツを出⼒力力するにあたって、他のwidgetと同様の構成にするようにします。 Widget API：widgetメソッド定義 28 public funcMon widget( $args, $instance ) { echo $args['before_widget']; echo $args['before_Mtle']; echo esc_html( $instance['Mtle'] ); echo $args['aher_Mtle']; echo $args['aher_widget']; } 登録した情報を出⼒力力し ます。エスケープも忘 れずに。
- 29. © wordbonch.org Widget API：表⽰示確認 29 表⽰示された！( ´ ▽ ` )ﾉ
- 30. © wordbonch.org タイトルとコンテンツを出⼒力力するにあたって、他のwidgetと同様の構成にするようにします。 Widget API：widgetメソッド定義 30 public funcMon widget( $args, $instance ) { echo $args['before_widget']; echo $args['before_Mtle']; echo esc_html( $instance['Mtle'] ); echo $args['aher_Mtle']; echo $args['aher_widget']; } 引数$argsにウィジェット共 通情報が含まれています。
- 31. © wordbonch.org Widget API：widgetメソッド定義 31 public funcMon widget( $args, $instance ) { echo $args['before_widget']; echo $args['before_Mtle']; echo esc_html( $instance['Mtle'] ); echo $args['aher_Mtle']; global $post; $where = array( 'numberposts' => 5 ); $posts = get_posts( $where ); foreach( $posts as $post ) { setup_postdata($post); esc_html( the_Mtle() ); } wp_reset_postdata(); echo $args['aher_widget']; } この部分を追加しました。 投稿を表⽰示してみます。
- 32. © wordbonch.org Widget API：表⽰示確認 32 表⽰示された！( ´ ▽ ` )ﾉ