現在地取得ボタン作成
まず 地図を表示するための固定ページを作成
タイトルは地図として
パーマリンクのURLをメモ
http://dev.dotinstall.com/wordpress/?page_id=43
次に、地図を表示する固定ページテンプレート作成
各固定ページのページデザインをテンプレート選択で可能にする方法
によりますと
固定ページを表示する際、
WordPressのテーマの動きとしては
「page-スラッグ名.php」を読みにいき、
もし存在しなければ「page-ID.php」を読みにいく
ということなので
vim page-４３.php で作成
まずは地図を表示する前に
現在地の取得ができるかを実験するため
geolocation api で現在地を取得します
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?php get_header(); ?><ul> <li>経度：<span id="latitude"></span></li> <li>緯度：<span id="longitude"></span></li></ul><script>$(function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(pos) { $('#latitude').html(pos.coords.latitude); $('#longitude').html(pos.coords.longitude); } ); } else { window.alert('Geolocation API対応ブラウザでアクセスしてください。'); }});</script><?php get_footer(); ?> |
次に、地図アイコンからのリンク先を変更します
1 | <a class="ui-btn ui-corner-all" href="<?php echo get_page_link(35);?>/current.php"><img src="<?php echo get_template_directory_uri(); ?>/img/map.png" alt="" class="ic"><br>地図</a> |
というように
get_page_link(35);
だと
ID35 のお店一覧の固定ページになってしまうので
これを
ID４３の地図の固定ページになるように変更します
1 | <a class="ui-btn ui-corner-all" href="<?php echo get_page_link(43);?>/current.php"><img src="<?php echo get_template_directory_uri(); ?>/img/map.png" alt="" class="ic"><br>地図</a> |
これで保存してリロードすると
地図アイコンをクリックすると
現在地の座標が表示されます
