2023年5月16日WordPressの記事にソースコードをそのまま表示させる方法をまとめておきます。目次コードブロックWordPress共通の「コードブロック」を呼び出して、ソースコードをそのまま入力します。入力したソースコードは、クラス属性の付いたpreタグとcodeタグで囲まれます。class="wp-block-code"><code>ソースコード</code></pre>ブロック単位の記述になりますが、登録済みのショートコードを表示させることもできます。一部の記号は自動で文字実体参照に置き換えられるので、ソースコードをそのまま貼り付けるだけで機能します。>インラインコード」を選択します。選択したソースコードは、codeタグで囲まれます。<code>ソースコード</code>文章中にコードを表示させたい時に使うと便利ですが、登録済みのショートコードを表示させることはできません。登録済みのショートコードを表示させたい時は、ショートコード全体を[]で囲んで下さい。プラグインを使うソースコードを表示するだけなら、WordPress共通の機能「コードブロック」や「インラインコード」で十分ですが、コピー機能を付けたり、言語を表示させたり、デザインを変更したい時はプラグインを使うと便利です。Blockを使用しています。Block」を呼び出して、ソースコードをそのまま入力するだけです。全体のカラーやオプションは管理画面から設定することができます。WordPressデフォルトの機能が物足りないと感じる時は、プラグインの導入を検討してみて下さい。ソースコードを表示させる時の注意WordPressでは、wptexturize()関数で一部の記号が自動変換されます。編集画面では正確に入力されていても、実際に表示される際に記号が変換されます。半角の"は全角の”に変換されます。そのままコピペするとエラーが起きます。段落ブロックに直接ソースコードを入力されている方は要注意です。ソースコードを表示させたい時は、基本的に「コードブロック」「インラインコード」「専用のプラグイン」のいずれかを使って下さい。下記のコードをfunctions.phpに記述して、記号の自動変換を停止することもできます。最後にWordPressの記事にHTMLやCSSのソースコードを表示させたい時は、ブロックエディターの「コードブロック」及び「インラインコード」を使って下さい。プラグインを使った方が綺麗に表示させることができるので、ソースコードを表示する機会が多い方には、プラグインの導入をおすすめします。名前メールサイトΔScofield趣味で風景やフィギュアを撮影してます。WordPressも時々いじってます。分からないこと&質問があれば、コメント欄及びお問い合わせからお願いします。