WordPress Javascript & jQuery example
워드프레스에서 Javascript와 jQuery를 사용하는 예
https://codex.wordpress.org/Using_Javascript
워드프레스가 생성한 템플릿 페이지에는 이미 jQuery가 포함되어 있기 때문에 개발자가 별도로 jQuery 라이브러리를 포함해서는 안된다. 워드프레스에서 생성해준 페이지 템플릿에 포함될 플러그인을 작성할 때 커스텀 자바스크립트 파일을 포함하고자 한다면 다음과 같은 방법을 사용하면 된다
테스트 환경
Autoset 9
WordPress 4.4
자바스크립트가 있는 경로가 플러그인 PHP 파일 폴더 하위의 scripts/my-scripts.js 이라면 다음과 같이 하면 된다
<script src="<?php echo plugins_url('scripts/my-script.js',__FILE__);?>"></script>
<script>printMsg('Script Included');</script>
my-script.js
function printMsg(msg){
alert(msg);
}
워드프레스 플러그인이 아닌 템플릿 페이지를 편집하여 jQuery 를 사용하고자 한다면, jQuery라이브러리는 워드프레스가 이미 포함하였기 때문에 다음과 같이하면 된다. $기호 대신에 'jQuery' 라는 식별자를 사용해야 한다
<script>
jQuery(function(){
alert('jQuery ready!');
});
만약 플러그인 내에서 jQuery를 사용한다면....
http://stackoverflow.com/questions/17855846/using-ajax-in-a-wordpress-plugin
jQuery를 중복하여 로드되는 것을 막고 jQuery를 사용 중인 다른 플러그인에서 오류가 발생하지 않도록 안전하게 다루기 위해서는 wp_enqueue_script() 함수를 사용해야 한다. wp_register_script()함수를 사용하여 먼저 스크립트를 등록하는 절차를 거치면 wp_enqueue_script()함수의 파라미터는 jQuery핸들만 전달하면 되므로 사용하기가 쉽게 된다. 그러나 wp_enqueue_script()함수 만으로도 jQuery를 로드할 수 있지만 함수 호출시 아규먼트가 좀더 복잡해진다
jQuery의 AJAX 기능을 사용하는 절차를 예로 들어 설명하자면,
1. wp_enqueue_scripts 후크에 액션함수를 등록하고 그 액션 함수 안에서 wp_register_script(), wp_enqueue_script()함수를 사용하여 jQuery를 로드한다
2. 또 하나의 액션함수를 선언하고 위에서 등록한 jQuery를 사용 ( AJAX 요청 )하는 기능을 작성한다
3. 또 하나의 액션함수를 선언하고 위의 AJAX 요청에 응답하는 기능을 작성한다
wp_register_script(); wp_enqueue_script()함수로 스크립트를 로드하기 전에 등록하는 함수
wp_enqueue_scripts hook : 프런트 엔드에서 사용될 스크립트와 스타일을 로드하기에 적절한 후크(아래의 사용 예 참조)
wp_enqueue_script(); 안전하게 jQuery를 로드할 수 있는 함수
wp_localize_script(); 프런트 엔드 스크립트 안에서 사용될 Javascript 오브젝트를 초기화하고 전달한다
wp_enqueue_scripts 후크 사용 예
function themeslug_enqueue_style() {
wp_enqueue_style( 'core', 'style.css', false );
}
function themeslug_enqueue_script() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
플러그인 파일 안에서 사용될 스크립트가 'wp_enqueue_scripts' 후크에 등록된 액션함수 안에서 로드될 수 있도록 아래처럼 작성한다
add_action( 'wp_enqueue_scripts', 'so_enqueue_scripts' );
function so_enqueue_scripts(){
wp_register_script( 'ajaxHandle', get_template_directory() . 'PATH TO YOUR SCRIPT FILE', array(), false, true );
wp_enqueue_script( 'ajaxHandle' ); // 위에서 등록했기 때문에 스크립트 핸들만으로 로드가 가능하다
wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin_ajax.php' ) ) );
}
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
$handle : 스크립트의 유일한 이름, 필수 아규먼트이고 아래의 나머지 아규먼트는 모두 옵션
$src : 스크립트의 URL
$deps : 스크립트가 사용하는 다른 스크립트들의 배열
$ver : 스크립트의 버전, 버전이 한가지라면 false
$in_footer : <head>영역에서 로드되는 스크립트가 아닌 <body>의 끝부분이 생성될 때에 로드될 스크립트
wp_enqueuq_script()함수도 wp_register_script()함수와 파라미터가 동일하지만 wp_register_script()함수를 사용하면 wp_enqueuq_script()함수의 아규먼트는 스크립트 핸들 하나만 사용하면 된다. 여기서 테스트할 때 사용하여 성공한 wp_enqueue_script()함수는 다음과 같다
wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery' ) );
AJAX 기능을 사용하기 위해 jQuery 스크립트도 로드한다는 의미이다
jQuery AJAX를 사용하는 파일을 아래처럼 작성한다
jQuery(document).ready( function($){
//Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call
$.ajax({
url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
type: 'POST',
action: 'myaction' // this is the function in your functions.php that will be triggered
data:{
name: 'John',
age: '38'
},
success: function( data ){
//Do something with the result from server
console.log( data );
}
});
});
위의 AJAX 요청에 응답하는 서버측 플러그인 액션함수를 다음과 같이 작성한다
add_action( 'wp_ajax_myaction', 'so_wp_ajax_function' );
add_action( 'wp_ajax_nopriv_myaction' 'so_wp_ajax_function' );
function so_wp_ajax_function(){
//DO whatever you want with data posted
//To send back a response you have to echo the result!
echo $_POST['name'];
echo $_POST['age'];
wp_die(); // ajax call must die to avoid trailing 0 in your response
}