WordPressの記事が保存できない!ChatGPTで不要なHTMLコードを削除して解決した方法

WordPressの記事が保存できない!ChatGPTで不要なHTMLコードを削除して解決した方法
  • URLをコピーしました!

WordPressで記事を編集していたら、突然保存できなくなった。
「更新」ボタンをクリックしてもエラーが表示され、せっかく書いた記事が保存できない。

そんなトラブルが起きることがあります。

WordPressの記事が保存できない原因はさまざまですが、記事のHTMLコードに不要な情報が含まれていることもあります。

特に、ChatGPTやGemini、Googleドキュメントなどの外部サービスで作成した文章をWordPressにコピーして貼り付ける際には、知らないうちに余分なHTML属性が入り込んでしまう可能性があります。

先日、ぼくが講師を務めている「大人のためのアフィリエイト講座」の受講者さまから、WordPressの特定の記事だけが保存できなくなったというご相談をいただきました。

そこで、エックスサーバーからの調査結果をもとに、ChatGPTを使って記事のHTMLコードを調べ、不要な属性を整理した修正ファイルをお送りしました。

その結果、受講者さまから「無事ページ更新が出来ました」という嬉しいご報告をいただきました。

今回は、この実例をもとに、ChatGPTでWordPressの不要なHTMLコードを削除する方法をご紹介します。

HTMLに詳しくない方でも取り組めるように、具体的な手順や、普段から不要なコードを混入させないための工夫も解説します。

目次

WordPressの記事が保存できない!受講者さまからのご相談

今回のトラブルは、「大人のためのアフィリエイト講座」の受講者さまが運営しているWordPressサイトで発生しました。

ほかの記事は問題なく更新できるのに、特定の記事だけ保存できないという状況です。

発生していたのは「HTTP 413」というエラーでした。

HTTP 413は、サーバーに送信されたデータのサイズが、設定された上限を超えた場合などに発生するエラーです。

そこで、受講者さまからエックスサーバーに問い合わせていただき、原因を調べてもらいました。

エックスサーバーの調査でわかったこと

エックスサーバーでは、記事の保存時に発生したエラーログを確認してくれました。

その結果、次のような回答がありました。

ファイルを除くリクエスト本文のサイズが、サーバー側のセキュリティ機能(ModSecurity)で設定されている上限の1048576バイト(1MB)を超えたため、HTTP 413で拒否されたものと考えられます。

ModSecurityとは、Webサイトを不正なアクセスなどから守るためのセキュリティ機能です。

今回のケースでは、記事の保存時に送信されたデータが、ModSecurityで設定されていた1MBの制限を超えていたことがわかりました。

なお、エックスサーバーによると、PHPの設定には問題がなく、今回の制限値はサーバーパネルから変更できないとのことでした。

そのため、記事の内容を減らしたり、複数の記事に分割したりする方法を提案されました。

しかし、実際の記事を確認してみると、保存できなくなるほど大量の情報が掲載されているようには見えません。

そこで、ぼくは文章量ではなく、記事のHTMLコードに不要な情報が含まれているのではないかと考えました。

ChatGPTで記事のHTMLコードを調べてみた

WordPressには、記事のHTMLコードを確認できる「コードエディター」という機能があります。

そこで、受講者さまにお願いして、問題の記事をコードエディターで開き、表示されたコードをテキストファイルに保存して送っていただきました。

そのファイルをChatGPTに読み込ませて、不要なHTMLコードが含まれていないか調べてみました。

すると、通常の記事には必要ないと思われるHTML属性が多数見つかったのです。

不要なHTML属性が大量に含まれていた

例えば、記事の段落には次のようなコードがありました。

<p class="isSelectedEnd">
ここに記事の文章が入ります。
</p>

また、見出しには次のようなコードも含まれていました。

<h3 class="PDq2pG_selectionAnchorContainer"
data-start="269" data-end="281">
記事の見出し
</h3>

単純な段落や見出しであれば、次のようなHTMLで十分です。

<p>ここに記事の文章が入ります。</p>

<h3>記事の見出し</h3>

比較すると、文章を表示するためには必要のない情報が追加されていることがわかります。

data-startやdata-endは、文章の位置などを示すために使われることがある属性です。

