「吹き出し」ブロックのアイコン画像を一括で変更する方法

はじめに

過去の投稿で使用した「吹き出し」ブロックのアイコン画像を変更したいと思うことがあるかもしれません。

しかし、Cocoon設定→吹き出し→吹き出し一覧でアイコン画像を変更しても、既に本文中に埋め込まれたアイコン画像は変更されません。
さらに、吹き出し一覧から削除しても、過去の投稿に埋め込まれた内容が削除されることはありません。

そのため、過去の投稿のアイコン画像を変更するには、プラグイン「Search Regex」などを使用して、本文中のアイコン画像を手動で置き換える必要があります。

そこで、簡単なCSSを使用して過去の投稿を含めた「吹き出し」ブロックのアイコンを一括で変更します。

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

実装手順

以下の手順で実装します。

参考：PHPで実装する場合

ページを表示するときに、「吹き出し」ブロックのアイコン画像のURLを、吹き出し設定で変更したURLに変更します。

実装手順

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

add_filter('render_block_cocoon-blocks/balloon-ex-box-1', function ($block_content, $block) {
  // アイコン画像を個別変更している場合
  if (isset($block['attrs']['iconid'])) {
    return $block_content;
  }

  // 吹き出し設定のIDを取得
  $db_id = isset($block['attrs']['id']) ? (int) $block['attrs']['id'] : 0;

  if ($db_id > 0) {
    $record = get_speech_balloon($db_id);

    if ($record) {
      $block_icon = isset($block['attrs']['icon']) ? $block['attrs']['icon'] : '';

      // 保存済みのアイコンURLと現在の設定URLが異なる場合は、ブロックのHTMLを更新
      if ($block_icon && $block_icon !== $record->icon) {
        $block_content = str_replace($block_icon, esc_url($record->icon), $block_content);
      }
    }
  }

  return $block_content;
}, 10, 2);

参考：吹き出し設定で更新時に本文内の「吹き出し」ブロックを置き換える方法

吹き出し設定で「保存」ボタンが押された瞬間に、データベース内の該当する過去投稿を検索し、古いアイコン画像を最新のURLへと書き換えます。

実装手順

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

add_action('admin_init', function () {
  if (($_POST['action'] ?? '') !== 'edit' || empty($_POST['id']) || empty($_POST['icon'])) {
    return;
  }

  global $wpdb;

  $balloon_id   = intval($_POST['id']);
  $new_icon_url = esc_url_raw($_POST['icon']);

  // 更新対象の吹き出し設定を取得し、アイコンURLに変更がない場合
  $old_record = get_speech_balloon($balloon_id);
  if (!$old_record || empty($old_record->icon) || $old_record->icon === $new_icon_url) {
    return;
  }
  $old_icon_url = $old_record->icon;

  // 「吹き出し」ブロックを含む投稿を取得
  $like_query      = '%cocoon-block-balloon%';
  $posts_to_update = $wpdb->get_results($wpdb->prepare(
    "SELECT ID, post_content FROM {$wpdb->posts} WHERE post_content LIKE %s AND post_status != 'inherit'",
    $like_query
  ));

  if (empty($posts_to_update)) {
    return;
  }

  // 投稿本文に含まれる旧アイコンURLを新しいURLに置換
  foreach ($posts_to_update as $p) {
    $content = $p->post_content;

    // URLを置換
    $content = str_replace($old_icon_url, $new_icon_url, $content);

    // URLの置換によって本文が変更された場合のみ更新
    if ($content !== $p->post_content) {
      $wpdb->update(
        $wpdb->posts,
        ['post_content' => $content],
        ['ID' => $p->ID],
        ['%s'],
        ['%d']
      );
    }
  }
}, 1);

さいごに

今回紹介した方法を使えば、CSSの追加だけで過去の投稿を含む「吹き出し」ブロックのアイコンを簡単に一括変更できます。