![©
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属性は配列列にし
てくれる。すてき。](https://image.slidesharecdn.com/wordpresswidgetapi-150620043931-lva1-app6891/85/WordPress-widget-api-22-320.jpg)
![©
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ʼ’] . ʻ‘追加ʼ’; 的な。](https://image.slidesharecdn.com/wordpresswidgetapi-150620043931-lva1-app6891/85/WordPress-widget-api-26-320.jpg)
![©
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'];
}
登録した情報を出⼒力力し
ます。エスケープも忘
れずに。](https://image.slidesharecdn.com/wordpresswidgetapi-150620043931-lva1-app6891/85/WordPress-widget-api-28-320.jpg)
![©
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にウィジェット共
通情報が含まれています。](https://image.slidesharecdn.com/wordpresswidgetapi-150620043931-lva1-app6891/85/WordPress-widget-api-30-320.jpg)
![©
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'];
}
この部分を追加しました。
投稿を表⽰示してみます。](https://image.slidesharecdn.com/wordpresswidgetapi-150620043931-lva1-app6891/85/WordPress-widget-api-31-320.jpg)
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 表⽰示された！( ´ ▽ ` )ﾉ