また、isSelectedEndやPDq2pG_selectionAnchorContainerなども、外部サービスの編集画面で使われていた情報が持ち込まれた可能性があります。

これらは、WordPressの標準的な段落や見出しを作成しただけでは、通常追加されない属性です。

不要なHTML属性はなぜ混入するのか

考えられる原因の一つが、外部サービスからのコピー&ペーストです。

例えば、ChatGPTやGemini、Googleドキュメントなどで作成した文章をWordPressに貼り付ける際に、文章だけでなく、コピー元の書式やHTML属性が一緒に持ち込まれる場合があります。

今回見つかったPDq2pG_selectionAnchorContainerについても、Google系のWebサービスや文書編集画面との関連が考えられます。

ただし、この属性だけで、どのサービスからコピーされたのかを特定することはできません。

また、こうしたコードが含まれているからといって、ChatGPTやGeminiなどの生成AIを使った証拠になるわけでもありません。

大切なのは、コピー元を特定することではなく、WordPressの記事に必要のないHTML属性が含まれていないか確認することです。

ChatGPTで不要なHTML属性を削除した結果

今回は、ChatGPTに記事のHTMLコードを読み込ませ、不要な属性だけを削除するように依頼しました。

記事本文や見出し、リンク、表、ショートコードなどは、できる限りそのまま維持するように指示しています。

その結果、ファイルサイズは次のように変化しました。

項目ファイルサイズ
修正前約123KB
修正後約93KB
削減量約30KB
削減率約24%

不要なHTML属性を整理したことで、記事コードの容量を約24%削減できました。

そして、修正したテキストファイルを受講者さまにお送りし、WordPressの記事コードを差し替えていただきました。

後日、次のようなお返事をいただきました。

前回の教えていただいた方法で再現したところ、無事ページ更新が出来ました。ありがとうございます。

無事に記事を更新できるようになったということで、今回のトラブルは解決しました。

ただし、ここで一つ注意点があります。

元の記事コードは約123KBで、サーバーが設定していた1MB(約1,024KB)の制限を大きく下回っていました。

WordPressでは、記事本文以外にも、カスタムフィールドやプラグインの設定情報などを保存時に送信する場合があります。

そのため、今回の修正によって更新できるようになったことは確認できましたが、不要なHTML属性だけがエラーの原因だったとは断定できません。

それでも、記事のHTMLコードをChatGPTで調査して整理した結果、実際に保存できなかった記事を更新できるようになったという経験は、同じようなトラブルで困っている方にも参考になると思います。

では、実際の作業手順をご紹介しましょう。

ChatGPTでWordPressの不要なHTML属性を削除する手順

今回の方法では、WordPressの記事コードをテキストファイルに保存し、ChatGPTに不要なHTML属性の調査と削除を依頼します。

作業の流れは、次の5つのステップです。

  1. WordPressのコードエディターを開く
  2. 記事コードをテキストファイルに保存する
  3. ChatGPTにファイルを添付して修正を依頼する
  4. ChatGPTが修正した内容を確認する
  5. 修正したコードをWordPressに反映する

HTMLの専門知識がなくても進められますが、記事のコードを直接変更するため、必ずバックアップを取ってから作業してください。

手順1:WordPressのコードエディターを開く

まず、修正したい記事のHTMLコードを表示します。

【操作手順】

  1. WordPressの管理画面にログインします。
  2. 「投稿」→「投稿一覧」を開きます。
  3. 修正したい記事の「編集」をクリックします。
  4. 編集画面の右上にある「︙」をクリックします。
  5. メニューから「コードエディター」を選択します。

これで、記事のHTMLコードが表示されます。

普段のブロックエディターでは、文章や画像などが実際のページに近い形で表示されていますが、コードエディターではHTMLタグなども確認できます。

なお、WordPressのテーマやプラグイン、利用しているエディターによって、操作方法が異なる場合があります。

手順2:記事コードをテキストファイルに保存する

次に、表示されたHTMLコードをコピーして、テキストファイルに保存します。

