コードブロック

WordPress のブロックエディタで利用可能な「コード」ブロックの使い方について解説します。「コード」ブロックはフォーマットブロックの中に含まれており、プログラムのソースコードを記事本文に追加する時に使用します。

(Last modified: 2023年01月11日)

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

ブロックエディタで「コード」ブロックを追加するには、ブロックタイプを選択する画面で「フォーマット」の中にある「コード」をクリックしてください。

「コード」ブロックが追加されます。

ブロックの検索ボックスで「/コード」と検索して表示することもできます。

「コード」ブロックに記述するプログラムのソースコードを入力します。今回は次のような簡単なソースコードを入力しました。

class Hello{
  public static void main(String[] args){
    System.out.println("Hello");
  }
}

なお「コード」ブロックを追加したあと、コードエディタに切り替えて確認してみると次のようなコードが入力されています。

<!-- wp:code -->
<pre class="wp-block-code"><code>class Hello{
  public static void main(String[] args){
    System.out.println("Hello");
  }
}</code></pre>
<!-- /wp:code -->

コードブロックのツールバーオプション

「コード」ブロックを選択するとツールバーが上部に表示されます。

ツールバー上のボタンについてそれぞれ使い方は次の通りです。

ブロックタイプまたはスタイルを変更

「ブロックタイプまたはスタイルを変更」アイコンをクリックすると「コード」ブロックを別のブロックタイプのブロックに変更することができます。

「コード」ブロックから変更できるブロックタイプは「グループ」「整形済みテキスト」の 2 種類です。

コードブロックのサイドバーオプション

コードブロックを選択するとサイドバーにオプションが表示されます。

サイドバーに表示されているオプションの使い方は次の通りです。

高度な設定

高度な設定では「コード」ブロックに対して適用する CSS クラス名を指定することができます。

例えば mycode と入力してみます。

コードエディタに切り替えて確認してみると class 属性が設定されていることが確認できます。

<!-- wp:code {"className":"mycode"} -->
<pre class="wp-block-code mycode"><code>class Hello{
  public static void main(String[] args){
    System.out.println("Hello");
  }
}</code></pre>
<!-- /wp:code -->

-- --

WordPress のブロックエディタで利用可能な「コード」ブロックの使い方について解説しました。

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。