2026年10月1日

WordPressで独自のダッシュボードウィジェットを作成する方法

カスタマイズ

はじめに

ここでは、WordPressのダッシュボードに独自のウィジェットを作成する方法について詳しく解説します。独自のダッシュボードウィジェットを追加することで、管理画面で重要な情報を一目で確認したり、特定の機能へのアクセスを容易にすることができます。

症状・背景

このテーマが必要になる主な場面:

特定の統計情報やレポートを常に表示したい場合
カスタムプラグインやスクリプトを使用して管理画面に新しい機能を追加したい場合
ユーザーインターフェースをカスタマイズし、ダッシュボードの効率性を向上させたい場合
WordPressの既存ウィジェットが不足していると感じた場合

手順・設定方法

ステップ1: フィルターを使用してウィジェットを追加

# WordPressのアクションフック 'wp_dashboard_setup' を使用してカスタムウィジェットを登録します。
add_action( 'wp_dashboard_setup', 'my_custom_dashboard_widget_register' );

function my_custom_dashboard_widget_register() {
    wp_add_dashboard_widget(
        'my-custom-widget-id',
        __( 'My Custom Widget Title', 'textdomain' ),
        'my_custom_dashboard_widget_content'
    );
}

ステップ2: ウィジェットのコンテンツを定義

# デフォルトで利用可能なウィジェットオプションを使用して、カスタムウィジェットのコンテンツを作成します。
function my_custom_dashboard_widget_content() {
    // HTMLまたはPHPコードを使用してウィジェットの内容を生成します。
    echo '<p>ここに任意のHTMLやPHPコードを追加できます。</p>';
}

ステップ3: ウィジェットの更新とカスタマイズ

# ユーザーがウィジェットのコンテンツを編集できるようにするため、管理ページの設定画面にフィールドを追加します。
add_action( 'admin_init', 'my_custom_dashboard_widget_settings' );

function my_custom_dashboard_widget_settings() {
    // カスタムウィジェットで使用するオプションを保存
    register_setting(
        'dashboard',
        'my_custom_dashboard_widget_option'
    );
}

# ウィジェットのコンテンツをカスタマイズするために、ユーザー設定を使用します。
function my_custom_dashboard_widget_content() {
    $custom_text = get_option( 'my_custom_dashboard_widget_option' );
    echo '<p>' . esc_html__( $custom_text ) . '</p>';
}

ステップ4: ウィジェットの表示と非表示を制御

# ユーザーがウィジェットをオン/オフにする機能を追加します。
function my_custom_dashboard_widget_control() {
    $widget_options = array(
        'id' => 'my-custom-widget-id',
        'title' => __( 'My Custom Widget Title', 'textdomain' ),
        'description' => __( 'このウィジェットはカスタムコンテンツを表示します。', 'textdomain' ),
        'callback' => 'my_custom_dashboard_widget_content'
    );
    wp_add_dashboard_widget( $widget_options['id'], $widget_options['title'], $widget_options['callback'] );

    // ユーザー設定ページにウィジェットの制御パネルを追加
    add_meta_box(
        'my-custom-widget-id',
        __( 'My Custom Widget Settings', 'textdomain' ),
        'my_custom_dashboard_widget_control_html',
        'dashboard',
        'side'
    );
}

function my_custom_dashboard_widget_control_html() {
    $option_name = 'my_custom_dashboard_widget_option';
    $default_text = esc_attr__( 'デフォルトテキスト', 'textdomain' );

    // オプションが既に保存されているか確認します。
    if ( false === get_option( $option_name ) ) {
        update_option( $option_name, $default_text );
    }

    $value = get_option( $option_name );
    ?>
    <p>
        <label for="<?php echo esc_attr($option_name); ?>"><?php _e('カスタムテキスト:', 'textdomain'); ?></label><br />
        <input type="text" class="widefat code" name="<?php echo esc_attr($option_name); ?>" id="<?php echo esc_attr($option_name); ?>" value="<?php echo esc_attr($value); ?>">
    </p>
    <?php
}

注意事項

カスタムウィジェットの機能を追加する際は、WordPressの開発者ドキュメントを参照してください。
安全なデータ操作と保存のために、常にesc_attr()やesc_html()などのエスケープ関数を使用します。
ユーザーがウィジェットの設定情報を編集できるようにする場合は、セキュリティ上のリスクも考慮して設計を行います。
カスタムコードを追加する際は、その影響範囲とパフォーマンスへの影響を理解してください。

まとめ

1. カスタムウィジェットの登録: 'wp_dashboard_setup' アクションフックを使用して新しいダッシュボードウィジェットを登録します。

2. コンテンツの生成: wp_add_dashboard_widget() 関数で定義されたコールバック関数を使って、ウィジェットのHTMLコンテンツを生成します。

3. ユーザー設定の追加: register_setting() 関数を使用して、カスタムウィジェットに必要なオプションフィールドを登録します。

4. 制御パネルの実装: ユーザーが自分の好みに合わせてウィジェットの設定を調整できるように、管理画面への設定メニューを追加します。

5. セキュリティとパフォーマンス: カスタムコードを作成する際には常にセキュリティとパフォーマンスを考慮し、適切なエスケープ処理や最適化を行うことが重要です。

Post Views: 3