Пропустить

Создайте свой список абонентов с Jetpack и Интерком

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Jetpack - отличное решение для создания списка подписчиков, а Intercom - это решение, которое позволит вам управлять подписчиками и поддерживать с ними связь.

В этом уроке мы покажем вам, как увеличить список подписчиков с помощью Jetpack и Intercom.

Некоторые люди пришли спросить меня, можно ли разрешить пользователям подписываться и получать все свои статьи по электронной почте, а также сохранять свои адреса электронной почты в Интерком. Я сразу ответил положительно, особенно по API (Интерфейс прикладного программирования) прост в использовании.

Поэтому я подумал об использовании подписного плагина, который будет отправлять адреса электронной почты в Интерком через API. И это именно то, что я буду делать.

У нас уже был установлен Jetpack, поэтому все, что вам нужно, это активировать модуль " Подписки Однако, это не так просто, что произойдет, если вы хотите отобразить форму в произвольном месте (настраиваемая страница, например)? Мы также покажем вам, как настроить, где форма будет отображаться.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

первые шаги

Начнем с базовой формы:

<Форма ID = "блог-архив-Регистрация"> <! - идентификатор для использования в таргетирования форме через JavaScript // -> <FIELDSET> <Легенда> Никогда не пропустите наши сообщения. Получить обновления в вашем почтовом ящике, как только они размещены. </ Legend> <P ID = "поля-контейнер"> <входного типа = "текст" Name = "blog_archive_partition_email" /> типа = "Отправить" имя <входного = " blog_archive_partition_submit "значение =" SUBSCRIBE «/> </ р> </ FIELDSET> </ form>

Для всех тех, кому это может быть интересно, я добавил сюда форму, используя действие " 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 .

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

$(«# Блог-архив-подключения»).отправить(функция(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_Subscription и статический метод, который принимает электронную почту в качестве параметра. А для внутренней связи достаточно простого запроса 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, в котором говорится, что он подписался, и он получит электронные письма, содержащие ваши статьи, как только они будут опубликованы.

За кулисами они зарегистрированы в домофоне с тегом «Subscribeed_Via => раздел архива блога». В следующий раз я расскажу вам, как вы также можете отправлять подписчиков плагинов Thrive Leads на Intercom с дополнительными данными, которые помогут вам отличить их всех.

Если вы не освоите полезность " codeableVars.security Вы должны знать, что он содержит " нунций «WordPress. Обычно это можно было бы сделать с помощью функции php wp_nonce_field () В форме, но в скрипте, содержащем только JavaScript, поле nonce уже доступно в функции JS " wp_localize_script () .

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [FREE]

Это все, что нужно сделать для этого урока. Не стесняйтесь задавать нам вопросы или делиться учебником со своими друзьями в ваших любимых социальных сетях.

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
10 акции
доля10
чирикать
Регистрация