ブログにWEB拍手を実装したくて色々試して見てるんだけど思うように行かなくて今この状態です。
そもそもCSSもHTMLもよくわかってないから、初手で詰みがち。
でも諦めたくない！ってんで頑張った結果を綴っていくよ。
WEB拍手を設置するにあたって参考にさせていただいたサイト様を先に紹介しておきます。
上記サイト様の内容を踏まえて、試行錯誤している結果が以降になります。
必要なプラグインについて
WEB拍手を実装するにあたって、おすすめされているプラグインは下記の通りです。
- Contact Form 7＋Flamingo
- MW WP Form
- WP Ulike
- Googleフォーム これはプラグインではないな…？
ただし上記には下記のようなデメリットがあるらしい。
- Contact Form 7 ←初心者にはむちゅかしい
- MW WP FORM←ページ変移する&サ終
- WP Ulike←コメントが表示されない
- Googleフォーム←WEB拍手ではない
初心者私、とりあえず完成まで一番シンプルな手順を踏むMW WP FORMで試してみたんだけどうまく行かず。。
さらに調べてみたらどうやらサ終していて、同じ開発者よりSnow Monkey Formsというプラグインが提供されていたので、これをいじってみたんだけど
- クラシックエディタに対応しておらずとてもいじりにくい。。
- ウィジェットに追加する方法がわからない（ページには追加できるが、フォーム単体をウィジェットに追加する方法が見当たらない。
Contact Form 7 でWEB拍手っぽいのを作る
まずは、必要なプラグインをインストールしていく。
Contact Form 7はお問い合わせフォームだけの機能で、情報を集計する機能はないので、情報集計機能のあるプラグインと一緒に導入するのがデフォルトらしい。
そんなわけで今回は、下記3つのプラグインをインストールしている。
- Contact Form 7 ←フォーム
- Conditional Fields for Contact Form 7←フォーム表示・非表示を設定するContact Form 7 のプラグイン（有効にするだけでContact Form 7 側に自動的に条件付け設定項目が追加される。）
- Flamingo ←フォームから送信された情報をワードプレス内で閲覧&集計できる！（有効にするだけでとりあえず勝手にデータを集計してくれる
ちなみにFlamingoは、Contact Form 7と同じ開発者なので安心して使用できるらしい。
インストール方法は言わずもがなだと思うけれど、一応書いておくね。
③のキーワド入力欄で今回必要なプラグインを検索して今すぐインストール→有効化まで済ませておこう。
Contact FormでWEB拍手を作っていく
必要なプラグインを有効化したら、Contact Form 7を利用してWEB拍手の見た目を作っていくよ。
まずは、ワードプレス画面左にあるお問合せのコンタクトフォームから新規追加で新しいフォームを作ります。
すると、こんな感じでお問い合わせフォームの編集画面が表示されるはずです。
お問い合わせフォーム初期設定
この状態をそのままプレビューしたものがこんな感じです。
これを、りう様の記事を参考に、かわいいWEB拍手へと作り変えていきたい！（願望
それではやっていくよ！
WEB拍手ボタンを作る
手始めに、一番大事なWEB拍手ボタンの作成です。
初期値で入力されているコードを全消しして、上部にあるフォームテンプレートの【送信ボタン】をクリック。
表示されたポップアップ項目に送信ボタンの名前（アイコンコード＋WEB拍手）を入力して、右下の【タグを挿入】をクリック。
アイコンコードの前にある”&#x”は、変換コードのようなもの
すると、こんな感じで送信ボタンを使ったWEB拍手のコードが挿入されます。（下記タグを直接入力してもOK。）
この状態で試しにプレビューしてみたのがこれです。（外枠のサイズはワードプレスで採用してるテーマに依存するみたいです。）
はい、すでにつまづいています。
アイコンが表示されていない問題です。
今回使っているアイコンは、FontAwesomeという無料アイコンサイトからお借りしているものです。
ワードプレスのテーマによって対応しているアイコンのバージョンが違ったり、反映できるコードが違うらしい。
私が使っているテーマは、コクーンなのでちょっと調べてみるとFontAwesomeのコードはHTMLで入力しないとダメみたいです。
しかしコードの中にHTMLは入力できないみたいだからこの問題は後回しにしておきます。
WEB拍手の下に簡易のコメントフォームを作る
次に、WEB拍手の下に、下図のような簡易の感想・コメントフォームを作っていきます。（りう様、画像お借りします！）
引用：https://note.com/riu_piglove/n/n5c0c921ccd59
まずは、先ほど作ったWEB拍手の下に、チェックボックステンプレートを使用して感想フォームの表示・非表示ボタンを作ります。
続いてその下に、実際の感想フォームを作っていく。
選択肢は、”感想フォームを開く”と同様、チェックボックスのテンプレートを使用します。
選択肢は、オプション欄に改行で追加していく感じです。
また、ここではクラス属性も指定しておくといいみたい。
続けて、名前とコメントを入力するテキストボックスを追加します。
コードは、りう様の記事から引用させていただいています。
[text your-name placeholder”なくてもOK”]
[textarea your-message placeholder”返信は月末にまとめて記事内で行います。不要の場合は返信不要と記載してね。”]
コードの『placeholder””』（プレースホルダー）は、ボックスに仮に入力されている文字のことです。ダブルクォーテーションの中に、そのボックスの説明文を入れればOKみたい。
最後に、感想フォームの送信ボタンを追加します。
ここまで作ったフォームをプレビューしたのがこちらです。
見栄えを良くするために、HTMLタグでアイコン+項目名を追加していきます。
さらに、りう様の記事では、各項目をdl,dd,dtタグで囲っていたのですが、囲まなくても大丈夫っぽいです。（でも囲んだほうがプログラミング側が読み込みやすいかもしれない。）
dl,dd,dtタグってなんぞ？という人は下記サイトを参考にしてね。（私もわからんかった
ここまでのプレビューがこんな感じです。
だいぶわかりやすくなりました。
Flamingoで集計用の隠しボタンを作る
続いては、集計用の隠ボタンを作ります。
まずはクラス名を指定したラジオボタンを追加。
オプション・クラス属性で、自分のわかりやすい名前を設定しておきます。
私は参考サイトをまるパクリです！
次に、外観→カスタマイズ→追加のCSSに下記のコードを追加して、ラジオボタンを見えないようにするらしい。
これを設置することで、通常はWEB拍手を押されただけでは集計できないデータが、集計できるようになるらしいです。
他に、Contact Form 7 の隠しタグ”hidden”でも似たようなことができるとのことでしたが、使い方がいまいちわからないのでチャレンジできなかった。。。
簡易コメントフォームの表示・非表示設定
最後は、簡易コメントフォームの表示・非表示設定です。
まずは、隠しておきたい感想フォームを、グループコードで囲み保存します。
次に条件付きフィールドパネルを開いて、新規条件付きルールを追加をクリック。
表示された項目を、下図の下にある解説に従って選択して保存します。
- ③挿入したグループコードの番号を選択
- ④感想フォームを開くのチェックボックスを選択
- ⑤not equalsを選択
- ⑥保存
これで完了です。
プレビューがこんな感じ。
デフォルト
フォームを開いた状態
ここまできたら、あとはデザインを整えて、任意の場所にWEB拍手を設置するだけです。
WEB拍手を設置する
今回制作したWEB拍手を設置する場合は、お問い合わせ一覧に表示されているショートコードを利用します。
例えば、記事下に追加したい場合は、外観→ウィジェット→カスタムHTML→投稿本文下→ウィジェットを追加し、表示されたボックスにコピーしたショートコードを貼り付けます。
もちろん、このショートコードを任意の場所に直接貼り付けてもOKです。
これで、WEB拍手の設置は完了です。
あとは集計用のプラグインFlamingoを触る必要があるみたいだけど、もう疲れたので明日にする。。。
実装するまでに発生したトラブルとその解決策とか
送信ボタンのアイコンが表示されない問題
Contact Form 7 のコードを利用して制作したボタンで、アイコンが表示されない問題は、下記のサイトを参考に修正されました。
cocoonの場合は、すでにFontAwsomeに対応しているので、”class=fas”を追記したらいけた。
理由はよくわかりませんw
メールのエラー警告
編集中に永遠に表示されているエラー警告、気になりますよね？
これ多分放置しててもフォームは機能してるっぽいけど、気になる人はそのエラーが出ている項目のコードを消しておけば大丈夫みたいです。
チェックボックス消えない問題
先のプレビュー画面を見て分かる通り、私のWEB拍手、チェックボックスが永遠に表示されたままです。
フォームを開いた状態
りう様のサンプルだと綺麗に消えているんだけど。。。
どう足掻いても消せなかったので一旦保留にすることにしました。
解決策が分かり次第追記します。
メール通知が永遠に来る問題
拍手されるたびにくるメール通知、OFFにしたい。。
メールだと数日経って気づくみたいなことはよくあるし。。それなら通知OFFにしてワードプレス内で管理したい。
でも、そういうやり方を説明しているページは見つけられなかった。
みんな通知はもらうけど見るのはワードプレスの中ってことなのかなぁ。
おわりに
ここまでくるのに2日かかってめちゃくちゃ大変だった。
けれど一人では絶対に辿り着けなかっただろうから、WEB拍手実装方法を記事にしてくださっている先人たちに感謝です！
まだまだ皆さんみたいに綺麗なWEB拍手とはいかないし、他にも確認する設定事項とかもろもろあるんだけど、とりあえず形にはなったので今回はこれで終わろうと思います。
今回参考にしたサイト様
WEB拍手を実装するにあたり参考にしたサイト様をまとめています。（冒頭で紹介したサイト様と同じです。）
重ねて御礼申し上げます。
ありがとうございました!!!
コメント
[…] NishiharaWEB拍手を変えました＋コメントなどのお礼 | MaRoNicaワードプレスにWEB拍手を実装する軌跡 | 角煮ちゃんのあとがき創作・同人サイトの更新がめんどくさくなったときのヒント集 | […]