投稿・固定ページに設定されたCSS・JavaScript有無を一覧確認する方法

はじめに

WordPress は、投稿や固定ページごとにCSSやJavaScriptを追加する方法が複数あります。
Cocoonは、投稿単位でカスタムCSS、カスタムJavaScript を設定でき、Gutenbergエディターの「カスタム HTML」ブロックを使えば、ページ内に直接CSSやJSを記述することも可能です。

一方で、これらの設定は一覧画面から確認できないという問題があります。
どのページにCSS やJavaScriptが書かれているのかを把握するには、実際に編集画面を開く必要があり、管理やメンテナンスの手間が増えてしまいます。

そこで、投稿・固定ページ一覧にCSS・JavaSCript定義の有無を表示するカラムを追加し、カスタムCSS、カスタムJavaScript 、「HTMLカスタム」ブロックの使用状況を一目で確認できるようにします。
なお、「HTMLカスタム」ブロック内にCSSやJavaScriptが含まれている場合は、赤字で表示します。

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

完成イメージ

実装手順

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

/**
 * 投稿・固定ページの一覧表にカラムを追加
 *
 * @param array $columns 既存のカラム配列
 * @return array 修正後のカラム配列
 */
if (!function_exists('add_page_assets_columns')):
function add_page_assets_columns($columns) {
  $columns['page_assets'] = 'CSS / JS';

  return $columns;
}
endif;


// 管理画面一覧にカラムを追加
add_filter('manage_posts_columns', 'add_page_assets_columns');
add_filter('manage_pages_columns', 'add_page_assets_columns');


/**
 * 投稿・固定ページ一覧にCSS・JSの使用状況を表示
 *
 * @param string $column_name 現在処理中のカラム名
 * @param int $post_id 対象の投稿・固定ページID
 * @return void
 */
if (!function_exists('render_page_assets_column')):
function render_page_assets_column($column_name, $post_id) {
  if ($column_name !== 'page_assets') {
    return;
  }

  // カスタムフィールドの設定を確認
  $has_css = !empty(trim((string) get_post_meta($post_id, '_custom_css', true)));
  $has_js = !empty(trim((string) get_post_meta($post_id, '_custom_js', true)));

  // 「HTMLカスタム」ブロックの設定を確認
  $post = get_post($post_id);
  $has_style_tag = false;
  $has_script_tag = false;

  if ($post && has_blocks($post->post_content)) {
    foreach (parse_blocks($post->post_content) as $block) {
      if ($block['blockName'] !== 'core/html') {
        continue;
      }

      $content = $block['innerHTML'];
      if (!$has_style_tag && (stripos($content, 'data-wp-block-html="css"') !== false || stripos($content, '<style') !== false)) {
        $has_style_tag = true;
      }
      if (!$has_script_tag && (stripos($content, 'data-wp-block-html="js"') !== false || stripos($content, '<script') !== false)) {
        $has_script_tag = true;
      }
    }
  }

  $has_css = $has_css || $has_style_tag;
  $has_js = $has_js || $has_script_tag;

  if (!$has_css && !$has_js) {
    return;
  }

  $outputs = [];
  $style = ' style="color:red;"';

  if ($has_css) {
    $outputs[] = $has_style_tag ? "<span{$style}>CSS</span>" : 'CSS';
  }

  if ($has_js) {
    $outputs[] = $has_script_tag ? "<span{$style}>JS</span>" : 'JS';
  }

  echo implode(' / ', $outputs);
}
endif;


// 管理画面一覧のカラムにデータを表示
add_action('manage_posts_custom_column', 'render_page_assets_column', 10, 2);
add_action('manage_pages_custom_column', 'render_page_assets_column', 10, 2);

補足

CSSやJavaScriptの定義場所に応じて、表示される文字色が変わります（表1参照）。
なお、同じ項目がカスタムフィールドと「カスタムHTML」ブロックの両方で定義されている場合は、「カスタムHTML」ブロック側の設定が優先され、文字色は赤色で表示されます。

さいごに

今回紹介した方法を使えば、投稿や固定ページに個別で設定された CSS・JavaScript の有無を一覧画面から把握できるようになります。
ページを一つずつ開いて確認する必要がなくなり、不要なコードの整理やトラブル時の原因特定もスムーズになります。
カスタム HTMLブロックの使用状況も可視化できるため、将来的な保守や引き継ぎの面でも有効な管理手法と言えるでしょう。