{"id":29508,"date":"2021-06-13T09:56:00","date_gmt":"2021-06-13T06:56:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29508"},"modified":"2021-10-17T04:17:12","modified_gmt":"2021-10-17T01:17:12","slug":"mailchimp-integration-i-wordpress-utan-att-anvanda-ett-plugin","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/mailchimp-integration-i-wordpress-utan-att-anvanda-ett-plugin\/","title":{"rendered":"MailChimp-integration i WordPress utan att anv\u00e4nda ett plugin"},"content":{"rendered":"

N\u00e4r det g\u00e4ller WordPress kommer du att f\u00e5 n\u00e4stan alla slags plugin som fungerar enligt dina f\u00f6rv\u00e4ntningar. Att anv\u00e4nda plugins p\u00e5 WordPress-webbplatsen \u00e4r naturligtvis inte ett problem f\u00f6rr\u00e4n du inte \u00f6verbelastar din webbplats med en massa plugins. Om du har ett stort antal plugins p\u00e5 din WordPress-webbplats kommer det definitivt att p\u00e5verka din server, webbplats, orsaka konflikter mellan plugins. Det kan ocks\u00e5 sakta ner din webbplats.<\/p>\n

P\u00e5 Artisans Web rekommenderar jag alltid anv\u00e4ndarna att anv\u00e4nda minimiprogram s\u00e5 mycket som m\u00f6jligt. Om du kan uppn\u00e5 dina saker genom att skriva din egen kod, v\u00e4lj det. Det \u00e4r alltid en bra praxis snarare \u00e4n att anv\u00e4nda ett plugin. Genom att skriva din egen kod blir du en b\u00e4ttre WordPress-utvecklare. N\u00e4r allt kommer omkring \u00e4r det nyckeln att bli expert p\u00e5 WordPress-utveckling.<\/p>\n

I den h\u00e4r artikeln studerar vi hur man g\u00f6r MailChimp-integration i WordPress utan att anv\u00e4nda n\u00e5got plugin. Vi ska skapa v\u00e5rt eget nyhetsbrevsformul\u00e4r, skicka in ett formul\u00e4r via WordPress Ajax, prenumerera anv\u00e4ndaren p\u00e5 din MailChimp’s Audience List.<\/p>\n

F\u00e5 MailChimp API-nyckel och m\u00e5lgrupps-id<\/h3>\n

F\u00f6r att komma ig\u00e5ng med MailChimp-integrationen i WordPress m\u00e5ste du f\u00f6rst h\u00e4mta MailChimp API-nyckel och m\u00e5lgrupps-ID. Ta tag i dessa detaljer genom att f\u00f6lja stegen nedan.<\/p>\n

Logga in<\/a> p\u00e5 ditt MailChimp-konto. V\u00e4lj konto fr\u00e5n anv\u00e4ndarikonen.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

Klicka p\u00e5 Extra-> API-nycklar<\/strong> p\u00e5 n\u00e4sta sida .<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

Under avsnittet Dina API-nycklar klickar du p\u00e5 Skapa en nyckel och kopierar din API-nyckel som vi beh\u00f6ver p\u00e5 ett \u00f6gonblick.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

Nu har du din API-nyckel redo. D\u00e4refter f\u00e5r du ett publik-ID som du beh\u00f6ver l\u00e4gga till dina prenumeranter. Klicka p\u00e5 menyn M\u00e5lgrupp f\u00f6r detta och v\u00e4lj sedan alternativet Inst\u00e4llningar i rullgardinsmenyn Hantera publik.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

Under Inst\u00e4llningar klickar du p\u00e5 m\u00e5lgruppens namn och standardinst\u00e4llningar.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

P\u00e5 n\u00e4sta sida hittar du ditt publik-ID.<\/p>\n

\"MailChimp-integration<\/a><\/p>\n

Skapa en WordPress-kortkod<\/h3>\n

V\u00e5rt slutm\u00e5l \u00e4r att skapa ett fungerande nyhetsbrevformul\u00e4r s\u00e5 att dina bes\u00f6kare kan bli din MailChimp-publik. F\u00f6r det m\u00e5ste du f\u00f6rst skapa ett statiskt formul\u00e4r som har tv\u00e5 f\u00e4lt – e-post och en skicka-knapp. L\u00e5t oss skapa en kortkod som g\u00f6r det h\u00e4r formul\u00e4ret och du kan placera detta nyhetsbrevformul\u00e4r var som helst p\u00e5 din webbplats med hj\u00e4lp av kortkoden.<\/p>\n

\u00d6ppna din aktiva temafil functions.php<\/code>och l\u00e4gg till koden nedan i den.<\/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
Efter att ha lagt till ovanst\u00e5ende kod kan du nu anv\u00e4nda kortkoden [mailchimp]<\/code>. Placera den var du vill och du b\u00f6r se prenumerationsformul\u00e4ret. Naturligtvis kan du beh\u00f6va l\u00e4gga till din egen styling i ett formul\u00e4r enligt din webbdesign.<\/p>\n
Till v\u00e5rt formul\u00e4r har vi lagt till id: n "e-post" i e-postf\u00e4ltet och klassen "prenumerera" p\u00e5 knappen Skicka. Detta ID och klass kommer att anv\u00e4ndas n\u00e4r vi skickar in ett formul\u00e4r via Ajax.<\/p>\n
L\u00e4gg till JavaScript-fil i WordPress<\/h3>\n
Eftersom vi t\u00e4nker anv\u00e4nda WordPress Ajax m\u00e5ste vi skriva lite JavaScript-kod. S\u00e5 vi m\u00e5ste inkludera en JS-fil i WordPress-milj\u00f6n. WordPress ger ett vanligt s\u00e4tt att inkludera JS-filen som vi b\u00f6r f\u00f6lja. Skapa en js\/awscript.js<\/code>fil i din temakatalog. Till v\u00e5r JS-fil skickar vi v\u00e5r egen variabel ’s\u00e4kerhet’ som fungerar som en nonce.<\/p>\n
Nedanst\u00e5ende kod g\u00e5r ocks\u00e5 in i functions.php<\/code>filen.<\/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
G\u00e5 nu \u00f6ver till js\/awscript.js<\/code>och skriv en kod som tar anv\u00e4ndarinmatad e-post, skickar den till Ajax och visar svaret till anv\u00e4ndaren.<\/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
I ovanst\u00e5ende kod, f\u00f6rutom att hantera Ajax-svar, lade jag ocks\u00e5 till en funktion isEmail()<\/code>som kontrollerar om det skickade e-postmeddelandet \u00e4r giltigt eller inte.<\/p>\n
L\u00e4gg till prenumerant till MailChimp-publiken<\/h3>\n
Hittills \u00e4r vi klara med v\u00e5rt nyhetsbrevsformul\u00e4r och ett Ajax-samtal. Skriv nu en kod som faktiskt skickar ett e-postmeddelande till MailChimp API och l\u00e4gger till en prenumerant p\u00e5 MailChimp Audience ID.<\/p>\n
H\u00e4r n\u00e4r vi beh\u00f6ver ge ett API-samtal anv\u00e4nder vi<\/a> metoden wp_remote_post<\/a> f\u00f6r att skicka f\u00f6rfr\u00e5gningar och hantera svar.<\/p>\n
Du b\u00f6r l\u00e4gga till koden nedan i functions.php<\/code>filen.<\/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
N\u00e4r du l\u00e4gger till koden ovan, se till att ers\u00e4tta platsh\u00e5llarna YOUR_AUDIENCE_ID och YOUR_API_KEY med de faktiska v\u00e4rdena. Ovanst\u00e5ende kod anropar MailChimp API och l\u00e4gger till e-postmeddelandet i publiklistan direkt. Om du t\u00e4nker skicka ett bekr\u00e4ftelsemeddelande till anv\u00e4ndaren innan du l\u00e4gger till sitt e-postmeddelande i listan, st\u00e4ll in ett statusv\u00e4rde som "v\u00e4ntande".<\/p>\n
Mailchimp tillhandah\u00e5ller ocks\u00e5 m\u00e5lgruppsf\u00e4lten. Med hj\u00e4lp av dessa f\u00e4lt kan du lagra extra information om anv\u00e4ndare direkt i MailChimp-instrumentpanelen. Om du vill l\u00e4gga till m\u00e5lgruppsf\u00e4lt kan du g\u00f6ra det genom att l\u00e4gga till ytterligare ett arrayelement i ovanst\u00e5ende POST-beg\u00e4ran. H\u00e4r l\u00e4gger jag till v\u00e4rden f\u00f6r standardf\u00e4ltf\u00e4ltet FNAME och 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
Det handlar om MailChimp-integration i WordPress utan plugins. Jag rekommenderar detta s\u00e4tt eftersom det ger dig friheten att utforma din form och ocks\u00e5 hj\u00e4lper dig att l\u00e4ra dig lite om WordPress-kodning. Dela dina tankar eller f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n