WordPress 7.0で追加されたフォントライブラリを活用し追加したフォントをダッシュボードに一覧表示する方法

はじめに

WordPress 7.0から管理画面から好みのフォントを簡単にアップロードできるようになりました（図1参照）。
わざわざ外観→フォントで確認することなく、簡単にCSSで定義できるようfont-familyを一覧表示します。

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

完成イメージ

実装手順

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

// ダッシュボードウィジェットを追加
add_action('wp_dashboard_setup', function () {
  wp_add_dashboard_widget(
    'font-list',
    '追加済みフォント一覧',
    'render_font_list'
  );
});


/**
 * ダッシュボードにウィジェットを出力
 *
 * @return void
 */
if (!function_exists('render_font_list')):
function render_font_list() {
  $fonts = get_posts([
    'post_type'      => 'wp_font_family',
    'posts_per_page' => -1,
    'post_status'    => 'publish',
  ]);
  ?>
  <div class="font-list">
    <?php if (!empty($fonts)): ?>
      <p>現在、以下のフォントがライブラリに追加されています。</p>

      <table class="wp-list-table widefat fixed striped table-view-list">
        <thead>
          <tr>
            <th scope="col" class="manage-column column-primary">フォント名</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($fonts as $font): ?>
            <tr>
              <td class="column-primary">
                <strong><?= esc_html($font->post_title); ?></strong>
              </td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    <?php else: ?>
      <p>追加されたカスタムフォントはありません。</p>
    <?php endif; ?>
  </div>
  <?php
}
endif;

参考：CSSでフォントを設定する方法

以下のようにCSSが出力されるため、適用したい要素に対してfont-family: "Roboto";を記述するだけでフォントの設定が完了します。

<style class="wp-fonts-local">
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:fallback;src:url('https://example.com/wp-content/uploads/fonts/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmWggvWl0Qn.woff2') format('woff2');}
</style>

拡張：Cocoon設定のサイトフォントにメニューを追加する方法

フォントライブラリで追加したフォントを、Cocoon設定→全体→サイトフォントの選択肢に動的に追加します。

Cocoon標準のWebフォント

Cocoon設定→全体→サイトフォントでWebフォントを指定すると、Googleの外部サーバーからフォントデータを読み込むため、ページの表示速度に影響を与える場合があります。
この場合、外観→フォントであらかじめGoogleフォントをサイト内に取り込んでおくことで、表示速度の改善が期待できます（表1参照）。

完成イメージ

実装手順

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

// Cocoon設定（全体）に入力フォームを追加
add_filter('admin_input_form_tag', function ($html, $name) {
  if ($name !== OP_SITE_FONT_FAMILY) {
    return $html;
  }

  // フォントライブラリから登録済みフォントを取得
  $fonts = get_posts([
    'post_type'      => 'wp_font_family',
    'posts_per_page' => -1,
    'post_status'    => 'any',
  ]);

  // フォントが登録されていない場合は標準の入力欄を維持
  if (empty($fonts)) {
    return $html;
  }

  // 現在選択されているフォントを取得
  $current_font      = get_site_font_family();
  $font_options_html = '';

  foreach ($fonts as $font) {
    $font_name = $font->post_title;
    $selected  = ($font_name === $current_font) ? ' selected="selected"' : '';

    $font_options_html .= '  <option value="' . esc_attr($font_name) . '"' . $selected . '>' . esc_html($font_name) . '</option>' . "\n";
  }

  // 既存の選択欄にフォント一覧を追加
  return str_replace('</select>', $font_options_html . '</select>', $html);
}, 10, 2);


// テンプレート（カスタムCSS）を変更
add_filter('cocoon_part__tmp/css-custom', function ($content, $name, $args) {
  $current_font = get_site_font_family();

  if (empty($current_font)) {
    return $content;
  }

  ob_start();
  ?>
  :root {
    --cocoon-default-font: "<?= esc_attr($current_font); ?>", sans-serif;
  }
  <?php
  return $content . ob_get_clean();
}, 10, 3);

さいごに

今回紹介した方法を使えば、WordPressのフォントライブラリに保存されたデータを直接参照し、開発者やサイト運用者が最も必要とするfont-family名を常に手元で確認できるようになります。
深いメニュー階層を行き来する手間を省き、効率的なデザインカスタマイズを実現しましょう。