プラグインではなくコピペのスニペットでWordPressにWhatsAppチャットウィジェットを追加する方法。3つの設置方法と、プラグインをもう1つ増やすことで失うものを解説します。
「WhatsApp chat widget WordPress」で検索すると、ほとんどの結果がプラグインを勧めてきます。インストールして、有効化して、専用の設定画面で設定して、これでWordPressのコアやテーマが変わるたびに更新が必要なものがサイトにもう1つ増えることになります。プラグインを完全に飛ばす、もっと速い方法があります。WhatsAppウィジェットの正体はフローティングボタンであり、フローティングボタンとは数行のHTMLとスクリプトタグにすぎません。そしてそのどちらも、プラグインページに何かを追加することなく貼り付けられる場所が、WordPressにはすでに用意されています。
ここでは、サイトの構築方法に応じた3通りの貼り付け方を順に見ていき、それでも専用プラグインの方が実際に価値を発揮する場面についても触れます。
WordPressのWhatsAppプラグインが偽物だったり壊れていたりするわけではなく、スニペットと同じように本当にフローティングボタンを追加してくれます。違うのは、それを維持し続けるコストです。WordPressサイト上のすべてのプラグインは、ページが読み込まれるたびに実行されるコードであり、WordPressやPHPのバージョンが変わるたびに独自の更新が必要になり、放置すればセキュリティスキャナーに指摘される項目がもう1つ増えることになります。ページビルダー、SEOプラグイン、キャッシュプラグイン、フォームプラグインがすでに動いているサイトにWhatsAppプラグインが加わると、互いに衝突しうる要素が5つになります。しかもWhatsAppウィジェットのプラグインは特に、訪問者がボタンをクリックするかどうかに関わらず、すべてのページで独自のCSSとJavaScriptを読み込ませる傾向があります。
貼り付けるだけのスニペットには、設定画面も、変更履歴も、互換性の注意書きもありません。テーマのフッターにある静的なブロック、あるいはページ内のカスタムHTMLブロックにすぎず、WordPressは他の埋め込みコンテンツとまったく同じように扱います。有効化する必要も、パッチを当て続ける必要もありません。
とはいえ、すべてのサイトにとってプラグインが間違った選択というわけではありません。コードをどこかに貼り付けること自体に抵抗がある場合や、外観 → テーマファイルエディターに触れるべきではない人がwp-adminからウィジェットの設定を変更できるようにしておきたい場合は、プラグインの設定画面の方が安全な選択です。スニペット方式は、コードのブロックを1回コピー&ペーストして、実際に何かを変更したいときだけまた手を加える、という前提に立っています。
WhatsAppチャットウィジェットジェネレーターは、番号、ボタンの色、位置、グリーティングメッセージを1つのスクリプトタグに変換してくれます。フォームに入力し、WhatsApp番号は先頭ゼロやプラス記号なしの完全な国際形式で、色を選び、ボタンをどのコーナーに配置するかを決めると、ツールが次のようなものを出力します。
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>これでウィジェットは完成です。アップロードするアイコンファイルも、読み込ませるスタイルシートも、PHPも必要ありません。これをコピーして、WordPressサイトの構築方法に応じて以下の3つの設置方法から1つを選んでください。
テーマがブロックエディター(Gutenberg)ベースで作られている場合、スニペットを最も手早く配置できるのはページ内やリユーザブルブロックの中ですが、それだとそのページだけにしかウィジェットが表示されません。サイト全体にウィジェットを表示したい場合、テーマがフッター用のテンプレートパーツを公開していない限り、ブロックエディターはもともとフッター全体への差し込み向けには作られていません。
フルサイト編集に対応しているテーマの多くでは、フッターテンプレート自体にカスタムHTMLブロックを追加できます。
フッターテンプレートパーツの中にあるため、そのフッターを使うすべてのページでレンダリングされるようになります。ほとんどのテーマでは、それはサイト内のすべてのページを意味します。
クラシック(非ブロック)テーマには、ビジュアルで編集できるフッターテンプレートパーツがないため、代わりにスニペットをテーマのPHPファイルに直接書き込みます。
</body>を探します。通常はファイルの末尾付近にあります。</body>の直前に、スクリプトタグを独立した行として貼り付けます。これはテーマのコードに直接触れる唯一の方法であり、スニペット方式で本当に注意すべき点もここにあります。テーマを更新するとfooter.phpが上書きされ、貼り付けた内容が何の警告もなく消えてしまうことがあるのです。テーマが子テーマに対応している場合は、代わりに子テーマのfooter.phpでこの編集を行ってください。子テーマのファイルは、親テーマの更新の影響を受けません。子テーマを使っておらず、これから用意するつもりもない場合は、Insert Headers and Footersのようなプラグイン(フルスペックのWhatsAppウィジェットプラグインではなく、単一機能でメンテナンスの手間が少ないプラグイン)を使えば、テーマファイルとは一切紐づかない専用のフッター欄が手に入り、テーマを更新してもその内容は自動的に維持されます。
サイトがページビルダーで構築されている場合、たいていこの用途にぴったりのウィジェットが用意されています。
どちらのビルダーも生のHTMLとスクリプトタグをそのままレンダリングします。一部のWYSIWYGコンテンツエリアのように<script>タグがサニタイズで削除されることもないため、ウィジェットはfooter.phpに直接貼り付けた場合とまったく同じように読み込まれ、動作します。
どの方法で貼り付けた場合でも、キャッシュされたページで古いバージョンが表示されないよう、シークレットウィンドウでサイトを開き、ウィジェットが表示されるはずのすべてのテンプレートを確認してください。ホームページ、ブログ記事、そしてサイトの他の部分とは異なるテンプレートで作られたランディングページです。1つのテーマファイルやビルダーのテンプレートに加えたフッターの編集は、別のテンプレートを使うランディングページには自動的には反映されないためです。デスクトップと実機のスマートフォンの両方でボタンをクリックして確認しましょう。WhatsAppがインストールされたモバイル端末では、番号とグリーティングメッセージがあらかじめ入力された状態でアプリが直接開くはずです。デスクトップでは、新しいタブでweb.whatsapp.comが開きます。
専用プラグインをインストールする方に天秤が傾く状況もいくつかあります。
技術に詳しくない複数の人がサイトを管理していて、誰もテーマファイルエディターに近づくべきではない場合、全員がfooter.phpに手を出さないよう期待するより、プラグインの設定画面の方が安全です。テンプレートファイルを編集するのではなく、エディターのサイドバーにあるチェックボックスでページや投稿タイプごとにウィジェットの表示・非表示を切り替えたい場合、そのページ単位のロジックはまさにプラグインのPHPが担う領域であり、静的なスニペットにはできません。そして、すでにWhatsApp Business APIのフル連携をプラグイン経由で運用していて、そのプラグインがより大きな機能セットの一部としてウィジェットも扱っているなら、ウィジェットの部分だけを別のスニペットに置き換えることは、1つ減らすどころか維持すべきものをもう1つ増やすことになります。
よくあるケース、つまりWhatsApp番号は1つ、ボタンも1つ、すべてのページで同じ動作という場合であれば、スニペットは同じ仕事を、後から更新すべきものを何も残さずにこなしてくれます。
このやり方でWordPressサイトが遅くなりませんか?
スクリプトタグにはasyncとdeferが指定されているため、ページの他の部分をブロックすることなく読み込まれます。また、フル機能のプラグインが読み込ませるような複数のスタイルファイルやスクリプトファイルではなく、外部リクエストは1つだけで済みます。
WP RocketやW3 Total Cacheのようなキャッシュプラグインとも問題なく使えますか? はい。リクエストのたびにPHPでレンダリングされるものではなく、静的なスクリプトタグなので、ページキャッシュに干渉されません。プラグイン型のウィジェットの中には、積極的なHTML圧縮設定によって時折削除されてしまうものもありますが、そうした問題も起こりません。
WooCommerceと組み合わせて使えますか?
はい。設置方法は同じで、footer.phpでも、フッターテンプレートパーツでも、ページビルダーのフッターテンプレートでも、そのサイトがWooCommerceを併用しているかどうかは関係ありません。
テーマファイルエディターが使えない場合はどうすればよいですか? 一部のホスティングでは、セキュリティ上の理由からこの機能が無効化されています。その場合は、テーマがフルサイト編集に対応していればフッターテンプレートパーツのカスタムHTMLブロックを、ページビルダーを使っているならその埋め込みウィジェットを使いましょう。どちらもない場合は、テーマファイルに一切触れずに済むフォールバックとして、Insert Headers and Footersのような単一機能の小さなプラグインを使う方法もあります。
WordPressのテーマを切り替えた場合、スニペットを貼り直す必要がありますか?
はい。スニペットは古いテーマのfooter.phpやテンプレートパーツに貼り付けられているためです。ジェネレーターから同じスニペットを再度コピーし(ウィジェットIDは変わりません)、新しいテーマに合った3つの方法のいずれかで貼り付けてください。
WhatsAppウィジェットの正体はスクリプトタグ1つであり、WordPressにはそれを収めるための場所がすでに3つ用意されています。フッターテンプレートのカスタムHTMLブロック、テーマファイルエディター経由のfooter.php、そしてページビルダーの埋め込みコードウィジェットです。そのどれを使っても、専用プラグインをインストールする必要はありません。WhatsAppチャットウィジェットジェネレーターからスニペットを取得し、サイトの構築方法に合った3つの方法のいずれかに貼り付ければ、それだけで公開完了です。次にWordPressが新しいリリースを出すときも、更新すべきものは何も増えません。
Chrome拡張機能を追加して、ビジネスのWhatsApp会話管理の方法を変革しましょう。