{"id":29370,"date":"2021-06-13T09:21:00","date_gmt":"2021-06-13T06:21:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29370"},"modified":"2021-10-18T03:32:57","modified_gmt":"2021-10-18T00:32:57","slug":"integracja-mailchimp-z-wordpress-bez-uzycia-wtyczki","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/integracja-mailchimp-z-wordpress-bez-uzycia-wtyczki\/","title":{"rendered":"Integracja MailChimp z WordPress bez u\u017cycia wtyczki"},"content":{"rendered":"

Je\u015bli chodzi o WordPress, otrzymasz prawie ka\u017cdy rodzaj wtyczki, kt\u00f3ra dzia\u0142a zgodnie z Twoimi oczekiwaniami. Korzystanie z wtyczek na stronie WordPress nie stanowi oczywi\u015bcie problemu, dop\u00f3ki nie prze\u0142adujesz swojej witryny mn\u00f3stwem wtyczek. Je\u015bli masz du\u017c\u0105 liczb\u0119 wtyczek na swojej stronie WordPress, na pewno wp\u0142ynie to na tw\u00f3j serwer, stron\u0119 internetow\u0105, powoduj\u0105c konflikty mi\u0119dzy wtyczkami. Mo\u017ce to r\u00f3wnie\u017c spowolni\u0107 Twoj\u0105 witryn\u0119.<\/p>\n

W Artisans Web zawsze zalecam u\u017cytkownikom korzystanie z minimalnych wtyczek w jak najwi\u0119kszym stopniu. Je\u015bli mo\u017cesz osi\u0105gn\u0105\u0107 swoje rzeczy, pisz\u0105c w\u0142asny kod, id\u017a po to. To zawsze dobra praktyka, a nie u\u017cywanie wtyczki. Pisz\u0105c w\u0142asny kod, staniesz si\u0119 lepszym programist\u0105 WordPress. W ko\u0144cu kluczowe jest, aby zosta\u0107 ekspertem w zakresie rozwoju WordPressa.<\/p>\n

W tym artykule dowiemy si\u0119, jak wykona\u0107 integracj\u0119 MailChimp w WordPress bez u\u017cycia \u017cadnej wtyczki. Zamierzamy stworzy\u0107 w\u0142asny formularz biuletynu, przes\u0142a\u0107 formularz przez WordPress Ajax, zapisa\u0107 u\u017cytkownika do listy odbiorc\u00f3w MailChimp.<\/p>\n

Uzyskaj klucz API MailChimp i identyfikator odbiorc\u00f3w<\/h3>\n

Aby rozpocz\u0105\u0107 integracj\u0119 MailChimp z WordPress, musisz najpierw uzyska\u0107 klucz API MailChimp i identyfikator publiczno\u015bci. Zdob\u0105d\u017a te szczeg\u00f3\u0142y, wykonuj\u0105c poni\u017csze czynno\u015bci.<\/p>\n

Zaloguj si\u0119<\/a> na swoje konto MailChimp. Z ikony u\u017cytkownika wybierz Konto.<\/p>\n

\"Integracja<\/a><\/p>\n

Na nast\u0119pnej stronie kliknij Extra->Klucze API<\/strong>.<\/p>\n

\"Integracja<\/a><\/p>\n

W sekcji Twoje klucze API kliknij Utw\u00f3rz klucz i skopiuj klucz API, kt\u00f3rego potrzebujemy za chwil\u0119.<\/p>\n

\"Integracja<\/a><\/p>\n

Teraz masz gotowy klucz API. Nast\u0119pnie zdob\u0105d\u017a identyfikator odbiorc\u00f3w, do kt\u00f3rego musisz doda\u0107 swoich subskrybent\u00f3w. W tym celu kliknij menu Odbiorcy, a nast\u0119pnie wybierz opcj\u0119 Ustawienia z menu rozwijanego Zarz\u0105dzaj odbiorcami.<\/p>\n

\"Integracja<\/a><\/p>\n

W Ustawieniach kliknij nazw\u0119 odbiorc\u00f3w i ustawienia domy\u015blne.<\/p>\n

\"Integracja<\/a><\/p>\n

Na nast\u0119pnej stronie znajdziesz sw\u00f3j identyfikator odbiorc\u00f3w.<\/p>\n

\"Integracja<\/a><\/p>\n

Utw\u00f3rz skr\u00f3t WordPress<\/h3>\n

Naszym celem ko\u0144cowym jest stworzenie dzia\u0142aj\u0105cego formularza biuletynu, aby odwiedzaj\u0105cy mogli sta\u0107 si\u0119 odbiorcami MailChimp. W tym celu najpierw musisz stworzy\u0107 statyczny formularz, kt\u00f3ry ma 2 pola \u2013 e-mail i przycisk przesy\u0142ania. Stw\u00f3rzmy kr\u00f3tki kod, kt\u00f3ry renderuje ten formularz i mo\u017cesz umie\u015bci\u0107 ten formularz biuletynu w dowolnym miejscu na swojej stronie internetowej za pomoc\u0105 shortcode.<\/p>\n

Otw\u00f3rz functions.php<\/code>plik aktywnych motyw\u00f3w i dodaj do niego poni\u017cszy kod.<\/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
Po dodaniu powy\u017cszego kodu mo\u017cesz teraz korzysta\u0107 z shortcode [mailchimp]<\/code>. Umie\u015b\u0107 go w dowolnym miejscu, a powiniene\u015b zobaczy\u0107 formularz zapisu. Oczywi\u015bcie mo\u017ce by\u0107 konieczne dodanie w\u0142asnego stylu do formularza zgodnie z projektem witryny.<\/p>\n
Do naszego formularza dodali\u015bmy id ’email’ do pola e-mail i klas\u0119 'subskrybuj’ do przycisku przesy\u0142ania. Ten identyfikator i klasa b\u0119d\u0105 u\u017cywane, gdy prze\u015blemy formularz przez Ajax.<\/p>\n
Dodaj plik JavaScript w WordPress<\/h3>\n
Poniewa\u017c zamierzamy u\u017cywa\u0107 WordPress Ajax, musimy napisa\u0107 troch\u0119 kodu JavaScript. Dlatego musimy do\u0142\u0105czy\u0107 plik JS do \u015brodowiska WordPress. WordPress zapewnia standardowy spos\u00f3b do\u0142\u0105czenia pliku JS, kt\u00f3rym powinni\u015bmy si\u0119 kierowa\u0107. Utw\u00f3rz js\/awscript.js<\/code>plik w swoim katalogu motyw\u00f3w. Do naszego pliku JS przeka\u017cemy w\u0142asn\u0105 zmienn\u0105 'security’, kt\u00f3ra zachowuje si\u0119 jak jednorazowa.<\/p>\n
Poni\u017cszy kod r\u00f3wnie\u017c trafia do functions.php<\/code>pliku.<\/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
Teraz przejd\u017a do js\/awscript.js<\/code>i napisz kod, kt\u00f3ry pobiera e-mail wprowadzony przez u\u017cytkownika, przekazuje go do Ajax i pokazuje odpowied\u017a u\u017cytkownikowi.<\/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
W powy\u017cszym kodzie opr\u00f3cz obs\u0142ugi odpowiedzi Ajax doda\u0142em r\u00f3wnie\u017c funkcj\u0119, isEmail()<\/code>kt\u00f3ra b\u0119dzie sprawdza\u0107 czy podany email jest poprawny czy nie.<\/p>\n
Dodaj subskrybenta do odbiorc\u00f3w MailChimp<\/h3>\n
Jak dot\u0105d sko\u0144czyli\u015bmy z naszym formularzem biuletynu i po\u0142\u0105czeniem Ajax. Teraz napisz kod, kt\u00f3ry faktycznie wysy\u0142a wiadomo\u015b\u0107 e-mail do interfejsu API MailChimp i dodaje subskrybenta do identyfikatora odbiorc\u00f3w MailChimp.<\/p>\n
Tutaj, poniewa\u017c musimy poda\u0107 wywo\u0142anie API, u\u017cyjemy<\/a> metody wp_remote_post<\/a> do wysy\u0142ania \u017c\u0105da\u0144 i obs\u0142ugi odpowiedzi.<\/p>\n
W functions.php<\/code>pliku nale\u017cy doda\u0107 poni\u017cszy kod .<\/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
Dodaj\u0105c powy\u017cszy kod, pami\u0119taj, aby zast\u0105pi\u0107 symbole zast\u0119pcze YOUR_AUDIENCE_ID i YOUR_API_KEY rzeczywistymi warto\u015bciami. Powy\u017cszy kod wywo\u0142uje interfejs API MailChimp i dodaje wiadomo\u015b\u0107 e-mail bezpo\u015brednio do listy odbiorc\u00f3w. Je\u015bli zamierzasz wys\u0142a\u0107 u\u017cytkownikowi wiadomo\u015b\u0107 e-mail z potwierdzeniem przed dodaniem jego adresu e-mail do listy, ustaw warto\u015b\u0107 statusu jako \u201eoczekuj\u0105cy".<\/p>\n
Mailchimp udost\u0119pnia r\u00f3wnie\u017c pola odbiorc\u00f3w. Korzystaj\u0105c z tych p\u00f3l, mo\u017cesz przechowywa\u0107 dodatkowe informacje o u\u017cytkownikach bezpo\u015brednio w panelu MailChimp. Na wszelki wypadek, je\u015bli chcesz doda\u0107 pola odbiorc\u00f3w, mo\u017cesz to zrobi\u0107, dodaj\u0105c jeszcze jeden element tablicy w powy\u017cszym \u017c\u0105daniu POST. Tutaj dodaj\u0119 warto\u015bci dla domy\u015blnych p\u00f3l odbiorc\u00f3w FNAME i 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
Chodzi o integracj\u0119 MailChimp z WordPress bez wtyczek. Polecam ten spos\u00f3b, poniewa\u017c daje to swobod\u0119 stylizowania formularza, a tak\u017ce pomaga dowiedzie\u0107 si\u0119 troch\u0119 o kodowaniu WordPress. Podziel si\u0119 swoimi przemy\u015bleniami lub sugestiami w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n