WordPressでJavaScriptを使う方法

開発環境は、Windows 7 Professional(32bit)+XAMPP Control Panel v3.2.2。

1.現在使っているテーマを調べる
管理画面の左サイドにあるペンキのアイコンにマウスを合わせて、テーマと書かれたテキストリンクをクリックする。そして、有効になっているテーマが現在使用しているテーマ。

2./wordpress/wp-content/themes/使用しているテーマ名/footer.phpをクリックして表示する。

3.</body>タグの直前に以下のコードを挿入する。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
  $("#submit").on('click',function(){
    alert("OK");
  });
});
</script>

4.WordPressで投稿する際に、テキストタブにして、以下のHTMLタグを書いて、投稿します。

<input type="button" value="クリック" id="submit">

そうしたら、投稿したページへ飛んで、ボタンをクリックすると、OKというメッセージが出現します。

■Ajaxを使う

wordpress/wp-include/functions.phpを開き、一番下に以下のものを追加します。

function add_my_ajaxurl(){
?>
<script>
		var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
</script>
<?php
}

add_action('wp_head', 'add_my_ajaxurl', 1);

function text_ajax_test(){
  echo $_POST["data"];
  exit;
}

add_action('wp_ajax_text_ajax_test', 'text_ajax_test');
add_action('wp_ajax_nopriv_text_ajax_test', 'text_ajax_test');

?>

タグの直前に以下のコードを挿入する。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
	$('#ajax_btn').on('click',function(){
		$.ajax({
			url: ajax_url,
			type: "POST",
			data: {
				'action' : 'text_ajax_test',
				'data' : 'data'
			}
		}).done(function(msg){
			alert(msg);
		}).fail(function(msg){
			alert("error");
		});
	});
});
</script>

WordPressで投稿する際に、テキストタブにして、以下のHTMLタグを書いて、投稿します。

<input type="button" value="クリック" id="ajax_btn">

参考サイト
WordPressでJavaScriptを読み込ませるならこうすると便利です(2018年)