Atrasi-2079-Vox

フリーランスウェブデザイナーArata-Atrasi-Takamiのブログ。服・靴・育児ときどき開発。

Category Archives: WordPress

GoogleマップがAPI必須になってACFをごにょるの巻

  • 投稿日:2016/08/29

クッソ久しぶりに開発話です。
先日とある法人様のサイト制作を担当したのですが、その時の話を備忘録も兼ねて投稿です。

 

 

今回もWordPressを使ったサイト構築ということで、WordPressサイト制作の強い味方であるプラグイン「Advanced Custom Fields(以下ACF)」を使っておりました。投稿タイプ毎に好きな入力項目を設定できるので、対クライアント様用に分かりやすい入力フォームを作れます。とっても便利。甘えちゃう。ちなみに私が使っているのはデベロッパ向けのPRO版です。

ACF – Advanced Custom Fields

Advanced Custom Fieldsの使い方 / KoToRi Blog

 

このACFの中には簡単にGoogle Mapsを設定できる入力項目を作る機能があります。しかし最近はGoogle Mapsを使う様な案件が無かったこともあって、恥ずかしながらこの機能について半分くらい忘れておりました。今回の法人様の案件で久しぶりにGoogle Mapsを使う場面があったので、設定を進めていたら…。

 

なんすかこれ

gmaperror

 

これは何が起きたのかな…?と思って調べたら、そうでしたそうでした。ちょっと前にこの話してました。今年の6月22日以降に新たに制作されたサイトでGoogle Mapsを利用する場合は、APIキーが必須になったのでした。

Google Mapsを利用する場合はAPIキーが必須になったもようです / ねんでぶろぐ

 

Google Maps API v2からv3に変わるときに不要となったAPIキーが復活し、v3でもキーの取得が必要になりました。APIキーの取得自体は簡単で「Google Maps APIs for Web」にアクセスしてウンタラカンタラするともらえます。

Google Maps の APIキー を簡単に取得する / ねんでぶろぐ

 

 

使用する時は従来のAPI読み込み用のタグに「?key=XXXXXX」という風にして取得したキーをコピペするだけです(XXXXXXの部分にキーを入れます。)。

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX"></script>

もし「?sensor=false」とかオプションの値を渡している場合は、「&」を使って繋げてあげればOKです。

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&key=XXXXXX"></script>

 

 

 

さて、これでユーザにお見せする方のGoogleマップは正常に表示されるようになりました。

 

が!

 

WordPressの管理画面で、ACFで設定したGoogle Maps設定項目を見ると…

 

HUUuuuuuuuu!!!!

gmapaerror_admin

 

そうですよな。そりゃそうですよな。だってACFにGoogle Maps APIキーを設定するようなとこないもん…。でもプラグインのコアファイルいじって直すのめんどくせーっす。プラグインのアプデの度に書き換わったら超めんどいっす。

 

でもGoogle Mapsの仕様変更から約2ヶ月位経ってる訳ですし、ACF開発元でも何かあるはず!と思って見たら、ちゃんと書いてました。

Google Map / ACF

 

functions.phpに下記のコードを追加して、取得したAPIキーを突っ込みます。

