CONTACT PRIVACY POLICY
HOME / BLOG
BLOG

WordPressオリジナルテーマでダッシュボードを作る方法

BLOG
デフォルト画像

WordPressオリジナルテーマを作るなら、ただ記事を表示するだけでなく、運営者向けのダッシュボードを用意するとかなり便利です。PV、検索順位、公開記事数、ツール利用状況などを1ページで見られると、改善の判断が速くなります。

この記事では、オリジナルテーマ内にダッシュボード用テンプレートを作り、REST APIから取得したデータを表示する基本構成を作ります。

作る構成

  1. 固定ページ用テンプレート page-dashboard.php
  2. ダッシュボード用CSS
  3. fetchでデータを取得するJavaScript
  4. WordPress REST APIで返す集計データ
  5. ログインユーザーだけ見られる権限チェック

固定ページテンプレート

<?php
/**
 * Template Name: NINES Dashboard
 */

get_header();
?>

<main class="dashboard">
  <section class="dashboard-hero">
    <p class="eyebrow">DASHBOARD</p>
    <h1>サイト運営ダッシュボード</h1>
    <p>PV、検索順位、公開記事、ツール利用状況をまとめて確認します。</p>
  </section>

  <section class="dashboard-grid">
    <article class="dashboard-card" data-metric="pageviews">
      <p>Page Views</p>
      <strong id="pv-count">--</strong>
    </article>

    <article class="dashboard-card" data-metric="queries">
      <p>Search Queries</p>
      <strong id="query-count">--</strong>
    </article>

    <article class="dashboard-card" data-metric="posts">
      <p>Published Posts</p>
      <strong><?php echo esc_html(wp_count_posts()->publish); ?></strong>
    </article>
  </section>

  <section class="dashboard-panel">
    <h2>最新記事</h2>
    <?php
    $posts = new WP_Query([
        'posts_per_page' => 5,
        'post_status' => 'publish',
    ]);
    ?>
    <ul>
      <?php while ($posts->have_posts()) : $posts->the_post(); ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
      <?php endwhile; wp_reset_postdata(); ?>
    </ul>
  </section>
</main>

<?php get_footer(); ?>

ダッシュボード用CSS

.dashboard {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 56px 0;
}

.dashboard-hero {
  margin-bottom: 32px;
  border-bottom: 4px solid #ff2f63;
}

.dashboard-hero h1 {
  font-size: clamp(36px, 7vw, 72px);
  line-height: 1;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

.dashboard-card {
  padding: 24px;
  border: 2px solid #111;
  background: #fff;
  box-shadow: 8px 8px 0 #ffd93d;
}

.dashboard-card strong {
  display: block;
  font-size: 42px;
  line-height: 1;
}

JavaScriptでREST APIを読む

async function loadDashboard() {
  const response = await fetch('/wp-json/nines/v1/dashboard');
  const data = await response.json();

  document.querySelector('#pv-count').textContent = data.pageviews.toLocaleString();
  document.querySelector('#query-count').textContent = data.searchQueries.toLocaleString();
}

loadDashboard().catch(() => {
  document.querySelector('#pv-count').textContent = '取得失敗';
  document.querySelector('#query-count').textContent = '取得失敗';
});

REST APIで集計データを返す

最初は固定値でも構いません。先にダッシュボードのレイアウトを作り、あとからAnalytics Data APIやSearch Console APIの実データへ差し替えると進めやすいです。

add_action('rest_api_init', function () {
    register_rest_route('nines/v1', '/dashboard', [
        'methods' => 'GET',
        'callback' => function () {
            return rest_ensure_response([
                'pageviews' => 12345,
                'searchQueries' => 86,
                'posts' => wp_count_posts()->publish,
            ]);
        },
        'permission_callback' => function () {
            return current_user_can('edit_posts');
        },
    ]);
});

実装のポイント

  • 誰でも見られる公開ページにしない
  • API取得データはtransientでキャッシュする
  • 数字だけでなく、前月比や改善候補も表示する
  • カードUIは最初から増える前提でgridにする
  • テーマに直書きしすぎる場合は、自作プラグイン化も検討する

関連リンク

まとめ

オリジナルテーマのダッシュボードは、サイト運営を「見て終わり」から「次に何を直すか決める」ための画面に変えてくれます。まずは固定ページテンプレートとREST APIの小さな組み合わせから作るのがおすすめです。

このシリーズの記事

次に読む記事

STEP BACK