{"id":28551,"date":"2021-06-13T09:35:00","date_gmt":"2021-06-13T06:35:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28551"},"modified":"2021-10-18T04:00:19","modified_gmt":"2021-10-18T01:00:19","slug":"integracao-do-mailchimp-no-wordpress-sem-usar-um-plug-in","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/integracao-do-mailchimp-no-wordpress-sem-usar-um-plug-in\/","title":{"rendered":"Integra\u00e7\u00e3o do MailChimp no WordPress sem usar um plug-in"},"content":{"rendered":"

Quando se trata de WordPress, voc\u00ea obter\u00e1 quase todo tipo de plugin que funciona de acordo com suas expectativas. Usar plug-ins no site WordPress obviamente n\u00e3o \u00e9 um problema at\u00e9 que voc\u00ea n\u00e3o esteja sobrecarregando seu site com um monte de plug-ins. Se voc\u00ea tem um grande n\u00famero de plug-ins em seu site WordPress, ent\u00e3o definitivamente isso afetar\u00e1 seu servidor ou site, causando conflitos entre os plug-ins. Isso tamb\u00e9m pode tornar seu site mais lento.<\/p>\n

No Artisans Web, eu sempre recomendo aos usu\u00e1rios usar o m\u00ednimo de plug-ins, tanto quanto poss\u00edvel. Se voc\u00ea pode realizar seu trabalho escrevendo seu pr\u00f3prio c\u00f3digo, v\u00e1 em frente. \u00c9 sempre uma boa pr\u00e1tica em vez de usar um plugin. Ao escrever seu pr\u00f3prio c\u00f3digo, voc\u00ea se tornar\u00e1 um desenvolvedor WordPress melhor. Afinal, \u00e9 fundamental se tornar um especialista em desenvolvimento WordPress.<\/p>\n

Neste artigo, estudamos como fazer a integra\u00e7\u00e3o do MailChimp no WordPress sem usar nenhum plugin. Vamos criar nosso pr\u00f3prio formul\u00e1rio de boletim informativo, enviar um formul\u00e1rio atrav\u00e9s do WordPress Ajax, inscrever o usu\u00e1rio na lista de p\u00fablico-alvo do MailChimp.<\/p>\n

Obtenha a chave da API MailChimp e o ID do p\u00fablico<\/h3>\n

Para come\u00e7ar a integra\u00e7\u00e3o do MailChimp no WordPress, primeiro voc\u00ea precisa obter a chave da API do MailChimp e o ID de p\u00fablico. Obtenha esses detalhes seguindo as etapas abaixo.<\/p>\n

Fa\u00e7a login<\/a> em sua conta MailChimp. No \u00edcone do usu\u00e1rio, selecione a conta.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Na pr\u00f3xima p\u00e1gina, clique em Extra-> Chaves de API<\/strong>.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Na se\u00e7\u00e3o Suas chaves de API, clique em Criar uma chave e copie sua chave de API que precisamos em um momento.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Agora voc\u00ea tem sua chave API pronta. Em seguida, obtenha um ID de p\u00fablico ao qual voc\u00ea precisa adicionar seus assinantes. Para isso, clique no menu P\u00fablico e selecione a op\u00e7\u00e3o Configura\u00e7\u00f5es no menu Gerenciar P\u00fablico.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Em Configura\u00e7\u00f5es, clique no nome do p\u00fablico e padr\u00f5es.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Na pr\u00f3xima p\u00e1gina, voc\u00ea encontrar\u00e1 seu ID de p\u00fablico.<\/p>\n

\"Integra\u00e7\u00e3o<\/a><\/p>\n

Crie um c\u00f3digo curto para WordPress<\/h3>\n

Nosso objetivo final \u00e9 criar um formul\u00e1rio de boletim informativo funcional para que seus visitantes possam se tornar o p\u00fablico do MailChimp. Para isso, primeiro voc\u00ea precisa criar um formul\u00e1rio est\u00e1tico que tenha 2 campos – e-mail e um bot\u00e3o de envio. Vamos criar um shortcode que renderiza este formul\u00e1rio e voc\u00ea pode colocar este formul\u00e1rio de newsletter em qualquer lugar do seu site usando o shortcode.<\/p>\n

Abra seu functions.php<\/code>arquivo de temas ativos e adicione o c\u00f3digo abaixo nele.<\/p>\n

add_shortcode('mailchimp', 'mailchimp_form');\nfunction mailchimp_form() {\n\u00a0\u00a0\u00a0\u00a0ob_start();\n\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0<form class=\"form-inline\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group mb-2\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"email\" class=\"sr-only\"><?php _e('Email'); ?><\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\" class=\"form-control-plaintext\" id=\"email\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"button\" class=\"btn btn-primary mb-2 subscribe\"><?php _e('Subscribe'); ?><\/button>\n\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0return ob_get_clean();\n}<\/code><\/pre>\n
Depois de adicionar o c\u00f3digo acima, voc\u00ea agora pode usar o c\u00f3digo de acesso [mailchimp]<\/code>. Coloque-o onde quiser e ver\u00e1 o formul\u00e1rio de inscri\u00e7\u00e3o. Claro, voc\u00ea pode precisar adicionar seu pr\u00f3prio estilo a um formul\u00e1rio de acordo com o design do seu site.<\/p>\n
Em nosso formul\u00e1rio, adicionamos o id ‘email’ ao campo de email e a classe ‘inscrever-se’ ao bot\u00e3o de envio. Este id e classe estar\u00e3o em uso quando enviarmos um formul\u00e1rio atrav\u00e9s do Ajax.<\/p>\n
Adicionar arquivo JavaScript no WordPress<\/h3>\n
Como pretendemos usar WordPress Ajax, temos que escrever algum c\u00f3digo JavaScript. Portanto, precisamos incluir um arquivo JS no ambiente WordPress. O WordPress fornece uma maneira padr\u00e3o de incluir o arquivo JS que devemos seguir. Crie um js\/awscript.js<\/code>arquivo em seu diret\u00f3rio de tema. Para nosso arquivo JS, passaremos nossa pr\u00f3pria vari\u00e1vel ‘security’ que atua como um nonce.<\/p>\n
O c\u00f3digo abaixo tamb\u00e9m vai para o functions.php<\/code>arquivo.<\/p>\n
add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );\nfunction twentynineteen_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'awscript', get_stylesheet_directory_uri(). '\/js\/awscript.js', array('jquery') );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url('admin-ajax.php'),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce(\"subscribe_user\"),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'awscript', 'aw', $script_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'awscript' );\n}<\/code><\/pre>\n
Agora v\u00e1 at\u00e9 js\/awscript.js<\/code>e escreva um c\u00f3digo que pega o e-mail inserido pelo usu\u00e1rio, passa-o para Ajax e mostra a resposta ao usu\u00e1rio.<\/p>\n
jQuery(function($){\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.subscribe', function(e) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0email = $('#email').val();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(isEmail(email)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'subscribe_user',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'email': email,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': aw.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(aw.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (response == 200) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('You have subscribed successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('This is not a valid email');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n});\n\u00a0\nfunction isEmail(email) {\n\u00a0\u00a0\u00a0\u00a0var regex = \/^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$\/;\n\u00a0\u00a0\u00a0\u00a0return regex.test(email);\n}<\/code><\/pre>\n
No c\u00f3digo acima, al\u00e9m de lidar com a resposta do Ajax, tamb\u00e9m adicionei uma fun\u00e7\u00e3o isEmail()<\/code>que verificar\u00e1 se o e-mail transmitido \u00e9 v\u00e1lido ou n\u00e3o.<\/p>\n
Adicionar assinante ao p\u00fablico do MailChimp<\/h3>\n
At\u00e9 agora, terminamos com nosso formul\u00e1rio de boletim informativo e uma chamada Ajax. Agora escreva um c\u00f3digo que realmente envie um e-mail para a API MailChimp e adicione um assinante ao ID de p\u00fablico do MailChimp.<\/p>\n
Aqui, como precisamos fazer uma chamada de API, usaremos o<\/a> m\u00e9todo wp_remote_post<\/a> para enviar solicita\u00e7\u00f5es e lidar com respostas.<\/p>\n
Voc\u00ea deve adicionar o c\u00f3digo abaixo no functions.php<\/code>arquivo.<\/p>\n
add_action('wp_ajax_subscribe_user', 'subscribe_user_to_mailchimp');\nadd_action('wp_ajax_nopriv_subscribe_user', 'subscribe_user_to_mailchimp');\n\u00a0\nfunction subscribe_user_to_mailchimp() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('subscribe_user', 'security');\n\u00a0\u00a0\u00a0\u00a0$email = $_POST['email'];\n\u00a0\u00a0\u00a0\u00a0$audience_id = 'YOUR_AUDIENCE_ID';\n\u00a0\u00a0\u00a0\u00a0$api_key = 'YOUR_API_KEY';\n\u00a0\u00a0\u00a0\u00a0$data_center = substr($api_key,strpos($api_key,'-')+1);\n\u00a0\u00a0\u00a0\u00a0$url = 'https:\/\/'. $data_center .'.api.mailchimp.com\/3.0\/lists\/'. $audience_id .'\/members';\n\u00a0\u00a0\u00a0\u00a0$auth = base64_encode( 'user:'. $api_key );\n\u00a0\u00a0\u00a0\u00a0$arr_data = json_encode(array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'email_address' => $email,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'status' => 'subscribed' \/\/pass 'subscribed' or 'pending'\n\u00a0\u00a0\u00a0\u00a0));\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$response = wp_remote_post( $url, array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'method' => 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'headers' => array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'Content-Type' => 'application\/json',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'Authorization' => \"Basic $auth\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'body' => $arr_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (is_wp_error( $response)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$error_message = $response->get_error_message();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"Something went wrong: $error_message\";\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$status_code = wp_remote_retrieve_response_code( $response );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0switch ($status_code) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case '200':\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $status_code;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0case '400':\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$api_response = json_decode( wp_remote_retrieve_body( $response ), true );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $api_response['title'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0default:\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo 'Something went wrong. Please try again.';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Ao adicionar o c\u00f3digo acima, certifique-se de substituir os marcadores YOUR_AUDIENCE_ID e YOUR_API_KEY pelos valores reais. O c\u00f3digo acima chama a API MailChimp e adiciona o e-mail diretamente \u00e0 lista de p\u00fablico. Se voc\u00ea pretende enviar um e-mail de confirma\u00e7\u00e3o ao usu\u00e1rio antes de adicionar seu e-mail \u00e0 lista, defina um valor de status como ‘pendente’.<\/p>\n
Mailchimp tamb\u00e9m fornece os campos de p\u00fablico. Usando esses campos, voc\u00ea pode armazenar informa\u00e7\u00f5es extras sobre os usu\u00e1rios diretamente no painel do MailChimp. Por precau\u00e7\u00e3o, se voc\u00ea deseja adicionar campos de p\u00fablico, pode faz\u00ea-lo adicionando mais um elemento de matriz na solicita\u00e7\u00e3o POST acima. Aqui, estou adicionando valores para os campos padr\u00e3o de p\u00fablico FNAME e LNAME.<\/p>\n
<?php\n...\n...\n$arr_data = json_encode(array(\n\u00a0\u00a0\u00a0\u00a0'email_address' => $email,\n\u00a0\u00a0\u00a0\u00a0'status' => 'subscribed', \/\/pass 'subscribed' or 'pending'\n\u00a0\u00a0\u00a0\u00a0'merge_fields'\u00a0 => array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'FNAME' => 'ENTER_FIRST_NAME',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'LNAME' => 'ENTER_LAST_NAME'\n\u00a0\u00a0\u00a0\u00a0)\n));<\/code><\/pre>\n
\u00c9 tudo uma quest\u00e3o de integra\u00e7\u00e3o MailChimp no WordPress sem plug-ins. Eu recomendo essa forma, pois d\u00e1 a voc\u00ea a liberdade de definir o estilo do seu formul\u00e1rio e tamb\u00e9m ajuda voc\u00ea a aprender um pouco sobre a codifica\u00e7\u00e3o do WordPress. Por favor, compartilhe suas id\u00e9ias ou sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n