【WordPress】文章整形ツールの作り方

2025年9月5日2025年10月14日

当ページのリンクには広告が含まれています。

以下の条件で文章を整形し、ボタン1つでコピーできるツールを作成しました。

「。」「！」「？」の後は改行（ただし直前が」の場合は改行せず一文にする）。
「、」で改行されている部分は、1行に戻す。
途中に入っている「あいうえお」を削除。
文頭・改行後の余計な空白を削除。
「、」なし改行は一文に戻す

このツールを作成するためのコードを紹介します。

※追記

WordPressのカスタムHTMLに貼り付けるだけでは機能しなくなってしまったので、別の方法に変えました。

JavaScriptを使った文章整形ツールの作り方もあわせて紹介します。

文章整形ツール（コード）

以下のコードをカスタムHTMLに貼り付けます。

HTMLに貼り付けるだけでは使えなくなってしまったので、JavaScriptを使った方法に変えました。

次の見出しで簡単に紹介します。

<textarea id="input" rows="10" cols="60" placeholder="ここに文章を貼り付けてください"></textarea>
<br>
<button id="cleanBtn" onclick="cleanText()">整形する</button>
<button id="copyBtn" onclick="copyText()">コピーする</button>
<br>
<textarea id="output" rows="10" cols="60" placeholder="整形後の文章がここに表示されます"></textarea>

<style>
button {
  background-color: #8224e3;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 6px;
}
button:hover {
  background-color: #6a1fc2;
}
</style>

<script>
function cleanText() {
  let text = document.getElementById("input").value;

  // 「あいうえお」を削除
  text = text.replace(/あいうえお/g, "");

  // 行頭・改行後の余計な空白を削除
  text = text.replace(/^\s+/gm, "");

  // 「、」の後の改行を削除
  text = text.replace(/、\s*\n\s*/g, "、");

  // 「。」・「！」・「？」の後に改行。ただし直前が '」' の場合は改行しない
  text = text.replace(/([。！？])(?!」)/g, "$1\n");

  // 改行ごとに分割して配列にする
  let lines = text.split("\n");

  // 「、」なし改行や「、」後改行の結合処理
  for (let i = 0; i < lines.length - 1; i++) {
    let line = lines[i].trimEnd();
    let nextLine = lines[i + 1].trimStart();

    // 行末が「。」や「！」や「？」で終わる場合 → 改行は残す
    if (/[。！？]$/.test(line)) continue;

    // 行末が「、」で終わる場合 → 改行を削除して次行とつなげる
    if (/、$/.test(line)) {
      lines[i] = line + nextLine;
      lines.splice(i + 1, 1);
      i--; // 次行を再処理
    } else if (line !== "" && nextLine !== "") {
      // 「、」なし改行 → 一文に戻す
      lines[i] = line + nextLine;
      lines.splice(i + 1, 1);
      i--;
    }
  }

  text = lines.join("\n");

  // 複数改行を1つにまとめる
  text = text.replace(/\n+/g, "\n");

  // 文頭・文末の空白削除
  text = text.trim();

  document.getElementById("output").value = text;

  // 整形ボタン文字を一時的に変更
  const btn = document.getElementById("cleanBtn");
  btn.textContent = "整形しました！";
  setTimeout(() => {
    btn.textContent = "整形する";
  }, 1600);
}

function copyText() {
  const output = document.getElementById("output");
  output.select();
  document.execCommand("copy");

  const btn = document.getElementById("copyBtn");
  btn.textContent = "コピーしました！";
  setTimeout(() => {
    btn.textContent = "コピーする";
  }, 1600);
}
</script>

文章整形ツールの作り方（JavaScript）

JavaScriptを使った文章整形ツールの作り方を簡単に紹介します。

一連の流れは以下の記事と同じです。

詳しい流れが分からない方は、以下の記事を参考にしてください。

1. functions.phpに追記

まずは、以下のコードを子テーマのfunctions.phpに追記します。

