2023年12月22日WordPressの記事にソースコードをそのまま表示させる方法をまとめています。目次コードブロックWordPress共通の「コードブロック」を呼び出して、ソースコードをそのまま入力します。入力したソースコードは、クラス属性の付いたpreタグとcodeタグで囲まれます。class="wp-block-code"><code>ソースコード</code></pre>ブロック単位の記述になりますが、登録済みのショートコードを表示させることもできます。一部の記号は自動で文字実体参照に置き換えてくれるので、ソースコードをそのまま貼り付けるだけでOKです。>インラインコード」を選択します。選択したソースコードは、codeタグで囲まれます。<code>ソースコード</code>文章中にコードを表示させたい時に使うと便利ですが、登録済みのショートコードを表示させることはできません。登録済みのショートコードを表示させたい時は、ショートコード全体を[]で囲んで下さい。プラグインを使うソースコードを表示するだけなら、WordPress共通の機能「コードブロック」や「インラインコード」で十分ですが、コピー機能を付けたり、言語を表示させたり、デザインを変更したい時はプラグインを使うと便利です。Blockを使用しています。Block」を呼び出して、ソースコードをそのまま入力するだけです。全体のカラーやオプションは管理画面から設定できます。WordPressデフォルトの機能が物足りないと感じる時は、プラグインの導入を検討してみて下さい。Blockの設定と使い方をまとめています。記事内にソースコードを綺麗に表示させるプラグインです。言語、行数、コピーボタンの設定が可能...ソースコードを表示させる時の注意WordPressでは、wptexturize()関数で一部の記号が自動変換されます。編集画面でコードをそのまま貼り付けても、実際に表示される際に記号が変換されます。半角の"は全角の”に変換されます。そのままコピペするとエラーが起きます。段落ブロックに直接ソースコードを入力されている方は要注意です。ソースコードを表示させたい時は、基本的に「コードブロック」「インラインコード」「専用のプラグイン」のいずれかを使って下さい。下記のコードをfunctions.phpに記述して、記号の自動変換を停止することもできます。最後にWordPressの記事にHTMLやCSSのソースコードを表示させたい時は、ブロックエディターの「コードブロック」及び「インラインコード」を使って下さい。プラグインを使った方が綺麗に表示させることができるので、ソースコードを表示する機会が多い方には、プラグインの導入をおすすめします。OptimizerでWebP配信する方法この記事を書いた人scofield2024年も気づいたら11月。情報を伝えるのにブログである必要はないのかもしれない。自分のルールで管理できるメリットを除けば、今はブログに拘るメリットは何もない。YouTubeやSNSを使った方が間違いなく多くの人に情報を伝えられる。コアアップデートが予定されているみたいだけど、このままGoogle検索を頼りにブログ運営を続けてもアクセスや収益が伸びることはない気がする。いい加減新しく何か始めないといけないのかもしれない。Δscofield趣味で風景やフィギュアを撮影してます。このブログでは、管理人が学んだこと、試したこと、調べたこと、興味がわいたことをまとめて記事にしています。分からないことや質問があれば、コメント欄及びお問い合わせからお願いします。2024年10月9日ありがとうございます。リオパラは懐かしいですね。2024年10月8日コメントありがとうございます。