WordPressの固定ページに計算フォームをプラグイン無しで設置したい

2021年2月28日2023年2月13日

運用しているサイトで味噌を作るときの各材料の計算フォームを設置しています。

これまでは、jQueryを使ってWordPressの外のディレクトリに設置していたのですが、何かと不便。
で、勉強も兼ねてfanction.phpに計算プログラムを書いて固定ページに表示させることにしました。

しかし、検索するとプラグインを使ってのものばかり。
そんなに難しいことでもないので勉強も兼ねてやってみました。

まず、近いようなことをやっているサイトを見つけたので、参考に書いたのがこれ。

<?php
/* 味噌計算アプリ */
function miso_amount_calc($content) {
  if( is_page( 'amount_of_miso' ))  //固定ページ「amount_of_miso」の時だけ処理させる
  {
    /* PHPで計算処理を組み込む */
    if( $_POST['cal_bottom'] == '計算')
    {
      $misoVolume =  $_POST["miso_volume"];

      $kouji = (0.6 * ($misoVolume * 10) / 10);
      $soi = (0.4 * ($misoVolume * 10) / 10);
      $drysoi = (0.2 * ($misoVolume * 10) / 10);
      $awaseNijiru = (100 * $misoVolume);
      $awaseSolt = (124 * $misoVolume);
    }
  ?>  
  <!-- 入力フォーム -->
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <h1>味噌分量計算表</h1>
        <p>作りたい味噌の量を入力して［計算］ボタンを押してください。</p>
        <form name="miso_form" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
          <div class="form-group form-inline">
            <lavel>作りたい味噌量：</lavel>
            <input type="tel" name="miso_volume" id="input_area" class="form-control col-2" maxlength="3" /> Kg
          </div>
            <button type="submit" name="cal_bottom" class="btn btn-secondary btn-block col-2 form-control" value="計算">計算</button>
        </form>

        <!-- 計算結果表示 -->
        <h3>合わせ味噌</h3>
        <table class="table table-bordered table-striped miso-amount">
          <tbody>
            <tr>
              <th><lavel>麹量：</lavel></th>
              <td><?php echo $kouji ?> Kg</td>
            </tr>
            <tr>
              <th><lavel>煮大豆：</lavel></th>
              <td><?php echo $soi ?> Kg</td>
            </tr>
            <tr>
              <th><lavel>乾燥大豆：</lavel></th>
              <td><?php echo $drysoi ?> Kg</td>
            </tr>
            <tr>
              <th><lavel>煮汁：</lavel></th>
              <td><?php echo $awaseNijiru ?> cc</td>
            <tr>
            <tr>
              <th><lavel>塩：</lavel></th>
              <td><?php echo $awaseSolt ?> g</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div><!-- /.row --> 
  </div>
  
  <?php
  }
  else
  {
    return $content;
  }
}
add_filter('the_content', 'miso_amount_calc');
?>

とりあえずローカル開発環境では設定した固定ページに表示はされました。
すっごく嬉しくってサーバーにアップしたら、
「重大なエラーが発生しました」
とでるのであれこれ調べてみると、最初は全然わからなかったフィルターフックのあたりが徐々に理解できるようになってきました。
しかし、どうすれば表示させられるのかまでは分からなかったので、初のteratailに質問をしてみました。

すると返ってきた答えが、

the_contentフィルタは記事の内容の”文字列”を加工して返すためのフィルタです。フィルタフックで”出力”をするという使い方は間違いです。”出力”を”文字列”にくっつけて返したいならば出力バッファを活用しましょう

というものでした。

そっか！フィルターフックで出力ではなく、フォーム部分をショートコードで出力すればいいのではないかな？と思って、またググりながら何とかかんとかしてできたのが、これです。

<?php
add_shortcode( 'miso_amount', 'miso_amount_calc' );
/* 味噌計算アプリ */
function miso_amount_calc() {
  /* PHPで計算処理を組み込む */
  if ( $_POST[ 'cal_bottom' ] == '計算' ) {
    $misoVolume = $_POST[ "miso_volume" ];

    $kouji = ( 0.6 * ( $misoVolume * 10 ) / 10 );
    $soi = ( 0.4 * ( $misoVolume * 10 ) / 10 );
    $drysoi = ( 0.2 * ( $misoVolume * 10 ) / 10 );
    $awaseNijiru = ( 100 * $misoVolume );
    $awaseSolt = ( 124 * $misoVolume );
  }
  ob_start();
  ?>
<!-- 入力フォーム -->
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <h1>味噌分量計算表</h1>
      <p>作りたい味噌の量を入力して［計算］ボタンを押してください。</p>
      <form name="miso_form" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
        <div class="form-group form-inline">
          <lavel>作りたい味噌量：</lavel>
          <input type="tel" name="miso_volume" id="input_area" class="form-control col-2" maxlength="3" />
          Kg </div>
        <button type="submit" name="cal_bottom" class="btn btn-secondary btn-block col-2 form-control" value="計算">計算</button>
      </form>
      
      <!-- 計算結果表示 -->
      <h3>合わせ味噌</h3>
      <table class="table table-bordered table-striped miso-amount">
        <tbody>
          <tr>
            <th><lavel>麹量：</lavel></th>
            <td><?php echo $kouji ?> Kg</td>
          </tr>
          <tr>
            <th><lavel>煮大豆：</lavel></th>
            <td><?php echo $soi ?> Kg</td>
          </tr>
          <tr>
            <th><lavel>乾燥大豆：</lavel></th>
            <td><?php echo $drysoi ?> Kg</td>
          </tr>
          <tr>
            <th><lavel>煮汁：</lavel></th>
            <td><?php echo $awaseNijiru ?> cc</td>
          <tr>
          <tr>
            <th><lavel>塩：</lavel></th>
            <td><?php echo $awaseSolt ?> g</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- /.row --> 
</div>
<?php
$str = ob_get_clean();

return $str;
}

固定ページにショートコードを貼り付けてみると、見事成功！
実際に動いたときは感動モノでした。
本当はjavascriptの方が速いでしょうから次回はjQueryで動くやつを作ろうと思います。

作ったサイト