Добавьте виджет чата WhatsApp в WordPress с помощью фрагмента кода для копирования и вставки вместо плагина: три способа размещения, а также то, чем вы жертвуете, устанавливая еще один плагин.
Введите в поиске «WhatsApp chat widget WordPress», и большинство результатов приведет вас к плагину: установите его, активируйте, настройте на отдельном экране параметров, и вот у вас на сайте появилась еще одна вещь, которую нужно обновлять при каждом изменении ядра WordPress или темы. Есть более быстрый путь, который вообще обходится без плагина. Виджет WhatsApp, это плавающая кнопка, а плавающая кнопка, это несколько строк HTML плюс тег скрипта, и в WordPress уже есть куда их вставить без добавления чего-либо на страницу Plugins (Плагины).
Дальше разберем это, тремя разными способами, в зависимости от того, как построен ваш сайт, и объясним, где отдельный плагин действительно окупается.
Плагин WhatsApp для WordPress не фальшивка и не сломан, он действительно добавляет плавающую кнопку, точно так же, как и подход с фрагментом кода. Разница в том, во что обходится его содержание. Каждый плагин на сайте WordPress, это код, который выполняется при каждой загрузке страницы, требует собственных обновлений при смене версий WordPress или PHP, и это еще одна запись, на которую укажет сканер безопасности, если она устареет. На сайте с конструктором страниц, SEO-плагином, плагином кеширования, плагином форм и теперь еще плагином WhatsApp получается пять отдельных вещей, которые могут конфликтовать друг с другом, а плагины виджетов WhatsApp в частности склонны подключать собственные CSS и JavaScript на каждой странице, независимо от того, кликнет ли посетитель по кнопке хоть раз.
У вставленного фрагмента кода нет экрана настроек, списка изменений или уведомления о совместимости. Это статичный блок в подвале темы или блок Custom HTML на странице, и WordPress обращается с ним точно так же, как с любым другим встроенным содержимым. Нечего активировать, нечего патчить.
При этом плагин не станет неправильным выбором для любого сайта. Если вам некомфортно вставлять код куда бы то ни было, или вы хотите, чтобы настройки виджета можно было менять из wp-admin человеку, которому не стоит трогать Appearance → Theme File Editor, интерфейс настроек плагина, это более безопасный вариант. Способ с фрагментом кода предполагает, что вам не составит труда один раз скопировать и вставить блок кода и возвращаться к нему только тогда, когда действительно нужно что-то изменить.
Генератор виджета чата WhatsApp превращает ваш номер, цвет кнопки, позицию и приветственное сообщение в один тег скрипта. Заполните форму: номер 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.
Если ваша тема построена на блочном редакторе (Gutenberg), быстрее всего вставить фрагмент кода прямо на странице или в переиспользуемый блок, но тогда виджет появится только на этой одной странице. Для виджета на весь сайт блочный редактор не очень приспособлен к внедрению в подвал по всему сайту, если только тема не предоставляет для этого отдельную часть шаблона (template part).
Большинство тем, поддерживающих полное редактирование сайта (full site editing), позволяют добавить блок Custom HTML прямо в шаблон подвала:
Поскольку он находится внутри части шаблона подвала, теперь он отображается на каждой странице, которая использует этот подвал, а в большинстве тем это все страницы сайта.
У классических тем (не блочных) нет части шаблона подвала, которую можно было бы редактировать визуально, поэтому фрагмент кода вставляется прямо в PHP-файл темы:
</body>, обычно он находится ближе к концу файла.</body>.Это единственный способ, который напрямую затрагивает код темы, поэтому именно с ним связана единственная реальная оговорка ко всему подходу с фрагментом кода: обновление темы может перезаписать footer.php и незаметно удалить вставленный код. Если ваша тема поддерживает дочернюю тему (child theme), делайте эту правку в footer.php дочерней темы, поскольку файлы дочерней темы переживают обновления родительской. Если вы не используете дочернюю тему и не хотите её настраивать, плагин вроде Insert Headers and Footers (узкоспециализированный, не требующий обслуживания плагин, а не полноценный плагин виджета WhatsApp) дает отдельное поле для подвала, вообще не привязанное к файлам темы, и автоматически переживает каждое обновление темы.
Если сайт построен на конструкторе страниц, там обычно уже есть виджет именно для этого:
Оба конструктора выводят необработанный HTML и тег скрипта как есть, никакая санитизация не вырезает тег <script>, как это иногда происходит в некоторых WYSIWYG-областях контента, поэтому виджет загружается и ведет себя точно так же, как при прямой вставке в footer.php.
Каким бы способом вы ни вставили код, откройте сайт в окне инкогнито, чтобы кешированная страница не показала вам устаревшую версию, и проверьте каждый шаблон, на котором должен появиться виджет: главную страницу, запись блога и любую посадочную страницу, построенную на отдельном от остального сайта шаблоне, поскольку правка подвала в одном файле темы или шаблоне конструктора не распространяется автоматически на посадочную страницу с собственным шаблоном. Нажмите на кнопку и на компьютере, и на настоящем телефоне. На мобильном с установленным WhatsApp она должна открывать приложение напрямую, с уже заполненным номером и приветствием; на компьютере она откроет web.whatsapp.com в новой вкладке.
Есть несколько ситуаций, которые склоняют чашу весов обратно в сторону установки отдельного плагина:
Если сайтом управляют несколько нетехнических людей, и никому из них не стоит подходить к Theme File Editor, экран настроек плагина безопаснее, чем надеяться, что все оставят footer.php в покое. Если вы хотите включать и выключать виджет для отдельных страниц или типов записей через галочку в боковой панели редактора, а не редактируя файл шаблона, то такая логика для отдельных страниц, это именно то, с чем справляется PHP плагина и с чем не справится статичный фрагмент кода. А если у вас уже есть полноценная интеграция с WhatsApp Business API через плагин, который заодно обрабатывает виджет как часть более широкого набора функций, замена только виджетной части отдельным фрагментом кода добавляет еще одну вещь на поддержку, вместо того чтобы убрать одну.
Для типичного случая, один номер WhatsApp, одна кнопка, одинаковое поведение на каждой странице, фрагмент кода выполняет ту же задачу, и потом не остается ничего, что нужно обновлять.
Замедлит ли это мой сайт на WordPress?
Тег скрипта использует async и defer, поэтому он загружается, не блокируя остальную часть страницы, и это один внешний запрос вместо нескольких отдельных файлов стилей и скриптов, которые может подключить полноценный плагин.
Работает ли это с плагинами кеширования вроде WP Rocket или W3 Total Cache? Да. Поскольку это статичный тег скрипта, а не что-то, что генерируется PHP при каждом запросе, кеширование страниц ему не мешает, в отличие от некоторых плагинных виджетов, которые время от времени вырезаются агрессивными настройками минификации HTML.
Можно ли использовать это с WooCommerce? Да, размещение точно такое же: footer.php, часть шаблона подвала или шаблон подвала в конструкторе страниц, и ни одному из них неважно, работает ли на сайте еще и WooCommerce.
Что делать, если в моей теме нет доступного Theme File Editor? Некоторые хостинги отключают его из соображений безопасности. В этом случае используйте блок Custom HTML в части шаблона подвала, если ваша тема поддерживает полное редактирование сайта, виджет встраивания кода вашего конструктора страниц, если он есть, или небольшой узкоспециализированный плагин вроде Insert Headers and Footers как запасной вариант, который вообще не требует трогать файлы темы.
Нужно ли заново вставлять фрагмент кода при смене темы WordPress?
Да, поскольку он был вставлен в footer.php или часть шаблона старой темы. Снова скопируйте тот же фрагмент кода из генератора (ID вашего виджета останется тем же) и вставьте его в новую тему, используя тот из трех способов, который ей подходит.
Виджет WhatsApp, это один тег скрипта, и в WordPress уже есть три места, созданных именно для этого: блок Custom HTML в шаблоне подвала, footer.php через Theme File Editor или виджет встраивания кода в вашем конструкторе страниц. Ни одно из них не требует установки отдельного плагина для этой задачи. Возьмите фрагмент кода из Генератора виджета чата WhatsApp, вставьте его туда, что подходит способу устройства вашего сайта, и виджет заработает, а обновлять при следующем релизе WordPress будет нечего.
Установите расширение Chrome и измените подход к управлению WhatsApp-разговорами для вашего бизнеса.