【Webデザイン】卒業制作記録（3/3）独学でWordPress実装してみた編
こんにちは！小林です。卒制記録の記事は今回で最後になります。
前回と前々回で事前準備～コーディングまでの記録を残しておりました。
今回は【WordPress実装】についてです。WordPressを実装するまでの私の状況としては…
・卒制にはWordPress実装までするのは義務ではないが、機能的に必要になった
・HTML/CSSはスクールで習ったけど、WordPressは独学でやるつもりだった
といった感じです。TwitterでWordPressは独学でやられてる方も結構いたので、いけるでしょ！と思っていた私の備忘録になります。果たして独学でWordPressは実装できるのか、同じお悩みを持った方に届けばうれしいです！どうぞよろしくお願いします。
01-独学でWordpress実装できる？
前述してますが私はデジLIGでHTML/CSSに関してはスクールでみっちり勉強しています。勉強しはじめの時はWordPressのこともよくわかっておらず、なんとな～く、色々とサイトを更新するときに便利くらいにとらえていました。
WordPress実装までの流れはこうです。
WordPress独学用に本を購入
↓
4月下旬に卒制以外のスクール課題はすべて終わっていたので5月の連休中で軽く勉強する（1冊一通りやってみる）
↓
卒制前にWordPress実装まで必要だな、と気づき必要そうなところを再度復習する
↓
卒制コーディング完了後に２週間（10日）かけてWordPress実装を完了
なので、少しずつではありますが、思ったより長い時間かけて勉強してますね。日数に直すと10日勉強で実務に10日って感じですね。
最初に購入した本はこちら！DMMの70%OFFセールの時に購入してました。Twitter内でもよくおすすめされてましたね。
結果から言うと私がやりたいことの7割はこの本だけで実装できました！（残りの3割はネットで調べました）ですが、同スクールの「WordPress講座」もとれば良かったと何度も思いました！笑
簡単ではなかったですし、独学勉強に10日かかっているのが長いか短いか分からないので…。
実務（実装）をやってみないことには本当の意味では理解してなかった、というのもつくづく感じました。
このnoteも同じデジLIG生向けに書いてますが、そうではないHTML/CSSがよく分からないけどWordpress使ってみたい！って人はこの本ではなくYouTubeの動画とかの方が勉強になると思います。
2時間ほどありますがめちゃめちゃ丁寧に解説されてます。
（私の場合は先にHTML/CSSであらかた作っていたので本で必要な個所だけ実装していく、という方が合っていました）
02-WordPressってすごい！どこを実装したか
正直ちゃんと読めばさっき紹介した本で十分わかるかと思います！一回実践して思ったのは「次回からWordPress実装までするサイトを作るときはテンプレートを意識して作ろう」です…笑
class名をTOPや下層ページで同じものを使っていてもう大変でした笑
私が作ったサイトでWordPressが直で必要になったのは
・クライアント側が更新するブログ
・お問い合わせ
・レッスンの申込みページ（カレンダー表示）
の３つです。WordPressでテーマ化する必要のないページもあったのですが、トレーナーから全部テーマ化した方がいいと教えてもらったので最終的に全ページテーマ化しました。
ブログ・お問い合わせに関しては購入した本で十分でした。また、グローバルナビゲーションとパンくずリストもWordPressを使っています。これも書籍参照です。
03-１週間かかったレッスンページの実装化
Wordpressの実装は10日かかりましたがその半分はこの「Lesson申込みページ」です。正直一番書きたいのがこの部分でしたが、関係ないよ！って方は読み飛ばしてください…完全に私のデザインの場合はこう作った！という感じなので汎用性は微妙です。
なぜ時間がかかったかとというと本にないから！
私のデザインしたレッスンページはTOP、Lessonページにも一覧があり、さらに詳細ページに飛んで、そこからユーザーが申し込むというつくりになっていました。オンラインイベント用のプラグイン検証を自分でしました。
検証一覧
Amelia
〇そのままでつかえるUI 設定も簡単
×画像挿入は有料 ×CSSカスタマイズの限界がある
Events Manager
〇求めているものに一番近い
×予約フォームコメントのみ フォーム追加は有料になる
申込者が会員登録すればメールも登録できそうだがその場合は別のプラグインが必要…
OLBsystem
×申し込み時に会員登録が必須？
MTS Simple Booking C
〇 メインドインジャパン
× 一覧がカレンダー表示しかない
と……どれも惜しい…！！！いえ、有料であればできるんですけどちょっと意地でも無料で作りたく苦労しました…、むしろブログをもう１個つくって申込み画面に推移させる？とかも考えたのですがブログでのtime要素は時間を変更できないためレッスンを開催の時系列に並べることが出来ずで断念…できればデザインも変更したくなかったので
Events ManagerとMW WP Formを組み合わせることにしました！
（MW WP Form…お問い合わせフォームでも使ったプログイン）
簡単に言うとイベントの詳細はEventsManagerで入力して、
詳細ページにMWWPFormが必ず表示されるように作成しました。
このままだと申し込む側の情報がくるだけで「何のレッスンに申込みがきたか分からない」ので
詳細ページの情報とMW WPFormの情報を統一させるために
詳細ページのタイトル（つまりURL）を{post_title}として追加しました。
MW WPForm / フォーム編集画面
<div class="lessoninquiry-form">
[mwform_hidden name="post_title" value="{post_title}" echo="true"]に申し込む
<p><label for="form_name">お名前</label>
[mwform_text name="fullname" id="fullname" class="fullname" placeholder="入力してください"]</p>
<p><label for="form_email">メールアドレス</label>
[mwform_email name="email" id="email" class="email" placeholder="入力してください"]</p>
[mwform_submit name="send" class="lessoninquiry-form__submit btnmore" value="申し込む"]
</div>これでそのページのURL（レッスンタイトル）を取得できるので、
MW WPForm側の申込み側と管理者側に届くメールにも{post_title}を表示することができるようになりました。
MW WPForm / フォーム編集画面
Events ManagerとMW WP Formの実装についてはそれぞれ以下のブログを参考にさせていただきましたm(__)m
Events Manager
MW WP Form
商品がたくさんあって、その商品のものを問い合わせる！とかにも使えるなと思いました。現在クライアントさんとそのままBASEの購入画面に推移する方向にするかも…という話も出ているので、この機能は残念ながら使わなくなる可能性がありますが、自分的に応用が出来たので本当にいい機会でした！工夫していくうちによりWordpressへの理解も進みました(^^)
04-動画作成 更新方法用
現在本チャンのサーバーにはあげずにちょこちょこ修正しています。
本当に使えるか、までがゴールだと思っているので「クライアントさんでもブログ・レッスン詳細を更新できるか」判断してもらうために
投稿方法の動画も作成しました。（それぞれ３分くらい。）
画面キャプチャして切り貼り…字幕挿入…くらいのものですが
いまはまだ私のポートフォリオサイト配下にあるので、作ってはいませんが本稼働がはじまったら一枚もののマニュアルも作成する予定です。
05-まとめ
冒頭で結論を言ってましたが、独学でWordpress実装はできます。ただ、私も実装するまでは、7月あたま位から出来るか漠然と不安でしたし思ったより時間がかかりました。とにかく正攻法で勉強がしたい方なら講座をとるべきでしょうし、独学でお金をかけずにやりたくて時間的な余裕があれば本一冊購入で問題ないかと思います。
Wordpress講座をとったよ！って方のお話もきいてみたいですね！
元々私は最初に決めたコースの６カ月はみっちり勉強！あとは即就活！というスケジュールを頭にいれてたので、追加コースを受けるのは時間的に延びそうだったので避けていたのですが…5-6月は自主製作の日々にやっとけば良かった～という感じです。完全に結果論ですが…笑
試行錯誤して実装していくのは楽しかったので良い経験になりました(^^)
また、同じクライアントさんからもう一つサービスが違うページの追加を依頼していただきました！それがゴリゴリのブランディングサイトっぽい感じになるので制作が今からめちゃめちゃ楽しみなんですが…内容的にもWordpress必須の案件だったので、出来ます！と即答できるようになったのがとても嬉しいですね。時間はかかったけど勉強をして良かったです^^
ここまでお読みいただきありがとうございました！
次回は就活成功したら就活のことを書こうかと思います！笑
━━━━━━━━━━
ツイッター @okomeohanausagi
ポートフォリオサイト https://kobayashimarika.jp/
━━━━━━━━━━