MailChimp-integraatio WordPress-sovellukseen ilman laajennusta
WordPressin osalta saat melkein kaikenlaisen laajennuksen, joka toimii odotuksesi mukaan. Laajennusten käyttäminen WordPress-verkkosivustolla ei tietenkään ole ongelma, ennen kuin et ylikuormita verkkosivustoasi joukolla laajennuksia. Jos WordPress-verkkosivustollasi on paljon laajennuksia, se varmasti vaikuttaa palvelimeesi, verkkosivustoosi, aiheuttaa ristiriitoja laajennusten välillä. Se voi myös hidastaa verkkosivustoasi.
Artisans Webissä suosittelen aina käyttäjiä käyttämään mahdollisimman vähän laajennuksia. Jos voit saavuttaa tavarasi kirjoittamalla oman koodisi, siirry siihen. Se on aina hyvä käytäntö laajennuksen käyttämisen sijasta. Kirjoittamalla oma koodi, sinusta tulee parempi WordPress-kehittäjä. Loppujen lopuksi on avain tulla asiantuntijaksi WordPress-kehityksessä.
Tässä artikkelissa tutkitaan, miten MailChimp-integraatio tehdään WordPressissä ilman laajennuksia. Aiomme luoda oman uutiskirjeemme, lähettää lomakkeen WordPress Ajaxin kautta, tilata käyttäjän MailChimpin yleisöluetteloon.
Hanki MailChimp-sovellusliittymäavain ja yleisötunnus
Jotta voisit aloittaa MailChimp-integraation WordPressissä, sinun on ensin hankittava MailChimp-sovellusliittymäavain ja yleisötunnus. Tartu näihin tietoihin seuraamalla alla olevia ohjeita.
Kirjaudu MailChimp-tilillesi. Valitse käyttäjän kuvakkeesta Tili.
Napsauta seuraavalla sivulla kohtaa Extra-> API-avaimet.
Napsauta API-avaimesi -osiossa Luo avain ja kopioi tarvitsemasi API-avain hetkessä.
Nyt sinulla on API-avain valmis. Hanki seuraavaksi yleisötunnus, johon sinun on lisättävä tilaajat. Napsauta tätä varten Yleisö-valikkoa ja valitse sitten Asetukset-vaihtoehto avattavasta Hallitse yleisöä.
Napsauta Asetukset-kohdassa Yleisön nimeä ja oletuksia.
Seuraavalta sivulta löydät yleisötunnuksesi.
Luo WordPress-lyhytkoodi
Tavoitteenamme on luoda toimiva uutiskirjelomake, jotta vierailijoistasi voi tulla MailChimp-yleisösi. Tätä varten sinun on ensin luotava staattinen lomake, jossa on 2 kenttää – sähköposti ja lähetyspainike. Luodaan lyhytkoodi, joka hahmottaa tämän lomakkeen, ja voit sijoittaa tämän uutiskirjelomakkeen mihin tahansa verkkosivustollesi käyttämällä koodia.
Avaa aktiivinen teematiedosto functions.phpja lisää koodi sen alle.
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();
}Kun olet lisännyt yllä olevan koodin, voit nyt käyttää lyhytkoodia [mailchimp]. Sijoita se minne haluat, ja sinun pitäisi nähdä tilauslomake. Tietenkin sinun on ehkä lisättävä oma tyyli lomakkeeseen verkkosivustosi suunnittelun mukaan.
Lomakkeeseemme olemme lisänneet tunnus "email" sähköpostikenttään ja luokan "tilaa" lähetyspainikkeeseen. Tätä tunnusta ja luokkaa käytetään, kun lähetämme lomakkeen Ajaxin kautta.
Lisää JavaScript-tiedosto WordPressiin
Koska aiomme käyttää WordPress Ajaxia, meidän on kirjoitettava JavaScript-koodi. Joten meidän on sisällytettävä JS-tiedosto WordPress-ympäristöön. WordPress tarjoaa tavallisen tavan sisällyttää JS-tiedosto, jota meidän tulisi noudattaa. Luo js/awscript.jstiedosto teemahakemistoon. JS-tiedostoon välitämme oman muuttujamme ‘security’, joka toimii kuin nonce.
Koodin alapuolella on myös functions.phptiedoston sisällä .
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' );
}Siirry nyt js/awscript.jsja kirjoita koodi, joka vie käyttäjän kirjoittaman sähköpostin, välittää sen Ajaxille ja näyttää vastauksen käyttäjälle.
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);
}Edellä mainittuun koodiin, paitsi Ajax-vastauksen käsittelyyn, lisäin myös toiminnon, isEmail()joka tarkistaa, onko välitetty sähköposti voimassa vai ei.
Lisää tilaaja MailChimp-yleisöön
Toistaiseksi olemme tehneet uutiskirjeemme ja Ajax-puhelun. Kirjoita nyt koodi, joka tosiasiallisesti lähettää sähköpostin MailChimp-sovellusliittymään ja lisää tilaajan MailChimp-yleisötunnukseen.
Tässä meidän on annettava API-kutsu, joten käytämme wp_remote_post- menetelmää pyyntöjen lähettämiseen ja vastausten käsittelyyn.
Sinun tulisi lisätä alla oleva koodi functions.phptiedostoon.
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();
}Kun lisäät yllä olevaa koodia, muista korvata paikkamerkit YOUR_AUDIENCE_ID ja YOUR_API_KEY todellisilla arvoilla. Yllä oleva koodi kutsuu MailChimp-sovellusliittymän ja lisää sähköpostin suoraan yleisöluetteloon. Jos aiot lähettää vahvistussähköpostin käyttäjälle ennen sähköpostin lisäämistä luetteloon, aseta tila-arvoksi odottava.
Mailchimp tarjoaa myös Yleisö-kentät. Näiden kenttien avulla voit tallentaa lisätietoja käyttäjistä suoraan MailChimp-hallintapaneeliin. Jos haluat lisätä yleisökenttiä, voit tehdä sen lisäämällä vielä yhden taulukkoelementin yllä olevaan POST-pyyntöön. Lisään tässä arvot oletusyleisökentille FNAME ja 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'
)
));Kyse on MailChimp-integraatiosta WordPressissä ilman laajennuksia. Suosittelen tätä tapaa, koska se antaa sinulle vapauden muotoilla muotoasi ja auttaa sinua oppimaan hieman WordPress-koodauksesta. Jaa ajatuksesi tai ehdotuksesi alla olevassa kommenttiosassa.