WordPressのウィジェット作成

WordPress2.8から簡単にウィジェットを作成するAPIが実装された模様です。
ごくシンプルに、そのAPIの使い方が下記に紹介されています。

WordPress 2.8登場!新ウィジェットAPIの使い方
NULLDESIGN | カスタムウィジェットの作り方

ここでふと思ったのが、テキストウィジェットで静的パーツは作れるけど、
PHPで動的パーツを作りたいときにすごく便利だなと。

ウィジェット自身は、WP_Widgetクラスを派生すればいいだけ。
このあたり、オブジェクト指向の恩恵が出てますよね。

もう少し詳しく知りたかったので、

ウィジェット API – WordPress Codex 日本語版
を見てみると、要は下記の3つのメソッドをオーバーライトすればいいだけ。

  1. widget() – 実際のウィジェットのコンテンツを出力する
  2. update() – 設定の保存を処理する
  3. form() – 設定フォームを出力する

ちなみに、WP_Widgetクラスのソースはここで。
WordPress Codexで記載されていたサンプルは下記。

/**
 * FooWidget Class
 */
class FooWidget extends WP_Widget {
    /** constructor */
    function FooWidget() {
        parent::WP_Widget(false, $name = 'FooWidget');
    }

    /** @see WP_Widget::widget */
    function widget($args, $instance) {
        extract( $args );
        $title = apply_filters('widget_title', $instance['title']);
        ?>
              <?php echo $before_widget; ?>
                  <?php if ( $title )
                        echo $before_title . $title . $after_title; ?>
                  Hello, World!
              <?php echo $after_widget; ?>
        <?php
    }

    /** @see WP_Widget::update */
    function update($new_instance, $old_instance) {
        return $new_instance;
    }

    /** @see WP_Widget::form */
    function form($instance) {
        $title = esc_attr($instance['title']);
        ?>
            <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label></p>
        <?php
    }

} // class FooWidget

// register FooWidget widget
add_action('widgets_init', create_function('', 'return register_widget("FooWidget");'));

あと、情報として不足してるのは、
ウィジェット設定画面でのパラメタの設定の仕方と、実際コールされた時の受け取り方。
この辺はまた後日に。

lCuOLO
2010年 1月 18日 | Posted in WordPress
タグ:
まだコメントはありません。

コメントする

XHTML: 使用可能タグ: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">