WordPressコードエディターの使い方｜ChatGPTで記事作成・修正を時短する方法

WordPressでブログ記事を作るために、コードを覚える必要はありません。

私自身、コードの知識はまったくありません。それでも現在は、ChatGPTにGutenberg HTMLの完成形を作ってもらい、WordPressの記事作成を時短しています。

WordPressでは、見出し、本文、目次ジャンプ、色付きボックス、リスト、内部リンク、外部リンク、広告、画像などを、コードを知らなくてもすべて手動で設定できます。

ただし、記事を作るたびにこれらを一つずつ設定すると、かなりの手間と時間がかかります。

そこで私は、ChatGPTが作ったGutenberg HTMLをコピーして、普段使っているWordPressのブロックエディターへ貼り付ける方法を使っています。

この記事では、コードを書くことを目的にするのではなく、WordPressで毎回繰り返す手作業を減らして記事作成を時短する方法を、実際の運用をもとに紹介します。

目次

• WordPressコードエディターとは？コードを知らなくても使える
• コードを使っても難しいコード画面を見る必要はない
• WordPressですべて手作業すると時間がかかる
• ChatGPTとGutenberg HTMLで記事作成を時短している方法
• 実際にWordPress上の作業は1時間未満で進めている
• HTMLエラーの失敗を記事開発ログへ残して改善している
• 記事作成を効率化するならAIにお金を使うかライティングツールに使うか
• コードを覚えるより繰り返す作業を減らすことを優先している
• よくある質問
• まとめ

WordPressコードエディターとは？コードを知らなくても使える

WordPressには、記事全体をコードで確認・編集できる「コードエディター」があります。

投稿編集画面の右上にあるメニューから「コードエディター」を選ぶと、普段ブロックとして表示されている記事をGutenberg HTMLの状態で確認できます。

ただし、私が普段の記事作成で毎回コードエディター画面を開いて作業しているわけではありません。

ChatGPTにGutenberg HTMLの完成形を作ってもらい、普段使っているブロックエディターへそのまま貼り付けているためです。

WordPressでは、記事を構成する見出しや段落、リスト、画像などをブロックとして扱います。

そのブロックには、表から見えているデザインや文章だけでなく、裏側で記事の構造を指定しているGutenberg HTMLがあります。

私は、そのコードを自分で一から書いているわけではありません。

記事に必要な内容を決めたあと、ChatGPTにGutenberg HTMLの完成形を作ってもらっています。

ChatGPTからは、上の画像のようにGutenberg HTMLがコード形式で出力されます。

このコードは、WordPressの記事を構成する見出し、段落、ボックス、リストなどを裏側で指定するためのものです。

私自身はこのコードを一から書けません。実際の記事作成では、コードを細かく読みながら作業するのではなく、完成したGutenberg HTMLを利用しています。

次では、難しいコード画面を普段見る必要がない理由と、実際に私が行っているコピー＆貼り付けの方法を紹介します。

コードを使っても難しいコード画面を見る必要はない

「コードを使う」と聞くと、難しい文字が並んだコードエディター画面を開き、その内容を自分で読みながら記事を作るイメージがあるかもしれません。

しかし、私が普段WordPressで記事を作っているときは、そのような作業をしていません。

普段見ているのは、本文や見出し、ボックスなどが普通に表示されているWordPressのブロックエディター画面です。

ChatGPTではコードで出力されても作業はコピーするだけ

ChatGPTには、記事の内容と記事デザイン部品集をもとにGutenberg HTMLの完成形を作ってもらいます。

ChatGPTの画面では、見出しや本文、ボックスなどがコードとして表示されます。

コードがたくさん並んでいるので、初めて見ると難しそうに感じるかもしれません。

ですが、私が実際に行う作業は、そのコードを一つずつ読んだり書き直したりすることではありません。

ChatGPTの右上にあるコピーボタンを押して、出力された内容をまとめてコピーします。

そのため、コードの意味をすべて理解していなくても、記事制作に利用できます。

コピーした内容は普段のブロックエディターへそのまま貼り付ける

コピーしたGutenberg HTMLは、WordPressで普段使っているブロックエディター画面へそのまま貼り付けています。

私の場合、記事を入れるために毎回コードエディター画面へ切り替えることはしていません。

