前回のプラグインを使わずにcode highlightでコードを見やすくするでプラグインを使わずにコードハイライトを実現しました。ただ、やってみると分かるんですがコードをビジュアルエディタではなくテキストエディタで貼り付けるとhtmlタグがWordpressの基本機能によって消えてしまうんですよね。

なので今回は’wp_insert_post_data’のアクションフックを使って保存するときに”<“や”>”を”&lt;”や”&gt;”に自動的にhtmlエスケープするようにしましょう！

function.phpに記述するのが怖い人や子テーマを使ってない人やそもそもめんどくさい方は

根も葉もないですがプラグインを入れてしまいましょう！

  1. SyntaxHighlighter Evolved
  2. Crayon Syntax Highlighter
  3. Syntax Highlighter Compress

ココらへんを入れれば早いんじゃないでしょうか？比較する時間がある方は海外の方がまとめてくれたみたいなので下記のURLを見て見ればいいと思う

12 Best WordPress Syntax Highlighter Plugins

本題

それでは以下のコードをfunctions.phpに記述しましょう

add_action( 'wp_insert_post_data', function($data, $postarr){
  if($data['post_type'] == "post"){
    $data['post_content'] = preg_replace_callback(
      '|(</code></pre><pre><code[^>]*?>)(.*?)(</pre><pre><code class="php">)|s'
      , function($matches){
        $matches[2] = str_replace( ["<",">"], ["&lt;","&gt;"], $matches[2]);
          return $matches[1].$matches[2].$matches[3];
      }
      , $data['post_content']
    );
  }
  return $data;
}, 10, 2);

コードの説明

‘wp_insert_post_data’は記事を保存する前のアクションフックです。$data['post_type']でブログ投稿時のみに適用するようにpost_typeで条件分岐します。$data['post_content']は本文でpreg_replace_callbackで<pre><code></code></pre>内の”<“や”>”を”&lt;”や”&gt;”にhtmlエスケープします。

それを元の配列に戻してその値を返すことで保存する前に整形した値を保存できるようになりました。
これでもうちょっと楽にコードをかけるようになりましたね！