私が運営している創作絵本サイト、「あかえほ」のウェブ絵本のページに、リアクションボタンを設置しました。
使用したプラグインは「Post Reaction」です。
カスタム投稿タイプのページにも設置可能で、任意のSVGアイコンも使用できます。
ただこれ、2023年7月にリリースしたプラグインでまだユーザーも情報も少なく、解説も見当たらなくて、ちょっと設置するのに苦戦しました(笑)
使い方の備忘録を残しておくのでご参考まで。
プラグインのインストールと管理画面
ワードプレスの管理画面 → プラグイン → 新規プラグインを追加 からインストールできます。（2024年12月時点）
検索窓に「Post Reaction」と入力すると6番目くらいにあります。
有効化すると、ツール → Post Reaction で編集できるようになります。管理画面はこんな感じ。
Post Reactionの基本設定
上から順に解説していきます。
① Enabled
有効化ボタンです。オフにすると何も設定ができません。
② Only User Can React
ワードプレスにログインしているユーザーのみがリアクションできます。
オンにしているとほとんどの人がリアクションボタンを押せません。オフにしておきましょう。
③ React Content Position
ボタンの設置場所を選べます。お好みで。
④ POST TYPES
ボタンを表示するページを選べます。
デフォルトでは、post（投稿）・page（固定ページ）が指定されています。
例えば、固定ページを外したい場合は、 の×部分をクリックして消します。
カスタム投稿タイプを作っていて、カスタム投稿タイプのページに表示したい場合は、スラッグ名を入力すると候補に表示されるのでクリックして選択します。
⑤ Enable Reacts
デフォルトのアイコン（⑨参照）を使用する場合、使いたいリアクションにチェックを入れます。
⑥Icon Size
アイコンのサイズを指定できます。お好みで。
⑦Active Icon Background
⑨で上のデザインを選んだ場合、押したボタンの背景色を指定できます。お好みで。
⑧ Custom React
ボタンを自由に設定できます。後で解説します。
⑨ Design
ボタンデザインと、押したときの挙動を2パターンから選べます。
⑩ Content Before React / Content After React
ボタンの前後にメッセージを表示したい場合はここに入力します。
日本語で入力できますが、HTMLタグは使えません。（タグを入力すると保存できません）
Custom Reactでリアクションボタンを自由に設定する
ボタンを押すと入力欄が出現します。
右端のマークをクリックして展開してください。
① Enabled
有効化ボタンです。
② REACT NAME
リアクション名です。日本語OK。
ここに入力した文字がアイコン画像のtitle属性になるようで、パソコンでアイコンにカーソルを当てると入力した文字が表示されます。
③ Unique React ID
リアクションに固有のIDを付与します。
④のSVG ICON欄が未入力の場合、ここに入力した内容が代わりに表示されます。
日本語、絵文字も大丈夫だったので、もしデフォルトのアイコン以外にしたいけどSVGアイコンを用意できないという場合は、とりあえず文字を入れておけば一応ボタンは機能するようです。
例えば上記のように入力すると、以下のようなボタンになります。
IDを絵文字オンリーにすると、よりリアクションボタンっぽくなるかと。
これが正直一番手っ取り早くてラクなんですが、これでいいのかはよく分かりません(笑)
あと、SVGアイコンを使用しない場合、ボタンを押すと拡大表示するデザインを選択しても大きくなりません。背景色が変わる方にしておきましょう。
④ SVG ICON
何の説明もありませんが、ここはHTMLです。使いたいアイコンを<svg>タグを使って入力します。
HTMLタグを提供しているSVGアイコンのフリー素材サイトを利用しましょう。こことか。↓
このサイトの場合、アイコンを選んでカスタマイズし、 ボタンを押すとHTMLタグをクリップボードにコピーできます。
これをSVG ICONの入力欄に張り付ければOK。
ちなみに、UNIQUE REACT IDは必ず何か入力しないとSVGアイコンが表示されません。
うまく行けば、こんな感じになります。
イラレでSVGアイコンを自作できる方は、コピペでコードを貼ることができますが・・・
デフォルトの設定のままだと、レイヤー名がidやdate-nameに自動的に付与されるようで、日本語でレイヤー名を付けていると文字化けしてしまいます。
日本語・文字化けした文字が含まれていると保存できないので、それらを全部消すか、半角英数に修正する必要があります。
また、クラス名を付与して色指定しているんですが、1色目が.cls1、2色目が.cls2・・・となっていて、アイコンを追加していくとクラス名が重複してしまい、色がどんどんおかしくなります↓
色を正しく表示させるためには、クラス名が重複しないように自分で修正する必要があります。
…と、結構面倒くさいのですが、SVGの書き出し形式の設定とレイヤー名を変更すれば、文字化け部分を削除したりクラス名直したりせずに、そのままコピペしてOKになります。
- アセットの書き出しパネルを表示→右側にある「三」ボタンをクリック
- 形式の設定→SVGで、スタイルを「インラインスタイル」/「プレゼンテーション属性」を選択
- オブジェクトIDは「レイヤー名」を選択し、設定を保存
- レイヤー名を半角英数の文字列に変更
これで、文字化けが回避でき、色の指定もクラス名を使わず直接SVGタグ内にカラーコードが表記されるようになるので、そのままコピペしても色がおかしくなることはありません。
イラレのSVG書き出し設定については、以下の記事で詳しく解説されていたのでご参考に。
IllustratorでSVGを書き出すときの設定を極める。 – WEBサイトの制作日記
Saveボタンを押したのにうまく保存できない原因
私調べ、保存できないパターンは2つ。もっとあるかもしれないけど。
この場合、 ボタンを何度押しても変更が反映されません。
ちょっと分かりにくいですが、正しく保存できたときはSaveボタンの左側に、グレーと青のマルが一瞬表示されます。
保存できていないときは、このマルが表示されません。入力欄を確認してみてください。
ボタンの見た目はCSSで調整できる
ボタンを設置するだけならこれで終了です。が・・・
なんて言うか・・・もうちょっとオシャレな感じにしたいですよね(^^;
CSSである程度なんとかなるので、お好みで調整してみてください。
ちなみに私の場合はこんな感じ。
/*-----リアクションボタン---*/
.post-reactions-count{
padding-top: 2em;
font-size: 16px;
border: solid 1.4px #e0ddd1;
color:#999;
text-align:center;
}
.post-reactions-list{
width: fit-content;
margin: auto;
}
すみません、今回はCSSの解説は割愛します。
クラス名などはディベロッパーツールでご確認ください＾＾
バグなのか、たまにリアクションがリセットされている気がするのが残念
しばらく使ってみて気づいたのですが、そこそこリアクションが付いていたのに、ある日突然全部ゼロになっていることがあります。
全部の投稿で一斉にそうなるのではなくて、とある一記事だけ突然に。
リアクションボタンを押した人全員が取り消した可能性もありますが、5人とか10人とかが一斉に取り消すなんて不自然なので、おそらくバグなんだろうなぁと。
まぁ、特に集計機能もないし、一度0になってもその後押してくれた人がいればちゃんとカウントされていくので。
たくさんリアクションついてたのに消えちゃった～と悲しい気持ちになるだけです(^^;)
使い方が分かりにくかったり、バグったりするのが難点ですが、他の類似プラグインの中では一番カスタマイズ性があって気に入っているので、今後のアップデートに期待です。
ご参考まで。
