WordPress サイトでサンプルコードを記事内に表示する方法

テーマやサイトの表示や機能のカスタマイズ、プラグインやソフトウェアの設定や拡張機能などの説明、AdSenseやアナリティクス、Tag Managerなどのコードの設置方法などを紹介する場合、記事内にサンプルコードなどを含めて表示する事は比較的多くあります。

本記事では、WordPressの記事内にPHP, CSS, Java スクリプトなどのコード例を含めて表示する方法について、WordPressの標準機能を使用する方法とプラグインを使用する方法を紹介します。

WordPress標準ブロック・エディターを使用してコードを表示する方法

コード事例などの紹介はそれほど行わないサイトの場合、最も手軽にコード表示を含めるのは、WordPressのブロックエディターを使う方法です。

ブロックの追加ボタンを押して、”code”と検索するとコード用のブロックが表示されます。ブロックのコード入力欄にコードを貼り付けます。以下、作業例です。

コード用ブロックにAdSenseの自動広告のコードを入力した例です。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

記事編集画面からプレビューを表示して、コードブロックの表示確認を行います。ブロックの背景色とテキストの色、文字のサイズなどを変更する事ができます。

以下はデフォルト（何も設定しない）でプレビューで表示したところ、背景色が紺で少し強い感じがしたので、背景色をグレーに変更した例です。

ご利用のWordPressのテーマによって、コードブロックの色や文字色は異なります。お好みに合わせてコードブロックの背景色と文字色などを変更して下さい。

プラグインを使用してサンプルコードを表示する方法

サイト内の多くの記事でサンプルコードを表示する場合には、コード表示用のプラグインを使用する事も有力な選択肢となります。

コード表示用プラグインを使用する利点

デフォルトのコードブロックに対して専用のプラグインは、以下のような利点があります。

どのようなプログラム言語のコードでも簡単に表示できる
シンタックスハイライティングと行番号付きでコードを表示できる
ユーザーがコード部をダブルクリックするとサンプルコードを編集できる
ユーザーはコードを簡単にコピーできる
コードの表示形式や行の表示非表示などの各種設定ができる

シンタックスハイライターのプラグインはいくつかありますが、ある程度実績のあるもので、アップデートも最近行われているSyntaxHighter Evolvedをここでは使用して紹介します。日本語もサポートしています。

プラグインをダウンロードして、有効化します。コード例を表示したい箇所にブロックを追加し、検索欄に”Syntax” の様に入力すると”SyntaxHighlighter Code”ブロックが表示されるので、（Synまで入れると表示されると思います）クリックしブロックを追加して、を追加してコードを入力します。

以下、作業例をYouTubeで紹介しています。

“SyntaxHighlighter Code”ブロックに、AdSenseヘルプページに記載されているレスポンシブ広告コードの許可されているコード変更、画面サイズに合わせた広告ユニットのサイズを指定するコードサンプルを入力した例です。

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

コードを追加後、右側のブロック設定からコードの種類（例：PHP, CSS, Java, HTML, Perl, Python, C++など）を選択したり、行番号の表示などの設定ができます。上のコードサンプルをダブルクリックするとコードを変更する事もできます。

シンプルな使い方であれば、 WordPressデフォルトのブロックなどでも十分だと思います。プラグインは多機能で様々な使い方ができるのが特徴なので、お好みやサイトの内容などに合う方を選択する事をお勧め致します。