ダッシュボードにTheme Modsの内容を表示する方法

はじめに

WordPressのテーマで設定した値は、データベース内のtheme_mods_{テーマ名}というオプション名で保存されます。
しかし、開発中に設定値が正しく保存されているかを確認したい場合、通常はphpMyAdminなどの管理ツールを用いてデータベースへ直接アクセスする必要があります。

本手法を用いると、外部ツールでの直接操作や誤操作のリスクを回避し、WordPress管理画面上で安全かつ手軽に設定値を確認できます。

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

完成イメージ

実装手順

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

// ダッシュボードウィジェットを追加
add_action('wp_dashboard_setup', function () {
  wp_add_dashboard_widget(
    'theme-mod-viewer',
    'Theme Mods データビューアー',
    'render_theme_mod_viewer'
  );
});


/**
 * ダッシュボードにウィジェットを出力
 *
 * @return void
 */
if (!function_exists('render_theme_mod_viewer')):
function render_theme_mod_viewer() {
  // 現在のテーマのスラッグを取得
  $stylesheet = get_option('stylesheet');
  $option_name = 'theme_mods_' . $stylesheet;
  $current_mod = get_option($option_name);
  ?>
  <div class="theme-mod-viewer">
    <p class="theme-mod-viewer__option">
      保存されているオプション名：<?php echo esc_html($option_name); ?>
    </p>

    <?php if ($current_mod): ?>
      <pre class="theme-mod-viewer__data"><?php echo esc_html(print_r($current_mod, true)); ?></pre>
    <?php else: ?>
      <p class="theme-mod-viewer__empty">データが見つかりませんでした。</p>
    <?php endif; ?>
  </div>
  <?php
}
endif;

さいごに

今回紹介した方法を使えば、データベースへの直接アクセスを避けて、WordPressのダッシュボードから安全かつ視覚的にテーマの内部設定値を確認できるようになります。
開発中のデバッグ工数を削減し、効率的なスキンカスタマイズや開発環境の構築にぜひお役立てください。