สร้างรายชื่อของสมาชิกที่มี Jetpack และอินเตอร์คอม

Jetpack เป็นโซลูชันที่ยอดเยี่ยมสำหรับการสร้างรายชื่อสมาชิก และ Intercom เป็นโซลูชันที่จะช่วยให้คุณจัดการสมาชิกและอยู่ใน ติดต่อเรา กับพวกเขาเหล่านั้น.

ในบทช่วยสอนนี้เราจะแสดงวิธีเพิ่มรายชื่อสมาชิกของคุณด้วย Jetpack และอินเตอร์คอม

บางคนมาถามฉันว่าเป็นไปได้หรือไม่ที่จะอนุญาตให้ผู้ใช้สมัครสมาชิกและรับบทความทั้งหมดของพวกเขาทางอีเมลและจัดเก็บที่อยู่อีเมลไว้ในอินเตอร์คอม ฉันตอบกลับทันทีโดยเฉพาะอย่างยิ่งในฐานะ API (อินเตอร์เฟซการเขียนโปรแกรมประยุกต์) ใช้งานง่าย

ดังนั้นฉันจึงคิดเกี่ยวกับการใช้ปลั๊กอินการสมัครสมาชิกซึ่งจะส่งที่อยู่อีเมลไปยังอินเตอร์คอมผ่าน API และนั่นคือสิ่งที่ฉันจะทำ

เราได้ติดตั้ง Jetpack แล้วดังนั้นสิ่งที่คุณต้องมีก็คือเปิดใช้งานโมดูล " การสมัครรับข้อมูล …อย่างไรก็ตาม มันไม่ง่ายอย่างนั้น ถ้าคุณต้องการแสดงไฟล์ ฟอร์ม ในตำแหน่งที่กำหนดเอง (หน้ากำหนดเองเช่น)? นอกจากนี้ เราจะแสดงวิธีปรับแต่งตำแหน่ง ฟอร์ม.

ขั้นตอนแรก

เราจะเริ่มต้นด้วยก ฟอร์ม ขั้นพื้นฐาน :

 อย่าพลาดโพสต์ของเรา รับข้อมูลอัปเดตในกล่องจดหมายของคุณทันทีที่โพสต์ 

สำหรับใครก็ตามที่อาจสนใจฉันได้เพิ่มแบบฟอร์มที่นี่โดยใช้การดำเนินการ " genesis_after_entry ชุดรูปแบบ Genesis แต่ถ้าคุณไม่ได้ใช้ Genesis คุณสามารถใช้ตัวกรอง " the_content และตัดแบ่งเนื้อหาของคุณเข้ากับบทความ

ในตัวอย่างของเราเราจะแสดงแบบฟอร์มหลัง 3^e บทความ หากคุณใช้ตัวกรองให้ใช้ฟังก์ชั่น " 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 ($ แท็บเล็ต) { พื้นหลัง:URL ( "images / ต่ำ bg.png") ไม่มีซ้ำ 0 0; ความสูง:200px; } } 
# fieldset บล็อกเก็บสมัครใช้งาน { ชายแดน:0; ความกว้าง:ลด 100%; padding ซ้าย:50px; } 
# fieldset บล็อกเก็บสมัครใช้งาน { เบรกพอยต์ @include (ความกว้างสูงสุดแท็บเล็ต $) { padding ซ้าย:0px } } 
# ตำนานบล็อกเก็บสมัครใช้งาน { padding ด้านบน:20px; } 
# สาขาบล็อกเก็บสมัครใช้ตู้คอนเทนเนอร์ # { ความกว้าง:ลด 100% } 
# การป้อนข้อมูลบล็อกเก็บสมัครใช้งาน [ชื่อ * = 'อีเมล'] { พื้นหลัง:URL ( "images / ต่ำ field.png") ไม่มีซ้ำ 0 0; การขยายความ:0; ขอบ:0; ความสูง:44px; ชายแดน:0; ความกว้าง:560px; line-height:22px; ลอย:ซ้าย; } 
# การป้อนข้อมูลบล็อกเก็บสมัครใช้งาน [ชื่อ * = 'อีเมล'] { เบรกพอยต์ @include (ความกว้างสูงสุดแท็บเล็ต $) { การขยายความ:0; ขอบ:0; ชายแดน:0; ความกว้าง:ลด 50%; ลอย:ซ้าย; } } 
# บล็อกเก็บสมัครใช้การป้อนข้อมูล [ประเภท = 'ส่ง'] { พื้นหลัง:URL ( "images / ต่ำ button.png") ไม่มีซ้ำ 0 0; การขยายความ:0; ขอบ:0; ความสูง:44px; ชายแดน:0; ความกว้าง:180px; สี: # fff; text-align:ศูนย์ }

