これで大丈夫！！Gutenbergで投稿本文へコードをそのまま表示して紹介する方法|Knowledge Base

公開日：2020(令和2)年8月20日／最終更新日： 2020(令和2)年8月20日

WordPressで、HTMLやCSS、PHPなどのコードを紹介する記事を書く時、コードの挿入はどうやってますか？？私は以前テキストエディタを使っていたので簡単にできていましたが、Gutenbergにしてから何となく「うまくいった？」「うまくいかない・・」の間をさまよってました。

が、ようやく問題なく表示できる方法が自分なりに確立できましたので、備忘録を兼ね紹介しておきます。

論より証拠ということで、コードを挿入するパターンによって何が違うのかの検証（コード自体はカスタム投稿タイプを追加したとき、記事公開時にpingが通常の投稿と同じように飛ぶようにするものですが、今回の記事を書く上での例ですので直接的な関係はありません）。

まずは、クラシックブロックにそのままコードを貼った場合にどうなるか？

<?php function a_pings_at_publish( $post_id ) {wp_schedule_single_event( strtotime( '+10 min' ), 'do_pings', array( $post_id ) );}
add_action( 'publish_a', 'a_pings_at_publish', 10, 1 ); ?>

一見きれいに表示できてるように見えますね。でもコードをメモ帳やWordPress内のfunctions.phpなどへコピーすると・・・「’」などがなぜか全角になり、そのまま使うとエラーになったり動作しなかったりします。

次に同じコードをpreタグで囲み、クラシックブロックへ挿入すると

<?php function a_pings_at_publish( $post_id ) {wp_schedule_single_event( strtotime( '+10 min' ), 'do_pings', array( $post_id ) );}
add_action( 'publish_a', 'a_pings_at_publish', 10, 1 ); ?>

・・・なぜかコードですよ！としたpreタグまでそのまま表示され、しかも上と同じように「’」などが全角になってコピーされてしまいます。

別の方法として、整形済みテキストというブロックを使うといいよ！という記事が散見されるので、試しに上のコードをそのまま整形済みテキストブロックで表示したのが↓↓

function a_pings_at_publish( $post_id ) {wp_schedule_single_event( strtotime( '+10 min' ), 'do_pings', array( $post_id ) );}
add_action( 'publish_a', 'a_pings_at_publish', 10, 1 );

・・・コードはそのまま表示されるけど・・・このサイトで使用しているテーマでは横にズーーンと表示されてしまうし、そもそもphpなどの投稿本文で使用してはいけないコードはそのまま表示できないようになっています（その兼ね合いでphpですよ！という接頭・接尾語を省略してます）。

表示の崩れと完全にコピーできる状態にできないことからあまりおすすめできる方法ではないと思います。

とここまで試した方法ではとてもコードを紹介するコンテンツにはなりませんね。

これではせっかく有用な方法をコード付きで紹介してるのに、使う人から見たら「何このコード、コピペして使おうとしたらエラーになっちゃったじゃないの（怒）」と~~勝手に~~使えないサイト扱いされてしまいます。まあ、コードのなんたるかが少しわかる人からすれば、多分記号の全角化の問題だろうと修正してくれるのですが、コピーしてそのまま使おうというレベルの方からすれば「そんなん知らんし」ってことですからね。

そうならないために、WordPressのブロックエディタ（Gutenberg）でコードを確実にそのまま使える形で表示する方法を紹介します。

※あくまでも私の場合は・・・というお話ですので、すべての環境でうまくいく保証はありません

WordPressの本文内でコード紹介を行う作法とコツ

そもそも何でこんな不都合が発生するのか？？に少し触れておきます。いつまでだったか忘れましたが、はるか昔のWordPressでは確か問題なく表示・表現できてたと記憶しています。

その後しばらくして、WordPressはいろいろなユーザーが投稿できるというのがいいところ、でみんながすごくいい人だったら良かったんですけど、中には悪質なコードを挿入してサイトを壊したりする・・なんて事例が増えてきて、コメント欄やエディタ（投稿や固定ページの編集画面）ではプログラムを実行してしまうようなコードは挿入できないようになったんです。

だから、ビジュアル形式のエディタでは一番上の例のようにコードをそのまま貼り付けると特定の文字が全角文字になって動作しないように整形されたり、Gutenbergの整形済みテキストでは接頭・接尾に付く文字で危険かどうかを判断して挿入できないようにしたり・・・という風になってるんです（※あくまでも私見です）

とはいえ、特にWordPressのカスタマイズ系の記事を書いたりするのにコードの紹介って必要ですから、どうしてもきちんとしたい！！それを実現するために、実は作法があるんです。多分コードの紹介なんてたまにしかしないと思いますし、その時にはすっかり忘れてまた「何で～～」となると思いますから、ぜひブックマークでもしていつでも見られるようにしておくといいでしょう。

コードを挿入してそのまま表示させる作法

