デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

WordPressでかんたんWebアプリを作る方法

こんにちは、koheiです。
先日、別のサイトでWordPress上に簡単Webアプリを作って公開しました。
簡易財務分析ツール

実は、WordPressというシステムは、少しPHPなどを勉強すれば簡易的な計算アプリぐらいなら作れちゃいます。
そこで今回は、WordPress上で簡単計算アプリを作る方法を紹介します。

今回の例では、以下のような平均点を出す超簡単アプリを作成してみましょう。
サンプル計算アプリ

スポンサーリンク

1.Webアプリ用の固定ページを追加

まずは、Webアプリ用の固定ページを作成します。
WordPress管理画面の「固定ページ」から「新規作成」をクリックします。
Webアプリのタイトルを入力し、スラッグを入力します。(スラッグの入力欄が無い時は、WordPress画面の上部に表示オプションがありますので、スラッグにチェックが入っているか確認してください。)
スラッグは、この後のfunctions.phpの編集で使いますので必ず設定しておいてください。
※今回は、スラッグは、「sample_cal」と入力しています。

タイトルとスラッグを入力したら、公開を押します。
ページの内容は、functions.php上に書くので、ここでは未記入でOKです。

2.functions.phpにコードを追加

計算アプリの概要

次に、functions.phpに計算処理や、入力フォームのコードを入力していきます。
その前に、今回作る計算アプリの簡単な概要を説明します。
以下の図のように、まずはWebクライアント上で、各教科の点数を入力します。入力したものをPOSTメソッドというものを使って、Webサーバー上へ渡します。
Webサーバー上で平均点を計算したら、計算結果のHTMLをWebクライアントに返すという流れです。

コード

functions.phpに以下のコードをコピペしてください。

コード解説

コードは大きく分けて、計算処理、入力フォーム、計算結果表示と3つに分類できます。
ちなみに、3行目の処理で、固定ページ「sample_cal」の時だけ、計算処理や入力フォームが処理されるようにしています。(ここで、手順1で入力したスラッグを使っています。)

入力フォーム(11〜26行目)

・formタグでpostメソッドを指定し、入力した数値をWebサーバーへ渡しています。(12行目)
・各教科の点数を入力させるため、inputタグで入力ボックスを作っています。(14〜21行目)
・計算ボタンの処理です。(24行目)

計算処理(6〜9行目)

ここで、POSTメソッドで通知された値から平均点を計算しています。
POSTメソッドで値を取得するには、$_POST[“name”]と記載します。
nameは、inputタグで指定された各教科のnameになります。(ca_1,ca_2,ca_3,ca_4)

計算結果表示(27〜29行目)

計算処理で、$avarage_dataに計算した結果が格納されていますので、その値を表示させています。(29行目)

最後に

いかがでしたか?
今回はすごく簡単なアプリでしたが、POSTメソッドの使い方や、PHPのコードを勉強すれば、もう少し複雑なアプリも作れると思います。
WordPressでブログを書くだけじゃなく、色んなWebアプリが作れるようになれば可能性が広がっていきますね。
みなさんもぜひ、WordPress上でWebアプリ作成にチャレンジしてみてください!
それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン