WordPressの記事をHTML形式(コード)で表示・入力する方法

Wordpress 記事編集

WordPress記事をHTML形式で入力する方法

WordPressでは、目的によって操作が異なります。

① 記事全体をHTMLコードで表示・編集する

現在のブロックエディターでは、次の手順です。

  1. WordPress管理画面で「投稿」→「投稿一覧」を開く
  2. 編集したい記事を選ぶ
  3. 画面右上の「︙」をクリック
  4. 「コードエディター」を選択する

これで、記事全体がHTML形式で表示されます。HTMLで作成した記事を貼り付ける場合も、この画面に入力できます。元の通常画面に戻すときは、もう一度「︙」を押して「ビジュアルエディター」を選択します。WordPress公式でも、コードエディターでは投稿・固定ページ全体をHTMLで確認できると案内されています。

Windowsでは、次のショートカットでも切り替えられます。





同じキーをもう一度押すと、通常のビジュアルエディターに戻ります。


② HTMLを貼り付けて、記事として表示させる

生成AIなどで作成したHTML記事を貼り付けたい場合は、「カスタムHTML」ブロックを使う方法が分かりやすいです。

  1. 記事編集画面で「+」をクリック
  2. 検索欄に「HTML」と入力
  3. 「カスタムHTML」を選択
  4. HTMLコードを貼り付ける
  5. 「プレビュー」を押して表示を確認する

例えば、次のコードを貼り付けます。





公開ページでは、コードではなく見出しや文章として表示されます。「カスタムHTML」ブロックには、入力したHTMLを確認するプレビュー機能もあります。


③ HTMLコードそのものを記事内に表示する

読者にHTMLコードを見せたい場合は、「カスタムHTML」ではなく「コード」ブロックを使います。





「コード」ブロックに入力すると、HTMLが実行されず、上記のようにコードのまま表示されます。


クラシックエディターを使っている場合

編集画面右上に「ビジュアル」「テキスト」というタブが表示されている場合は、クラシックエディターです。

  • ビジュアル:通常の文章入力画面
  • テキスト:HTML入力画面

HTMLを貼り付けるときは「テキスト」タブを選びます。


まさゆきさんの記事作成でおすすめの方法

ChatGPTで作成した記事をWordPressへ貼り付けるなら、基本的には次の使い分けがおすすめです。

  • 普通の文章として貼る:通常のビジュアルエディター
  • HTML形式の記事を丸ごと貼る:右上「︙」→「コードエディター」
  • 一部分だけHTMLを使う:「カスタムHTML」ブロック
  • コードを読者に見せる:「コード」ブロック

HTML編集前には、念のため記事内容をメモ帳などへコピーしておくのが安全です。通常ブロックのHTMLを大きく書き換えると、WordPressが元のブロックとして認識できず、「無効なコンテンツ」などの警告が表示されることがあります。

コメント

タイトルとURLをコピーしました