「礼」の~IT人材を目指して~
作成：2025/06/07
更新：ーーーーーー
はじめに
現在、WordPressでWEBサイト構築の勉強をしています。
このサイト自体をWordPressで作成し、勉強の実験台にしています。
そして、勉強の進捗があればその都度、このサイトで、報告しているところです。
これまでの経緯と課題
以前、WordPressをカスタマイズするためにiframeタグでWordPress記事にPHPコードを埋め込んでみました。（→関連記事）
このときは、文字の表示だけでしたが、何か少し動きのあるものを表示してみたいと思います。
今回実施すること
そこで、今回は、inputに対して回答するプログラムをPHPで作って、iframeタグでWordPress記事に埋め込んでみます。
PHPでプログラム
PCくんと健康会話をするプログラムをつくってみました。
動作説明と、コードは次のとおりです。ファイル名は「test002.php」にしておきました。
■コード■
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!-- //ファイル名// test002.php // 機能 // PCくんと健康会話 // 動作説明 // 自分（＝プレイヤー）とPCくん（＝パソコン）の 健康状態を比較してPCくんがコメントをしてくれる プログラムです。 健康状態は、次の３つ 良好！ 普通。 最悪。。 この３つの健康状態から１つ選択して 「回答」ボタンをクリックすると PCくんの健康状態と比較して 回答してくれます。 // 作成日 // ２０２５年６月８日 --> <?php // 健康状態を配列に代入 $conditions = ['良好', '普通', '最悪']; // プレイヤーの健康状態がPOSTされたら if (isset($_POST['condition'])) { // プレイヤーの健康状態を代入 $playercondition = $_POST['condition']; // PCの健康状態をランダムで選択 $key = array_rand($conditions); $pccondition = $conditions[$key]; // 返事の内容を判定 if ($playercondition == $pccondition) { $result ='一緒だね'; } elseif ($playercondition == '良好' && $pccondition == '普通') { $result = 'いいね'; } elseif ($playercondition == '良好' && $pccondition == '最悪') { $result = '元気分けてくれる？'; } elseif ($playercondition == '普通' && $pccondition == '良好') { $result = '元気出していこう'; } elseif ($playercondition == '普通' && $pccondition == '最悪') { $result = '頑張ろうね'; } elseif ($playercondition == '最悪' && $pccondition == '良好') { $result = '元気分けてあげる'; } elseif ($playercondition == '最悪' && $pccondition == '普通') { $result = 'ゆっくり休もう'; } else { $result = '？'; } } ?> <!DOCTYPE html> <html lang="ja"> <head> <title>体調</title> </head> <body> <h1>今日の体調は？</h1> <?php if($_SERVER['REQUEST_METHOD'] === 'POST'){ ?> <dl> <dt>自分の体調：<?php echo $playercondition; ?> </dt> <dt>PCくんの体調：<?php echo $pccondition; ?></dt> <dt>PCくんの回答：<?php echo $result; ?></dt> </dl> <?php } ?> <form method="post"> <label> 良好！ <input type="radio" name="condition" value="良好" required ></label> <label> 普通。 <input type="radio" name="condition" value="普通" required ></label> <label> 最悪。。 <input type="radio" name="condition" value="最悪" required ></label> <input style="display:block;" type="submit" value="回答"> </form> </div> </body> </html> |
■解説等■
- isset は、値が NULL ではない場合に true を返す関数です。
- POSTで送信したデータを取得するには、スーパーグローバル変数である$_POSTを使用します。スーパーグローバル変数は、定義済み変数でプログラムコード中何処からでも使用可能な変数のことです。
- array_randは、配列から一つ以上のキーをランダムに取得する。配列の値ではなく配列のキーを返すので注意
- $_SERVER[‘REQUEST_METHOD’]は、ページにアクセスする際に使用されたリクエストのメソッド名を取得。
サーバーにアップロード
次に、準備したPHPファイル「test002.php」をサーバーにアップロードします。
アップロード先は、「public_html」です。
私の環境では、「/public_html/newrongo55.hopto.org」内に「test002.php」をアップロードしました。
iframeタグで記事に埋め込む
最後に、iframeタグで、「test002.php」を読み込む処理を記事内に記述します。
■コード■
|
1 2 3 |
<iframe frameborder="0" width="900" height="300" allow="fullscreen" src="http://newrongo55.hopto.org/test002.php"></iframe> |
普通にiFrameタグのみの場合、サイズが合わないので、iFrameのパラメータでカスタマイズします。
- 幅（width）：このパラメーターを使用すると、iFrameの幅をピクセル単位で設定できます。
- 高さ（height）：幅パラメーターと同様に、高さはウェブページ上のiFrameウィンドウのサイズをピクセル単位で設定します。
- 許可（allow）：このパラメータを使用すると、全画面表示など、iFrameの特定のデフォルト機能を設定できます。
結果
この記事にiFrameタグで埋め込むと、このように表示されました。↓
さいごに
今回は、inputに対して回答するプログラムをPHPで作って、iframeタグでWordPress記事に埋め込んでみました。
これからWordPressでWEBサイトを立ち上げる方の参考になれば嬉しいです。
参考
コメント