{"id":29339,"date":"2021-06-13T09:58:00","date_gmt":"2021-06-13T06:58:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29339"},"modified":"2021-10-17T16:19:03","modified_gmt":"2021-10-17T13:19:03","slug":"integracion-de-mailchimp-en-wordpress-sin-usar-un-complemento","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/integracion-de-mailchimp-en-wordpress-sin-usar-un-complemento\/","title":{"rendered":"Integraci\u00f3n de MailChimp en WordPress sin usar un complemento"},"content":{"rendered":"

Cuando se trata de WordPress, obtendr\u00e1 casi todos los tipos de complementos que funcionen seg\u00fan sus expectativas. El uso de complementos en el sitio web de WordPress, por supuesto, no es un problema hasta que no sobrecargue su sitio web con un mont\u00f3n de complementos. Si tiene una gran cantidad de complementos en su sitio web de WordPress, definitivamente afectar\u00e1 a su servidor, sitio web, causar\u00e1 conflictos entre complementos. Tambi\u00e9n puede ralentizar su sitio web.<\/p>\n

En Artisans Web, siempre recomiendo a los usuarios que utilicen complementos m\u00ednimos tanto como sea posible. Si puede lograr sus cosas escribiendo su propio c\u00f3digo, h\u00e1galo. Siempre es una buena pr\u00e1ctica en lugar de utilizar un complemento. Al escribir su propio c\u00f3digo, se convertir\u00e1 en un mejor desarrollador de WordPress. Despu\u00e9s de todo, es clave convertirse en un experto en el desarrollo de WordPress.<\/p>\n

En este art\u00edculo, estudiamos c\u00f3mo hacer la integraci\u00f3n de MailChimp en WordPress sin usar ning\u00fan complemento. Vamos a crear nuestro propio formulario de bolet\u00edn, enviar un formulario a trav\u00e9s de WordPress Ajax, suscribir al usuario a la lista de audiencia de MailChimp.<\/p>\n

Obtener la clave de la API de MailChimp y la identificaci\u00f3n de la audiencia<\/h3>\n

Para comenzar con la integraci\u00f3n de MailChimp en WordPress, primero debe obtener la clave API de MailChimp y el ID de audiencia. Obtenga estos detalles siguiendo los pasos a continuaci\u00f3n.<\/p>\n

Inicie sesi\u00f3n<\/a> en su cuenta de MailChimp. Desde el icono de usuario, seleccione la Cuenta.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

En la p\u00e1gina siguiente, haga clic en Extra-> API keys<\/strong>.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

En la secci\u00f3n Sus claves de API, haga clic en Crear una clave y copie su clave de API que necesitamos en un momento.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

Ahora tienes lista tu clave API. A continuaci\u00f3n, obtenga una ID de audiencia a la que necesita agregar sus suscriptores. Para ello, haga clic en el men\u00fa Audiencia y luego seleccione la opci\u00f3n Configuraci\u00f3n del men\u00fa desplegable Administrar audiencia.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

En Configuraci\u00f3n, haga clic en el nombre de la audiencia y los valores predeterminados.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

En la p\u00e1gina siguiente, encontrar\u00e1 su ID de audiencia.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

Crea un c\u00f3digo corto de WordPress<\/h3>\n

Nuestro objetivo final es crear un formulario de bolet\u00edn que funcione para que sus visitantes puedan convertirse en su audiencia de MailChimp. Para eso, primero debe crear un formulario est\u00e1tico que tenga 2 campos: correo electr\u00f3nico y un bot\u00f3n de env\u00edo. Creemos un c\u00f3digo abreviado que muestre este formulario y puede colocar este formulario de bolet\u00edn en cualquier lugar de su sitio web utilizando el c\u00f3digo abreviado.<\/p>\n

Abra su functions.php<\/code>archivo de temas activos y agregue el c\u00f3digo a continuaci\u00f3n.<\/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
Despu\u00e9s de agregar el c\u00f3digo anterior, ahora puede usar el c\u00f3digo corto [mailchimp]<\/code>. Col\u00f3quelo donde desee y deber\u00eda ver el formulario de suscripci\u00f3n. Por supuesto, es posible que deba agregar su propio estilo a un formulario seg\u00fan el dise\u00f1o de su sitio web.<\/p>\n
A nuestro formulario, hemos agregado la identificaci\u00f3n ‘email’ al campo de correo electr\u00f3nico y la clase ‘subscribe’ al bot\u00f3n de enviar. Esta identificaci\u00f3n y clase estar\u00e1n en uso cuando enviemos un formulario a trav\u00e9s de Ajax.<\/p>\n
Agregar archivo JavaScript en WordPress<\/h3>\n
Como pretendemos utilizar WordPress Ajax, tenemos que escribir algo de c\u00f3digo JavaScript. Entonces, necesitamos incluir un archivo JS en el entorno de WordPress. WordPress proporciona una forma est\u00e1ndar de incluir el archivo JS que debemos seguir. Crea un js\/awscript.js<\/code>archivo en tu directorio de temas. A nuestro archivo JS, pasaremos nuestra propia variable ‘seguridad’ que act\u00faa como un nonce.<\/p>\n
El siguiente c\u00f3digo tambi\u00e9n va dentro del functions.php<\/code>archivo.<\/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
Ahora dir\u00edjase js\/awscript.js<\/code>y escriba un c\u00f3digo que tome el correo electr\u00f3nico ingresado por el usuario, lo pase a Ajax y muestre la respuesta al usuario.<\/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
En el c\u00f3digo anterior, adem\u00e1s de manejar la respuesta Ajax, tambi\u00e9n agregu\u00e9 una funci\u00f3n isEmail()<\/code>que verificar\u00e1 si el correo electr\u00f3nico pasado es v\u00e1lido o no.<\/p>\n
Agregar suscriptor a la audiencia de MailChimp<\/h3>\n
Hasta ahora hemos terminado con nuestro formulario de bolet\u00edn y una llamada Ajax. Ahora escriba un c\u00f3digo que env\u00ede un correo electr\u00f3nico a la API de MailChimp y agregue un suscriptor al ID de audiencia de MailChimp.<\/p>\n
Aqu\u00ed, como necesitamos hacer una llamada a la API, usaremos el<\/a> m\u00e9todo wp_remote_post<\/a> para enviar solicitudes y manejar respuestas.<\/p>\n
Debe agregar el siguiente c\u00f3digo en el functions.php<\/code>archivo.<\/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
Mientras agrega el c\u00f3digo anterior, aseg\u00farese de reemplazar los marcadores de posici\u00f3n YOUR_AUDIENCE_ID y YOUR_API_KEY con los valores reales. El c\u00f3digo anterior llama a la API de MailChimp y agrega el correo electr\u00f3nico a la lista de audiencia directamente. Si tiene la intenci\u00f3n de enviar un correo electr\u00f3nico de confirmaci\u00f3n al usuario antes de agregar su correo electr\u00f3nico a la lista, establezca un valor de estado como ‘pendiente’.<\/p>\n
Mailchimp tambi\u00e9n proporciona los campos Audiencia. Con estos campos, puede almacenar informaci\u00f3n adicional sobre los usuarios directamente dentro del panel de MailChimp. Por si acaso, si est\u00e1 buscando agregar campos de audiencia, puede hacerlo agregando un elemento de matriz m\u00e1s en la solicitud POST anterior. Aqu\u00ed, estoy agregando valores para los campos de audiencia predeterminados FNAME y 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
Se trata de la integraci\u00f3n de MailChimp en WordPress sin complementos. Recomiendo esta forma, ya que te da la libertad de dise\u00f1ar tu formulario y tambi\u00e9n te ayuda a aprender un poco sobre la codificaci\u00f3n de WordPress. Comparta sus pensamientos o sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n