「WordPressで学ぶPHP(3)関数編」を発売しました。
本書は「WordPressで学ぶPHP(1)変数・制御構造編」「WordPressで学ぶPHP(2)データ構造(配列・オブジェクト)編」の続編にあたり、PHP組み込みの関数や、独自の関数を作る方法などを解説します。
Kindle本で、定価400円です。
Googleマップカスタムフィールドプラグインを使った一覧地図の作成(多色版・その1)
以前に、「Googleマップカスタムフィールドプラグインを使った一覧地図の作成」という記事を公開していました。
拙作のGoogleマップカスタムフィールドプラグインを使って、カテゴリごとに場所の一覧の地図を出力するというものです。
その例をカスタマイズして、地図上のマーカーの色を変えられるようにする方法を解説します。
1.作成する事例
今回は、以下のような地図を作成します。
- カテゴリが2階層あり、1階層目で地域、2階層目で分類を表すようにします。
- 1階層目のカテゴリのアーカイブページで、その下の2階層目のカテゴリの場所を含んだ地図を出力します。
- 地図のマーカーの色を、2階層目のカテゴリに応じて変えます
例えば、カテゴリを以下のような構造にするとします。
- 東京
- 神社仏閣
- ショッピング
- 遊園地・テーマパーク
- ...
- 神奈川
- 神社仏閣
- ショッピング
- 遊園地・テーマパーク
- ...
- ...
この場合に、「東京」カテゴリのアーカイブページを開くと、東京の全分類の場所が地図に表示され、分類ごとにマーカーの色を別にするようにします。
実際の地図は、こちらのリンクのような感じになります。
今日は、データ構造と、必要なカスタムフィールド、そしてカテゴリ/記事の入力までを解説します。
2.データの構造
この事例では、ブログを使ってデータを入力します。
個々の地域(都道府県等)と分類は、カテゴリに対応させます。
前述したように、1階層目のカテゴリ名を地域名とし、2階層目のカテゴリ名を分類名にします。
また、カテゴリにGoogleマップのカスタムフィールドと、マーカーの色のカスタムフィールドを追加し、地域の地図を表示できるようにします。
一方、個々の場所をブログ記事に対応させます。
ブログ記事のタイトルを、場所の名前にします。
また、ブログ記事の本文として、その場所の解説等を入れます。
さらに、ブログ記事にGoogleマップのカスタムフィールドを追加し、場所の地図を表示できるようにします。
3.カスタムフィールドの作成
「Googleマップカスタムフィールドプラグインを使った一覧地図の作成」の記事の「2.カスタムフィールドの作成」と同じ手順で、カテゴリと記事に地図のカスタムフィールドを作成します。
さらに、カテゴリにもう1つ以下のようなカスタムフィールドを作成し、分類ごとにマーカーの色を選べるようにします。
設定項目 | 設定値 |
---|---|
名前 | アイコン色 |
種類 | ドロップダウン |
オプション | red=赤,blue=青,green=緑,ltblue=水色,yellow=黄色,purple=紫,pink=ピンク,orange=オレンジ |
ベースネーム | category_icon_color |
テンプレートタグ | CategoryIconColor |
4.カテゴリの作成
次に、地域と分類をカテゴリとして作ります。
1階層目のカテゴリ(地域)では、その地域のすべての場所を表示できるように、地図のカスタムフィールドで中心やズームレベルを設定します。
また、2階層目のカテゴリ(分類)では、マーカーにつける色を、カスタムフィールドで選択します。
5.記事の作成
次に、個々の場所ごとにブログ記事を作ります。
場所の名前をブログ記事のタイトルにし、場所の解説をブログ記事の本文に入力します。
また、Googleマップのカスタムフィールドで、場所の地図を表示するようにします。