テーマ開発者向け：WordPressで独自ウィジェットを追加する方法
WordPressのテーマを開発していると、「ここに独自のウィジェットを追加したい」と思うことはありませんか？
本記事では、テーマ開発者向けに独自ウィジェット（カスタムウィジェット）を追加する手順を解説します。
Contents
ウィジェットとは？
ウィジェットとは、サイドバーやフッターなどのウィジェットエリアに配置できる機能ブロックのことです。
たとえば、最近の投稿、カテゴリー、検索フォームなどが標準ウィジェットとして用意されています。
独自ウィジェットを作成すれば、「任意のHTMLや投稿内容」「特定のカスタム投稿タイプの一覧」など、自由に表示できます。
ウィジェットを追加する全体の流れ
- 独自ウィジェット用のクラスを作成（
WP_Widgetを継承） widgets_initアクションフックで登録- 必要に応じてCSSを追加
独自ウィジェットクラスを作成する
まずは、functions.phpなどに以下のようなクラスを定義します。
class My_Custom_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'my_custom_widget', // ウィジェットID
'カスタムウィジェット', // ウィジェット名
array( 'description' => 'オリジナルのウィジェットです。' )
);
}
public function widget( $args, $instance ) {
echo $args['before_widget'];
echo $args['before_title'] . 'こんにちは、ウィジェット！' . $args['after_title'];
echo '<p>これは独自ウィジェットの内容です。</p>';
echo $args['after_widget'];
}
public function form( $instance ) {
echo '<p>管理画面での設定フォームを追加できます。</p>';
}
public function update( $new_instance, $old_instance ) {
return $new_instance;
}
}4. ウィジェットを登録する
上記クラスをWordPressに認識させるために、widgets_initフックを使って登録します。
function register_my_custom_widget() {
register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'register_my_custom_widget' );これで、管理画面の「外観 → ウィジェット」または「外観 → カスタマイズ」画面に、カスタムウィジェットが追加されます。
5. 表示スタイルを調整する（任意）
必要に応じて、style.cssなどでウィジェット専用のCSSを記述しましょう。
.my-custom-widget {
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
}widget()メソッド内でクラスを付与すれば、スタイリングも簡単です。
echo '<div class="my-custom-widget">これは独自ウィジェットです</div>';6. 管理画面での設定を追加する（発展編）
form()とupdate()メソッドをカスタマイズすることで、ウィジェットの管理画面に入力欄や設定項目を追加できます。
例：
public function form( $instance ) {
$title = !empty( $instance['title'] ) ? $instance['title'] : '';
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">タイトル：</label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"
name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text"
value="<?php echo esc_attr( $title ); ?>">
</p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
}
public function widget( $args, $instance ) {
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
echo '<p>こんにちは！カスタムウィジェットです。</p>';
echo $args['after_widget'];
}まとめ
独自ウィジェットを使うことで、テーマに独自性や便利機能を追加できます。
特に再利用性の高いUIパーツや、クライアント向けの特化機能を作成したい場合に非常に有効です。
補足：ウィジェットとブロックエディタの関係
WordPress 5.8以降では、ウィジェットエリアも「ブロックエディタ」で管理されるようになりました。
ただし、今回紹介したウィジェットの作り方も引き続きサポートされています。