가입 양식을 만들고 MB 프런트엔드를 통해 Mailchimp에 제출

이제 구독표를 만드는 것은 로켓 과학이 아니다.사이트 소유자는 보통 구독 폼을 만들고 이를 전자메일 마케팅 서비스와 통합시켜 전자메일을 더욱 빠르고 편리하게 관리하고 발송한다.현재 가장 흔히 볼 수 있는 전자 우편 서비스 중 하나는Mailchimp이다.
Word Press가 있으면 구독 폼을 마음대로 만들어서 Mailchimp에 연결할 수 있습니다.MB Frontend Submission을 통해 Meta Box 플러그인의 확장을 쉽게 수행할 수 있습니다.
이 작업을 수행하려면 다음 5단계를 따르십시오.

시작하기 전에

시작하려면 다음 플러그인이 필요합니다.

Meta Box: Meta Box Builder 및 MB 프런트엔드 커밋 플러그인을 사용하려면 먼저 핵심 플러그인인 Meta Box를 설치해야 합니다.그것은 무료로 wordpress.org에서 얻을 수 있다.

MB Frontend Submission: Meta Box의 고급 확장자로WordPress 사이트의 전단에서 내용을 제출할 수 있습니다.구독 폼을 제외하고는 많은 다른 유형의 폼과 경쟁할 수 있다.

MB Custom Post Type & Custom Taxonomy: Meta Box 플러그인의 무료 확장으로 사용자 정의 게시물 유형을 쉽게 만들 수 있습니다.그렇지 않으면 무료 도구Post Type Generator(문서 읽기here를 사용할 수 있습니다.

Meta Box Builder: 사용자 정의 필드를 만들려면 수동 인코딩을 제외하고 Meta Box Builder를 사용하여 시간을 절약해야 합니다.이것은 Meta Box 플러그인의 고급 확장이며, 직관적인 드래그 인터페이스를 가지고 필드를 만들 수 있습니다.

물론, Mailchimp 계정이 필요합니다.계정이 없으면 새 계정 here 을 만듭니다.
위의 모든 플러그 인을 설치하고 활성화하려면 다음 절차를 따르십시오.

1단계: 구독자를 위한 새 게시물 유형 만들기

우선, 구독자 데이터를 편리하게 저장하고 보기 위해 create a new post type 구독자를 호출해야 합니다.이 작업은 MB Custom Post Type & Custom Taxonomy 확장을 통해 수행할 수 있습니다.
메타프레임 > 게시물 유형 > 새 게시물 유형으로 들어갑니다.그런 다음 게시물 유형의 이름과 slug를 입력하고 Publish를 클릭합니다.

만들면 대시보드의 왼쪽 열에 post type name Subscriber가 표시됩니다(위 그림 참조).

2단계: 가입 양식 만들기

일반적으로 구독 양식에는 이름과 이메일이라는 두 개의 필드가 있습니다.또한 필요에 따라 custom fields(사용자 정의 필드를 사용하여 폼을 만드는 장점)도 추가할 수 있다.이 단계에서, 나는 두 개의 기본 필드만 만들었습니다. 사용자 정의 필드의name과 이메일을 사용합니다.
또한 데이터베이스 공간을 절약하기 위해 저는 post title 필드를 사용하여 name, post content 필드를 사용하여 전자메일을 표시할 것입니다.이 메타프레임의 ID를 subscription-form로 설정합니다.이름 필드의 ID는 post_title, 이메일 필드의 ID는 post_content입니다. post_title와 post_content는WordPress의 제목과 게시물 유형 내용의 두 기본 ID이기 때문입니다.
앞에서 설명한 대로 Meta Box Builder 확장을 사용하여 필드를 만듭니다.하지만 돈을 절약하고 싶다면 무료 도구인 메타박스의 온라인 생성기에서 자동으로 코드를 생성할 수 있다here.
메타프레임 > 사용자 정의 필드 > 새 내용을 추가하고 메타프레임의 이름과 ID를 입력하십시오.그런 다음 이름 및 e-메일 필드로 필드 유형Text을 선택합니다.

자세히 보기: How to add and configure custom fields using Meta Box Builder.
필드를 만든 후 설정 탭으로 이동하여 구독자 게시물 유형을 선택합니다.

마지막으로 를 클릭하여 변경 사항을 저장합니다.현재, 구독 폼에 필요한 모든 필드를 만들었습니다.

3단계: 프런트엔드에 구독 양식 삽입 및 표시

웹 사이트에 가입 양식을 삽입하고 사용자가 양식을 작성할 수 있도록 하려면 MB 프런트엔드 커밋 확장자를 사용해야 합니다.이 작업은 다음 짧은 코드를 통해 수행할 수 있습니다.
[mb frontend form id = 가입 양식 ajax= "true"recaptcha key= "..."recaptcha_secret=“…”]
설명:

subscription-form: 우리가 만든 원본 상자의 id

ajax="true": aax 불러오기 사용하기

recaptcha_key: 구글reCaptcha 사이트 키

recaptcha_secret: Google reCaptcha 키

나는 이 짧은 코드를 삽입하기 위해 구독 페이지를 만들었다.또한 다른 게시물이나 위젯에 이 짧은 코드를 삽입할 수 있습니다.

양식 스팸을 방지하기 위해 Google reCaptcha를 사용합니다.앞에서 설명한 바와 같이 Google reCaptcha를 전면 양식에 통합하는 것은 간단합니다.reCaptcha와 폼의 다른 속성에 대한 상세한 설명을 얻으려면 the documentation of MB Frontend Submission를 읽으십시오.
이것은 내가 만든 구독 폼입니다.화면 한구석에 reCaptcha 아이콘을 볼 수 있습니다.

4단계: 구독 양식 디자인

기본적으로 Meta Box는 앞면에 폼을 예쁘게 표시합니다.그러나 구독 폼을 맞춤형으로 만들어서 더욱 아름답게 하기 위해서 우리는 일부 CSS를 사용하여 보충해야 한다.모양새 > 사용자 지정 > 추가 CSS에 추가하려면 아래 내 CSS 코드를 참조하십시오.
.rwmb 테이블
배경: #e2e8f0;
충전:24px;
경계 반경: 4px;
최대 너비: 768px;
보증금: 0 자동;
}
.rwmb 표rwmb 메타박스
모니터:flex;
내용의 정당성을 증명: 공간 사이;
격자 간격: 12px;
}
.rwmb 표rwmb 필드
신축성: 1;
}
.rwmb 표rwmb 필드: 비(: 유형의 마지막){
이윤율: 0.12픽셀;
}
.rwmb 표rwmb 태그,
.rwmb 표rwmb 필드.rwmb 입력
부동:없음;
너비:100%;
한계 하한선: 5px;
}
.rwmb 양식 버튼rwmb 양식 입력
너비:100%;
}
결과는 다음과 같습니다.

