2023年4月28日WordPress(ワードプレス)で、記事の中にhtmlソースコードをそのまま表示する方法をご紹介します。文章の中の一部分で、テキストとテキストの間にコードを表示する方法です。ブロックエディターではWordPress標準のテキストエディタでできます。Tools」を使うとできます。簡単にできますが、少し分かりにくかったので、まとめてみました。テーマやエディター機能追加プラグインなどによって異なる場合があります。★無料体験後は月額1500円。無料体験を試してみるポチップ目次ブロックエディタ―でhtmlソースコードをそのまま表示ブロックエディターでは、「コードブロック」を使えば、htmlソースコードをそのまま表示できます。コードブロックしかし、ブロック単位での記述となるので、文章中の一部分だけをhtmlソースコード表示することはできません。ここでは、文章中のコードをそのまま表示する方法を紹介します。段落ブロックを使うテキストの中にある<strong>テキスト</strong>というHTMLコードをそのまま表示させます。以下のように段落ブロックに入力します。以下のようにHTMLコードを選択します。ツールバー右側(下向きの三角)をクリックして「インラインコード」を選択します。すると、以下のようになります。プレビューで確認すると、このようになります。コードを見ると、<code>と</code>で囲まれています。※テーマによって背景がグレーにならない場合もあるようです。Nineteenではグレーになりませんでした。※当サイトはCocoonを使用していますが、段落ブロックツールバーの「マーク」で背景を付けています。Tools使用)クラシックブロックを挿入します。クラシックブロックは標準で以下のようになっています。コード挿入用の項目はありません。Tools」をインストールします。(挿入方法は省略)ツールバーが以下のようになり、項目が増えました。HTMLコードの部分を選択します。以下のようになります。プレビューで確認するとこのように表示されます。Toolsを入れて「code」の項目が表示されない場合プラグインを入れても「code」の項目が表示されない場合は、設定を確認しましょう。Toolsの「設定」を開きます。段落ブロックなどのツールバーに反映されます。>」が入っていた場合は、以下のようにドラックしてツールバーに追加します。「クラシックブロックのツールバー」クラシックブロックのツールバーに反映されます。クラシックブロックには、「フォーマット」にコード用の項目が入っているので必要ありませんが、以下のようにドラックすると「<>コード」のアイコンを加えることができます。>ソースコード」の方を使うと上手く機能しませんでした。クラシックエディターでhtmlソースコードをそのまま表示クラシックエディターの場合です。(クラシックブロックではありません)エディター標準の「code」だけではできないテキストモードの場合、以下のようにツールバーに「code」ボタンがあります。(※「ビジュアルモード」では「code」ボタンはありません)HTMLコードを選択して「code」ボタンを押します。すると、このようになります。プレビューで確認すると、HTMLコードは表示されず、太字になり、背景色がついています。<strong>テキスト</strong>の部分は、&lt;strong&gt;テキスト&lt;/strong&gt;と記載すると、HTMLコードがそのまま表示されますが、ちょっと面倒です。Toolsをインストールして、「ビジュアルモード」を使うとブロックエディターの時と同じようにできます。※「テキストモード」でもやってみましたができませんでした。当サイトもSWELLを使っています。詳細記事公式サイトWordPress全般よかったらシェアしてね!URLをコピーしました!URLをコピーしました!tsutchii(ツッチー)WordPressやブログに関する情報、中高年の学びや副業などについて書いています。管理人は、子供の英語教育のため、7年前、家族でフィリピンのセブに移住した引きこもり系おじさんです。これまで、ローカル紙記者、住宅会社や病院の広報、WEB担当、介護助手といった仕事をしてきました。今はNPO法人のサイト運営などネットで仕事をしながら、場所にとらわれずに生活していける働き方を模索しています。