絶対行うべきは以下の２つです

コードを一度特殊文字変換にかける
「整形済みテキスト」ブロックを使い、「HTMLとして編集」にしてからコードを挿入する

どちらを省いてもうまくいかないことが多いので（多いとしたのはコードによるからです）、この手順で行う癖をつけましょう。

まずは特殊文字変換。あまり聞いたことがないとは思いますが、プログラムがプログラムとして動いてしまわないようにするための処理と覚えておけば問題ないかと思います。例えば

HTML特殊文字変換ツール

などの変換サービスを使えば、紹介したいコードをそのまま貼り付けて変換ボタンをクリックするだけで簡単にできます。

次に「整形済みテキスト」ブロックを追加して、「HTMLとして編集」に切り替えて、変換済みのコードを貼り付けます。

「HTMLとして編集」への切り替えは、ブロック挿入後、すぐ上に表示されるメニューの点３つ（「・・・」を縦にした）ボタンをクリックすると項目の中に「HTMLとして編集」というのが出てきますからクリックするだけです。

「HTMLとして編集」にするとpre class…というコードが自動で挿入されますので、入れ子と閉じ子の間にコードを貼り付けます（プレビュー時に表示が本文幅からはみ出る場合には削除してコード挿入します）。

HTMLに変換のどちらを選択しても表示されなくなってしまったりしてうまくいきませんから、必ず特殊文字変換しておく必要があります。

この２つの作法で冒頭のコードを表示させたのが↓↓です

<pre class="wp-block-preformatted"><?php function a_pings_at_publish( $post_id ) {wp_schedule_single_event( strtotime( '+10 min' ), 'do_pings', array( $post_id ) );}
add_action( 'publish_a', 'a_pings_at_publish', 10, 1 ); ?></pre>

ちなみに自動挿入されるpreタグを削除してからコード挿入したのが↓↓です

<?php function a_pings_at_publish( $post_id ) {wp_schedule_single_event( strtotime( '+10 min' ), 'do_pings', array( $post_id ) );}
add_action( 'publish_a', 'a_pings_at_publish', 10, 1 ); ?>

幅があふれてしまう場合にはCSSで調整するか、preタグを削除してどうなるかを試してみるといいでしょう。

まあ、このサイトで使ってる独自テーマではprism.jsというコードをきれいに表示する機能がありますので、それを使えば↓↓のようにきれいに表示できるようにしています。

<?php function a_pings_at_publish( $post_id ) {wp_schedule_single_event( strtotime( '+10 min' ), 'do_pings', array( $post_id ) );}
add_action( 'publish_a', 'a_pings_at_publish', 10, 1 ); ?>

いかがですか？

手順と方法を間違わなければ、プラグインや↑のようなコード表示用のプログラムがなくてもコードの紹介はできるようになります。

私のように今まで何となくでやられていた方は、ぜひ試してみていただき、うまくいくようであればこの方法に統一することをおすすめします。

クラシックエディタ（特にテキストエディタ）からブロックエディタへ変換する際には注意が必要

旧エディタ（クラシックエディタ）のテキストエディタでコードを紹介する場合、特殊文字変換したものをそのまま挿入すると、出力される際に特殊文字が元に戻り、そのままコードとして表示されるため、そのように本文を書かれていた方が多いと思います（実際私もその方法でした）。

そして、旧エディタで書いた記事をそのまま編集できるように「Classic Editor」プラグインを入れて切り替え可能にしている方も多いと思います。そしてプラグインの設定により、投稿編集画面にはどちらのエディタで編集されたものかが表示され、どちらのエディタで編集するかというリンクが２つ表示されるようになります。

そこで前述した方法でコードをそのまま表示させている投稿をいきなりブロックエディタ（Gutenberg）での編集でいきなり開いたり、一旦旧エディタで編集画面を開いてからブロックエディタに切り替えると、すべてがクラシックブロックに展開され、コードの部分の表示がおかしくなります。

さらに一旦ブロックエディタで開いてしまったものを旧エディタに戻しても、完全に元に戻らないことがあり、何をどうしたら・・と困ってしまうことがあります。そう、ブロックエディタにしてしまったらもう後戻りはできない、そんな感じです。

そうなったとき、表示を元の状態に戻すには、テキストエディタ→ブロックエディタへの切り替えをすると前述したようにクラシックブロック１つにすべての内容が展開されますから、以下のように作業をする必要が出てきます。

つまり

クラシックブロックをコード表示の場所で分割する
コード表示がきちんとされるように「整形済みブロック」を間に挿入し、特殊文字変換したコードを挿入する

という作業が必要となります。１つの記事内に複数の紹介コードがあるものでは「どれがいったい紹介したいコードなの？？」とごちゃごちゃになることもありますから、テキストエディタで書いた過去記事で、コードの紹介が含まれているものを編集する際には細心の注意を払うようにしたり、時間のあるときに行うようにした方が無難でしょう。