Wordpressでfunction.phpに入力フォームと計算式を作って固定ページに表示させたい

Question

前提・実現したいこと

wordpressでfunction.phpに計算式を作り固定ページに表示させたい。

発生している問題・エラーメッセージ

ローカル開発環境で試したところ固定ページに表示されたのですが、
本サーバーにアップすると何も表示されません。

該当のソースコード

子テーマのfunction.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

<?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 ?>&nbsp;Kg</td>
            </tr>
            <tr>
              <th><lavel>煮大豆：</lavel></th>
              <td><?php echo $soi ?>&nbsp;Kg</td>
            </tr>
            <tr>
              <th><lavel>乾燥大豆：</lavel></th>
              <td><?php echo $drysoi ?>&nbsp;Kg</td>
            </tr>
            <tr>
              <th><lavel>煮汁：</lavel></th>
              <td><?php echo $awaseNijiru ?>&nbsp;cc</td>
            <tr>
            <tr>
              <th><lavel>塩：</lavel></th>
              <td><?php echo $awaseSolt ?>&nbsp;g</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div><!-- /.row --> 
  </div>
  
  <?php
  } else {
    return $content;
  }
}
add_filter('the_content', 'miso_amount_calc');
?>

固定ページのスラッグを
amount_of_miso
にしました。

試したこと

使用しているテーマ(Lightning)の標準の子テーマでは、
エラーが発生したので、WordPressの子テーマで使用するfunction.phpを使うと表示できました。
その他のphpのプログラムは調べながらネットで見たコードを修正しました。

補足情報（FW/ツールのバージョンなど）

ローカル開発環境
Windows10 pro
MAMP 4.2.0.23973
PHP 7.4.1
Wordpress 5.6.1-ja

本サーバー
ロリポップ　スタンダードプラン
PHP 7.4モジュール版
Wordpress 5.6.1-ja

WordpressのテーマはLightningの子テーマ
子テーマのfunction.phpは、
Lightningの標準のものではローカルでエラーが出たので、
WordPressの子テーマを作る時に使用するものを使ってローカルでは表示することが出来ました。

Answer 1

表示されないのは、フィルターフックの中で return でコンテンツを返していないからではないでしょうか。

フォーム部分を return で返すように変更するとどうなりますか？

Comments

[tegeken]

ありがとうございます。
フォーム部分をリターンで返すとは

<?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);
}
return $content; //←これ
?>

という意味でしょうか？
これを試してみましたが何も表示されませんでした。
間違っていたら教えていただけると助かります。
よろしくお願いします。

[KazuhiroHatano]

the_contentフィルタは記事の内容の"文字列"を加工して返すためのフィルタです
フィルタフックで"出力"をするという使い方は間違いです

"出力"を"文字列"にくっつけて返したいならば出力バッファを活用しましょう

https://www.php.net/manual/ja/function.ob-get-clean.php

[tegeken]

ご指摘ありがとうございます
リンク先を参考に修正してみます

Answer 2

自力解決しました。

フィルターフックについて調べていくうちに、
ひょっとしたら指定した固定ページの編集部分に、
なにか入力値がないといけないんじゃないかと思い、
適当な文字列を入力して更新すると思った結果になりました。

皆さんからのアドバイスでフィルターフックについて理解が進みました。
ありがとうございました。

Answer 3

一度解決したと書きましたが、
やはり解決していませんでした。
KazuhiroHatanoさんのご指摘通りthe_contentを使った、
フィルターフックではダメでした。

出力バッファを使い
下記のようにadd_shortcodeを使って固定ページに出力しました。
今回の件で、
関数で計算させてショートコードで表示させるフローの理解が進みました。
ありがとうございました。
今後とも宜しくお願いします。

<?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 ?>&nbsp;Kg</td>
          </tr>
          <tr>
            <th><lavel>煮大豆：</lavel></th>
            <td><?php echo $soi ?>&nbsp;Kg</td>
          </tr>
          <tr>
            <th><lavel>乾燥大豆：</lavel></th>
            <td><?php echo $drysoi ?>&nbsp;Kg</td>
          </tr>
          <tr>
            <th><lavel>煮汁：</lavel></th>
            <td><?php echo $awaseNijiru ?>&nbsp;cc</td>
          <tr>
          <tr>
            <th><lavel>塩：</lavel></th>
            <td><?php echo $awaseSolt ?>&nbsp;g</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- /.row --> 
</div>
<?php
$str = ob_get_clean();

return $str;
}