function my_acf_google_map_api( $api ){
  $api['key'] = 'XXXXXX';
  return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

PRO版の場合はこっち。

function my_acf_init() {
  acf_update_setting('google_api_key', 'XXXXXX');
}
add_action('acf/init', 'my_acf_init');

 

いずれも「XXXXXX」の箇所に取得したAPIキーをコピペします。

 

 

これでちゃんと表示できる様になりました。クライアント様も安心です。

googlemap_admin

 

 

 

 

 

 


ロリポップ×WordPressブログのURLをサブドメインに変更しますた

  • 投稿日:2013/05/03

Web制作をはじめ、人に頼まれてデザイン制作をしてきた案件もある程度貯まってきたので、その一部を公開しようかなーって気持ちで自分のプロフィール的サイト制作を思いたち「nevnum.com」なるドメインまで取得したわけですが。

どういう訳か分かりませんが「nevnum.com」の制作を始めると制作案件が入る…という不思議なジンクス状態でして、「nevnum.com」が一向に「支度中」ステータスのまま進まないわけです、はい。

一体いつまで支度してるんだっつーの、お前はお化粧が決まらない若奥様かっつーの、と自分にツッコミを入れつつも制作案件を依頼される事自体はひじょーに有難い話なので、まぁいっかと妙に納得しているのでした。

さて、そんな「nevnum.com」の事がありましたので、このブログもそのコンテンツの一部として作る&WordPressのお勉強するべく、わざわざライブドアブログからお引越しをしてきて、そのURLも「nevnum.com/vox/」と「nevnum.comの中のコンテンツですよ〜」的な設定をしてたんですが。前述の通りまるで「nevnum.com」が進まないのです。

「nevnum.com!なぜ動かん!by シロッコ」なんつってね、そら大して面白くもないギャグの一つでも言いたくなりますよ。

んで、ここまでくると「こりゃしばらくねぇな」と。
どうせまた制作に入ると案件入るぞと。しばらく進まないなら、このブログのURLが/vox/なんて「私、一コンテンツですから」的なツラしてるのも何か変だぞと。じゃあもういっそURLを「ブログ!」って感じで、ビックリマークでもつけるくらいブログ面にしてやろうと。

長い前置きとなりましたが、そんなこんなでこのブログURLを

「nevnum.com/vox/」から「vox.nevnum.com」

と、サブドメイン化しちゃうぞ作戦を実行しましたので、備忘録も兼ねての記事をば。

 

目的

今回の目的はWordPressブログのURL変更です。

■変更内容:URLをサブドメインにしたい
nevnum.com/vox/

vox.nevnum.com

■条件
旧URLにアクセスしても新URLに転送されること
各記事ページもちゃんと転送されること

■環境
ロリポップサーバで簡単インスコしたWordPressブログ(絶賛稼働中)

 

変更の手順

少しばかしスッタモンダしましたけど。下記の手順で上手くいきました。

【1】まずサブドメインを設定する

ロリポップの管理画面にログインして、サブドメイン設定を行います。

1

希望のサブドメイン(今回の場合はvox.nevnum.com)にして、サブドメインにアクセスした時のディレクトリ名を設定します。今回の場合は稼働中の/vox/を設定します。サーバのルートからのURLが表示されますので、環境に合わせて記入します。

【2】一晩くらい待つ

DNSの設定を行った事がある方ならご存知だと思いますが、DNS設定は反映されるまでに時間がかかります。1の手順の時にロリポップから
「設定の反映には時間かかるから待っててね☆(ゝω・)vキャピ」
なるメッセージがあると思います。

2

基本的に数時間程度で反映されると思いますが、私の場合は一晩待ちました。カレーと一緒です。

【3】サブドメイン確認後WordPressの設定変更

サブドメインにアクセスしてブログが表示されてれば、サブドメイン設定が反映されています。
サブドメインが確認できたらWordPressの設定を変更します。

3

WordPressブログの管理画面にログインし、一般設定でURL設定をします。
「WordPressアドレス(URL)」も「サイトアドレス(URL)」も共に新URLとなるサブドメインを設定します。

【4】.htaccessファイルを変更

3までの手順のままですと、旧URLで記事ページにアクセスした際にエラーが出たり、新URLへの転送はしてくれませんので、FTPでブログが格納されているディレクトリの直下にある.htaccessファイルをちょいといじります。

FTPソフトでアクセスしてエディタで編集してもいいですし、ロリポップ管理画面にある簡単エディタで行なってもどちらでも大丈夫です。

4

.htaccessに下記の記述を加えました。
Redirect permanent /vox/ http://vox.nevnum.com/

これで旧URLにアクセスしてもちゃんと新URLに転送され、表示されます。

5

 

なお、このブログの場合もそうですが、ツイートボタンやFacebookのいいね!ボタン等のSNSボタンでツイート数やいいね!数を表示させている場合、URLが変わってしまうと数を取得できずに初期状態の「0」に戻ります。変更の際はご注意を。