wordpressとajaxの通信で地図やアラートやアンケート結果を出す

いじったところ

いじったディレクトリ

wordpress/wp-content/themes/twentytwenty

いじったファイル

wordpress/wp-content/themes/twentytwenty/footer.php   #footerは違和感あったので、index.phpのほうがいいかも。
wordpress/wp-content/themes/twentytwenty/functions.php

グーグルマップを出す

google mapを出すにはgoogleからapi keyをとってくる必要があります。

Google Maps Platform APIキーの取得・発行について

keyの取得方法は上記のリンクを参考にしてください。

footer.php

<div id="map_canvas" style="width:100%; height:500px;"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=【取得したkey】"></script>
<script type="text/javascript">
    var map_canvas;

    function initialize_map() {
    var map_center = new google.maps.LatLng(35.6745973, 139.7778069);
    var map_options = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: map_center,
        zoom: 14,
    };
    map_canvas = new google.maps.Map(document.getElementById("map_canvas"), map_options);

    create_marker(35.6745973, 139.7778069);
    }

    function create_marker(lat, lng){
    var marker_options = {
        map: map_canvas,
        position: new google.maps.LatLng(lat, lng),
        zIndex: 0
    };

    var marker = new google.maps.Marker(marker_options);
    }

    google.maps.event.addDomListener(window, "load", initialize_map);
</script>

結果

アラートを出す

footer.php

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<button id="gosend">View Sitename</button>
<script>
jQuery(function($){
    $( '#gosend' ).on( 'click', function(){
    $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {
            'action' : 'view_sitename',
        },
        success: function( response ){
            alert( response );
        }
    });
    return false;
});

});
</script>

functions.php

function view_sitename(){
        echo get_bloginfo( 'name' );
        die();
    }
    add_action( 'wp_ajax_view_sitename', 'view_sitename' );
    add_action( 'wp_ajax_nopriv_view_sitename', 'view_sitename' );


function add_ajaxurl() {
    ?>
        <script>
            var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
        </script>
    <?php
    }
    add_action( 'wp_footer', 'add_ajaxurl', 1 );

結果

ボタンの結果

アラート文の結果

アンケート内容をウェブサイトにすぐに反映させる

footer.php の任意の場所で

<!-- クライアント側 -->
<!-- 送信データをユーザーに入力してもらうためのフォーム -->
<div id="posttest" style="border: solid 1px #8e8e8e; border-radius: 5px; padding: 10px;">
    <form id="testform">
        <div>
            お名前：<input type="text" name="yourname" maxlength="30" required>
        </div>
        <div>
            性別：
            <input type="radio" name="sex" id="input_man" value="man" checked>
                <label for="input_man">男性</label>
            <input type="radio" name="sex" id="input_woman" value="woman">
                <label for="input_woman">女性</label>
        </div>
        <div>
            年齢：<input type="number" name="age" required>
        </div>
        <div>
            好きな食べ物：
            <input type="checkbox" name="food[]" id="input_udon" value="うどん">
                <label for="input_udon">うどん</label>
            <input type="checkbox" name="food[]" id="input_soba" value="そば">
                <label for="input_soba">そば</label>
            <input type="checkbox" name="food[]" id="input_ramen" value="ラーメン">
                <label for="input_ramen">ラーメン</label>
        </div>
        <input type="submit" value="送信">
    </form>

    <!-- 通信結果を出力するためのdiv -->
    <div id="resultarea" style="background-color:#ffff9d; margin-top:15px;"></div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
jQuery(function($){
    // formの送信ボタンが押されたときの処理
    $( '#testform' ).submit( function(event){
        // クリックイベントをこれ以上伝播させない
        event.preventDefault();

        // フォームデータから、サーバへ送信するデータを作成
        var fd = new FormData( this );

        // サーバー側で何の処理をするかを指定。後ほどphp側で実装する
        fd.append('action'  , 'ajaxtest' );

        // ajaxの通信
        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: fd,
            processData: false,
            contentType: false,
            success: function( response ){
                $("#resultarea").html(response);
            },
            error: function( response ){
                $("#resultarea").html( "error" );
            }
        });
        return false;
    });
});
</script>

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 ajaxTestFunc(){
    // POSTされたデータは$_POSTに、連想配列で格納されている
    $result .= htmlentities( $_POST["yourname"], ENT_QUOTES, 'UTF-8' ) . "さん";
    $result .= "(" . $_POST["age"] . ")";
    $result .= ($_POST["sex"]=="man" ? "男性" : "女性") . "のラッキーフードは";
    if( isset($_POST["food"]) && is_array($_POST["food"]) ){
        foreach($_POST["food"] as $value){
            $result .= "、" . $value;
        }
    }
    else{
        $result .= "、麺類以外";
    }
    $result .= "です！";

    // echoで、クライアント側に返すデータを送信する
    echo $result;

    // dieしておかないと末尾に余計なデータ「0」が付与されるので注意
    die();
}
add_action( 'wp_ajax_ajaxtest', 'ajaxTestFunc' );
add_action( 'wp_ajax_nopriv_ajaxtest', 'ajaxTestFunc' )