Jetpack to świetne rozwiązanie do budowania listy abonentów, a Intercom to rozwiązanie, które pozwoli Ci zarządzać abonentami i pozostawać w skontaktuj się z nimi.
W tym samouczku pokażemy, jak zwiększyć listę subskrybentów za pomocą Jetpack i Intercom.
Niektóre osoby przyszły mnie zapytać, czy można zezwolić użytkownikom na subskrybowanie i otrzymywanie wszystkich ich artykułów pocztą elektroniczną oraz przechowywanie ich adresów e-mail w domofonie. Natychmiast odpowiedziałem pozytywnie, zwłaszcza jako API (Application Programming Interface) jest łatwy w użyciu.
Pomyślałem więc o użyciu wtyczki subskrypcyjnej, która wyśle adresy e-mail do Interkomu przez API. I to jest dokładnie to, co zrobię.
Mamy już zainstalowany Jetpack, więc wystarczy aktywować moduł „ Subskrypcje …Jednak nie jest to takie proste, co jeśli chcesz wyświetlić forma w niestandardowej lokalizacji (na przykład niestandardowa strona)? Pokażemy Ci również, jak dostosować lokalizację forma.
Pierwsze kroki
Zaczniemy od forma podstawowy :
Nigdy nie przegap naszych postów. Otrzymuj aktualizacje do swojej skrzynki pocztowej, gdy tylko zostaną opublikowane.
Dla każdego, kto może być zainteresowany, dodałem tutaj formularz za pomocą akcji " genesis_after_entry Motyw Genesis, ale jeśli nie używasz Genesis, możesz użyć filtru „ the_content I połączyłem twoją treść z treścią artykułu.
W naszym przykładzie wyświetlimy formularz po 3e artykuł. Jeśli korzystasz z filtra, użyj funkcji „ ob_start "I" ob_get_clean Aby zainicjować bufor i użyć jego zawartości.
światowy $ postu, $ wp_query; if (is_home() && $ wp_query->ilość postów[3]->ID == $ postu->ID) { zawierać(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); }
Oto kod CSS do stylu formularza.
# Blog-archive-zarejestruj { szerokość:100% ! important; jasny:obie; } # Blog-archive-zarejestruj { @include breakpoint ($ tablet) { tło:URL ( "images / niskiego bg.png") nie powtarzaj 0 0; wysokość:200px; } } # zestaw pola blog-archiwum-rejestracja { granica:0; szerokość:100%; padding-left:50px; } # zestaw pola blog-archiwum-rejestracja { @include breakpoint (max-width $ tablet) { padding-left:0px } } # legenda blog-archiwum-zarejestruj się { padding-top:20px; } # blog-archive-signup # pola-kontener { szerokość:100% } # blog-archive-signup input [nazwa * = 'email'] { tło:URL ( "images / niskiego field.png") nie powtarzaj 0 0; wyściółka:0; margines:0; wysokość:44px; granica:0; szerokość:560px; Wysokość linii:22px; unosić się:lewo; } # blog-archive-signup input [nazwa * = 'email'] { @include breakpoint (max-width $ tablet) { wyściółka:0; margines:0; granica:0; szerokość:50%; unosić się:lewo; } } # blog-archive-signup input [type = 'submit'] { tło:URL ( "images / niskiego button.png") nie powtarzaj 0 0; wyściółka:0; margines:0; wysokość:44px; granica:0; szerokość:180px; kolor: #fff; text-align:centrum }
Jak dodać subskrybentów
Teraz zarejestrujemy użytkowników w Jetpack przy użyciu „ jQuery.ajax ".
$("# Blog-archive-rejestrację").Zatwierdź(funkcjonować(e) { e.preventDefault(); $("LoadingMessage #, # failMessage").ukryć().usunąć(); było __button = $("blog-archive-signup input [type =" submit "]").otrzymać(0); $("blog-archive-signup input [type =" submit "]").po(codeable_spinner); było __DATA = $(to).serializacji() + '& secure =' + codeableVars.bezpieczeństwo + „& action = blog_archive_signup”; $.pisać(codeableVars.ajaxurl,__DATA,funkcjonować(odpowiedź) { konsola.log(odpowiedź); if (odpowiedź.sukces) { $("#codeable_spinner").replaceWith(„Sukces!”).opóźnienie(5000).Fadeout(„Wolna”).usunąć(); } więcej { $("#codeable_spinner").replaceWith(""+odpowiedź.wiadomość+"").opóźnienie(5000).Fadeout(„Wolna”).usunąć(); } }) })
Teraz musimy zapisać użytkownika w Jetpack i Intercom. Zagłębiłem się w kod Jetpacka, aby dowiedzieć się, w jaki sposób dodaje on subskrybentów, i znalazłem klasę „Jetpack_Subscriptions” oraz metodę statyczną, która przyjmuje e-mail jako parametr. A w przypadku Intercomu wystarczy proste żądanie CURL.
add_action('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); add_action('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); funkcjonować blog_archive_signup() { $ dane = szyk( „E-mail” => $ _ POST['Blog_archive_partition_email'], 'Custom_attributes' => szyk('Subscribed_via' => 'Blog_archive_partition') ); $ wezwanie = wswp_make_api_call($ dane); $ odpowiedź = szyk(„Sukces”=>prawdziwy,"Message" => "Bpa_signup"); $ subskrybować = Jetpack_Subscriptions::subskrybuj($ _REQUEST[$ prefix.'_email']); delete_transient('Wpcom_subscribers_total'); stats_update_blog(); // odśwież liczbę subskrybentów w wp-admin wp_send_json($ odpowiedź); wyjście(); } funkcjonować wswp_make_api_call($ dane) { $ curl = curl_init(); curl_setopt_array($ curl, szyk( CURLOPT_HTTPHEADER => szyk("Content-Type: application / json", "Zaakceptuj: aplikacja / 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($ dane), CURLOPT_HEADER => fałszywy, )); // Zwróć uwagę, że musisz ustawić klucz na prawidłowe wartości $ powrót = json_decode(curl_exec($ curl), prawdziwy); curl_close($ curl); powrót $ powrót; }
To wszystko. Teraz, gdy ktoś wypełni ten formularz, natychmiast otrzyma wiadomość e-mail z potwierdzeniem na Jetpack z informacją, że subskrybuje, i otrzyma e-maile z Twoimi artykułami, gdy tylko zostaną opublikowane.
Za kulisami są rejestrowani w Interkomie z etykietą „Subscribed_Via => partycja archiwum bloga”. Następnym razem powiem ci, jak możesz również wysłać subskrybentów wtyczki Thrive Leads do Intercom données dodatkowe informacje, które pozwolą rozróżnić je wszystkie.
Jeśli nie opanujesz przydatności „ codeableVars.security Musisz wiedzieć, że zawiera „ nuncjusz WordPress. Zwykle można to zrobić za pomocą funkcji php „ wp_nonce_field () W formularzu, ale w skrypcie zawierającym tylko JavaScript pole nonce jest już dostępne w funkcji JS „ wp_localize_script () ".
To wszystko, co można zrobić w tym samouczku. Możesz zadawać nam pytania lub udostępniać samouczek znajomym w swoich ulubionych sieciach społecznościowych.
