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

ブログ運営
スポンサーリンク

こんにちは。

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

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

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

スポンサーリンク

利用する機能

カスタムフィールド

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

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

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

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

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

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

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

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

最後に

プラグインなしで記事ごとに数式表示を設定する方法を紹介しました。

何かあればコメントにてお知らせください。

ブログ運営技術系

コメント

  1. sikis izle より:

    Hi my loved one! I wish to say that this post is awesome, great written and come with almost all important infos. Jesse Peasant

  2. Astonishingly user pleasant website. Enormous information readily available on few clicks on. Raphael Trometter

  3. Certain breed groups are more likely to get together with cats than others. Isreal Drisko

  4. porno izle より:

    There is definately a lot to know about this subject. I really like all the points you made. Alan Wampole

  5. bets10 giris より:

    Post writing is also a fun, if you be familiar with then you can write or else it is difficult to write. Rupert Jockers

  6. I go to see everyday some web sites and information sites to read articles, however this web site provides feature based writing. Randal Cinar

  7. bets10 giris より:

    Looking forward to reading more. Great post. Really looking forward to read more. Cool. Cesar Dorso

  8. There is visibly a lot to identify about this. I believe you made various nice points in features also. Kendrick Leebrick

  9. türkçe dublaj より:

    Hello. This post was really remarkable, particularly because I was investigating for thoughts on this matter last Friday. Lemuel Dolman

  10. watch series より:

    Remarkable! Its really remarkable article, I have got much clear idea regarding from this paragraph. Moshe Kercheval

  11. watch series より:

    I think his is among the most important information for me. Xavier Bischoff

  12. Only wanna remark on few general things, The website layout is perfect, the written content is rattling good : D. Clay Winingear

  13. bahis oyna より:

    I am truly pleased to glance at this weblog posts which carries lots of valuable information, thanks for providing these kinds of information. Ollie Metzner

  14. watch series より:

    This piece of writing will help the internet people for creating new website or even a weblog from start to end. Scottie Watral

  15. porno izle より:

    This is one awesome blog. Really thank you! Really Cool. Truman Calzada

  16. porno izle より:

    Here is an excellent Blog You might Discover Exciting that we encourage you to visit. Tuan Cruzan

  17. watch series より:

    Hi there, this weekend is pleasant in favor of me, because this occasion i am reading this impressive informative paragraph here at my house. Levi Ankrom

  18. watch series より:

    What are some excellent as well as prominent websites for blogs???. Kip Shouldice

  19. bahis より:

    Here is an excellent Weblog You might Locate Intriguing that we encourage you to visit. Prince Guidera

  20. erotik より:

    Some really superb info, Gladiolus I discovered this. Zackary Overbeek

  21. bets10 giris より:

    You have observed very interesting points! ps decent web site. Spencer Vanderstappen

  22. One of our visitors recently recommended the following website. Man Riemer

  23. watch series より:

    Helpful info. Lucky me I discovered your website accidentally, and I am surprised why this twist of fate did not took place earlier! I bookmarked it. Gino Franzeo

  24. Pretty! This has been an extremely wonderful article. Many thanks for supplying this info. Israel Galati

  25. sarışın より:

    Enjoyed looking through this, very good stuff, thanks . Ambrose Hilz

  26. xvideos より:

    Wonderful, what a web site it is! This web site provides valuable data to us, keep it up. Everett Perley

  27. porno より:

    Awesome! Its truly awesome article, I have got much clear idea on the topic of from this paragraph. Stevie Kain

  28. porno より:

    I enjoyed reading this. Thanks for writing this. Hit me up! After reading this I am scared I will never be the same person. Jermaine Mansbridge

  29. sex より:

    Hello. This post was really motivating, particularly because I was browsing for thoughts on this topic last Saturday. Elisha Reppert

  30. buy viagra より:

    Download a VPN that has everything you need like fast speed and a vast number of locations and servers. Brain Flank

  31. buy viagra より:

    Hi, this weekend is pleasant in support of me, because this moment i am reading this fantastic educational article here at my home. Danilo Degraff

  32. buy viagra より:

    Everything is very open with a clear explanation of the challenges. Theodore Debenedetti

  33. bahis より:

    Murabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Donovan Knoeppel

  34. buy viagra より:

    Only wanna remark on few general things, The website layout is perfect, the written content is rattling good : D. Josiah Clagg

  35. casino より:

    Software as a Website. Yes, it on his own PSN account. Darren Carza

  36. bahis より:

    Software as a Website. Yes, it on his own PSN account. Darren Carza

  37. sex より:

    Way cool! Some extremely valid points! I appreciate you penning this article and also the rest of the website is really good. Randall Nading

  38. casino より:

    If some one needs expert view regarding running a blog after that i propose him/her to visit this website, Keep up the fastidious job. Vito Novak

  39. watch series より:

    Thanks a lot for the blog. Much thanks again. Great. Russ Guilmain

  40. bets10 giris より:

    Hi there very cool blog!! Man .. Excellent .. Wonderful .. Keven Correa

  41. viagra より:

    Amazing! Its genuinely amazing paragraph, I have got much clear idea regarding from this piece of writing. Hugh Magouirk

  42. bahis siteleri より:

    Very neat blog article. Really looking forward to read more. Will Crellin

  43. king putin より:

    Good article! We are linking to this particularly great post on our website. Keep up the great writing. Sang Badgley

タイトルとURLをコピーしました