【WordPress】プラグインなしで数式を記事ごとに表示設定する

こんにちは。

記事中に数式を表示したいけれど、プラグインは読み込み速度低下の原因となるので使いたくないと思っている方は多いのではないでしょうか。

また、すべての記事に対して数式表示設定をしてしまうと、数式がない記事まで数式表示設定を読み込んでしまうので、これは避けたいところです。

これらを解決するため、プラグインなしで記事ごとに数式の表示設定を行う方法を紹介します。

利用する機能
1. カスタムフィールド
2. wp_head() と wp_footer()
手順
最後に

利用する機能

カスタムフィールド

カスタムフィールドとは、記事ごとにキーと値の組み合わせを複数登録できる機能です。

値の部分にはコードを保存することもできるので、ここに必要なコードを登録することで、記事ごとに数式読み込み用コードを読み込ませることができます。

カスタムフィールドの設定は記事編集画面からできますが、デフォルトでは表示されていないため、最初は表示設定をする必要があります。

記事編集画面右上のオプション > 設定 > 追加パネル > カスタムフィールド
のチェックボタンにチェックを入れます。

これで、記事編集画面からカスタムフィールドを編集できるようになります。

wp_head() と wp_footer()

wp_head() は html の head 終了直前に読み込まれる関数で、wp_footer() は body 終了直前に読み込まれる関数です。

これらの関数にカスタムフィールドの操作を追加することで、好きなタイミングでコードを読み込ませることができます。

手順

まず、functions.php に以下のコードを追記します。

// head終了直前でhead_loadカスタムフィールド読み込み
function head_original_load(){
  if(is_single() || is_page()){
    if($head_original_code = get_post_meta(get_the_ID(), 'head_load', false)){
      foreach($head_original_code as $head_code){
        echo $head_code . "\n";
      }
    }
  }
}
add_action('wp_head', 'head_original_load');

// body終了直前でbody_loadカスタムフィールド読み込み
function body_original_load(){
  if(is_single() || is_page()){
    if($body_original_code = get_post_meta(get_the_ID(), 'body_load', false)){
      foreach($body_original_code as $body_code){
        echo $body_code . "\n";
      }
    }
  }
}
add_action('wp_footer', 'body_original_load');

次に、数式を含む記事にカスタムフィールドを追加します。

head で読み込ませたい場合はキーの値を head_load にし、body で読み込ませたい場合はキーの値を body_load にします。

因みに、head 部分は画面のレンダリングが開始する前にすべて読み込まれ、body 部分はレンダリング開始後に非同期的に読み込まれます。

そのため、数式のレンダリングが完全にできてから表示したい場合は head で読み込み、表示速度を重視する場合は body で読み込みます。

カスタムフィールドの値の部分には以下のコードを入れてください。

<script>
window.MathJax = {
  tex: {
    inlineMath: [['', ''], ['\\(', '\\)']],
    tags: 'ams'}
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

1つ目の script では MathJax の設定をしています。
このコードでは Latex と同様に $ で囲んだ部分が数式とみなされる等の設定をしています。

2つ目の script は IE でも表示させるためのコードです。
IEのために読み込み速度を落とすのが嫌な場合は、このコードは消去しても構いません。

3つ目の script では MathJax を読み込んでいます。
最新のバージョンについては以下のサイトで確認してください。

MathJax – GitHub

入力し終えたら、カスタムフィールドを追加します。

以上で数式が表示されるようになります。