ワードプレスにGoogleマップ用のプラグインを挿入。ワードプレスには、マクロ機能があり、ビジネスサイトなどにマップを挿入している企業は多いと思います。今回は、ワードプレスにGoogleマップ用のプラグインを挿入について書いていきます。
マクロ機能とは「ショートコード」のことを指します。ワードプレスには、写真ギャラリーを作成する「ショートコード」を持っています。プラグインによって、それ以上の「ショートコード」を実装することも可能です。
| 結論を先に話ししておきます |
| ビジネスサイトの多くは、事務所やショップの場所を地図上に示すページが必要になると思います。そこで「Open Street Map」や「Googleマップ」など、ワードプレスの「ショートコード」を利用したプラグインを導入しましょう。
では実際に「ショートコード」を使って、ビジネスサイトやブログ内に地図を挿入するにはどうしたら良いのでしょう。地図をページ内に貼り付けるプラグインは「Leaflet Map」です。いろいろ試してみましょう。
この章では「ショートコード」によって、簡単に地図を利用できる「Leaflet Map」プラグインを使います。併せて「ショートコード」についても少し勉強していきましょう。「ショートコード」を覚えておくと何かと便利ですから。
|
目次はコチラ
【ワードプレスのショートコード(動画付き)】
ワードプレスの「ショートコード」とは、ワードプレスが生成するWebページに埋め込むことのできる特殊なテキストコードを意味します。「ショートコード」そのものに関して、ページ内には表示されません。
ワードプレスは、この「ショートコード」を読み込んで処理し、一連の作業における結果をページに反映させます。要するに「ショートコード」は、エクセルなどで利用されるマクロと同じ機能を持っていると言うことです。
| ワードプレスのショートコード |
| 「ショートコード」をソースに記述するには[ ]で囲んだ中に呼び出す関数と、その関数に渡す値を記述します。例えばですが[キャプション]と言う「ショートコード」は、画像に付加する「ショートコード」です。
ショートコードタグには、キャプションコードのように、開始タグ[キャプション]と、終了タグ[/キャプション]があります。またギャラリーコードのように、単独でタグを用いるものもあります。
ではここで動画を視聴してみて下さい。題して「Shortcode Ultimateの使い方：WordPressでショートコードを使って様々なデザインを作成する方法」です。下記の動画を参考程度に視聴して貰えればと思います。 |
ショートコードの実行
ワードプレスが「ショートコード」をどのように処理するのかを、キャプションコードを例に見ていきましょう。ページのソースに[キャプション]としての「ショートコード」が記述されている場合はどうなのかですが。
テーマを構成する「PHP」ファイルが、この「ショートコード」を処理します。キャプションコードが関数として渡すのは「width="400"」です。キャプションコードで「width」オプションは必須と覚えておきましょう。
開始タグ[キャプション]と終了タグ[/キャプション]で挟んだテキストが、画像の題字として添付されます。同じ「ショートコード」でも、それがどのように処理されるのかは、テーマの関数を処理する「PHP」ファイルの内容によって異なります。
- 下記の図解を持ても分かる通り[キャプション]から始まって[/キャプション]の間には「文字サイズ」「画像」などが「PHP」と言うプログラムの関数で処理されていることが分かります。
- 下記の図解でもう少し詳しく見てみましょう。「ショートコード」の開始タグ[キャプション]と終了タグ[/キャプション]の間には「画像ファイル」と「キャプション」が挟まれていることが分かります。
これらの「ショートコード」は「PHP」により、関数処理されます。
ショートコードを埋め込んでみよう
知っている方も多くいると思いますが、念の為に書いておきます。「ショートコード」は、テキスト形式の決まったコードです。ブロックエディターを使って投稿されている方は「ショートコード」用のブロックを使うと良いでしょう。
この章では、当ブログで使用中のワードプレステーマ「DIVER」で作成する投稿ページに「ショートコード」でキャプションを付けた画像を挿入してみます。一応、流れとしては、下記の通りです。
|
ではこれらを図解を使って説明していきます。今一分かりずらいと感じている方は、参考にして貰えると良いかと思います。但し、これらの説明に関しては、ブロックエディターを例としていますのでご理解下さい。
| ブロックエディター側を選択する |
| クラシックエディターに設定している方は、ブロックエディター側を選択しておきましょう。設定方法は、サイドメニューの「設定」→「投稿設定」→「すべてのユーザーのデフォルトエディター」の順に開いて下さい。
すべてのユーザーのデフォルトエディターの中には、旧エディター(クラシックエディター)と、ブロックエディターがあるので「ブロックエディター」側を選択します。ではこれらを図解を用いて説明していきましょう。
|
それでは、ブロックエディター側を選択できたと思うので進ませていきましょう。この先も図解を用いて説明していくので、まずはその通り真似してみて下さい。難しく考える必要もありません。
- 下記の図解は、ブロックエディター側の画面です。開いたら「オレンジ色枠」で囲まれている「+」ボタンを押して下さい。
- 「+」ボタンを押すと、左側に沢山のボタンが表示されます。そのまま下の方へ移動すると「赤色枠」で囲まれている「ショートコード」が見えてきます。その「ショートコード」を押して下さい。
- すると「水色枠」で囲まれている中の「緑色枠」内のボックスの中に「ショートコード」を記述していきます。
| デフォルトであるワードプレスのショートコード |
| ワードプレスには、最初から「ショートコード」が付属されています。その数は「6つ」。下記より、デフォルトの「ショートコード」を紹介していきます。参考にして貰えると幸いです。それでは見ていきましょう。
Webサイトに音声ファイルを埋め込みます。再生や一時停止などのシンプルな操作が含まれています。
コンテンツをキャプションでラップします。主に、画像キャプションの追加に使用されてますが、任意のHTML要素にも使用することが可能です。
デフォルトの「oEmbed機能」の展開です。「oEmbed」は、他のWebサイトのURLに内蔵された表現を可能にするフォーマットです。
Webサイトにシンプルな画像ギャラリーを挿入できます。また属性を使用して画像を定義し、ギャラリーの外観をカスタマイズすることも可能です。
この「ショートコード」を使用して、オーディオファイル又はビデオファイルのコレクションを表示します。
ビデオファイルを埋め込むことやプレーヤーを使用して再生できる機能があります。この「ショートコード」は「mp4」「webm」「m4v」「ogv」「wmv」「flv」の形式に於いて、動画の埋め込みに対応しています。 |
【APIとは(動画付き)】
この章から、実際にプラグインを使って地図を表示させる方法について書いていきます。ビジネスサイトや実店舗をお持ちの方であれば、会社や店舗の紹介ページ、アクセスページに地図を載せることがあります。
今では、オンラインマップのAPIを利用し、ページに地図を載せ、その中に自店の場所を示すことが多いと思います。APIを公開している地図サイトを利用する為には「ショートコード」を利用するのが簡単です。
| APIとは |
| 「API」とは「Application Programming Interface」の頭文字をとった言葉です。つまり「アプリケーション・プログラミング・インターフェイス」であり、大雑把に言うと「アプリケーションをプログラミングする為のインターフェイス」と言う意味になります。
インターフェイスをコンピューター用語で言うならば「何か」と「何か」を「繋ぐモノ」と言う意味を持っています。例えばですが「USB」も「パソコン」と「周辺機器」を繋いでいるモノなので、インターフェイスの一つと言えます。
ではここで動画を視聴してみて下さい。題して「【初学者向け】APIを理解したい人がまず最初に見る動画」です。 |
プラグインで地図のショートコードを埋め込もう
冒頭で「ショートコード」についていくつか紹介してきました。「ショートコード」は、とても便利で簡単に利用できるワードプレスの拡張機能ですが、関数を設定するには、プログラムの知識が必要です。
誰でも手軽に「ショートコード」を利用するには、プラグインを導入することをおススメします。プラグインには「Leaflet Map」を使います。このプラグインは「Googleマップ」のAPIを使います。
「Googleマップ」は、地図上における任意の地点を示すことが可能となります。「Leaflet Map」では「ショートコード」で地点を示す為の値として、住所及び経緯データが使用できます。それでは順番に見ていきましょう。
|
- 下記の図解は、ブロックエディター側の画面です。開いたら「オレンジ色枠」で囲まれている「+」ボタンを押して下さい。
- 「+」ボタンを押すと、左側に沢山のボタンが表示されます。そのまま下の方へ移動すると「赤色枠」で囲まれている「ショートコード」が見えてきます。その「ショートコード」を押して下さい。
- すると「水色枠」で囲まれている中の「緑色枠」内のボックスの中に「ショートコード」を記述していきます。
- 次の図解では「赤色枠」で囲まれている中の「緑色枠」内には、実際に「ショートコード」を入力してみます。入力したら右上部の「桃色枠」で囲まれている「下書き保存」を押しましょう。
下書き保存したら「オレンジ色枠」で囲まれている「プレビュー」を押します。するとプルダウンメニューが表示されるので「水色枠」で囲まれている「新しいタブでプレビュー」を押してみましょう。
- すると選択したページ内の箇所に地図を表示させることができました。
今回は、ワードプレスにGoogleマップ用のプラグインを挿入について書いてきましたが、理解して頂けたでしょうか？「ショートコード」「API」「プラグイン」と難しいことばかり書いてきましたが。
これも一つ一つ覚えていくと結構楽しいものです。正直覚えるまでが大変な訳ですが、それも勉強です。ワードプレスのスキル、ブログのスキル、アフィリエイトのスキル、覚えることは山ほどありますが頑張っていきましょう。
