WordPressの記事にソースコードをそのまま表示させる方法

WordPressの記事にソースコードをそのまま表示させる方法

WordPressの記事にソースコードをそのまま表示させる方法をまとめています。

目次

コードブロック

WordPress共通の「コードブロック」を呼び出して、ソースコードをそのまま入力します。

コードブロック

入力したソースコードは、クラス属性の付いたpreタグとcodeタグで囲まれます。

<pre class="wp-block-code"><code>ソースコード</code></pre>

ブロック単位の記述になりますが、登録済みのショートコードを表示させることもできます。また、一部の記号は自動で文字実体参照に置き換えてくれるので、ソースコードをそのまま貼り付けるだけでOKです。

インラインコード

文章中のコードを選択して、ツールバーオプションの「< >インラインコード」を選択します。

インラインコード

選択したソースコードは、codeタグで囲まれます。

<code>ソースコード</code>

文章中にコードを表示させたい時に使うと便利ですが、登録済みのショートコードを表示させることはできません。登録済みのショートコードを表示させたい時は、ショートコード全体を[]で囲んで下さい。

プラグインを使う

ソースコードを表示するだけなら、WordPress共通の機能「コードブロック」や「インラインコード」で十分ですが、コピー機能を付けたり、言語を表示させたり、デザインを変更したい時はプラグインを使うと便利です。

例えば、このブログではHighlighting Code Blockを使用しています。

使い方も簡単で、「コードブロック」の代わりに「Highlighting Code Block」を呼び出して、ソースコードをそのまま入力するだけです。全体のカラーやオプションは管理画面から設定できます。

Highlighting Code Block

WordPressデフォルトの機能が物足りないと感じる時は、プラグインの導入を検討してみて下さい。

ソースコードを表示させる時の注意

WordPressでは、wptexturize()関数で一部の記号が自動変換されます。

編集画面でコードをそのまま貼り付けても、実際に表示される際に記号が変換されます。例えば、半角の"は全角のに変換されます。当然、そのままコピペするとエラーが起きます。

段落ブロックに直接ソースコードを入力されている方は要注意です。ソースコードを表示させたい時は、基本的に「コードブロック」「インラインコード」「専用のプラグイン」のいずれかを使って下さい。

また、下記のコードをfunctions.phpに記述して、記号の自動変換を停止することもできます。

add_filter( 'run_wptexturize', '__return_false' );

WordPress の投稿データ処理 | サポートフォーラム
関数リファレンス/wptexturize - WordPress Codex 日本語版

最後に

WordPressの記事にHTMLやCSSのソースコードを表示させたい時は、ブロックエディターの「コードブロック」及び「インラインコード」を使って下さい。ただ、プラグインを使った方が綺麗に表示させることができるので、ソースコードを表示する機会が多い方には、プラグインの導入をおすすめします。

シェアしてね!

この記事を書いた人

2024年も気づいたら11月。今更だけど、情報を伝えるのにブログである必要はないのかもしれない。自分のルールで管理できるメリットを除けば、今はブログに拘るメリットは何もない。YouTubeやSNSを使った方が間違いなく多くの人に情報を伝えられる。また近々コアアップデートが予定されているみたいだけど、このままGoogle検索を頼りにブログ運営を続けてもアクセスや収益が伸びることはない気がする。いい加減新しく何か始めないといけないのかもしれない。

コメント

コメントする

目次