ブロックエディターの本文部分へ貼り付けると、H2・H3見出し、段落、色付きボックス、リストなどが通常のWordPressブロックとして表示されます。

上の画像は、ChatGPTで作ったGutenberg HTMLを貼り付けたあとのWordPress画面です。

普段の作業では、このようにコードではなく、通常の記事として内容を確認しています。

見えているのは普通の記事でも裏側ではコードとして機能している

ブロックエディターでは普通の記事に見えますが、裏側ではGutenberg HTMLによって記事の構造やデザインが設定されています。

たとえば、見出し、段落、色付きボックス、リスト、目次ジャンプなども、ChatGPTが作ったGutenberg HTMLの中にあらかじめ組み込んでおけます。

そのため、私はコードを書くことを目的にしているのではなく、コードの仕組みを使ってWordPress上の手作業をまとめて減らしています。

WordPressですべて手作業すると時間がかかる

WordPressでは、コードをまったく知らなくても記事を作成できます。

実際に、H2・H3見出し、本文、目次ジャンプ、色付きボックス、リスト、内部リンク、外部リンク、広告、画像なども、WordPress上ですべて手動で設定できます。

そのため、コードを使わなければ記事を作れないわけではありません。

一つひとつの作業はコードを知らなくてもできる

たとえば見出しを作るなら、WordPressで見出しブロックを追加してH2やH3を選びます。

色付きボックスを使いたければグループブロックなどを追加し、背景色や枠線を設定できます。

リスト、内部リンク、外部リンク、画像も、それぞれ必要なブロックや設定を使えば作れます。

目次ジャンプについても、見出しにアンカーIDを設定し、目次側からリンクすれば手動で作成できます。

今回から使っている「↑ 目次に戻る」も、各H2の最後にボタンやリンクを追加し、目次へ戻るよう設定すれば作れます。

広告も挿入位置を決めて広告コードを貼り、画像も必要な場所へ一枚ずつ挿入できます。

つまり、これらの作業にコードの知識は必要ありません。

問題は記事を作るたびに同じ作業を繰り返すこと

問題は、一つひとつの操作が難しいことではありません。

記事を作るたびに、同じ設定を何度も繰り返さなければならないことです。

• H2・H3見出しを作る
• 本文を配置する
• 目次ジャンプを設定する
• 「↑ 目次に戻る」を設定する
• 色付きボックスを作る
• リストを作る
• 内部リンク・外部リンクを設定する
• 広告を挿入する
• 画像を必要な位置へ入れる

これらを毎記事WordPress上で一つずつ作っていると、記事本文そのものとは別の作業に多くの時間を使うことになります。

1記事だけなら、それほど大きな負担に感じないかもしれません。

しかし、記事を継続して公開する場合は、この繰り返し作業が積み重なります。

私が減らしたかったのは、この部分です。

図解では、記事内容を整理してからChatGPTにGutenberg HTMLを作ってもらい、コピーしてWordPressへ貼り付けるまでの流れをまとめたものです。

コードを自分で書くためではなく、本来ならWordPress上で一つずつ行う作業を、まとめて反映するためにコードを利用しているというのが、現在の私の使い方です。

ChatGPTとGutenberg HTMLで記事作成を時短している方法

現在は、記事に入れる内容を先に整理し、ChatGPTにGutenberg HTMLの完成形を作ってもらっています。

私はコードを一から書けませんが、記事に何を入れるかを決めることはできます。

そこで、私が記事内容と必要な要素を決め、ChatGPTがそれをGutenberg HTMLとしてまとめる形にしています。

記事デザイン部品集を情報源に入れている

私が使っている「記事デザイン部品集」は、特別なシステムではありません。

実際には、WordPressで正常に動作した青ボックス、黄色ボックス、注意用の赤ボックス、CTA、目次ジャンプ、関連記事、広告などをHTMLファイルとしてまとめたものです。

このファイルを情報源に入れておき、記事ごとに「ここは青ボックス」「ここに目次ジャンプ」「ここに内部リンク」「ここに広告」と必要な要素を指定します。

すると、毎回WordPress上で一つずつデザインを作り直さなくても、普段使っているデザインに合わせたGutenberg HTMLをChatGPTに作ってもらえます。

