管理人は、地域系のブログを運営しています。お店を紹介したり、旅先の珍しいスポットを紹介したり。優れたプログラムを作って公開してくださている方がいます。今日はそのプログラムそのもののご紹介と、初心者が導入するときの注意についての記事。先に、そのプログラムをご紹介しておきます。Colorsこのプログラムが素晴らしいのは、ブログの中に指定した緯度経度のカスタムフィールドがあれば、情報をすべて表示してくれること。管理人は、福岡に住んでおり、地域情報を紹介していますが、あるラーメン屋さんを紹介したら、近くのスポットも併せて紹介したい時があります。地図上に自動表示&記事にリンクをしてくれますので、記事を書く側、読む側にとっても、とても便利なプログラムです。無限大に使い方が工夫できそうです。本当にすばらしいプログラム。Colorsさん、本当にありがとうございます。初心者でも導入できる解説このページを最初に教えてもらった時、最初は、何が書いてあるのかさっぱり理解できませんでした。今でも、プログラムの中身までは、よく分かっていないです。導入そのものはできるようになりました。そこで、題のように初心者でも導入できるように解説したいと思います。手順は以下の通りマーカークラスターのjavascriptファイルをダウンロードして、テーマの中に保存する。functions.phpに、上記のファイルを読み込ませる設定を入れる表示させたい部分に、グーグルマップスを表示させるプログラムを入れる。mapsに地図を表示。場所をいくつか、マーカーします。拡大表示させたとき、マーカーが密になって、ごちゃごちゃして、見づらい状況になることがあります。マーカークラスターは、この見づらさを解消してくれる便利なプログラムで、ぜひ、導入することがおすすめ。手順は、上記サイトの通りです。/trunk/markerclusterer/srcにアクセス。Colorsさんの解説だと、上のファイルはjavascriptを理解したい人用。下のファイルは、それを圧縮しているものなので下を使っています。ファイルを開いて、中のコードをテキストエディタなどで、markerclusterer_compiled.jsと名付けて保存。あなたがお使いのテーマフォルダの中に、jsというフォルダを作って、その中にアップロードします。以下をコピーして、書き込みます。wp_head()が出たら、上でいれたjavascriptファイルを読み込む設定になっています。最初からheader.phpに書いてはダメなのか?ちょっと、疑問に思ったのが、この記述を最初からheader.phpに書けばいいんじゃないの?ということ。・・・たぶん、それでも大丈夫だと思います。運用効率化するという点で、このほうが便利だなと感じています。投稿ページならsingle.php、固定ページならpage.phpの地図を表示させたい部分に書き込みます。っで、カスタムフィールドを設定します。新規追加から、名前→「lat,lng」と入力。っで、指定地点の緯度、経度を打ち込みます。これは、グーグルマップスが便利です。東京駅の緯度経度が知りたければ、東京駅で検索。できるだけ、地図を拡大表示して、マーカーにポインタを合わせて右クリックこの場所についてをクリックすると、このように緯度,経度が出ますので、この値をそのまま、先ほどのカスタムフィールドの右側に入力(コピペ)して投稿します。投稿をプレビューすると!!・・・。地図が表示される人と、されない人がいると思います。管理人は、最初地図が表示されませんでした。$content_widthを定義する地図が表示されなかった人は、プレビューページのソースを開いて見て欲しいんです。chromeだと、右クリック→ページのソースを表示。っで、この部分(グーグルマップスを表示する部分)が0pxになっていないですか?管理人の場合は、これが原因で地図が表示されませんでした。);"></div>ここ。「$content_width」の値が0。定義されていないことになります。firegobyこちらも、有名なプログラマーさんのブログですが、$content_widthについての記述があります。・・・なるほど、定義したほうがよさそう。600;そこで、この記述をfunctions.phpに書き込みますすると、めでたく地図が表示されると思います。レスポンシブにする最後にレスポンシブにする方法について、ちょこっと書きます。地図がスライドしてしまうなど、使いにくいです。そこで、PCでは大きく。スマホでは小さく、レスポンシブに表示をさせたいところです。}}のように変更して管理人は使用しています。173Tadashiさんに教えていただきました。本当にありがとうございます。apiのapiキー入力必須、さらに一定量使用で課金ありに対応するis_mobile()関数をワードプレスで使うのをやめましたワードプレスの表示や管理画面が重かったので、使っていないリビジョン機能を停止と削除をしましたツイッターのリンクに説明文や画像を貼る設定、やってみたんです。管理人についてtohiといいます。サイト運営歴は10年弱。動的サイトの運営などは苦手です。そんな、初心者とも言える観点から、当ブログを書いて行きたいと思います。初心者のためのサイト運営シェアTOPへ。