当サイトではアフィリエイト広告を利用しています

【WordPress】記事内にhtmlソースコードをそのまま表示(ブロック/クラシックエディター対応)

ソースコードイメージ

WordPress(ワードプレス)で、記事の中にhtmlソースコードをそのまま表示する方法をご紹介します。

文章の中の一部分で、テキストとテキストの間にコードを表示する方法です。

ブロックエディターではWordPress標準のテキストエディタでできます。
クラシックエディターでは、プラグイン「Advanced Editor Tools」を使うとできます。

簡単にできますが、少し分かりにくかったので、まとめてみました。

テーマやエディター機能追加プラグインなどによって異なる場合があります。

★12万以上の対象作品を聴き放題 ★無料体験後は月額1500円。いつでも退会可能 ★プロのナレーターが朗読 ★オフライン再生可能
目次

ブロックエディタ―でhtmlソースコードをそのまま表示

ブロックエディターでは、「コードブロック」を使えば、htmlソースコードをそのまま表示できます。

コードエディター
コードブロック

しかし、ブロック単位での記述となるので、文章中の一部分だけをhtmlソースコード表示することはできません。

ここでは、文章中のコードをそのまま表示する方法を紹介します。

段落ブロックを使う

テキストの中にある<strong>テキスト</strong>というHTMLコードをそのまま表示させます。
以下のように段落ブロックに入力します。

ブロックエディター

以下のようにHTMLコードを選択します。

ブロックエディター

そして、ツールバー右側(下向きの三角)をクリックして「インラインコード」を選択します。

ブロックエディター

すると、以下のようになります。

ブロックエディター

プレビューで確認すると、このようになります。
コードを見ると、<code>と</code>で囲まれています。

※テーマによって背景がグレーにならない場合もあるようです。
私が試したテーマでは、以下のようにSnowmonkeyはグレーになり、CocoonとTwenty Nineteenではグレーになりませんでした。
※当サイトはCocoonを使用していますが、段落ブロックツールバーの「マーク」で背景を付けています。

ブロックエディター

クラシックブロックを使う(Advanced Editor Tools使用)

クラシックブロックを挿入します。

クラシックエディター

クラシックブロックは標準で以下のようになっています。
コード挿入用の項目はありません。

クラシックエディター

エディター機能拡張プラグイン「Advanced Editor Tools」をインストールします。(挿入方法は省略)

Advanced Editor Tools

ツールバーが以下のようになり、項目が増えました。

クラシックエディター

HTMLコードの部分を選択します。

クラシックエディター

ツールバーの「フォーマット」 をクリック

クラシックエディター

開いたメニューから「コード」を選択

クラシックエディター

以下のようになります。

クラシックエディター

プレビューで確認するとこのように表示されます。

テキストエディター

Advanced Editor Toolsを入れて「code」の項目が表示されない場合

プラグインを入れても「code」の項目が表示されない場合は、設定を確認しましょう。

Advanced Editor Toolsの「設定」を開きます。

「ブロックエディターツールバー」
段落ブロックなどのツールバーに反映されます。

「ブロックツールバーで不使用のボタン」にコード「< >」が入っていた場合は、以下のようにドラックしてツールバーに追加します。

Advanced Editor Tools

「クラシックブロックのツールバー」
クラシックブロックのツールバーに反映されます。
クラシックブロックには、「フォーマット」にコード用の項目が入っているので必要ありませんが、以下のようにドラックすると「<>コード」のアイコンを加えることができます。

「< >ソースコード」の方を使うと上手く機能しませんでした。

Advanced Editor Tools

クラシックエディターでhtmlソースコードをそのまま表示

クラシックエディターの場合です。(クラシックブロックではありません)

エディター標準の「code」だけではできない

テキストモードの場合、以下のようにツールバーに「code」ボタンがあります。
(※「ビジュアルモード」では「code」ボタンはありません)

HTMLコードを選択して「code」ボタンを押します。

テキストエディター

すると、このようになります。

テキストエディター

プレビューで確認すると、HTMLコードは表示されず、太字になり、背景色がついています。

テキストエディタ

<strong>テキスト</strong>の部分は、
&lt;strong&gt;テキスト&lt;/strong&gt;と記載すると、HTMLコードがそのまま表示されますが、ちょっと面倒です。

そこで、Advanced Editor Toolsをインストールして、「ビジュアルモード」を使うとブロックエディターの時と同じようにできます。
※「テキストモード」でもやってみましたができませんでした。

当サイトで使用中のWordPessテーマ

SWELL ロゴ

WordPressテーマの国内人気シェアNo.1テーマ(2023年1月・マニュオン調べ)

おすすめ度

SWELL のメリット
  • 効率的、時短
    ブロックエディタ完全対応。使いやすく、効率的に記事作成ができる。
  • おしゃれ、美しいサイト
    コードを書かずに本格的なデザイン、おしゃれなサイトができる
  • 高速表示
    サイトの表示速度が高速
  • アフィリエイトに最適!
    アフィリエイトに便利な機能が豊富。購入者限定アフィリエイトもあり!
SWELLのデメリット
  • 利用者が多く、デザインが被る可能性がある

ブログが楽しくなるテーマ

複数サイトで利用でき、コスパも最高

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次