【手順の解説】WordPress上に、PHPでウェブアプリを作成する

こんにちは、こむぎパパです。

「WordPress上にウェブアプリを作れないかな～」と考えていたところ、PHPで簡単に作れそうだったので挑戦してみました。

Qiitaの記事と同じ内容になります。
ご留意ください。

対象者
成果物の解説
開発環境
作成手順
まとめ

対象者

HTML・CSS・PHPの基礎を理解している人
WordPressがどのような仕組みで動いているのか、ざっくりと理解できている人
WordPressで、すでにブログを運営している人
WordPressを使って、ウェブアプリを作ってみたい人

なお、今回の記事を書くにあたり、こちらの本でPHPとWordPressの仕組みを勉強しました。

Amazonで探す

楽天で探す

「PHP以外の言語でコードを書きたい！」という人もいるかもしれませんが、WordPressがPHPをベースとして作成されているため、ある程度の技術が必要になります。
(私は技術力がないので、あきらめました。)

成果物の解説

成果物はこちらになります。

【アプリ】BMIを測定する簡易なウェブアプリ(PHP)

身長と体重を入力するとBMIが表示されるという、簡易なウェブアプリです。

また、新型コロナウィルスに感染者の中で、BMI30以上の感染者が相対的に多いので、BMI30以上の場合は警告文を表示しています。

開発環境

今回のウェブアプリは、以下の環境で作成しました。

WordPress 5.8.1
　Cocoon childのテーマを使用
ConoHa WING ベーシック(レンタルサーバー)

ConoHa WINGの詳細はこちら

作成手順

1.WordPressに記事を作成する

WordPress管理画面で、投稿 → 新規追加で、いつもと同様に記事を作成します。

記事の編集画面で、投稿の追加設定から、「URLスラッグ」を設定します。

また、SEOタイトル・記事カテゴリ・アイキャッチ画像を、任意で追加します。

コンテンツ編集画面(左上の枠)には、何も記載しなくてよいです。

また、問題ないかもしれませんが、アイキャッチ画像を設定した場合は、私はこちらのカスタムCSSを追加し、コンテンツ内でアイキャッチ画像が表示されないようにしています。

.eye-catch { display: none; }

2.サーバー内にphpファイルを作成する

ConoHa WINGにログインし、ファイルマネージャーをクリックします。

ファイルマネージャー内の「wp-content > themes > cocoon-child」のフォルダへ移動し、single-post-[URLスラッグ].phpというファイルを作成します。

URLスラッグは、手順1でwordpress上で設定したものです。

3.phpファイルにコードを書く

手順2で作成したファイルにコードを書きます。

今回のコードは次の通りです。
(慣れていないので、コードが汚い点はご了承ください。)

<?php if ( !defined( 'ABSPATH' ) ) exit;
if (!is_amp()) {
   get_header();
 } else {
   get_template_part('tmp/amp-header');
 }
?>

<!-- 入力フォーム -->
<h2>BMI計算アプリ</h2>
<p><br></p>
<form name="" method="post">
	<ul>
		<li>
			<p>身長(cm)</p>
			<input type="number" name="height" size="8" value="<?php echo $_POST["height"] ?>">	
			<p><br></p>
		</li>
		<li>
			<p>体重(kg)</p>
			<input type="number" name="weight" size="8" value="<?php echo $_POST["weight"]?>">
			<p><br></p>
		</li>
	</ul>
	<div class="wp-block-button has-custom-width wp-block-button__width-50 is-style-fill">
		<table>
			<tr>
				<input type="submit" name="cal_bottom" value="BMIを計算" style="border-radius:7px">
			</tr>
		</table>
	</div>
	<p><br></p>
</form>

<?php
if(isset($_POST["save"])){
    $height = htmlspecialchars($_POST["height"], ENT_QUOTES); 
    $weight = htmlspecialchars($_POST["weight"], ENT_QUOTES); 
}
				   
if ($_POST["height"] ==0){
	$BMI =0;
} else{
	$BMI = $_POST["weight"] / pow($_POST["height"]/100,2);
}
?>

<!-- 計算結果表示 -->
<h2>計算結果</h2>
<p></p>
<p>BMIは、<strong><?php echo round($BMI,2); ?></strong>です。<p>
<?php if ($BMI >= 30):?>
	<p><br>新型コロナウィルスに感染する確率が高いです。<p>
	<p>引用元：https://www.asahi.com/articles/ASP9876B9P98PTIL023.html</p>
<?php endif; ?>
<p><br></p>
<p>このウェブアプリの作成方法は、<a href="https://corgi-komugi.com/php-test-howto/">こちら</a>から確認できます。
</p>
<p><br></p>

<?php get_footer(); ?>