ユーザーの位置情報を自動的に検出し、WordPressのページに表示する方法

ユーザーの位置を特定するには、HTML Geolocation APIを使用できます。https://www.w3schools.com/html/html5_geolocation.asp。

w3schoolsの例のように、javascript関数をトリガーするものが必要です。ドロップダウン要素にonclick=”getLocation() “属性を指定します。ロケーションを出力したい要素にIDを与え、関数の結果をそこに置くことができるようにします。

そして、以下のjavascriptをワードプレステーマのfooter.phpファイル、またはあなたの設定に最も合うと思う場所に記述します。

引用元: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation

元記事: https://stackoverflow.com/questions/62071097/how-to-automatically-detects-users-location-and-display-in-wordpress-page

<script>
var x = document.getElementById("your_dropwdown_id");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}
</script>

つまり、onclick=”getLocation() “属性の要素がクリックされると、getLocation()関数が実行されます。この関数はブラウザの位置情報を取得し、その結果をyour_dropdown_idというidを持つ要素の中に出力します。

参考になれば幸いです！