【ワードプレスにGoogleマップ用のプラグインを挿入】

ワードプレスにGoogleマップ用のプラグインを挿入。ワードプレスには、マクロ機能があり、ビジネスサイトなどにマップを挿入している企業は多いと思います。今回は、ワードプレスにGoogleマップ用のプラグインを挿入について書いていきます。

 

マクロ機能とは「ショートコード」のことを指します。ワードプレスには、写真ギャラリーを作成する「ショートコード」を持っています。プラグインによって、それ以上の「ショートコード」を実装することも可能です。

 

結論を先に話ししておきます

ビジネスサイトの多くは、事務所やショップの場所を地図上に示すページが必要になると思います。そこで「Open Street Map」や「Googleマップ」など、ワードプレスの「ショートコード」を利用したプラグインを導入しましょう。   では実際に「ショートコード」を使って、ビジネスサイトやブログ内に地図を挿入するにはどうしたら良いのでしょう。地図をページ内に貼り付けるプラグインは「Leaflet Map」です。いろいろ試してみましょう。   この章では「ショートコード」によって、簡単に地図を利用できる「Leaflet Map」プラグインを使います。併せて「ショートコード」についても少し勉強していきましょう。「ショートコード」を覚えておくと何かと便利ですから。   「ショートコード」について勉強しよう。 キャプションを追加しよう。 「Leaflet Map」プラグインをインストールしよう。 地図をページ内に挿入しよう。

 

【ワードプレスのショートコード(動画付き)】

 

ワードプレスの「ショートコード」とは、ワードプレスが生成するWebページに埋め込むことのできる特殊なテキストコードを意味します。「ショートコード」そのものに関して、ページ内には表示されません。

 

ワードプレスは、この「ショートコード」を読み込んで処理し、一連の作業における結果をページに反映させます。要するに「ショートコード」は、エクセルなどで利用されるマクロと同じ機能を持っていると言うことです。

 

ワードプレスのショートコード

「ショートコード」をソースに記述するには[ ]で囲んだ中に呼び出す関数と、その関数に渡す値を記述します。例えばですが[キャプション]と言う「ショートコード」は、画像に付加する「ショートコード」です。   ショートコードタグには、キャプションコードのように、開始タグ[キャプション]と、終了タグ[/キャプション]があります。またギャラリーコードのように、単独でタグを用いるものもあります。

 

ではここで動画を視聴してみて下さい。題して「Shortcode Ultimateの使い方：WordPressでショートコードを使って様々なデザインを作成する方法」です。下記の動画を参考程度に視聴して貰えればと思います。

 

ショートコードの実行

 

ワードプレスが「ショートコード」をどのように処理するのかを、キャプションコードを例に見ていきましょう。ページのソースに[キャプション]としての「ショートコード」が記述されている場合はどうなのかですが。

 

テーマを構成する「PHP」ファイルが、この「ショートコード」を処理します。キャプションコードが関数として渡すのは「width="400"」です。キャプションコードで「width」オプションは必須と覚えておきましょう。

 

開始タグ[キャプション]と終了タグ[/キャプション]で挟んだテキストが、画像の題字として添付されます。同じ「ショートコード」でも、それがどのように処理されるのかは、テーマの関数を処理する「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」では「ショートコード」で地点を示す為の値として、住所及び経緯データが使用できます。それでは順番に見ていきましょう。

 

ページの「ショートコード」を挿入する箇所で、左上部にあるブロック挿入の「+」ボタンを押します。 サイドメニューに表示されているボタンの中に「ショートコード」があるので選択します。 挿入されたショートコード内に「Leaflet Map」の「ショートコード」を入力します。

 

 

 

 

 

下書き保存したら「オレンジ色枠」で囲まれている「プレビュー」を押します。するとプルダウンメニューが表示されるので「水色枠」で囲まれている「新しいタブでプレビュー」を押してみましょう。

 

 

今回は、ワードプレスにGoogleマップ用のプラグインを挿入について書いてきましたが、理解して頂けたでしょうか？「ショートコード」「API」「プラグイン」と難しいことばかり書いてきましたが。

 

これも一つ一つ覚えていくと結構楽しいものです。正直覚えるまでが大変な訳ですが、それも勉強です。ワードプレスのスキル、ブログのスキル、アフィリエイトのスキル、覚えることは山ほどありますが頑張っていきましょう。

 

 

トップページへ戻る