記事に入れる内容をリスト化してChatGPTへ渡す

ChatGPTにすべてを任せているわけではありません。

まず、記事タイトルや本文に入れる内容を整理します。

• 記事タイトル
• H2・H3見出し
• 本文に入れる内容
• 目次ジャンプ
• 「↑ 目次に戻る」の位置
• 色付きボックスの種類と位置
• リスト
• 内部リンク・外部リンク
• 広告の位置
• 画像やスクリーンショットの挿入位置

こうした内容を先に決めてから、記事デザイン部品集を基準にGutenberg HTMLへまとめてもらいます。

つまり、私が考える部分と、ChatGPTに任せる部分を分けています。

ChatGPTのコピーボタンを押してWordPressへ貼り付ける

Gutenberg HTMLが完成すると、ChatGPTの画面にはコードが表示されます。

ここで私がすることは、難しいコードを読みながら一行ずつ操作することではありません。

右上のコピーボタンを押して、完成した内容をまとめてコピーします。

そして、普段使っているWordPressのブロックエディターの本文部分へそのまま貼り付けます。

正常に作られたGutenberg HTMLであれば、H2・H3見出し、段落、ボックス、リストなどが通常のWordPressブロックとして表示されます。

そのため、私の場合は毎回コードエディター画面を開いて、コードからブロックエディターへ切り替える作業もしていません。

ChatGPTではコードとして作成し、WordPressでは普通の記事として確認する。この流れで使っています。

「目次に戻る」など新しいルールも最初から組み込める

記事制作を続けていると、「次からはこの作業も最初から入れておきたい」と思うことがあります。

今回から使い始めた「↑ 目次に戻る」もその一つです。

以前なら、記事完成後に各H2の最後へ一つずつ追加する必要がありました。

現在は、目次のアンカーIDや「↑ 目次に戻る」のルールを記事デザイン部品集へ保存しています。

そのため、ChatGPTがGutenberg HTMLを作る段階で最初から組み込めます。

こうして、毎回発生する作業を見つけたらルール化し、次の記事では最初から完成形へ入れるようにしています。

実際にWordPress上の作業は1時間未満で進めている

現在は、タイトルと本文に入れる内容をあらかじめ整理できていれば、WordPressを開いてから公開できる状態まで仕上げる作業に1時間もかかっていません。

ここでいう「1時間未満」は、検索需要の調査、競合確認、記事設計、タイトル決定、本文内容の整理などを含めた記事制作全体の時間ではありません。

記事の方向性と入れる内容が決まったあとの、WordPress上での入稿・装飾・確認作業の時間です。

1日1記事、多い日は2記事を公開している

私は現在、基本的に1日1記事、多い日には2記事を公開しています。

毎回WordPress上で、H2・H3見出し、色付きボックス、目次ジャンプ、リスト、リンクなどを一つずつ手作業で作っていたら、公開作業だけでもかなりの時間がかかります。

現在は、記事に入れる内容を先に整理し、ChatGPTにGutenberg HTMLの完成形を作ってもらっています。

ChatGPTから出力された内容は、右上のコピーボタンを押して、普段使っているWordPressのブロックエディターへ貼り付けます。

そのため、WordPress上で一から記事の構造やデザインを組み立てる作業が大きく減りました。

もちろん、記事によって本文量、画像枚数、リンク数、修正量は違うため、毎回必ず同じ時間で終わるわけではありません。

それでも、タイトルと本文内容の整理まで終わっている記事であれば、現在の私の運用ではWordPress上の作業は1時間未満で進められています。

体感では何倍も記事作成スピードが上がった

この方法に変えてから、大げさではなく、体感では何倍も記事作成スピードが上がっています。

速くなった理由は、文章を作る速度だけではありません。

• H2・H3見出しを一つずつ設定する作業を減らせる
• 色付きボックスを毎回作り直さなくてよい
• 目次ジャンプを最初から組み込める
• 「↑ 目次に戻る」を最初から組み込める
• リストやリンクも完成形へ含められる
• 広告や画像の挿入位置もあらかじめ決められる
• WordPress上ではコードを見ながら組み立てる必要がない

こうした細かい作業をまとめて減らせることが、全体の時短につながっています。

