Интеграция MailChimp в WordPress без использования плагина
Когда дело доходит до WordPress, вы получите почти все виды плагинов, которые работают в соответствии с вашими ожиданиями. Использование плагинов на сайте WordPress, конечно, не проблема, пока вы не перегрузите свой сайт кучей плагинов. Если у вас есть большое количество плагинов на вашем сайте WordPress, то это определенно повлияет на ваш сервер, сайт, вызовет конфликты между плагинами. Это также может замедлить работу вашего сайта.
В Artisans Web я всегда рекомендую пользователям как можно больше использовать минимум плагинов. Если вы можете добиться своих целей, написав собственный код, тогда дерзайте. Это всегда хорошая практика, а не использование плагина. Написав свой собственный код, вы станете лучшим разработчиком WordPress. В конце концов, это ключ к тому, чтобы стать экспертом в разработке WordPress.
В этой статье мы изучаем, как выполнить интеграцию MailChimp в WordPress без использования каких-либо плагинов. Мы собираемся создать нашу собственную форму информационного бюллетеня, отправить форму через WordPress Ajax, подписать пользователя на ваш список аудитории MailChimp.
Получите ключ API MailChimp и идентификатор аудитории
Чтобы начать интеграцию MailChimp в WordPress, вам сначала нужно получить ключ API MailChimp и идентификатор аудитории. Получите эти сведения, выполнив следующие действия.
Войдите в свою учетную запись MailChimp. Из значка пользователя выберите Учетную запись.
На следующей странице нажмите Extra-> API keys.
В разделе «Ваши ключи API» нажмите «Создать ключ» и скопируйте свой ключ API, который нам понадобится в ближайшее время.
Теперь у вас есть ключ API. Затем получите идентификатор аудитории, к которому нужно добавить подписчиков. Для этого щелкните меню «Аудитория», а затем выберите параметр «Настройки» в раскрывающемся списке «Управление аудиторией».
В разделе “Настройки” нажмите на название аудитории и значения по умолчанию.
На следующей странице вы найдете свой идентификатор аудитории.
Создайте шорткод WordPress
Наша конечная цель – создать рабочую форму информационного бюллетеня, чтобы ваши посетители могли стать вашей аудиторией MailChimp. Для этого вам сначала нужно создать статическую форму с двумя полями – электронная почта и кнопка отправки. Давайте создадим шорткод, который отображает эту форму, и вы можете разместить эту форму информационного бюллетеня в любом месте вашего веб-сайта, используя шорткод.
Откройте файл активной темы functions.phpи добавьте в него код ниже.
add_shortcode('mailchimp', 'mailchimp_form');
function mailchimp_form() {
ob_start();
?>
<form class="form-inline">
<div class="form-group mb-2">
<label for="email" class="sr-only"><?php _e('Email'); ?></label>
<input type="email" class="form-control-plaintext" id="email">
</div>
<button type="button" class="btn btn-primary mb-2 subscribe"><?php _e('Subscribe'); ?></button>
</form>
<?php
return ob_get_clean();
}После добавления вышеуказанного кода вы теперь можете использовать шорткод [mailchimp]. Поместите его где хотите, и вы должны увидеть форму подписки. Конечно, вам может потребоваться добавить собственный стиль в форму в соответствии с дизайном вашего веб-сайта.
В нашу форму мы добавили идентификатор «электронная почта» в поле электронной почты и класс «подписаться» на кнопку отправки. Этот идентификатор и класс будут использоваться, когда мы отправим форму через Ajax.
Добавить файл JavaScript в WordPress
Поскольку мы собираемся использовать WordPress Ajax, нам нужно написать код JavaScript. Итак, нам нужно включить JS-файл в среду WordPress. WordPress предоставляет стандартный способ включения JS-файла, которому мы должны следовать. Создайте js/awscript.jsфайл в каталоге своей темы. В наш JS-файл мы передадим нашу собственную переменную security, которая действует как одноразовый номер.
Код ниже также находится внутри functions.phpфайла.
add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );
function twentynineteen_scripts() {
// Register the script
wp_register_script( 'awscript', get_stylesheet_directory_uri(). '/js/awscript.js', array('jquery') );
// Localize the script with new data
$script_array = array(
'ajaxurl' => admin_url('admin-ajax.php'),
'security' => wp_create_nonce("subscribe_user"),
);
wp_localize_script( 'awscript', 'aw', $script_array );
// Enqueued script with localized data.
wp_enqueue_script( 'awscript' );
}Теперь перейдите к js/awscript.jsи напишите код, который принимает введенную пользователем электронную почту, передает ее Ajax и показывает ответ пользователю.
jQuery(function($){
$('body').on('click', '.subscribe', function(e) {
e.preventDefault();
email = $('#email').val();
if(isEmail(email)) {
var data = {
'action': 'subscribe_user',
'email': email,
'security': aw.security
};
$.post(aw.ajaxurl, data, function(response) {
if (response == 200) {
alert('You have subscribed successfully.');
} else {
alert(response);
}
});
} else {
alert('This is not a valid email');
}
});
});
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}В приведенном выше коде, помимо обработки ответа Ajax, я также добавил функцию, isEmail()которая будет проверять, является ли переданное электронное письмо действительным или нет.
Добавить подписчика в аудиторию MailChimp
На этом мы закончили с формой информационного бюллетеня и вызовом Ajax. Теперь напишите код, который фактически отправляет электронное письмо в API MailChimp и добавляет подписчика к идентификатору аудитории MailChimp.
Здесь, поскольку нам нужно выполнить вызов API, мы будем использовать метод wp_remote_post для отправки запросов и обработки ответов.
Вы должны добавить в functions.phpфайл приведенный ниже код .
add_action('wp_ajax_subscribe_user', 'subscribe_user_to_mailchimp');
add_action('wp_ajax_nopriv_subscribe_user', 'subscribe_user_to_mailchimp');
function subscribe_user_to_mailchimp() {
check_ajax_referer('subscribe_user', 'security');
$email = $_POST['email'];
$audience_id = 'YOUR_AUDIENCE_ID';
$api_key = 'YOUR_API_KEY';
$data_center = substr($api_key,strpos($api_key,'-')+1);
$url = 'https://'. $data_center .'.api.mailchimp.com/3.0/lists/'. $audience_id .'/members';
$auth = base64_encode( 'user:'. $api_key );
$arr_data = json_encode(array(
'email_address' => $email,
'status' => 'subscribed' //pass 'subscribed' or 'pending'
));
$response = wp_remote_post( $url, array(
'method' => 'POST',
'headers' => array(
'Content-Type' => 'application/json',
'Authorization' => "Basic $auth"
),
'body' => $arr_data,
)
);
if (is_wp_error( $response)) {
$error_message = $response->get_error_message();
echo "Something went wrong: $error_message";
} else {
$status_code = wp_remote_retrieve_response_code( $response );
switch ($status_code) {
case '200':
echo $status_code;
break;
case '400':
$api_response = json_decode( wp_remote_retrieve_body( $response ), true );
echo $api_response['title'];
break;
default:
echo 'Something went wrong. Please try again.';
break;
}
}
wp_die();
}При добавлении приведенного выше кода не забудьте заменить заполнители YOUR_AUDIENCE_ID и YOUR_API_KEY на фактические значения. Приведенный выше код вызывает API MailChimp и напрямую добавляет электронное письмо в список аудитории. Если вы собираетесь отправить пользователю электронное письмо с подтверждением перед добавлением его электронной почты в список, установите значение статуса как «ожидающий».
Mailchimp также предоставляет поля Аудитории. Используя эти поля, вы можете хранить дополнительную информацию о пользователях прямо в панели управления MailChimp. На всякий случай, если вы хотите добавить поля аудитории, вы можете сделать это, добавив еще один элемент массива в указанный выше запрос POST. Здесь я добавляю значения для полей аудитории по умолчанию FNAME и LNAME.
<?php
...
...
$arr_data = json_encode(array(
'email_address' => $email,
'status' => 'subscribed', //pass 'subscribed' or 'pending'
'merge_fields' => array(
'FNAME' => 'ENTER_FIRST_NAME',
'LNAME' => 'ENTER_LAST_NAME'
)
));Все дело в интеграции MailChimp в WordPress без плагинов. Я рекомендую этот способ, так как он дает вам свободу стилизации вашей формы, а также помогает вам немного узнать о кодировании WordPress. Пожалуйста, поделитесь своими мыслями или предложениями в разделе комментариев ниже.
Статьи по Теме
- Интеграция MailChimp на веб-сайте с использованием API MailChimp и PHP
- Как интегрировать новостную рассылку MailChimp в приложение Laravel