【操作手順】

  1. コードエディター内の文章をクリックします。
  2. キーボードで記事コードをすべて選択します。
    • Windows:「Ctrl+A」
    • Mac:「Command+A」
  3. 選択したコードをコピーします。
    • Windows:「Ctrl+C」
    • Mac:「Command+C」
  4. パソコンのメモ帳など、テキストエディターを開きます。
  5. コピーしたコードを貼り付けます。
  6. 「記事コード_修正前.txt」などの名前で保存します。

文字コードを選べる場合は、UTF-8形式で保存してください。

Windowsなら「メモ帳」、Macなら「テキストエディット」などが利用できます。

Macのテキストエディットを使う場合は、必要に応じて「フォーマット」→「標準テキストにする」を選択してください。

このファイルは、修正前のバックアップとして必ず残しておきましょう。

万が一、修正したコードに問題があった場合でも、元の記事コードに戻せるようにするためです。

なお、記事コードだけではサイト全体の設定を復元できないため、可能であればWordPressサイト全体のバックアップも取得しておくと安心です。

手順3:ChatGPTにファイルを添付して修正を依頼する

保存したテキストファイルをChatGPTに読み込ませ、不要なHTML属性の削除を依頼します。

【操作手順】

  1. ChatGPTを開きます。
  2. メッセージ入力欄の添付ボタンから、先ほど保存したテキストファイルを添付します。
  3. 以下のプロンプトをコピーして入力します。
  4. ChatGPTに送信し、調査・修正結果を確認します。

【WordPressの不要なHTML属性を削除するプロンプト】

あなたはWordPressとHTMLに詳しいWebエンジニアです。

添付したテキストファイルには、WordPressの記事編集画面の「コードエディター」からコピーしたHTMLコードが含まれています。

この記事には、ChatGPTやGemini、Googleドキュメントなど、外部サービスから文章をコピーして貼り付けた際に、不要なHTML属性が混入している可能性があります。

記事の内容や表示、WordPressの機能をできる限り維持しながら、不要なHTML属性を整理してください。

【1. 調査と削除の対象】

次のようなHTML属性を調べてください。

  • data-start
  • data-end
  • isSelectedEnd
  • PDq2pG_selectionAnchorContainer
  • その他、外部サービスの編集画面に由来すると思われる不要な属性

上記の属性についても、削除して問題ないと判断できるものだけを削除してください。

用途がわからない属性は、勝手に削除せず、そのまま残してください。

【2. 必ず守ること】

以下の内容は変更・削除しないでください。

  • 記事本文の文章、文字、句読点
  • 見出しの文章と階層(h2、h3、h4など)
  • リンク先URLとリンクテキスト
  • 画像のURL、alt属性、サイズ指定
  • 表の内容や構造
  • WordPressのブロック識別コメント
  • テーマやプラグインで使用するショートコード
  • 表示や機能に必要なclass、id、style、data属性
  • アフィリエイトリンクや計測用コード

記事のリライト、要約、文章の追加、SEO対策などは行わないでください。

HTMLタグの種類や入れ子構造も、原則として変更しないでください。

【3. 修正後の確認】

修正後は、元のHTMLコードと比較して、次の点を確認してください。

  1. 記事本文の文章が変わっていないこと
  2. 見出しの文章と階層が変わっていないこと
  3. リンクのURLとリンクテキストが変わっていないこと
  4. 画像や表の構造が変わっていないこと
  5. ショートコードが削除されていないこと
  6. WordPressのブロック識別コメントが維持されていること
  7. 不要なHTML属性以外に意図しない変更がないこと

確認できない項目がある場合は、その旨を報告してください。

【4. 出力形式】

修正後の記事コードを、UTF-8形式のテキストファイル(.txt)として出力してください。

元のファイルは変更せず、別のファイル名で保存してください。

また、次の内容を報告してください。

  • 修正前のファイルサイズ(KB)
  • 修正後のファイルサイズ(KB)
  • 削減できた容量と削減率
  • 削除したHTML属性の種類と件数
  • 修正前後の比較確認結果
  • 修正によって影響が生じる可能性のある箇所

ファイルサイズはUTF-8の実際のバイト数を基準に計算してください。

最優先事項は、記事の内容やWordPressの動作に影響を与えないことです。

削除してよいか確信できないコードは、削除せずに残してください。

手順4:ChatGPTが修正した内容を確認する

ChatGPTによる修正が完了したら、修正内容を確認します。

