Jetpack — отличное решение для формирования списка подписчиков, а Intercom — решение, которое позволит вам управлять подписчиками и оставаться в обращайтесь с ними.
В этом уроке мы покажем вам, как увеличить список подписчиков с помощью Jetpack и Intercom.
Некоторые люди пришли спросить меня, можно ли разрешить пользователям подписываться и получать все свои статьи по электронной почте, а также сохранять свои адреса электронной почты в Интерком. Я сразу ответил положительно, особенно по API (Интерфейс прикладного программирования) прост в использовании.
Поэтому я подумал об использовании плагина подписки, который будет отправлять адреса электронной почты в Intercom через API. И это именно то, что я сделаю.
У нас уже был установлен Jetpack, поэтому все, что вам нужно, это активировать модуль " Подписки …Однако все не так просто, что, если вы хотите отобразить форма в произвольном месте (настраиваемая страница, например)? Мы также покажем вам, как настроить расположение форма.
первые шаги
Начнем с форма базовый :
Никогда не пропустите наши сообщения. Получайте обновления в свой почтовый ящик, как только они будут опубликованы.
Для всех, кому может быть интересно, я добавил форму здесь, используя действие " genesis_after_entry Тема Genesis, но если вы не используете Genesis, вы можете использовать фильтр " the_content И связал ваш контент с содержанием статьи.
В нашем примере мы отобразим форму после 3e статья. Если вы используете фильтр, используйте функции " ob_start "А также" ob_get_clean Инициализировать буфер и использовать его содержимое.
Глобальный $ пост, $ WP_Query; if (is_home() && $ WP_Query->сообщений[3]->ID == $ пост->ID) { включают(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); }
Вот CSS для стилизации формы.
# Блог-архив-подключения { ширина:100% важно!; Очистить:изоферменты печени; } # Блог-архив-подключения { @include точки останова ($ Tablet) { фон:URL ( "изображения / низкий bg.png") нет-Повторяю 0 0; высота:200px; } } # Блог-архив-регистрация FIELDSET { граница:0; ширина:100%; обивка левый:50px; } # Блог-архив-регистрация FIELDSET { @include точки останова (макс ширина таблетки $) { обивка левый:0px } } # Блог-архив-легенда подключений { обивка-топ:20px; } # Блог-архив-Signup поля Container # { ширина:100% } # Вход Блог-архив-подключения [имя * = 'электронная почта'] { фон:URL ( "изображения / низкий field.png") нет-Повторяю 0 0; набивка:0; маржа:0; высота:44px; граница:0; ширина:560px; Высота строки:22px; плавать:оставил; } # Вход Блог-архив-подключения [имя * = 'электронная почта'] { @include точки останова (макс ширина таблетки $) { набивка:0; маржа:0; граница:0; ширина:50%; плавать:оставил; } } вход # Блог-архив-подключений [тип = «Отправить»] { фон:URL ( "изображения / низкий button.png") нет-Повторяю 0 0; набивка:0; маржа:0; высота:44px; граница:0; ширина:180px; цвет: #fff; выравнивания текста:центр }
Как добавить подписчиков
Теперь мы будем регистрировать пользователей на Jetpack, используя " jQuery.ajax .
$(«# Блог-архив-подключения»).отправить(функция(e) { e.preventDefault(); $("LoadingMessage #, # failMessage").скрывать().удаление(); вар __button = $('# Блог-архив-подключений ввода [тип = „отправить“]).получить(0); $('# Блог-архив-подключений ввода [тип = „отправить“]).после(codeable_spinner); вар __DATA = $(этой).сериализации() + '& secure =' + codeableVars.безопасность + '& action = blog_archive_signup'; $.после(codeableVars.ajaxurl,__DATA,функция(ответ) { консоль.журнал(ответ); if (ответ.успех) { $("#codeable_spinner").ReplaceWith(«Успех!»).задерживать(5000).Затухание(«Медленный»).удаление(); } еще { $("#codeable_spinner").ReplaceWith(""+ответ.сообщение+"").задерживать(5000).Затухание(«Медленный»).удаление(); } }) })
Теперь нам нужно сохранить пользователя в Jetpack и Intercom. Я копался в коде Jetpack, чтобы узнать, как он добавляет подписчиков, и нашел класс «Jetpack_Subscriptions» и статический метод, который принимает электронную почту в качестве параметра. А для Intercom будет достаточно простого запроса CURL.
add_action('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); add_action('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); функция blog_archive_signup() { $ Данных = массив( «Электронная почта» => $ _POST['Blog_archive_partition_email'], 'Custom_attributes' => массив('Subscribed_via' => 'Blog_archive_partition') ); $ вызова = wswp_make_api_call($ Данных); $ ответ = массив(«Успех»=>правда,«Сообщение» => "Bpa_signup"); $ подписаться = Jetpack_Subscriptions::подписаться($ _REQUEST[префикс $.'_email']); delete_transient('Wpcom_subscribers_total'); stats_update_blog(); кол // обновляем подписчиков в Wp-администратора wp_send_json($ ответ); выход(); } функция wswp_make_api_call($ Данных) { $ завиток = curl_init(); curl_setopt_array($ завиток, массив( CURLOPT_HTTPHEADER => массив('Content-Type: применение / JSON', 'Accept: приложения / JSON'), CURLOPT_RETURNTRANSFER => 1, CURLOPT_URL => 'Https://api.intercom.io/users', CURLOPT_POST => 1, CURLOPT_USERPWD => INTERCOM_APP_ID . «» . INTERCOM_API_KEY, CURLOPT_POSTFIELDS => json_encode($ Данных), CURLOPT_HEADER => ложный, )); // Обратите внимание, что вам нужно будет установить константу для приложения идентификатор и ключ API для собственных значений $ Вернуться = json_decode(curl_exec($ завиток), правда); curl_close($ завиток); возвращают $ Вернуться; }
Вот и все. Теперь, когда кто-то заполняет эту форму, они сразу получают электронное письмо с подтверждением на Jetpack, в котором говорится, что они подписались, и они будут получать электронные письма с вашими статьями, как только они будут опубликованы.
Негласно они регистрируются в Intercom с меткой «Subscribed_Via => раздел архива блога». В следующий раз я расскажу вам, как вы также можете отправить своих подписчиков плагина Thrive Leads в Intercom с помощью данные дополнительная информация, которая позволит вам различать их все.
Если вы не освоите полезность " codeableVars.security Вы должны знать, что он содержит " нунций «WordPress. Обычно это можно было бы сделать с помощью функции php wp_nonce_field () В форме, но в скрипте, содержащем только JavaScript, поле nonce уже доступно в функции JS " wp_localize_script () .
Это все, что нужно сделать для этого урока. Не стесняйтесь задавать нам вопросы или делиться учебником со своими друзьями в ваших любимых социальных сетях.
