CMS（WordPress）などの技術ブログ

Webサイト上の地図にGoogleMapsを利用しているケースはとても多いです。
「お客さんからGoogleMapsにして欲しい」とリクエストを頂くほど。

Appleの地図との攻防も気になるところですが、まだまだ健在です。

さて本題。

GoogleMapsの地図へのリンクは、GoogleMapsに行けば誰でも直感的に作成できますが、
こんな風に吹き出し付きで表示されます。

地図の表示サイズが大きい場合はわかりやすくて良いのですが、
大体のケースでは吹き出しが地図に溢れんばかりに表示されて何がなんだかわかりません。



そこでこの吹き出しを消す方法ですが、
URL中のパラメータに「iwloc=B」を追加すれば消すことができます。

↓このようにすっきりします


これを毎回手動で追加するのは煩雑なので、PHPの関数化をして使ってみました。なかなか便利です。
引数（$data）にiframeのタグを丸ごと指定する感じで使います。

function modGoogleMapsURL ($data){

	//吹き出し削除
	$res = str_replace ("iwloc=A", "iwloc=B", $data );

	//吹き出し用のパラメーターが無い場合があるため、パラメーターを強制的に追加
	$res = str_replace ("output=embed", "output=embed&iwloc=B", $data );

	return $res;
}

仕様が変わったら使えませんが、これはWebサービスの宿命なので仕方ないですね。

WordPressを利用する場合は、投稿本文にコンテンツを登録していくのが基本です。
しかし、この投稿本文。カスタマイズをしている場合には結構悩みどころです。

投稿本文出力における要件は、だいたい下記の組合せになってくると思います。

(1) 直感的に（Wordライクに）使用したい
(2) 改行は見たままに反映させたい
(3) HTMLタグを使用したい
(4) 投稿本文のデータを加工して出力したい
(5) ショートコードを使用したい
(6) JavaScriptも利用したい

普通のブログの場合には最低限(1)(2)が必要。
ブログの中でもHTMLタグも使う可能性がある場合には(1)(2)(3)が必要です。
でも(2)(3)だけで良い場合もあります。

ブログでは無い部分に投稿本文を使用する場合は、(1)(2)のケース、(3)のケース、(4)のケースなどがありますが、これは実際に更新する方の想定スキルに合わせないといけない部分でもあり、千差万別です。

これらの状況に加えて(5)(6)といったニーズが登場しますので、
どんな状況にも耐えうる方法というのは結構難しい課題です。


では下記に(1)～(6)の解決方法を記載しておきます。
（もちろんここに書いた方法以外にも解決手段はあります）

(1) 直感的に（Wordライクに）使用したい

これは投稿出力時に the_content 関数を利用していれば概ねOKです。
但し、WordPressの自動整形機能に従うという話ですので、色々制約もあります。
（整形されては困るものも整形されたりします）

(2) 改行は見たままに反映させたい

これは brBrbr というプラグインを利用し、the_content タグを使用すれば実現できます。

(3) HTMLタグを使用したい

the_content 関数を使用した状態でも可能ですが、自動整形機能によってうまく表示されないケースが出てきます。
その場合には $post->post_content 等によって取得したものを echo で出力すれば自動整形を免れます。

さて、ここからが問題。
$post->post_content を使用した瞬間に(1)や(2)が実現できなくなります。
(2)はPHPの nl2br 関数を利用すれば辛うじて実現できそうですが、普通HTMLタグは改行・インデントを入れて整形しますので、空行だらけの表示になってしまいます。でも改行しないと見辛くてメンテナンスできない、、、と。

(4) 投稿本文のデータを加工して出力したい

これも(3)と同様の方法でOKです。
$post->post_content で一旦変数に格納できますので、データ加工してから echo すれば良いです。

(5) ショートコードを使用したい

これは投稿出力時に the_content 関数を利用していれば概ねOKです。

(6) JavaScriptも利用したい

これも投稿出力時に the_content 関数を利用していれば概ねOKです。
これは(3)と同様の方法でOKです。$post->post_content で取得すれば自動整形されずにJavaScriptもそのまま表示できます。

但し、the_contentを使わないと困る。という場合もあります。
この場合、ショートコードやカスタムフィールドを利用するプラグインがありますので、これを利用しても良いです。
有名どころでは ContentEX、HeadSpace などでしょうか。



さて、まとめに入ります。
投稿本文の記事出力には大きく the_content系と $post->post_content系がある、というのがわかります。
それぞれ「実現できること」が相反するので、サイトの構造や更新するユーザーに合わせて取捨選択する必要があります。
そうした上で「相反するけどどうしても必要な機能」をカスタマイズによって埋めていく。というのが現実的だと思います。

※文章書くだけで力尽きてしまい、画像無しの記事になってしまったので、後々追記致しますー
（追記前の記事を読んだ方。読みづらくて申し訳ないです！）

すごくマイナーな話ですが、ちょっと困ったのでエントリーしておきます。

CSS3のborder-radiusは手軽に装飾ができて便利なのですが、IE8以下は対応していません。
そこで「border-radius.htc」というプラグインを使って対応するケースがあります。

これを使うとIE系でも角丸が再現可能なのですが、IE8だと背景が真っ黒になる場合があります。
HTML構造やCSSの状況によって発生したりしなかったりなので、細かい原因は追求してませんが、発生すると結構困ります。

という事で、シンプルな対応方法を書いておきます。

「CSSで背景（background-color）を指定する」

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(/css/border-radius.htc);
background-color: #fff;

実にシンプルですが、簡単に対応できます。
CSS3関連のプロパティは、適用されなくても問題無いデザインにしておく。
つまり諦める、というのがスマートですけどね。

WordPressの管理画面はバージョンアップの度に使いやすくなってきました。

でも一般人の感覚からすると、まだまだ使いやすいとはいえないもの。
クライアントへの納品時に管理画面をカスタマイズする場合もあるかと思いますが、使い勝手には個人的な趣味嗜好も影響するので、使いやすい管理画面というのは結構難しい問題です。

そこで今回は「カスタマイズ不要ですぐできる」管理画面の改善技を幾つかご紹介します。


1.投稿本文を広げる

右下の隅をドラッグすると投稿本文エリアが伸ばせます。
WordPressに限った話では無く、テキストエリアならこの技が使えます。
（但しブラウザによってはできません）


2.表示オプションで不要な項目を隠す

表示する項目の表示・非表示を切り替えることができます。
2カラムと1カラムの切り替えもここでできます。
Web制作会社さんがカスタマイズしてる場合、必須項目を隠さないようにして下さいね。


3.ボックスの位置を変更する

「公開」「カテゴリー」などのボックスはドラッグすれば位置が変更できます。
自分が編集する流れに合わせて位置を変更しておくだけでもストレスが軽減されます。



この並び、なんかしっくりこないんだよなー、という方。是非お試しください。