วิธีเพิ่มสมาชิก

ตอนนี้เราจะลงทะเบียนผู้ใช้บน Jetpack โดยใช้ " jQuery.ajax '

$("# บล็อกเก็บสมัครใช้งาน").ส่ง(ฟังก์ชัน(e) { e.ป้องกันไม่ให้(); $("LoadingMessage # # failMessage").ซ่อน().เอาออก(); 
      คือ __button = $('# อินพุตบล็อกเก็บสมัครใช้งาน [type = 'ส่ง']).ได้รับ(0); $('# อินพุตบล็อกเก็บสมัครใช้งาน [type = 'ส่ง']).หลังจาก(codeable_spinner); 
      คือ __DATA = $(นี้).ทำให้เป็นอันดับ() + '& ปลอดภัย =' + codeableVars.ความปลอดภัย + '& action = blog_archive_signup';   
      $.เสา(codeableVars.ajaxurl,__DATA,ฟังก์ชัน(คำตอบ) { ปลอบใจ.เข้าสู่ระบบ(คำตอบ); if (คำตอบ.ความสำเร็จ) { 
          $("#codeable_spinner").replaceWith("ความสำเร็จ").ความล่าช้า(5000).fadeOut('ช้า').เอาออก(); } อื่น { 
          $("#codeable_spinner").replaceWith(""+คำตอบ.ข่าวสาร+"").ความล่าช้า(5000).fadeOut('ช้า').เอาออก(); 
      } 
}) 
})

ตอนนี้เราต้องบันทึกผู้ใช้ใน Jetpack และ Intercom ฉันค้นหาโค้ดของ Jetpack เพื่อดูว่ามันเพิ่มสมาชิกได้อย่างไร และพบคลาส "Jetpack_Subscriptions" และวิธีการสแตติกที่ใช้อีเมลเป็นพารามิเตอร์ และสำหรับอินเตอร์คอม คำขอ 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 => แถว('เนื้อหา-Type: application / JSON', 'ยอมรับ: 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(ข้อมูล $), CURLOPT_HEADER => เท็จ, )); 
   // หมายเหตุ: คุณจะต้องตั้งค่าคงที่สำหรับรหัสแอปและคีย์ API กับค่าที่เหมาะสม  
  $ ผลตอบแทน = json_decode(curl_exec($ ขด), จริง); 
  curl_close($ ขด); 
  กลับ $ ผลตอบแทน; 
}

นั่นคือทั้งหมด ตอนนี้เมื่อมีคนกรอกแบบฟอร์มนั้นพวกเขาจะได้รับอีเมลยืนยันทันทีบน Jetpack ว่าสมัครแล้วและจะได้รับอีเมลที่มีบทความของคุณทันทีที่โพสต์

เบื้องหลังพวกเขาลงทะเบียนในอินเตอร์คอมด้วยป้ายกำกับ “Subscribed_Via => พาร์ติชันเก็บถาวรบล็อก” ครั้งต่อไปฉันจะบอกคุณว่าคุณสามารถส่งสมาชิกปลั๊กอิน Thrive Leads ไปยัง Intercom ได้อย่างไร données ข้อมูลเพิ่มเติมที่จะช่วยให้คุณสามารถแยกแยะความแตกต่างได้ทั้งหมด

หากคุณไม่เข้าใจถึงประโยชน์ของ " codeableVars.security คุณต้องรู้ว่ามันมี " เอกอัครสมณทูต "WordPress โดยปกติสิ่งนี้จะเกิดขึ้นกับฟังก์ชั่น php " wp_nonce_field () ในรูปแบบ แต่สคริปต์ที่มีเพียง JavaScript ฟิลด์ nonce นั้นมีอยู่ในฟังก์ชั่น JS " wp_localize_script () '

นั่นคือทั้งหมดที่ต้องทำสำหรับบทช่วยสอนนี้ อย่าลังเลที่จะถามคำถามเราหรือแบ่งปันการสอนกับเพื่อน ๆ ของคุณบนเครือข่ายสังคมออนไลน์