{"id":25807,"date":"2021-06-13T10:11:00","date_gmt":"2021-06-13T07:11:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25807"},"modified":"2021-10-18T02:04:49","modified_gmt":"2021-10-17T23:04:49","slug":"integration-de-mailchimp-dans-wordpress-sans-utiliser-de-plugin","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/integration-de-mailchimp-dans-wordpress-sans-utiliser-de-plugin\/","title":{"rendered":"Int\u00e9gration de MailChimp dans WordPress sans utiliser de plugin"},"content":{"rendered":"

En ce qui concerne WordPress, vous obtiendrez presque tous les types de plugins qui fonctionnent selon vos attentes. L’utilisation de plugins sur le site Web WordPress n’est bien s\u00fbr pas un probl\u00e8me tant que vous ne surchargez pas votre site Web avec un tas de plugins. Si vous avez un grand nombre de plugins sur votre site WordPress, cela affectera certainement votre serveur, votre site Web, provoquera des conflits entre les plugins. Cela peut \u00e9galement ralentir votre site Web.<\/p>\n

Chez Artisans Web, je recommande toujours aux utilisateurs d’utiliser un minimum de plugins autant que possible. Si vous pouvez r\u00e9aliser votre travail en \u00e9crivant votre propre code, alors allez-y. C’est toujours une bonne pratique plut\u00f4t que d’utiliser un plugin. En \u00e9crivant votre propre code, vous deviendrez un meilleur d\u00e9veloppeur WordPress. Apr\u00e8s tout, il est essentiel de devenir un expert en d\u00e9veloppement WordPress.<\/p>\n

Dans cet article, nous \u00e9tudions comment faire l’int\u00e9gration de MailChimp dans WordPress sans utiliser de plugin. Nous allons cr\u00e9er notre propre formulaire de newsletter, soumettre un formulaire via WordPress Ajax, inscrire l’utilisateur \u00e0 votre liste d’audience MailChimp.<\/p>\n

Obtenir la cl\u00e9 API MailChimp et l’identifiant d’audience<\/h3>\n

Pour commencer l’int\u00e9gration de MailChimp dans WordPress, vous devez d’abord obtenir la cl\u00e9 API MailChimp et l’ID d’audience. Saisissez ces d\u00e9tails en suivant les \u00e9tapes ci-dessous.<\/p>\n

Connectez-vous<\/a> \u00e0 votre compte MailChimp. \u00c0 partir de l’ic\u00f4ne de l’utilisateur, s\u00e9lectionnez le compte.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Sur la page suivante, cliquez sur Extra-> Cl\u00e9s API<\/strong>.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Dans la section Vos cl\u00e9s API, cliquez sur Cr\u00e9er une cl\u00e9 et copiez votre cl\u00e9 API dont nous avons besoin dans un instant.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Vous avez maintenant votre cl\u00e9 API pr\u00eate. Ensuite, obtenez un ID d’audience auquel vous devez ajouter vos abonn\u00e9s. Pour cela, cliquez sur le menu Audience puis s\u00e9lectionnez l’option Param\u00e8tres dans la liste d\u00e9roulante G\u00e9rer l’audience.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Sous Param\u00e8tres, cliquez sur le nom de l’audience et les valeurs par d\u00e9faut.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Sur la page suivante, vous trouverez votre identifiant d’audience.<\/p>\n

\"Int\u00e9gration<\/a><\/p>\n

Cr\u00e9er un shortcode WordPress<\/h3>\n

Notre objectif final est de cr\u00e9er un formulaire de newsletter fonctionnel afin que vos visiteurs puissent devenir votre audience MailChimp. Pour cela, vous devez d’abord cr\u00e9er un formulaire statique qui a 2 champs – email et un bouton de soumission. Cr\u00e9ons un shortcode qui rend ce formulaire et vous pouvez placer ce formulaire de newsletter n’importe o\u00f9 sur votre site Web en utilisant le shortcode.<\/p>\n

Ouvrez votre functions.php<\/code>fichier de th\u00e8mes actifs et ajoutez-y le code ci-dessous.<\/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
Apr\u00e8s avoir ajout\u00e9 le code ci-dessus, vous pouvez maintenant utiliser le shortcode [mailchimp]<\/code>. Placez-le o\u00f9 vous voulez et vous devriez voir le formulaire d’abonnement. Bien s\u00fbr, vous devrez peut-\u00eatre ajouter votre propre style \u00e0 un formulaire en fonction de la conception de votre site Web.<\/p>\n
\u00c0 notre formulaire, nous avons ajout\u00e9 l’identifiant ’email’ au champ e-mail et la classe ‘subscribe’ au bouton de soumission. Cet identifiant et cette classe seront utilis\u00e9s lorsque nous soumettrons un formulaire via Ajax.<\/p>\n
Ajouter un fichier JavaScript dans WordPress<\/h3>\n
Comme nous avons l’intention d’utiliser WordPress Ajax, nous devons \u00e9crire du code JavaScript. Nous devons donc inclure un fichier JS dans l’environnement WordPress. WordPress fournit un moyen standard d’inclure le fichier JS que nous devons suivre. Cr\u00e9ez un js\/awscript.js<\/code>fichier dans votre r\u00e9pertoire de th\u00e8me. \u00c0 notre fichier JS, nous passerons notre propre variable ‘security’ qui agit comme un nonce.<\/p>\n
Le code ci-dessous va \u00e9galement \u00e0 l’int\u00e9rieur du functions.php<\/code>fichier.<\/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
Maintenant, dirigez-vous vers js\/awscript.js<\/code>et \u00e9crivez un code qui prend le courrier \u00e9lectronique saisi par l’utilisateur, le transmet \u00e0 Ajax et affiche la r\u00e9ponse \u00e0 l’utilisateur.<\/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
Dans le code ci-dessus, en plus de g\u00e9rer la r\u00e9ponse Ajax, j’ai \u00e9galement ajout\u00e9 une fonction isEmail()<\/code>qui v\u00e9rifiera si l’e-mail transmis est valide ou non.<\/p>\n
Ajouter un abonn\u00e9 \u00e0 l’audience MailChimp<\/h3>\n
Jusqu’\u00e0 pr\u00e9sent, nous en avons termin\u00e9 avec notre formulaire de newsletter et un appel Ajax. \u00c9crivez maintenant un code qui envoie r\u00e9ellement un e-mail \u00e0 l’API MailChimp et ajoute un abonn\u00e9 \u00e0 l’ID d’audience MailChimp.<\/p>\n
Ici, comme nous devons donner un appel API, nous utiliserons la m\u00e9thode wp_remote_post<\/a> pour envoyer des demandes et g\u00e9rer les r\u00e9ponses.<\/p>\n
Vous devez ajouter le code ci-dessous dans le functions.php<\/code>fichier.<\/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
Lors de l’ajout du code ci-dessus, assurez-vous de remplacer les espaces r\u00e9serv\u00e9s YOUR_AUDIENCE_ID et YOUR_API_KEY par les valeurs r\u00e9elles. Le code ci-dessus appelle l’API MailChimp et ajoute directement l’e-mail \u00e0 la liste d’audience. Si vous avez l’intention d’envoyer un e-mail de confirmation \u00e0 l’utilisateur avant d’ajouter son e-mail \u00e0 la liste, d\u00e9finissez une valeur de statut comme \u00ab\u00a0en attente\u00a0\u00bb.<\/p>\n
Mailchimp fournit \u00e9galement les champs Audience. En utilisant ces champs, vous pouvez stocker des informations suppl\u00e9mentaires sur les utilisateurs directement dans le tableau de bord MailChimp. Juste au cas o\u00f9, si vous cherchez \u00e0 ajouter des champs Audience, vous pouvez le faire en ajoutant un \u00e9l\u00e9ment de tableau suppl\u00e9mentaire dans la requ\u00eate POST ci-dessus. Ici, j’ajoute des valeurs pour les champs d’audience par d\u00e9faut FNAME et 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
Il s’agit de l’int\u00e9gration de MailChimp dans WordPress sans plugins. Je recommande cette m\u00e9thode car elle vous donne la libert\u00e9 de styliser votre formulaire et vous aide \u00e9galement \u00e0 en apprendre un peu plus sur le codage WordPress. S’il vous pla\u00eet partager vos pens\u00e9es ou suggestions dans la section commentaires ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n