WordPress連携2 kintoneのデータをWordPressに表示する(前編)

フォローする

著者:株式会社エイチツーオー・スペース たにぐち まこと (kintone エバンジェリスト)

こんにちは。kintoneエバンジェリストのたにぐちです。
WordPress連携の第二弾です。 今回はプログラムについての知識が少し必要になります。じっくり取り組んでいきましょう。

logo.png

 

その1をまだ見ていない方は是非こちらもご覧ください。
WordPress連携1 MW WP Formとの連携でお問い合わせ管理 

kintone の環境は、developer network のメンバー登録をすると1年間無料の開発者用ライセンスを使えます。

Index

前編

後編

  • プログラムを作成しよう
  • REST/RESTfulとは
  • HTTPヘッダを作成する
  • JSONデータを配列にして利用する
  • kintoneのデータを、Webサイトに掲載しよう

はじめに

kintoneで管理しているデータには、一部を Web上にも掲載したいなんていう場合があります。
例えば、商品の在庫情報を管理しているアプリから、商品の名前や価格と、
「在庫あり」「売り切れ」と言った情報だけを掲載したいとか、Web上に掲載している「よくある質問」といった
コンテンツを kintone上で管理できれば、Webの管理が非常に楽になります。
今回は、そんな kintoneから Webへの情報掲載方法について、紹介します。 

アプリを作ろう

まずは、今回利用するアプリを作成しましょう。
ここでは、「よくある質問」のページを作成することを想定し、よくある質問アプリを作成しましょう。

新規アプリ作成

アプリストアから「顧客サービス・サポート」グループにある、
「サポートFAQ」を選んで「このアプリを追加」ボタンをクリックします。

wp01.png

 

アプリができたら、なにか1件データを登録しておいてください。
「関連する質問・リンク」や「添付ファイル」は空のままで構いません。

wp02.png

APIトークンを発行しよう

続いて、APIトークンを発行します。
アプリの設定変更画面から「設定」タブの「APIトークン」メニューをクリックしましょう。
「生成する」ボタンをクリックして、APIトークンを発行します。
「アクセス権」は今回は、「レコード閲覧」にチェックが入っているのを確認すればOKです。

wp03.png
トークン文字列をコピーしておいて、「保存」ボタン、続けて「アプリを更新」ボタンをクリックしておきましょう。
また、自分の kintoneのサブドメイン名({subdomain}.cybozu.comの {subdomain}の部分)と、
アプリのID(URLの図1-3の部分)を覚えておいてください。
これで、kintoneの準備が完了です。

WordPressに固定ページを準備しよう

続いて、この「よくある質問」を表示するためのWebページを準備しましょう。
WordPressに固定ページを作成します(セットアップなどはあらかじめ済んだ状態を想定します)。
「固定ページ→新規作成」をクリックし、図のように「よくある質問」というサブジェクトで、
「faq」というスラッグ(URL)に設定して公開しましょう。
図のようになれば完了です。

wp05.png

現在使っているテーマを確認しよう

WordPressは、「テーマ」というものを利用してWebサイトの見た目を制御しています。
このテーマを拡張することで、さまざまなカスタマイズを行なうことができます。


現在利用しているテーマは、次の手順で確認することができます。
「外観→テーマ」をクリックし、テーマ画面を表示しましょう。
「有効」と表示されている先頭のテーマが、現在利用されているテーマになります。


セットアップしたばかりのWordPressの場合は「TwentySeventeen」というテーマなどが利用されているでしょう。
これは、WordPressに付属してくる公式テーマです。
ここでは、TwentySeventeenを前提に解説をしていきます。
もし、別のテーマが選択されている場合は読み替えるか、
または一時的に TwentySeventeenに切り替えてから読み進めていくと良いでしょう。
テーマを切り替える場合は、テーマ名の右下にある「有効化」ボタンをクリックします。

wp04.png

テーマフォルダにアクセスしよう

テーマは、WordPressをセットアップしたときに、次のフォルダーにファイル群がセットアップされます。
/wp-content/themes/ テーマの名前と一致したフォルダーができあがっているはずで、
例えばTwentySeventeenの場合は「twentyseventeen」フォルダーになります。
SSHソフトやFTPソフトなどを利用してアクセスし、このフォルダーを開きます。

wp06.png
(画像の例では wwwフォルダにWordPressを保存しています。このフォルダは皆さんの環境によって変わります。)

テンプレートファイルを作成しよう

いくつかのファイルがありますが、ここで、このフォルダー内に新しいファイルを作成します。
ファイル名は必ず、次のようにしましょう。
/wp-content/themes/twentyseventeen/page-faq.php ファイルの内容はひとまず次のようにします。

wp07.png
こうして、Webブラウザーで先ほどの「よくある質問」ページを開いてみてください。
真っ白のページに、今書き込んだメッセージが表示されています。

wp08.png
なお、トップページやその他の固定ページは特に見た目が変化しておらず、
このページだけが変化していることが分かります。
これは「テンプレート階層」というルールにしたがってファイルを作成したことで、
この「よくある質問」のページだけのテンプレートを変更したという事です。 

テンプレート階層ってなに?

テンプレート階層とは、WordPressがテーマを構成するためのルールのことで、次のようなツリー図で示されています。

wp-template-hierarchy.jpg
(「WordPress Codex」より引用)

根っことなるのは、いちばん右側にある「index.php」というファイルで、
これがテーマ内のすべての画面を担当するテンプレートファイルになります。
もし、Webサイトを作るときにトップページも一覧ページも、詳細ページもお問い合わせページも、
すべて見た目が同じなのであれば、この「index.php」というファイルさえあれば、WordPressのテーマとして成り立ちます。


しかし、実際には例えばトップページと詳細ページは、画面の見た目や機能が異なることが多いでしょう。
その場合、ツリー図を左に辿っていきます。
すると、例えば「固定ページ」という部分は「page.php」というファイル名があることが分かります。
テーマフォルダー内に、「page.php」というファイルが存在すれば、固定ページについては
「index.php」よりも「page.php」を優先して使いますというのが、テンプレート階層の考え方です。
こうして、見た目が独特なページについて、次々に「優先度が高い」テンプレートファイルを作成していくことで、
多彩な見た目のWebサイトを自由に作成できるというわけです。


では、先ほど作成した「page-faq.php」というファイルは、どのような位置づけのファイルでしょうか?
「固定ページ」のツリーをよく見ると、次のルールがあります。
page-{slug}.php
{slug}とは、先ほど固定ページを作成したときに名付けた「スラッグ」のこと。よくある質問ページは「faq」です。
そのため、「page-」の後に「faq」を付加した「page-faq.php」というファイルを作成することで、
このページだけテンプレートの優先順位が代わり、利用されるファイルが変化したというわけです。
このルールは少し複雑に感じますが、一度頭に入れてしまえば自由自在にページを作成できるので、便利なしくみです。

 

ここまでの手順でkintoneとの連携するための準備がととのいました。
後編では、いよいよプログラム作成に入ります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk