自由自在!WordPress上級

カスタムフィールドとContact Form7の応用

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
カスタムフィールドとContact Form7を使って、状態に応じて申し込みフォームの表示を切り替える方法を解説します。
講師:
13:20

字幕

このレッスンでは カスタムフィールドと Contact Form 7 を使った 応用について学習します それではイベントのリストに対して そのイベントの 状態に合わせて 申込が可能であれば 申込ボタンを 満員であれば満員を 既に終了したイベントであれば 終了の旨を 伝える様にしてみましょう エディターに移動します event.php に コードを記述していきます 本文の下に追加していきます それぞれのイベントの状態は この status という 変数に入っていますので ステータスの値に応じて 表示する内容を変えて行けば良さそうです 条件分岐になりますので if 文を使っても良いのですが ここでは php の status という 構文を使っていきたいと思います switch を使うと パラメータとして渡した値の 内容に応じて表示する内容を 書き加えて行く事ができます ステータスの内容が end event だった時は という具合に書いていきます この場合には このイベントは終了しましたと 表示をします そして break をケースの終わりには 必ず break を書きます それから満員だった時 この時には 満員です と 表示します そして最後に 申込が可能な場合 この場合には 申込フォームへのリンクを表示します 申込フォーム画面ですが 管理画面に一度移動します このサイトでは 固定ページとして イベントの申込ページを作成しています このイベントへの申込ページは ページスラッグを entry という風にしています そして 本文部分ですが Contact Form 7という メール送信フォームのプラグインを使って 表示しています プラグインが入っていない場合には 新規追加から Contact Form 7 で 検索をして下さい インストールをして Contact Form 7 を 有効化しておきます そうしますとContact Form 7 の お問い合わせというメニューが 追加されますので ここからお問い合わせメニューを 作成する事ができます 自分で作成した お問い合わせフォームは ここに書いてあるコードをコピーして 固定ページの本文欄に入力する事で そのフォームを表示する事ができます ですので この固定ページへのリンクを書いておきます そして申込フォームにも どのイベントに申込んだのか という事が分かる様に イベント名と開催日時を 表示する様にしたいと思います 固定ページに どのイベントに申込んだのかを 渡すためにはどうしたら良いのかというと URL に パラメータを渡すという方法が 一つ考えられます event_id というパラメータに対して この投稿の id を渡して そしてどのイベントなのか という情報を渡したいと思います id を渡す訳ですので 使うタグは the_ID になります これで申し込むというリンクを作成します はい 書けました 保存をして 表示を確認してみます 詳細を開くと 満員のイベントには満員 申込ができるイベントには申込む 過去のイベントは終了しました と出る様になりました それでは実際に 申込むをクリックした時の申込画面の方を 作成していきたいと思います 基本的なフォーム等は今 表示できていますが まだどの申込どのイベントに申込むのか という情報が表示されていません この申込フォームから 送信するとメールが送られるのですが そのメールにも 当然どのイベントに申込んだのかが分からないと 意味がありませんので 申込のメールにも イベント名等を 記述する様にしたいと思います 今先ほど書いた event_id, the_id がちゃんと動作して その投稿の id が渡るようになっています 別のイベントに申込めば ちゃんと別の id が渡される様になっています それではこの id を元に 申込ページに イベントの情報を 表示していきたいと思います page.php を編集します 今まだ最低限のコードしか書いてありません 最初に URL に渡されたパラメータを php で取得して 画面にその情報を表示する様に したいと思います 先ず URL のパラメータを何とかして 取得しなければいけませんが この URL のパラメータというのは php の get で取得する事ができます パラメータ名を 括弧の中に書きます event_id これでパラメータを取得する事ができます id が取得できればある id の 投稿データを取得するために必要な テンプレートタグは query posts である事が分かります query posts の p というパラメータに id を指定してあげれば その id の投稿を取得する事ができます query posts を書いて id が取得できてしまえば 後はメッセージループで 必要な情報を取得するだけです ここでは一件しか 投稿が取得されません 必ず一件の投稿を取得する事が 分かっていますので メッセージループの中にある while (have_posts()) という部分は 実は省略する事ができます 複数ある場合に while (have_posts()) を使いますが 一件しか 取得しない場合には while (have_posts()) は省略しても構いません 必要なのはイベント名 それからイベントの開催日になりますので event という配列を作って その中にタイトルと 日付を入れていきたいと思います タイトルですが the_title ではなくて get_the_title になりますので注意して下さい the_tile と書いてしまうと タイトルが画面に表示されてしまいます ここではあくまでも event という配列に 入れたいので get_the_tile とします そして日付ですが 日付けは date を使って 表示をします date に パラメータとして 開催日を与えます カスタムフィールドですので get_post_meta を使って 開催日を取得します これでイベント名と日付が それぞれ変数に入りました end_if を書いて query posts を使いましたので wp_reset_query も忘れずに書いておきます こうですね 取得ができましたので実際に この情報を表示する様にしてみたいと思います h2 タグでイベント名を表示します echo を使って表示します それから div タグに 日付を表示する様にします これで OK ですね 忘れずにしておかなければいけない事が 一つあります 今 id を渡して イベント情報を取得する訳ですが この id は URL で書いていますので 適当な URL を入れたりする事が できてしまいます 適当な URL を入れた場合にはですね id がその id の投稿を 取得する事ができませんので イベント名がちゃんと 入っているかどうかを調べて イベント名が入っていれば この申込フォームを 表示する様にしたいと思います そしてイベント名が入っていない場合には else を使って イベントが選択されていません と この様に書きます 今回はサンプルですので シンプルにしていますが 実際にはこれでもまだ不十分なんですね event id を入れてこのページを 表示できてしまいますので 既に満員になっているイベント 或いは終了しているイベントにも 今このままだと イベントの申込フォームが表示されてしまいます ですので同じように そのイベントの状態を調べて ちゃんと申込可能なイベントか どうかも含めて条件分岐を 記述する必要があります ただ今回は分かり易く その部分は省略しています それではページをリロードしてみましょう イベントの申込画面を表示してみます event id に基づいてイベント名と日付が ちゃんと表示されました このレッスンでは カスタムフィールドと Contact Form 7 の連携について 学習しました

自由自在!WordPress上級

このコースではWordPressを利用したさまざまな種類のサイトを構築しながら、より実践的なテクニックを解説します。コースの前半はカスタムフィールド機能などについて説明しながら、後半では自由度の高いサイト構築が可能になるマルチサイトについても学習します。

3時間17分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 2,990
発売日:2014年03月05日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。