【コラム】ワードプレスに応援メッセージ送信機能を持たせよう!

まず最初に。
まこはパソコン・インターネット共に初心者です。
Windows95から使い続けてはいますが、本当に初心者の域を出ません。
ので、間違ったことを書くかもしれません。
この記事に書いてあることを実行し、データなどに被害が出ても、当方は責任を取れません。
以上のことを了解できる方のみ、記事内容をどうぞ。

+*+*+*+*+*+*+*+*+*+*+


今回は、WEB拍手モドキを作れる方法を、備忘録として書き記していこうと思います。
とはいっても、場所を取るので、記事の最後にいちいち出すとウザがられると思います。適度にやろうね!
今回の記事では、実際に作ったものをこのページにも設置しておきます。実際に動作しますので、まこへのラブレターに使ってあげてくださいね。

さて、ここで使うのは、超有名なプラグイン『Contact Form 7』!
入れ方は簡単ですが、分からない方はここら辺参考にしてさくっと入れてしまいましょう。

プラグインを入れましたら、

画面左側にできた『お問い合わせ』→『新規追加』。
分かりやすい名前をつけましょう。日本語も使えます。
まこは『応援フォーム』と名前を付けました。単純明快。


編集画面はこんな感じ。
フォームはHTMLとショートコードで記述します。
このプラグインで使うショートコードはボタン式で挿入できますので、あまり迷うことはないかもしれません。

今回重要なのはこれ。

『チェックボックス』。
これを使ってやっていきます。

このボタンを押しますと、こんな感じの画面が出てきます。


ので、『必須項目』にチェックを入れましょう。

書き方ですが、
チェック項目にしたい項目を『オプション』に一行ずつ入れていく感じです。
具体的には、こう。


こんな感じにどんどん入れていきます。
チェックが入ったら嬉しい項目をバンバン書いていきましょう。
終わったら、『タグを挿入』ボタンをクリック。ショートコードが挿入されます。間違えて消さないように注意してくださいね。

メールフォーム全体ですが、私はこんな感じで書いています。


『キミヨル。』では応援のメッセージを募集中です。
クリックだけで送れますので、よろしければご協力ください!


以下から選択ください(複数選択可)
    [checkbox* checkbox-〇〇〇 use_label_element "こみらび見たよ!" "ブルプリ見たよ!" "こねのら見たよ!" "ぐわっちょ見たよ!" "他の作品見たよ!" "ブログ見たよ!" "コラム見たよ!" "まこらむ見たよ!" "SPコンテンツ見たよ!" "イベント情報見たよ!" "ゲームで遊んだよ!" "CW関連DLしたよ!" "シナリオ遊んだよ!" "CW素材使ったよ!" "お土産DLしたよ!" "燃えたよ!" "萌えたよ!" "面白かったよ!" "続き楽しみ!" "他の記事も楽しみ!" "同人誌楽しみ!" "好きだぜ!" "応援してるよ!" "ついったも見てるよ!"]



他にも滾るメッセージがございましたらどうぞ!
    [textarea your-message] 


最後に、差し支えなければ以下をお教えください。

お名前 
    [text your-name akismet:author]


メールアドレス 
    [email your-email akismet:author_email] 


[submit "送信"]

名前やメールアドレス、メッセージボックスもボタン式です。ポップアップが出てきたらそのまま『タグを挿入』しましょう。
私は海外の荒らし対策として『akismet』を導入していますがここではこれ以上言及しません。詳しくはこららのいずれかの記事を。

さて、フォームが整ったら、送られてくるメールを設定します。
メールを設定しないと、いくら応援されても何も気づきません。それは悲しいので、設定をお忘れなく。
タブを移動し、『メール』タブにしてください。


『送信先』にあなたのメールアドレス、送信元に[your-name] <自分のメールアドレスを記入>と入れれば、本文なしですがメールは送られてくるようになります。

メールに使えるショートコードは画面上部で指定してくれますので、それをコピペして貼り付けましょう。

あくまでも『モチベーションを上げる』ことが目的です。
そして、管理者しかメールは見ません。
ので、私はこんな書き方をしてみました。

差出人: [your-name] <[your-email]>
題名: キミヨル。応援

もらったエールは
「[checkbox-〇〇〇]」
だって!

滾るメッセージとして「[your-message]」って貰ってるよ!

差出人は「[your-name]」さん。
メールアドレスは「[your-email]」だって。
神様かな?
ありがたいね~!

--
このメールは キミヨル。 (http://kimiyoru.littlestar.jp) の応援フォームから送信されました! やったね!

文章がおかしくならないように、『空のメールタグを含む行を出力から除外する』をチェックするのをお忘れなく。
全部書き終わりましたら保存します。
そして、フォームを貼りたい記事や固定ページに、

出来たショートコードを記述します。

以上で、フォームが出来上がりました。
今回作ったフォームはこんな感じ。

試しに、『コラム見たよ!』を選択し、メッセージに『てすとだよ!』、名前を『まこだよ!』にして送ってみます。

すると、私のメールボックスにこんなメールが届きました。

テンション上がると思わんっ?!

+*+*+*+*+*+*+*+*+*+*+


今回、これを作ろうと思い立ったのは、こーゆー応援メッセージツールを作っている人を見たからなのでした。
まあ、そんなわけで。

下に置いたメッセージフォームは実際に動作します。
ポジティブなものでしたら全然送ってもらって構わないので、どんな動作するのかなーって思ったら使ってみてくださいね!

+*+*+*+*+*+*+*+*+*+*+

実際のフォーム

『キミヨル。』では応援のメッセージを募集中です。
クリックだけで送れますので、よろしければご協力ください!

以下から選択ください(複数選択可)

他にも滾るメッセージがございましたらどうぞ!

最後に、差し支えなければ以下をお教えください。

お名前

メールアドレス