【WordPress】記事にコードブロック(スニペット)を追加する方法

プログラミングに関連したブログ・メディアを運営していると、記事の中にサンプルコードなどを表示させたい場面が多々あるのではないでしょうか。

その際には、WordPressに付随するコードブロックを活用するのがおすすめ。

以下のようなコードの表示することが可能となります。（別途デザインは必要）

// 整数の乱数を生成する関数
function randomNum(num){
    // 引数num …
 生成する乱数の上限値
    let returnNum = Math.floor(Math.random() * num) + 1;
    return returnNum;
}

コードブロックを追加する方法

WordPressでコードブロックを追加する方法はありますが、最も手っ取り早いのが用意されているブロックパターンを利用する方法です。

投稿の編集画面はWordPressのバージョンや使用しているテンプレートによって若干異なるものの、基本的には左上にある[ + ]のボタンから現れるブロック一覧に、お目当てのコードブロックがあります。

これを選択すると、段落や見出しと同じく、コードブロックが記事上に挿入されます。

あとは、表示したいコードをコードブロックに中に記入すればOKです。

WordPressにおける「ブロック」というのは、特定のHTMLタグ構造のプリセットであり、それぞれのブロックはHTMLタグによって成り立っています。

コードブロックの場合は、以下のようなタグの構造で出力されます。

<pre class="wp-block-code">
    <code>
        <!-- ここにコードが表示される -->
    </code>
</pre>

<code>というタグは、文字通りソースコードの領域を示すためのタグです。

コードブロックでは、<code>タグを<pre>というタグで囲んでいますね。

これは、<code>タグ内の文章の構造をそのまま表示するという機能を持ちます。

例えば、通常の<p>タグなどの場合、インデントが入っている文章があると、対象の部分を詰めるような形で、無意味な文字列に変換してからDOM要素として描画されます。

したがって、先ほどのコードを<p>タグに当てはめると・・・

<code>

<!– ここにコードが表示される –>

</code>

</pre>

表示上はインデントが残っているように見えますが、実際には以下のように、エスケープ文字という特殊な文字列が先頭に入ってしまっています。

このコードをコピペしてしまうと、以下のように先頭に全角スペースが表示された状態になってしまい、後から修正が必要になるのです。

<pre>タグと<code>タグをセットで扱えば、以下のように、コピペした際にもしっかりとインデントが保持されるので、閲覧者にとって優しいサンプルコードに仕上がります。

よく<code>タグだけで良いと勘違いしている方もいますが、基本的には<pre>タグと一緒に運用するものです。

（インラインで文中にコードを入れる場合は<code>タグ単体でも良い）

CSSでデザインを充てる場合、<pre>タグを指定するか、<code>タグを指定するかでデザインが大きく異なる点に注意してください。

WordPressでソースコードを表示する場合は、「コードブロック」を使用することで、簡単に整形されたソースコードを表示できます。

VScodeでコピペしたコードの整形情報も適用されるので、積極的に使っていきましょう。