Bỏ qua đến nội dung chính

Xây dựng danh sách các thuê bao với Jetpack và Intercom

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Jetpack là một giải pháp tuyệt vời để tạo danh sách người đăng ký và Liên lạc là một giải pháp cho phép bạn quản lý người đăng ký và giữ liên lạc với họ.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tăng danh sách người đăng ký với Jetpack và Liên lạc.

Một số người đến hỏi tôi liệu có thể cho phép người dùng đăng ký và nhận tất cả các bài viết của họ bằng e-mail và lưu trữ địa chỉ e-mail của họ trong Liên lạc không. Tôi ngay lập tức phản hồi tích cực, đặc biệt là API (Giao diện lập trình ứng dụng) rất dễ sử dụng.

Vì vậy, tôi đã nghĩ về việc sử dụng một plugin đăng ký, nó sẽ gửi địa chỉ email đến liên lạc thông qua API. Và đó chính xác là những gì tôi sẽ làm.

Chúng tôi đã cài đặt Jetpack, vì vậy tất cả những gì bạn cần là kích hoạt mô-đun " Các theo dõi Tuy nhiên, điều đó không đơn giản, điều gì sẽ xảy ra nếu bạn muốn hiển thị biểu mẫu ở một vị trí tùy chỉnh (trang tùy chỉnh chẳng hạn)? Chúng tôi cũng sẽ chỉ cho bạn cách tùy chỉnh nơi biểu mẫu sẽ xuất hiện.

Các bước đầu tiên

Chúng ta sẽ bắt đầu với một dạng cơ bản:

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

<form id = "blog-archive-signup"> <! - id là để sử dụng trong việc nhắm mục tiêu mẫu thông qua javascript // -> <fieldset> <legend> Không bao giờ Miss bài viết của chúng tôi. <Input type = "submit" name = "blog_archive_partition_email" /> <input type = "submit" name = "blog_archive_partition_email" blog_archive_partition_submit "value =" SUBSCRIBE "/> </ p> </ fieldset> </ form>

Đối với tất cả những người có thể quan tâm, tôi đã thêm biểu mẫu ở đây bằng cách sử dụng hành động " genesis_after_entry Chủ đề Genesis, nhưng nếu bạn không sử dụng Genesis, bạn có thể sử dụng bộ lọc " Nội dung Và kết hợp nội dung của bạn với nội dung của bài viết.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Trong ví dụ của chúng tôi, chúng tôi sẽ hiển thị biểu mẫu sau 3e bài viết. Nếu bạn sử dụng bộ lọc, hãy sử dụng các chức năng " ob_start »Và« ob_get_clean Để khởi tạo bộ đệm và sử dụng nội dung của nó.

toàn cầu $ bài, $ wp_query; 
if (is_home() && $ wp_query->bài viết[3]->ID == $ bài->ID) {       
     bao gồm(get_stylesheet_directory()."/includes/templates/snippets/blog-archive-signup.php"); 
}

Dưới đây là một mã CSS để tạo kiểu mẫu.

# Blog-archive-đăng ký { chiều rộng:100% ! important; trong sáng:cả hai; } 
# Blog-archive-đăng ký { @ bao gồm điểm ngắt ($ viên) { lý lịch:url ( "images / bg.png-thấp") không lặp lại 0 0; cao:200px; } } 
# blog-archive-signup fieldset { biên giới:0; chiều rộng:100%; padding-left:50px; } 
# blog-archive-signup fieldset { @ bao gồm điểm ngắt (tối đa-chiều rộng $ viên) { padding-left:0px } } 
# blog-archive-signup legend { padding-top:20px; } 
# blog-archive-signup # fields-container { chiều rộng:100% } 
# blog-archive-signup input [name * = 'email'] { lý lịch:url ( "images /-field.png thấp") không lặp lại 0 0; đệm:0; tỷ suất lợi nhuận:0; cao:44px; biên giới:0; chiều rộng:560px; chiều cao giữa các dòng:22px; phao:trái; } 
# blog-archive-signup input [name * = 'email'] { @ bao gồm điểm ngắt (tối đa-chiều rộng $ viên) { đệm:0; tỷ suất lợi nhuận:0; biên giới:0; chiều rộng:50%; phao:trái; } } 
# blog-archive-signup input [type = 'submit'] { lý lịch:url ( "images /-button.png thấp") không lặp lại 0 0; đệm:0; tỷ suất lợi nhuận:0; cao:44px; biên giới:0; chiều rộng:180px; màu sắc: #fff; text-align:Trung tâm }