// カスタムスクリプトを読み込む
function custom_text_tool_scripts() {
    // 子テーマの js/text-tools.js を読み込む
    wp_enqueue_script(
        'custom-text-tools',
        get_stylesheet_directory_uri() . '/js/text-tools.js',
        array(), // 依存なし
        null,    // バージョン指定なし
        true     // フッターに出力
    );
}
add_action( 'wp_enqueue_scripts', 'custom_text_tool_scripts' );

2. text-tools.jsを作成

続いて、サーバーのテーマフォルダにJavaScriptファイルをアップロードします。

サーバーのテーマファイルエディターを開き、以下のフォルダを探します。

/wp-content/themes/子テーマ

その中に「js」フォルダを作成し、その中に「text-tools.js」をアップロードします。

テキストアプリなどに以下のコードを貼り付け、「text-tools.js」という名前で保存し、jsフォルダの中にアップロードしましょう。

// ページ読み込み後にイベントを割り当て
document.addEventListener("DOMContentLoaded", () => {
  const cleanBtn = document.getElementById("cleanBtn");
  const copyBtn = document.getElementById("copyBtn");

  if (cleanBtn) cleanBtn.addEventListener("click", cleanText);
  if (copyBtn) copyBtn.addEventListener("click", copyText);
});

function cleanText() {
  let text = document.getElementById("input").value;

  // 「あいうえお」を削除
  text = text.replace(/あいうえお/g, "");

  // 行頭・改行後の余計な空白を削除
  text = text.replace(/^\s+/gm, "");

  // 「、」の後の改行を削除
  text = text.replace(/、\s*\n\s*/g, "、");

  // 「。」・「！」・「？」の後に改行。ただし直前が '」' の場合は改行しない
  text = text.replace(/([。！？])(?!」)/g, "$1\n");

  // 改行ごとに分割して配列にする
  let lines = text.split("\n");

  // 「、」なし改行や「、」後改行の結合処理
  for (let i = 0; i < lines.length - 1; i++) {
    let line = lines[i].trimEnd();
    let nextLine = lines[i + 1].trimStart();

    // 行末が「。」や「！」や「？」で終わる場合 → 改行は残す
    if (/[。！？]$/.test(line)) continue;

    // 行末が「、」で終わる場合 → 改行を削除して次行とつなげる
    if (/、$/.test(line)) {
      lines[i] = line + nextLine;
      lines.splice(i + 1, 1);
      i--; // 次行を再処理
    } else if (line !== "" && nextLine !== "") {
      // 「、」なし改行 → 一文に戻す
      lines[i] = line + nextLine;
      lines.splice(i + 1, 1);
      i--;
    }
  }

  text = lines.join("\n");

  // 複数改行を1つにまとめる
  text = text.replace(/\n+/g, "\n");

  // 文頭・文末の空白削除
  text = text.trim();

  document.getElementById("output").value = text;

  // 整形ボタン文字を一時的に変更
  const btn = document.getElementById("cleanBtn");
  btn.textContent = "整形しました！";
  setTimeout(() => {
    btn.textContent = "整形する";
  }, 1600);
}

function copyText() {
  const output = document.getElementById("output");
  output.select();
  document.execCommand("copy");

  const btn = document.getElementById("copyBtn");
  btn.textContent = "コピーしました！";
  setTimeout(() => {
    btn.textContent = "コピーする";
  }, 1600);
}

3. HTMLを追加

最後に、記事にカスタムHTMLを追加していきます。

以下のコードをカスタムHTMLに貼り付けます。

<textarea id="input" rows="10" cols="60" placeholder="ここに文章を貼り付けてください"></textarea>
<br>
<button id="cleanBtn">整形する</button>
<button id="copyBtn">コピーする</button>
<br>
<textarea id="output" rows="10" cols="60" placeholder="整形後の文章がここに表示されます"></textarea>

<style>
button {
  background-color: #8224e3;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 6px;
}
button:hover {
  background-color: #6a1fc2;
}
</style>

これで文章整形ツールの完成です。