WordPressのテーマ「Perth」のセットアップで困ったこと①「サービスを入力してください」ってどこによ！

公開日： 2018/02/14 : 最終更新日：2018/02/20 あれこれ思考してみる, ガジェットやデジタルの話 Perth, Wordpress, カスタマイズ, ホームページ

ここ数年の懸案事項だった会社のホームページを、ついに先日リニューアルしました。

パソコンだけでなく、スマホやタブレットでも見やすいレスポンシブデザインに対応するため、Wordpressを導入。また、すっきりとした１コラム表示にしたかったので、いろいろ比較検討した結果「Perth」というテーマを使うことにしました

「Perth」にした決め手は主に３つ

1.ビジネス向けの１コラム形式のテーマであること

2.アイコンの上にマウスを持って行くとクルクル回る仕掛けがおもしろかったこと

3.デモページが、会社のブランドカラーであるネイビーブルーとよく似た色調で、完成形がすぐにイメージできたこと

さて、Wordpressの人気テーマについては、いろんな人が紹介記事を書いていますが、実際にそのテーマの設定やカスタマイズについて書かれている記事は限られている印象です。特に、「Perth」については日本語の情報は皆無でした（英語は公式ページやforum、公式動画などがありました）。テーマの公開年数が2016年ということもあり、開発元も最新テーマの情報が厚めなことも原因かもしれません。
そこで、実際に「Perth」でホームページを組み立てていく最中に見舞われたトラブルや、つまづいた情報などを紹介していきたいと思います。

「サービスを入力してください」っていわれても、どこにですか……？

「Perth」を気に入った理由のひとつに、マウスをアイコンの上に重ねると、クルクル回るアクションがありました。このアイコン部分は「Perth」では、サービス（Service）といわれ、文字通り、会社のサービスを紹介するのにぴったりな仕様になっています。
一番最初に、このサービスを入力したいと思ったものの、直接入力する場所がわかりません。
通常の投稿や、固定ページの投稿で、新たに「サービス」というカテゴリーをつくって記事を入力するのだろうか……。そんなことも考えましたが、結果的には全然違いました。

まず、投稿ページ（または固定ページ）で新規を選んだ後、ページビルダーを使ったあとフレームを配置。このなかに、「Perth FP:サービスタイプA」または、「Perth FP:サービスタイプB」というウィジットを入れることで、サービスを表示させる場所を決めます。

ちなみに、ページビルダーとは、「Perth」をインストールすると同時にインストールを勧められるプラグイン「Page Builder by SiteOrigin」で、CSSの知識がなくても、マウスの操作だけでページ内を自由に区切り、テキストや写真、その他ウィジットなどを表示できるという優れものです。

さて、「Perth FP:サービスタイプA」または、「Perth FP:サービスタイプB」の使い方は、Perthの公式サイトにあるYouTubeの解説動画にもあるので、それを見ながら見よう見まねで勧めてみますが、例のくるくると回るアイコンにたどり着けませんでした。

それは上記のウィジットを編集すると表示される「サービスを入力してください」という項目でした。

ウィジット「サービスタイプA」を編集すると出てくる画面。「サービス」を追加って、どこで？？

「Perth」の管理画面は、部分的に日本語化もされていて、指示がバッチリ書いてあるのですが、ダッシュボードのなかに「サービス」という項目が見当たりません。

「Perth」をインストールしたばかりのダッシュボード。サービスのサの字も見当たらない。

公式サイトのフォーラムにもいって、「Service」に関する項目を頭から煙を出しながら読んでも見つからず。
結局、Google先生に、「Perth I can not use service」みたいな語句を入れて検索してみたら、出てきましたよ、情報が（英語）。
https://forums.athemes.com/t/perth-theme-widgets-not-showing-up/11281

なんでも、使用前に設定ファイルを読み込む必要があるそうです。
https://athemes.com/documentation/perth/#settings

上記のページの、Quick start guideの本文内にあるsetting fileををクリックし、設定ファイルをダウンロード。
その後、ダッシュボードのToolesetの上にマウスを重ねると、一番下にExport/importが表示されるので、これをクリック。

ダッシュボードに「サービス」を表示させるには、まず設定ファイルのインポートが必要！

画面下のファイルを選択ボタンをクリックし、先ほどダウンロードした設定ファイルを選択

データインポートのブロックから「ファイルを選択」をクリックして、先ほどダウンロードした設定ファイルを選ぶ。

レビューとインポートをクリックします。

設定ファイルを選んだら、青色の「レビューとインポート」をクリック！

すると、あれだけ探してもなかったServiceほか、Perthに必要な項目がダッシュボードの左側に表示されるようになりました。

ダッシュボードに「Service」の文字が！　その他、Perthのセットアップに必要な、ProjectやEmployeesなども表示された。

設定ファイルのダウンロードとインポート方法について

一連の流れを解説した動画はコチラ。

これは本当に手こずりました。
この一件で、「Perth」の設定を動画でまとめた解説ページも見つかったので、英語ではあるものの、順番に見ていけばなんとかカスタマイズしていけるようになりました。
さて、ダッシュボードのServiceから、会社のサービス内容をつらつら書いていったのですが、また新たなトラブルに……。
次回は、「Perth」トラブル②選んだアイコンが表示されない　についてまとめてみたいと思います。