Cách thêm người đăng ký

Bây giờ chúng tôi sẽ đăng ký người dùng trên Jetpack bằng cách sử dụng " jQuery.ajax '.

$("# Blog-archive-đăng ký").trình(chức năng(e) {  e.preventDefault(); $("LoadingMessage #, # failMessage").ẩn().tẩy(); 
 __button = $('# blog-archive-signup input [type = "submit"]').được(0); $('# blog-archive-signup input [type = "submit"]').sau(codeable_spinner); 
 __DATA = $(điều này).sắp đặt từng hàng() + '& An toàn =' + codeableVars.an ninh + '& Action = blog_archive_signup';   
         
      $.gửi(codeableVars.ajaxurl,__DATA,chức năng(phản ứng) { giao diện điều khiển.đăng nhập(phản ứng); if (phản ứng.thành công) { 
                    $("#codeable_spinner").replaceWith("Thành công!").chậm trễ(5000).fadeOut('Chậm').tẩy(); } khác { 
                    $("#codeable_spinner").replaceWith(""+phản ứng.tin nhắn+"").chậm trễ(5000).fadeOut('Chậm').tẩy(); 
            } 
}) 
})

Bây giờ chúng tôi phải lưu người dùng trong Jetpack và Liên lạc. Tôi đã đào sâu vào mã Jetpack để tìm hiểu cách nó thêm người đăng ký và tôi đã tìm thấy lớp "Jetpack_Sub mô tả" và phương thức tĩnh lấy email làm tham số. Và đối với liên lạc, một yêu cầu CURL đơn giản sẽ đủ.

add_action('Wp_ajax_landing_page_signup', 'Blog_archive_signup')); 
add_action('Wp_ajax_nopriv_landing_page_signup', 'Blog_archive_signup'); 
chức năng blog_archive_signup() { 
  $ data = mảng( 'Email' => $ _ POST['Blog_archive_partition_email'], 'Custom_attributes' => mảng('Subscribed_via' => 'Blog_archive_partition') ); 
  $ cuộc gọi = wswp_make_api_call($ data); 
  $ phản ứng = mảng("Thành công"=>đúng,"Message" => "Bpa_signup"); 
  $ đăng ký = Jetpack_Subscriptions::đăng ký($ _REQUEST[$ prefix.'_email']); 
  delete_transient('Wpcom_subscribers_total'); 
  stats_update_blog();  
  // cập nhật số người đăng ký trong wp-admin  
  wp_send_json($ phản ứng); 
  ra(); 
} 
chức năng wswp_make_api_call($ data) { 
   $ curl = curl_init(); curl_setopt_array($ curl, mảng( CURLOPT_HTTPHEADER => mảng('Content-Type: application / json', 'Accept: application / 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($ data), CURLOPT_HEADER => sai, )); 
   / / Lưu ý bạn sẽ cần phải đặt các hằng số id ứng dụng và api  
  $ trở lại = json_decode(curl_exec($ curl), đúng); 
  curl_close($ curl); 
  trở lại $ trở lại; 
}

Đó là tất cả. Bây giờ, khi ai đó hoàn thành biểu mẫu này, anh ta ngay lập tức nhận được email xác nhận trên Jetpack nói rằng anh ta đã đăng ký và anh ta sẽ nhận được email có chứa các bài viết của bạn ngay khi chúng được xuất bản.

Đằng sau hậu trường, họ được đăng ký trong Liên lạc với thẻ "Subscribeed_Via => phân vùng lưu trữ blog". Lần tới, tôi sẽ cho bạn biết làm thế nào bạn cũng có thể gửi những người đăng ký plugin Thrive L dẫn của mình đến Liên lạc với dữ liệu bổ sung sẽ giúp bạn phân biệt tất cả.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Nếu bạn không làm chủ được tính hữu dụng của " codeableVars.security Bạn phải biết rằng nó chứa một " khâm mạng WordPress. Thông thường, điều này đã được thực hiện với chức năng php " wp_nonce_field () Trong biểu mẫu, nhưng tập lệnh chỉ chứa JavaScript, trường nonce đã có sẵn trong hàm JS " wp_localize_script () '.

Đó là tất cả những gì cần làm cho hướng dẫn này. Hãy đặt câu hỏi cho chúng tôi hoặc chia sẻ hướng dẫn với bạn bè của bạn trên các mạng xã hội yêu thích của bạn.

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
10 cổ phiếu
cổ phiếu10
tweet
Enregistrer