プラグインなしで「ToDo」機能を追加する方法

はじめに

プラグイン「WP Dashboard Notes」などを使わずに、ダッシュボードに「ToDo」機能を追加します。

直感的で使いやすいUIにより、作成済みのToDoの編集や削除、追加もスムーズに操作可能です。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctons.phpに追加します。

// ダッシュボードウィジェットを追加
add_action('wp_dashboard_setup', function () {
  wp_add_dashboard_widget(
    'todo',
    'ToDoリスト',
    'render_todo'
  );
});


/**
 * ダッシュボードにウィジェットを出力
 *
 * @return void
 */
if (!function_exists('render_todo')):
function render_todo() {
  // ToDoリストを取得
  $todo_items = get_option('my_todo_items', []);

  ?>
  <div class="todo">
    <form method="post" class="todo__form">
      <?php wp_nonce_field('todo_action', 'todo_nonce'); ?>

      <ul class="todo__list">
        <?php foreach ($todo_items as $index => $item): ?>
          <?php
          if (is_array($item)) {
            $text = $item['text'] ?? '';
            $completed = !empty($item['completed']);
          } else {
            $text = $item;
            $completed = false;
          }
          ?>

          <li class="todo__item">
            <input type="checkbox" name="todo_completed[<?php echo esc_attr($index); ?>]" value="1" class="todo__checkbox" <?php checked($completed, true); ?>>
            <input type="text" name="todo_items[<?php echo esc_attr($index); ?>]" value="<?php echo esc_attr($text); ?>" class="todo__input">
            <button type="submit" name="todo_delete" value="<?php echo esc_attr($index); ?>" class="todo__delete button" onclick="return confirm('このToDoを削除しますか？');">削除</button>
          </li>

        <?php endforeach; ?>

        <li class="todo__item">
          <input type="checkbox" class="todo__checkbox" disabled>
          <input type="text" name="todo_items[]" value="" placeholder="新しいToDoを追加" class="todo__input">
          <button type="button" class="todo__delete button" disabled>削除</button>
        </li>
      </ul>

      <button type="submit" name="todo_save" value="1" class="button button-primary todo__save" onclick="return confirm('変更内容を保存しますか？');">保存</button>
    </form>
  </div>
  <?php
}
endif;


// 管理画面からの設定データ更新
add_action('admin_init', function () {
  if (!isset($_POST['todo_items'])) {
    return;
  }

  // nonceチェック
  check_admin_referer('todo_action', 'todo_nonce');

  // 権限チェック
  if (!current_user_can('edit_posts')) {
    wp_die('この操作を行う権限がありません。');
  }

  $new_items = [];

  if (is_array($_POST['todo_items'])) {
    foreach ($_POST['todo_items'] as $index => $item) {
      $item = sanitize_text_field($item);

      // 削除対象を除外
      if (isset($_POST['todo_delete']) && (string) $_POST['todo_delete'] === (string) $index) {
        continue;
      }

      // 空のToDoを除外
      if ($item === '') {
        continue;
      }

      // 完了状態を取得
      $completed = isset($_POST['todo_completed'][$index]);

      $new_items[] = [
        'text' => $item,
        'completed' => $completed,
      ];
    }
  }

  // ToDoリストを更新
  update_option('my_todo_items', $new_items);

  wp_safe_redirect(add_query_arg('todo_saved', '1', admin_url('index.php')));
  exit;
});


// 管理画面用JS・CSSを追加
add_action('admin_enqueue_scripts', function ($hook_suffix) {
  if ($hook_suffix !== 'index.php') {
    return;
  }

  ob_start();
  ?>
  .todo__item {
    align-items: center;
    display: flex;
    gap: 6px;
  }

  .todo__input {
    flex: 1;
    min-width: 0;
  }

  .todo__delete {
    flex: 0 0 auto;
  }
  <?php
  wp_add_inline_style('wp-admin', ob_get_clean());
});


// 通知メッセージを出力
add_action('admin_notices', function () {
  $screen = get_current_screen();

  if ($screen && $screen->id === 'dashboard' && isset($_GET['todo_saved']) && $_GET['todo_saved'] === '1') {
    echo '<div class="notice notice-success is-dismissible"><p>ToDoリストを更新しました。</p></div>';
  }
});

さいごに

今回紹介した方法を使えば、ダッシュボードに軽量でシンプルなToDoリスト機能を追加できます。
日々の運用タスクやメモの管理など、ちょっとした情報の整理にとても便利です。