「PHPやHTML/CSSも分かったし、何か作ってみたいな。」
「WordPressでWebアプリがつくれるらしいけど、ちょっと不安。」
PHPやHTML/CSSなどのプログラミング学習の過程で、自分でも何かWebアプリを開発したい方に向けての記事です。
Webアプリ作成に不安を感じている方に安心してもらえるように、私の失敗談をふまえて話を進めていきます。
この記事では次のことについて書いています。
- WordPressでWebアプリを作成したときの失敗談
- WordPressでWebアプリを作成する方法
「偉そうに語るおまえは誰やねん。」と思われるので、私のことも少し紹介させてください。
たいらーのプロフィール
- 文系四大出身。ソフトウェア開発の経験はなしですが、ＩＴ業界に身を置いています。
- 開発者やユーザーとのパイプ役など、業務にプログラミングスキルを活かす。
- Pythonは独学で習得。スクレイピングや作業の自動化などに勤しんでいます。
実際、このブログに趣味である競馬関連のWebアプリを実装しました。
実装したWebアプリはこちらです。
WordPressでWebアプリをつくることは、比較的カンタンとされていますが、ちょっとした不注意であなたが大事にしているブログが駄目になる可能性があります。
そのことを頭に入れつつ、この記事を読んでWebアプリをつくってみてください。
１．WordPressでWebアプリを作成したときの失敗談【２つ】
まず、学びたての私が失敗したことを２つお話しします。
・「サイトに重大なエラーがありました。」と警告メッセージが表示
WordPressでWebアプリ開発する場合、テーマの編集をするのですが（方法は後述します。）コーディングをミスると、ファイルを更新後に「サイトに重大なエラーがありました。」と表示されまる。こうなると、にっちもさっちもいかなくなり血の気が引いたのを覚えています。
WordPressのテーマは、誰かが作った立派なプロダクトなわけで、我流でえいやっとプログラムいじってうまくいくはずはないので、事前に下調べが必須です。（反省）
結局どうしたかというと、WordPressに登録していた管理者メールアドレスにメール通知が来たので、それを頼りに再ログインし、コード修正＆ブログを復旧させました。
・テーマのアップデートで作業が台無しに
親テーマを編集していたときの話です。
やりたいことの実装を終え、サイトの挙動も問題なく過ごして数日後。親テーマをアップデートしたところ、実装したもろもろが消え去りました。
確認してみると、テーマ編集で追加したソースコードがすべてなくなっておりました。
んで、そのとき思い出しました。編集すべきは子テーマであると…。
案の定、子テーマを編集後は、親テーマをアップデートしても実装したWebアプリはそのまま機能しておりました。
以上から導き出される教訓は次の通りです。
教訓
- テーマは親テーマと子テーマがセットになっているものを選ぶ。（今は主流だと思いますが。）
- 編集は子テーマで。
- 作業前にバックアップを取っておく。
- コードチェック＆テストをしてから、本チャンに反映する。
- テーマを編集するときは、WordPressをデバッグモードにする。（終了後は戻す。）
※デバックモードの方法は以下が参考になるかと思います。
WordPress でのデバッグ
２．WordPressでWebアプリを作成する方法
ここからはWebアプリを作成方法について説明します。
以上の教訓を胸に作業してみてください。
・表示オプションの「スラッグ」を有効にする
[固定ページ]‐[新規追加]を選択し、画面上部の「表示オプション」を選択します。次のような表示が出てくるので、「スラッグ」にチェックを入れます。
コーディングするときに、この「スラッグ」が重要な役割を果たすので、必ずチェックするようにしましょう。
・固定ページを編集し、公開する。
固定ページのタイトルとスラッグを適切に設定してください。
今回は例として、スラッグに「sample」と設定します。
設定箇所はこれです↓
・functions.phpを編集する
[外観]‐[テーマエディター]を選択します。編集対象を子テーマに切り替え、「functions.php」を選んでください。
functions.phpにコードを記述します。
コードのテンプレートは以下のとおりです。コードの中身は、ご自身のやりたいことに置き換えて、functions.phpに記入してください。
/* コードのテンプレート */
function 関数名($content) {
if( is_page( 'sample' )) //固定ページで設定したスラッグ「sample」の時だけ処理する
{
//実装したい処理
}
else
{
return $content;
}
}
add_filter('the_content', '関数名'); //本文を取得
３．まとめ
以上、WordPressでWebアプリをつくる方法でした。
プロからしたら、あからさまに凡ミスかもしれませんが、初心者のときの自分ではなかなか気づけないものでした。
同じような目に合わないためにも、反面教師にしていただければと思います。
素人でも、これくらいのクオリティは出来るので、是非みなさんも挑戦してみてください。
ご清聴ありがとうございました。