Atrasi-2079-Vox

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

Tag 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」に戻ります。変更の際はご注意を。

 

 


WordPress記事タイトルの英文が大文字になっちゃう

  • 投稿日:2013/02/09

このブログを時折見て下さっていた方はお気付きだったかと思いますが、このブログの記事タイトルの英文の箇所が全部大文字でした。実を言いますと意図的に大文字化してたわけでは無かったのですね。

「別にいいや」とずーっと放置してきたのですが、いい加減に原因究明&解決した方が何かと良いなと思いまして、ついに解決するに至りました。オチを言いますと、とってもとっても下らないと言いますか、何か肩透かしを食らったような気分です。はい。

それは事の顛末を…

 

 

1.何故か英文が大文字になっちゃう

いつから…という訳でもないのですが、WordPressの勉強とかのためにこのブログを作ってから割と初期段階でその症状は出ていました。WordPressインストール直後のデフォルト状態では何とも無かったのに、何故かタイトルの英文の箇所が大文字化。謎だ。

 

2.投稿時から大文字というわけではない

当たり前ですが「勝手に大文字化しちゃう」と言ってるんですから、当然私本人は投稿時に大文字では入力してません。

入力欄

ちゃんと大文字小文字と分けて入力している事がわかるかと思います。

 

投稿一覧のとこだって


ちゃーんと大文字小文字が区別されています。なんでだべ。

 

 

3.そういやSEOプラグイン入れてたな

そういえばSEO用に「All in One SEO」なるプラグインを入れてたな、と気づきました。確かその設定項目にタイトルを大文字にするとか何とかってのがあった気がします。

ありました

きっとこいつのせい。多分そう。こいつのチェックを外してみました。これで記事タイトルが直るはず。

 

 

………。

 

あれ?

 

直らない…。

 

 

4.All in One SEOのバグ?

一番クサイと思われてた「All in One SEO」プラグインの設定項目で直らなかったので不思議に思ったのですが、WordPressのプラグインにバグなんてつきもの、きっと同じ用にAll in One SEOプラグインで困っている人がいるに違いない!!と、All in One SEOプラグインについて調べ始めたのです。

「All in One SEO 大文字」と…。

そこで辿り着いたこの記事。

murak.net / WordPressプラグイン All in One SEO Pack の効果的な設定

きたよきたよ〜!きっとこれで解決だぁ〜!

>「カテゴリーの<title>の先頭を大文字にするオプションです」 

え…?せ…先頭…?英文を大文字にするんじゃないの…?あ…っていうか、よく考えたらカテゴリータイトルって記事タイトルじゃねーよな…。あら…あららららら……?

どうやら完全に勘違いしていたようです。どうもAll in One SEOプラグインはシロと言わざるを得ない様です。
という事は何が原因なのか…。WordPressのデフォルトの投稿設定にも「記事タイトルを大文字にする」なんて無かったはずなのに…。

 

 

5.もっとシンプルに調べてみよう

その後他のプラグインを色々と調べましたが、記事タイトルを置き換える様な動作をするプラグインは無さそうでした。迷宮入りしそうな気がしてきましたが、こういう時こそシンプルに考えましょう。

「WordPress 大文字」

これで検索してみました。もうWordPress自体の何かかも知れんぞと。そして辿り着いたこの記事。

>「ひょっとしたらスタイルシートで設定されてるのか?」

なにいいいいいいいいいいいい!!!!!??

 

なるほどCSSでしたかそうですか。そういや英語の大文字小文字の表示を指定できる「text-transform」なんてものありましたね。普段使わないもんだから完全に忘れてましたよ。

↓特に指定なし
text-transform:none;

↓先頭の文字だけ大文字にする
text-transform:capitalize;

↓全部小文字にする
text-transform:lowercase;

↓全部大文字にする
text-transform:uppercase;

ああ…ああ…これくさいね、うん…。

そういえばAll in One SEOプラグインと同時期に導入し現在使用しているWordPressテーマ「Origin」っつーのがありました。なるほど、このテーマのCSSっぽいですね。完全にプラグインのせいだとばかり思ってました…反省。

というわけでテーマファイルのCSSをのぞいてみたところ…

キタコレ

記事タイトルのとこのclass「.entry-title」にバッチリ「text-transform:uppercase;」が指定されてました。
こいつを以下のように直します。

 

 

さて表示確認を…

 

おっしゃあああああああああああああああ!!!!!

 

 

というわけで、何とも単純なお話。ただのCSSの指定でした。Originテーマ自体は海外製テーマですので、こういう日本語圏ではあまり馴染みのないCSSが使われていたりすることがあるんですね。勉強になりました。

ちなみに、テーマファイル内部のCSSを上記のように直せば表示は直りますが、テーマのアップデートの際に再度上書きされてしまう可能性もありますので、Originテーマのテーマ設定からCustom CSSの欄に

.hentry .entry-title{text-transform: none;}

という感じで追記しておくと良いかも知れません。

 

 

結論:ちゃんとインスペクタとか使って検証しようね