WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

WordPressでプログラムコードを紹介するときはGutenbergの「コードブロック」が便利で簡単

公開日:2020(令和2)年9月18日/最終更新日:

WordPress初心者向けのカスタマイズ情報



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

私はブロックエディタ(Gutenberg)にする前、ずっとテキストエディタを使っていました。その理由の1つに、このサイトではphpやCSS、HTMLなどのプログラムコードを紹介する機会が多く、旧エディタのビジュアルエディタだとわずらわしさを感じたからです。

テキストエディタではコードを特殊文字変換できるありがたいサイトで一旦変換し、prism.jsを使ってコード表示させていました。どんなコードでもこの手順でうまくいくため便利に使っていました。ビジュアルエディタでは手順が違ったり、コードの種類が違うと特殊文字に変換した部分が戻ってしまったりして不便に思っていました。

そこで登場したのがGutenbergエディタ。このエディタにかつてのテキストエディタと全く同じ機能はありません。唯一旧エディタを踏襲した「クラシックブロック」があるのですが、これはビジュアルエディタの代わりなので、コードをそのまま紹介するのには全く?向いていません。そこで試行錯誤してたどり着いたのが、以前紹介した方法。

これで大丈夫!と言いながら、この方法でも結局プレビューで表示してきちんと確認しないと、特定の記号が全角になってしまったりして、何とも不都合な感じだったんです。

「まあ面倒でもこの方法しかないか・・・」

とあきらめて数件の記事を書いた後、ふと見つけたのが「コードブロック」。

「整形済みブロックと何が違うの??」でとりあえず試してみたら・・なんとコードをそのまま貼り付けるだけで、特に特殊文字への変換もなくそのまま表示できるではありませんか!!

論より証拠、以下はコードブロックへ何の加工もなくコードを貼り付けた表示例です(コードはテーマファイル内のものを適当に貼り付けてます)。

まずはCSS、こちらは特に特殊文字変換の必要がないのですが一応・・

.footer-info{
	color:#eee;
	font-size:0.7em;
	text-align:center;
}

.footer-info a{
	color:#eee;
}

次にPHPコード。わざと特殊文字変換が通常必要な「<」「’」の入ったものにしてます。通常特殊文字に変換しないとエディタ側から警告(PHPコードはダメですよ!)のようなメッセージが出たり、「’」が全角になってしまったりするのですが・・・大丈夫です。

<?php if(!(is_404())):?>
    <link rel="canonical" href="<?php echo $canonical_url; ?>" />
<?php endif;?>

<?php if(!is_hab_descriptiontag_hide()): //descriptionタグを出力するか?>
	<meta name="description" content="<?php bloginfo( 'description' ); ?>">
<?php endif;?>

最後にHTML

<p>私はブロックエディタ(Gutenberg)にする前、ずっとテキストエディタを使っていました。その理由の1つに、このサイトではphpやCSS、HTMLなどのプログラムコードを紹介する機会が多く、旧エディタのビジュアルエディタだとわずらわしさを感じたからです。</p>
<p>テキストエディタではコードを<a href="https://tech-unlimited.com/escape.html" target="_blank" rel="noopener noreferrer">特殊文字変換できるありがたいサイト</a>で一旦変換し、prism.jsを使ってコード表示させていました。どんなコードでもこの手順でうまくいくため便利に使っていました。ビジュアルエディタでは手順が違ったり、コードの種類が違うと特殊文字に変換した部分が戻ってしまったりして不便に思っていました。</p>

どのコードも全く問題なく表示できました。

これでコード紹介の敷居がかなり下がり、記事作成の意欲が戻ってきました(ここ最近コード表記がちょっと面倒で二の足を踏んでたものがいくつかありました)。

ちなみに、今使っているテーマでは、このコードブロックに対して以下のCSSを割り当てて表示させています。基本preタグとcodeタグの組み合わせなのでCSSでデザイン変更できる点も便利だと思います。

/***** コードブロックの装飾 *****/
pre.wp-block-code {
    background: #3e3d3d;
    border: 3px solid #baab2a;
    padding: 10px;
    color: #fff;
    border-radius: 5px;
    overflow-x: auto;
    margin: 10px;
    line-height: 2em;
    font-family: normal;
}

確認したところでは以前からあるブロックだったようなのですが全然気づきませんでした。

これで執筆作業!?が格段に楽になります。

同じことで困っていた方、ぜひ使ってみてください。

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)