HTMLエラーの失敗を記事開発ログへ残して改善している

現在は、ChatGPTにGutenberg HTMLを作ってもらい、コピーしてWordPressのブロックエディターへ貼り付ける方法でスムーズに記事を作成できています。

ただし、最初から今の方法で問題なく運用できていたわけではありません。

以前はChatGPT生成HTMLでエラーが発生した

以前、ChatGPTが生成したHTMLをそのままWordPressへ貼り付けたときに、正常に使えないことがありました。

そこで、ChatGPTだけで毎回新しい形のHTMLを作るのではなく、WordPressで実際に正常動作したHTMLを基準にする方法へ変更しました。

この失敗は、そのまま忘れずに「記事開発ログ」として保存しています。

失敗した内容も情報源として残している

私は、成功したデザインだけではなく、うまくいかなかった方法や変更した運用も記録として残しています。

たとえば、「ChatGPT生成HTMLを直接貼る方法でエラーが出た」「WordPressで実際に正常動作したHTMLを基準にする方式へ変更した」といった内容も記事開発ログに保存しています。

そして、その記事開発ログも情報源に入れています。

こうして過去の失敗を残しておくことで、次の記事を作るときに同じ失敗を繰り返しにくくしています。

正常動作したHTMLと記事デザイン部品集を再利用している

現在は、WordPressで実際に正常動作したHTMLや記事デザイン部品集を基準にし、毎回同じデザイン部品を流用しています。

そのため、新しい表現方法を取り入れるとき以外は、以前のようなエラーもなく、記事作成をスムーズに進められています。

青ボックス、黄色ボックス、注意ボックス、目次ジャンプなども、毎回ゼロから作るのではなく、すでに正常動作した部品を使います。

新しい表現や新しいデザインを試すときだけ確認を増やし、問題なく使えることを確認できたら、次回以降に使える部品として残します。

成功例は記事デザイン部品集へ、失敗例や改善内容は記事開発ログへ残す。

この両方を情報源として使うことで、記事を作るたびに制作方法そのものも少しずつ改善しています。

記事作成を効率化するならAIにお金を使うかライティングツールに使うか

記事作成を効率化するためにお金を使うなら、ChatGPTのようなAIにお金を使う方法と、記事作成に特化したAIライティングツールにお金を使う方法があります。

私の場合は、ChatGPT Proにお金を使っています。

ただし、すべての人が同じ選び方をする必要はありません。

AIをブログ運営全体で使いたいのか、記事作成そのものを効率化したいのか。

自分がどこを効率化したいかによって、お金をかける場所は変わると思います。

私はブログ運営全体で使うためChatGPT Proにお金を使っている

私は現在、ChatGPT Proを使っています。

理由は、記事本文を作るためだけではありません。

• 検索需要の調査
• 検索意図や競合の確認
• 記事構成の作成
• 本文作成・修正・リライト
• Gutenberg HTMLの作成
• WordPress操作の相談
• スクリーンショットを使った確認
• 画像作成
• 記事や広告などの管理ファイル作成・更新

このように、私は記事を書く部分だけではなく、ブログ運営全体でChatGPTを使っています。

今回紹介しているGutenberg HTMLの記事作成も、その使い方の一つです。

そのため、私の場合は記事作成専用のツールへお金をかけるのではなく、ブログ運営のさまざまな作業に使えるChatGPT Proへお金を使っています。

記事作成に特化して効率化するならAIライティングツールという選択肢もある

私のように、記事作成だけでなくWordPress操作や画像制作、SEO調査までAIに相談したいなら、ChatGPTのような汎用AIへお金をかける方法があります。

一方で、「主にブログ記事の作成を効率化したい」という方は、記事作成に特化したAIライティングツールを選ぶ方法もあります。

その候補の一つが、Value AI Writerです。

Value AI WriterはWordPressと連携でき、作成した記事をWordPressへ直接投稿できます。記事を作ったあとにコピーしてWordPressへ貼り付ける作業も減らせるため、記事作成から入稿までの時間を短縮したい方にも向いています。

記事構成や本文作成だけでなく、WordPressへの投稿作業まで効率化したい方は、現在の機能や料金を確認し、自分の使い方に合うか比較してみてください。

高品質SEO記事生成AIツール【Value AI Writer byGMO】