【確認する項目】

  • 修正済みのテキストファイルが作成されているか
  • 削除されたHTML属性の種類
  • 修正前後のファイルサイズ
  • 記事本文や見出しに変更がないか
  • リンクや画像、表、ショートコードが維持されているか

問題がなければ、修正済みのテキストファイルをダウンロードして保存してください。

ここで注意したいのは、ChatGPTが修正したコードが必ず正しいとは限らないことです。

WordPressのテーマやプラグインによっては、特定のHTML属性がデザインや機能に使われている場合もあります。

そのため、修正内容に不明な点があれば、ChatGPTに削除した理由を確認しておきましょう。

手順5:修正したコードをWordPressに反映する

最後に、修正したHTMLコードをWordPressの記事に反映します。

公開中の記事に直接反映する前に、可能であればステージング環境などでテストすることをおすすめします。

【操作手順】

  1. WordPressで修正したい記事の編集画面を開きます。
  2. 右上の「︙」から「コードエディター」に切り替えます。
  3. 現在の記事コードをすべて選択して削除します。
  4. ChatGPTが修正したテキストファイルの内容をすべてコピーして貼り付けます。
  5. プレビューで記事の表示を確認します。
  6. 問題がなければ「更新」ボタンをクリックします。
  7. 更新後、実際の公開ページを開いて表示や動作を確認します。

【確認する項目】

  • 見出しや段落の表示が崩れていないか
  • 画像や表が正常に表示されるか
  • 内部リンクや外部リンクが正しく設定されているか
  • アフィリエイトリンクや広告が正常に表示されるか
  • 記事の更新が問題なく完了したか

今回の受講者さまの事例では、この方法で修正した記事コードに差し替えることで、正常に更新できるようになりました。

ただし、HTMLコードの修正によって、ブロックエディターで「このブロックには、想定されていないか無効なコンテンツが含まれています」などの警告が表示される場合があります。

その場合は、無理に更新せず、修正内容を見直してください。

修正後に不具合が出た場合の対処方法

ChatGPTを使ってHTMLコードを修正すると、不要な属性だけでなく、WordPressに必要な情報まで変更されてしまう可能性があります。

もし修正後に不具合が発生した場合は、次の手順で元の状態に戻してください。

【元の記事コードに戻す手順】

  1. WordPressの記事編集画面を開きます。
  2. コードエディターに切り替えます。
  3. 現在の記事コードをすべて選択して削除します。
  4. 最初に保存しておいた「記事コード_修正前.txt」を開きます。
  5. 元の記事コードをすべてコピーして貼り付けます。
  6. プレビューで元の表示に戻ったことを確認します。
  7. 問題がなければ「更新」をクリックします。

WordPressのリビジョン機能が利用できる場合は、修正前の状態に戻す方法もあります。

ただし、保存エラーが続いている場合は、元のコードに戻しても更新できない可能性があります。

また、記事コードのバックアップだけでは、WordPressの設定やプラグインのデータまですべて復元できるわけではありません。

そのため、重要な記事を修正する場合は、あらかじめサイト全体のバックアップを取得しておくことをおすすめします。

なお、今回のようなHTTP 413エラーは、HTMLコード以外の原因でも発生します。

不要なHTML属性を整理しても保存できない場合は、レンタルサーバー会社にエラーログを確認してもらうなど、別の原因も調べる必要があります。

ChatGPTやGeminiから不要なHTML属性を入れずに貼り付ける方法

今回、記事が更新できるようになったことをお伝えした受講者さまから、もう一つ興味深い質問をいただきました。

「ChatGPTを使用している足跡が残る仕様になっているのでしょうか?」

「不要なHTMLコードを入れないようにChatGPTに依頼すれば、対応してくれるのでしょうか?」

普段から生成AIを使ってWordPressの記事を作成している方にとっては、気になるところだと思います。

まず、今回見つかったHTML属性は、ChatGPTを利用したことを示す特別な印だと断定できるものではありません。

そして、生成AIに余分なHTMLコードを出力しないよう指示することはできますが、それだけでコピー&ペースト時の混入を完全に防げるわけではありません。

なぜなら、文章をコピーする際に付加される書式情報は、生成AIが作成した文章そのものとは別の場合があるからです。

