WordPress URL 파라미터 값 Javascript로 받아서 처리

WordPress URL 파라미터 값 Javascript로 받아서 처리에서는 WordPress 플러그인 중에 Contact Form 7 플러그인을 활용하여 URL 파라미터 값을 javascript로 받아서 처리하는 방법을 알아 보도록 하겠습니다.

<준비물>

CF7 – Contact Form 7 다운로드

WordPress URL 파라미터 값 Javascript로 받아서 처리 — – Plugin Download URL : https://wordpress.org/plugins/contact-form-7/
– Plugin URL : https://contactform7.com/

글 목차

1. HTML

이메일 보내기 클릭시 파라미터 값도 함께 보냅니다.
url 뒤에 “?”로 시작하는 부분이 변수 전달을 알리는 시작 부분입니다.
“targetEmail”은 전달 변수이고, “sales@rudamaru.com” 부분은 변수값입니다.
참고로 변수를 2개 이상 넘길 경우에는 “&”를 사용합니다.
예) /?targetEmial=sales@rudamaru.com&companyName=rudamaru

<a href=“/target-url/?targetEmail=sales@rudamaru.com">문의하기</a>

2. Javascript 파일 생성

customer.js 파일을 만들어 아래 소스를 작성합니다.

(function ($) {
	function initChkSearch(){
		var targetEmail = getUrlParameter('targetEmail');
		// console.log(targetEmail); //콘솔 출력
		if (targetEmail) {
			// 셀렉트 옵션 자동 선택
			$('select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required').attr('value', targetEmail);
		}
	}

	jQuery(document).ready(function ($) {
		initChkSearch();
	});
})(jQuery);


//주소창의 파라미터 값을 받아서 처리(파라미터값만 추출하기)
var getUrlParameter = function getUrlParameter(sParam) {
	var sPageURL = decodeURIComponent(window.location.search.substring(1)),
	sURLVariables = sPageURL.split('&'),
	sParameterName,
	i;

	for (i = 0; i < sURLVariables.length; i++) {
		sParameterName = sURLVariables[i].split('=');

		if (sParameterName[0] === sParam) {
			return sParameterName[1] === undefined ? true : sParameterName[1];
		}
	}
};

3. Target Page 생성

파라미터 값을 받아서 처리 할 페이지 부분에 아래와 같이 select 태그를 추가하고
파라미터 값과 select value 값을 추가해 줍니다. – customer.js 참조

<select name="to-email" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" value="">
    <option value=""></option>
    <option value="sales@rudamaru.com">sales@rudamaru.com</option>
    <option value="tsn@rudamaru.com">tsn@rudamaru.com</option>
    <option value="sha@rudamaru.com">sha@rudamaru.com</option>
    <option value="tao@rudamaru.com">tao@rudamaru.com</option>
</select>

4. wp enqueue script 추가

function.php 파일에서 wp_enqueue_script 함수를 이용해
추가된 스크립트 파일(customer.js)을 head 부분에 추가해 줍니다.

function rudamaru_script() {
	// greensock
	wp_enqueue_script( 'customer.js', get_stylesheet_directory_uri(). '/customer.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'rudamaru_script' );