AIにお金を使うかライティングツールにお金を使うかは目的で決める

私なら、どちらが優れているかだけで決めるのではなく、自分が何を効率化したいかで考えます。

コードを覚えるより繰り返す作業を減らすことを優先している

私は、WordPressで記事を作るためにコードを本格的に勉強することを優先していません。

理由は、私の目的がコードを書けるようになることではなく、検索需要のある記事を作り、継続して公開し、ブログを育てることだからです。

WordPressでは、コードを知らなくても記事を作れます。

そのうえで、毎回同じように行っている作業だけをChatGPTやGutenberg HTMLを使って減らしています。

私が考えているのは、「どうすればコードを書けるようになるか」ではなく、「毎回同じ作業をしなくて済む方法はないか」です。

成功した方法は部品として残す

一度WordPressで正常に動いた青ボックス、黄色ボックス、目次ジャンプなどは、記事デザイン部品集へ残しています。

次の記事では、その部品を情報源から使ってChatGPTにGutenberg HTMLの完成形を作ってもらいます。

毎回同じデザインをWordPress上で一から作り直さず、正常動作したものを再利用することで、作業時間を減らしています。

失敗した方法も次の記事へ引き継ぐ

うまくいかなかった方法も記事開発ログへ残します。

成功した方法だけを残すのではなく、失敗した内容も情報源として使うことで、同じ問題を何度も最初から解決しなくて済むようにしています。

新しいルールが増えた場合も同じです。

今回から使っている「↑ 目次に戻る」のように、一度必要だと判断した繰り返し作業は、次の記事から最初のGutenberg HTMLへ組み込めるようにしています。

よくある質問

WordPressコードエディターはコードを知らなくても使えますか？

私自身、コードの知識はまったくありませんが、ChatGPTにGutenberg HTMLの完成形を作ってもらい、WordPressの記事作成に利用しています。

重要なのは、自分でコードを一から書けることではありません。

私の場合は、記事に入れたい内容やデザインを決め、ChatGPTにコード形式で完成させてもらい、その内容をコピーしてWordPressへ貼り付けています。

毎回コードエディター画面を開く必要がありますか？

私の現在の方法では、毎回コードエディター画面を開く必要はありません。

ChatGPTが出力したGutenberg HTMLをコピーし、普段使っているWordPressのブロックエディターへそのまま貼り付けています。

貼り付けたあとは、H2・H3見出し、本文、色付きボックス、リストなどが通常のWordPressブロックとして表示されるため、普段見ているのは普通の記事編集画面です。

画面上ではコードを意識しなくても、裏側ではGutenberg HTMLとして記事の構造やデザインが機能しています。

ChatGPTで作ったGutenberg HTMLはそのまま貼り付けても大丈夫ですか？

私は、ChatGPTが新しく作ったHTMLなら何でも確認せずに使えるとは考えていません。

過去には、ChatGPTが生成したHTMLを使った際にエラーが発生したことがあります。

そのため現在は、WordPressで実際に正常動作したHTMLや記事デザイン部品集を基準にしています。

普段使っている部品を流用する場合は安定していますが、新しい表現やデザインを取り入れるときは、貼り付け後の表示を必ず確認しています。

WordPressですべて手動で作る方法でも問題ありませんか？

問題ありません。

WordPressでは、コードを知らなくても、見出し、本文、目次ジャンプ、色付きボックス、リスト、リンク、広告、画像などをすべて手動で設定できます。

私がChatGPTとGutenberg HTMLを使っているのは、手動ではできないからではなく、毎記事繰り返す作業を減らしたいからです。

まとめ

私自身、コードの知識はまったくありませんが、現在はChatGPTにGutenberg HTMLの完成形を作ってもらい、WordPressへコピーして貼り付ける方法で記事を作成しています。

難しいコードを自分で書かなくても、正常動作したデザイン部品を再利用することで、WordPress上の繰り返し作業を減らせています。

この方法に変えてから、大げさではなく、体感では何倍も記事作成スピードが上がっています。

これからWordPressで記事を継続して公開したい方は、コードをすべて覚えることから始めるのではなく、まず「毎回同じように繰り返している手作業はないか」を探してみると、時短できる部分が見つかるかもしれません。