三ヶ森未来です。
上記を参考にしながらweb拍手っぽいものを作ってたんですけど、上手くいかなくて。
よくよく考えたらメッセージとかはいらないんですよね。
押してもらえたら「読んでくれたんだなふふっ……」ってなりたいだけのボタンなので。
というわけで魔改造しました。備忘録記事です。
目標
ボタンを押したらありがとうメッセージorありがとうイラストが出てくる。
どのページで押されたのか集計を取りたい。
やったこと
プラグインを入れる
りうさん（上の）記事を見ながらContact Form 7、Flamingoのプラグインをいれる。
Contact Form 7 Conditional Fieldsを記事では入れているけど、今回は条件分岐設定がないので、入れなくてもいけると思う。私はまだ入れたままだわ。
フォームを作る
実際にいれたコードはこちら。
たぶんこのままコピペでも動作すると思う。説明していきます。
[hidden Like "いいね！"]
[submit class:iinebtn "いいね♥"]
<div class="webclapform_sent">
<br>
拍手ありがとうございます！とても嬉しいです！
<br>
<section><img src="画像URL" alt="画像の名前"></section></div>以下記事の5-1参照。
後にCSSで装飾するときに「iinebtnという名前のついているところを装飾してください」って指示をだすので、お手持ちの中で被らないように名前をつけて下さい。
ダブルクォーテーションで囲った部分はボタンに表示される文字です。拍手なりふぁぼなりお好きな文字列を。
<div class=”webclapform_sent”>のタグで囲った部分はお礼文やイラストを置きます。
お礼画像はHTMLにて画像貼り付けしてます。
お礼小説をのせるときは他のページへのリンクとかで誘導したほうがいいかも。
今回の画像サイズは縦400×横600で作成しています。でっか画像を貼る場合はそれに合わせて良きようにコードを追記したほうが良いと思う。
CSSを入力する
こちらを参考にコピペで組みました。外観＞カスタマイズ＞追加CSSに貼りました。
実際のコードはこちら。
上2つのコードはりうさんを参考にしています。デザインCSSはボタンデザインで探したらたくさん出てくるので、お好きなものをお借りしたらよいと思います。
/*コンタクトフォームの拍手化お礼メッセージを通常時は見えなくする*/
.webclapform_sent {
display: none;
}
/*コンタクトフォームの拍手化お礼メッセージを送信後は見えるようにする*/
.sent .webclapform_sent {
display: block;
}
/*コンタクトフォームの拍手化システムで出る送信後メッセージを非表示にする*/
.wpcf7-form.sent .wpcf7-response-output {
display: none;
}
/*コンタクトフォームによる拍手化のデザインCSS*/
.iinebtn {
display: inline-block;
padding: 0.4em 1.6em;
font-size: 0.8rem;
color: #e094ba;
text-decoration: none;
user-select: none;
border: 1px #e094ba solid;
border-radius: 20px;
transition: 0.4s ease;
}
.iinebtn:hover {
color: #fff;
background: #e094ba;
}ショートコードを設置する
出来上がったフォームのショートコードを置きたいところに貼ります。
私はウィジェットで記事の下部に貼っています。
ここは各テーマに依存するところだと思うのでお好きなように。
Flamingoの設定をContact Form 7に入力する
結果はFlamingoというプラグインで確認します。こちらは受信ボックスのイメージでしょうか。
初期設定のままでは見にくいのでりうさんの記事を参考にContact Form 7のそのほかの設定にFlamingoの設定を入力します。
flamingo_subject: "[_post_title]"受信メッセージの件名にページタイトルを表示させますという設定です。
これを入れることで、Flamingoの受信ボックスを開くとどのページで押されたのかが一目で分かるようになります。
終わりに
りうさんと未花 月葉さんのきじを読んでも理解しきれなかった未来さんによる改造記事はいかがでしたでしょうか？
スパムとかめちゃくちゃ来るようならまた何か考えなきゃな～とは思ってます。
良ければ下のいいねボタン押してやってください。
送信中です
※コメントは最大500文字、5回まで送信できます