そこで、普段の記事作成では、次のような方法をおすすめします。

方法1:プレーンテキストで出力してもらう

記事の文章だけをWordPressに貼り付けたい場合は、次のように依頼できます。

【プレーンテキストで出力するプロンプト】

以下の文章を、WordPressに貼り付けるためのプレーンテキスト形式で出力してください。

HTMLタグやCSS、不要な属性は含めないでください。

文章の内容、句読点、改行は変更せず、テキストだけを出力してください。

このように指示すれば、生成AIの回答にHTMLタグなどが含まれることを避けやすくなります。

ただし、コピーする際にブラウザーなどが付加する書式情報まで制御できるとは限りません。

方法2:書式なしでWordPressに貼り付ける

もう一つの方法は、文章を書式なしで貼り付けることです。

対応しているアプリやブラウザーでは、次のショートカットが利用できます。

  • Windows:Ctrl+Shift+V
  • Mac:Command+Shift+V

これは、コピー元の文字装飾や書式情報を持ち込まずに、文章を貼り付けるための操作です。

ただし、ブラウザーやWordPressの編集環境によって、動作が異なる場合があります。

また、書式なしで貼り付けると、見出しや太字、リンクなどの装飾が失われることがあります。

そのため、文章だけを貼り付け、見出しやリンクなどの装飾はWordPress側で設定する方法もおすすめです。

方法3:不具合が起きたときはコードエディターで確認する

普段からコードエディターを使う必要はありません。

しかし、外部サービスから文章をコピーした後に、見慣れない装飾が追加されたり、記事の保存や編集に問題が起きたりした場合は、コードを確認してみましょう。

今回のようにdata-startやdata-endなどの属性が多数含まれている場合は、ChatGPTに調査を手伝ってもらう方法があります。

ただし、これらの属性が含まれているからといって、必ずしも不具合が発生するわけではありません。

また、HTML属性の中には、WordPressやテーマ、プラグインの動作に必要なものもあります。

必要なコードまで削除しないように注意しましょう。

まとめ:WordPressのトラブル解決にもChatGPTを活用しよう

今回は、「大人のためのアフィリエイト講座」の受講者さまからいただいたご相談をもとに、ChatGPTで不要なHTML属性を削除する方法をご紹介しました。

今回のケースでは、特定の記事でHTTP 413エラーが発生し、更新できなくなるトラブルがありました。

そこで記事のHTMLコードを調べてみると、外部サービスからのコピー&ペーストなどによって混入したと思われる、不要な属性が多数見つかりました。

ChatGPTを使ってそれらを整理したところ、記事コードの容量を約24%削減でき、受講者さまも無事に記事を更新できるようになりました。

もちろん、WordPressの記事が保存できない原因はさまざまで、不要なHTML属性を削除すれば必ず解決するわけではありません。

それでも、HTMLに詳しくない方でも、ChatGPTを使ってコードの状態を調べたり、不要な部分を整理したりできるようになったことは大きなメリットだと思います。

また、普段から生成AIを使って記事を作成している方は、コピー&ペーストの際に、余分な書式情報を持ち込まないように意識しておくとよいでしょう。

大切なのは、AIにすべてを任せるのではなく、バックアップを取り、修正内容を確認しながら安全に活用することです。

今回のように、WordPressで思わぬ不具合が発生したときにも、原因を一つずつ調べながら、ChatGPTをうまく活用することで解決につながる場合があります。

穏やか暮らし研究所が運営する「大人のためのアフィリエイト講座」では、記事の書き方やSEO、アフィリエイトの収益化だけでなく、今回のようなWordPress運営中のトラブルについても、ご相談をいただきながらサポートしています。

WordPressで記事が保存できなくなったり、HTMLコードに不要な情報が含まれているのではないかと感じたりしたときには、今回の方法を参考にしていただければと思います。

よかったらシェアしてください!
  • URLをコピーしました!
  • URLをコピーしました!

WordPressでアフィリエイトの成果UP↑を目指そう

大人世代のための3ヶ月集中ワークショップ

大人のためのアフィリエイト講座

ワークと図解マニュアルで作業を実践。
添削、メール相談、Zoomの相談会など
少人数制であなたに合わせたサポートが受けられます。

目次