5단계: 구독 양식을 Mailchimp에 연결

이 단계에서, 우리는 구독 폼을 MailChimp에 집적할 것이다.이것은 구독 폼을 통해 구독자 정보를 MailChimp에 보내는 것입니다.이후, 당신은 use MailChimp to send marketing campaigns 이 구독자들을 방문할 수 있습니다.
이렇게 하려면 다음 라이브러리를 사용하여 Mailchimp API에 연결합니다.
https://github.com/drewm/mailchimp-api
링크를 클릭하여 파일을 다운로드한 다음 주제에 삽입합니다.테마와 eStar를 사용하고 있기 때문에 Mailchimp.php 폴더를 만들고 inc 파일을 이 폴더에 복사합니다.
그런 다음 이 코드를 Mailchimp.php 파일에 추가합니다.
get 스타일시트 디렉토리 포함()/회사/우편물 침팬지.php';
\DrewM\MailChimp\MailChimp 사용;
함수 insertList()
$key='API 키 mailchimp của bạn';
$list id='통합할 목록의 id';
$merge_var=array(
“FNAME”=>$\u POST[“POST\u title”],
“LNAME=>”,
);
$mailchimp = 새mailchimp ($key);
$result=$mailchimp->post("/lists/".$list id./members", 배열(
'email_address'=>$_POST['POST_content'],
병합 필드 =>$merge\u 변수,
상태 => 가입됨,
) );
json encode($result)로 돌아가기;
}
작업 추가('rwmb frontend after process', 함수($config, $post id)
('subscription form'===$config['id'])
insertList();
죽다
}
}, 10, 2 );
설명:

functions.php: 양식을 제출한 후 우리가 가지고 있는 갈고리.

'rwmb_frontend_after_process': 2단계

에서 만든 원본 상자의 id

Mailchimp의 API 키를 가져오려면 Mailchimp 계정에 로그인한 다음 your API keys 섹션에서 API 키를 복사합니다.

child theme

목록의 id를 얻으려면Mailchimp 계정에 로그인한 다음'시청자 > 모든 연락처'에 들어가서'설정'을 누르고'시청자 이름과 기본값'을 선택하십시오:

시청자 ID 섹션에서는 목록 ID를 볼 수 있습니다.

참고: Mailchimp는 인터페이스를 자주 변경하기 때문에 다음에 Mailchimp 계정을 사용할 때 본문의 내용과 다를 수 있습니다.그러나 과정은 여전히 같다.
완료 후 시스템이 정상적으로 작동하는지 테스트합니다.나는 내 이름과 이메일로 구독표를 작성해 보았다.

Mailchimp의 e-메일 목록은 다음과 같습니다.

타다!구독 양식을 작성하고 Mailchimp와 통합했습니다.

임종 유언

MB 전단 제출을 사용하여 구독 폼을 만드는 것은 매우 유연하다.사용자가 필요에 따라 제출할 수 있도록 다양한 필드 유형과 고급 필드를 가진 폼을 만들 수 있습니다.또한 MB Frontend Submission 에는 여러 가지 애플리케이션이 있으므로 웹 사이트를 강화할 수 있습니다.
Mailchimp에 관해서는 당신의 마케팅 활동을 더욱 효과적으로 하는 것을 배워야 한다.
성공적인 활동 되세요!