WordPressのウィジェットを自作します

こんにちは、さるまりんです。

お手伝いをさせてもらっているサイトでサイドバーにいろんなものをウィジェットを使って表示しているとそのままでは10個までしか追加できないことが判明!

サイトはWordPressで作成しており、Widget Logicというウィジェットに条件分岐をつけられるプラグインを使って、PCの時はこれ、モバイルの時はこれ、投稿ページはこれ、リストの時はこれ、この投稿にはこれなんて追加しているとすぐに限界までいってました。

さあ、どうしよう。

考えました。ウィジェットを自分で作ってたらどうだろう、と。

自作ならばその中で好きなように条件分岐もできるし、例外的な動作も実装することができるかなということです。

自作ウィジェットの実装

実装するコードは次のようなものです。

functions.php

// 自作ウィジェットのクラスを読み込み
require_once __DIR__ . '/my_widget.php';

my_widget.php

<?php

/**
 * 自作ウィジェットのクラス
 */
class MyWidget extends WP_Widget {

    /**
     * widgetの登録
     */
    function __construct(){
        parent::__construct(
            'MyWidget', // Base ID
            '自作ウィジェット', // Name
            array('description' => '自作のウィジェットです。設定されている文字列を表示します') // Args
        );
    }

    /**
     * 表側(表示されるもの)
     */
    public function widget($args, $instance) {

        // 設定されている文字列を取得
        $setting = $instance['setting'];
        
        echo $args['before_widget'];

        if(!empty($setting)) {
            echo $setting; // 設定されているものをそのまま表示
        }
        
        echo $args['after_widget'];
    }

    /**
     * 管理画面側
     * @param array $instance 設定項目
     * @return string|void
     */
    public function form($instance) {
        $setting = $instance['setting'];
        $setting_name = $this->get_field_name('setting');
        $setting_id = $this->get_field_id('setting');
        ?>

        <p>
        <label for="<?php echo $setting_id; ?>">設定:</lable>
        <textarea class="widefat" id="<?php echo $setting_id; ?>" name="<?php echo $setting_name; ?>" rows="10"><?php echo esc_attr($setting); ?></textarea>
        </p>
        
        <?php
    }

    /**
     * 更新
     * 入力チェックして設定を返却
     * @param array $new_instance form()から入力された新しい設定データ
     * @param array $old_instance 前回の設定データ
     * @return array 保存する設定。false(更新しない)
     */
    function update($new_instance, $old_instance) {
        if(empty($new_instance['setting'])){
            return false;
        }
        return $new_instance;
    }
}

add_action ('widgets_init', function() {
    register_widget('MyWidget'); // WidgetをWordPressに登録
});

functions.phpMyWidgetクラスを書いてもいいのかもしれませんが今後たくさん増えてしまった時に収拾つかないので、別のファイルにして読み込むようにしています。

やることを箇条書きで。

  • WP_Widgetを継承したクラスを作成する。
  • コンストラクタで自作するウィジェットの情報を登録する。
  • 関数widgetを作成し、表側に表示する部分を実装する。
  • 関数formを作成し、管理画面側でウィジェットに対する設定を行う部分を実装する。
  • 関数updateを作成し、設定の更新を可能にする。
  • add_action('widgets_init', function(){});でウィジェットをWordPressに登録する。

なかなかシンプルですよね。結構便利に自作ウィジェット作れそうです。

現在、実装中の機能はもっと洗練されたらここで公表できたらと思っています。

頑張ってまいります。

読んでくださってありがとうございます。

ではまた!