キウイフルーツカントリー Japan (多機能サイト)
2018年ごろにリニューアル制作を行った、静岡県掛川市にある日本最大級のキウイ農園であるキウイフルーツカントリー Japan 様の Web サイトを運用管理が容易になるように全ページを WordPress の管理下になるようにリニューアルを行いました。
※ただし、EC サイト (ネットショップ) は別管理のままです。
元々は、テレビで紹介された際などアクセス数が非常に多くなる (実績：3,500ユーザ) ことがあるため、おしらせ機能のみに絞って WordPress を導入していました。
その他のページは同時アクセスでも耐えられるようにヘッダーやフッターのみを共通部品として読み込むだけのほとんど静的な作り方です。これにより安価なレンタルサーバプランの使用が可能です。(長期連休・土日祝以外のアクセスはそれほど多くないため、ランニングコスト削減に貢献します)
一方で、ページの修正は文言等の簡単なものでもソースファイルを編集する必要があるなど、運用上のネックがありました。
今回はそこをより簡単に行えるように最適化していきます。
使用している技術
- WordPress
- フルサイト編集； ブロックテーマ (unitone)
- 多言語対応 (日本語 / 英語 / 中国語)； プラグイン (Bogo)
- Instagram API (Facebook Graph API)； プラグイン (Combine Socila Photos)
フルサイト編集
全ページを WordPress で管理するとともに、管理画面上からほとんどの編集作業ができるようにブロックテーマによるフルサイト編集を採用しています。
ブロックテーマではコンテンツだけでなく、各ページタイプのテンプレートやヘッダーフッターもフロントエンドと同じ見た目で編集できるため、Web サイトの構築方法に詳しくないスタッフレベルでも十分に修正作業などができます。
ブロックテーマでは、どのテーマを使っても最終的には自由にレイアウトや見た目の調整ができますが、はじめから日本語での読みやすさが整っているテーマ「unitone」を採用しました。Snow Moneky というテーマで有名な株式会社モンキーレンチ製のテーマになります。
以下の画像が管理画面のスクリーンショットになります。見てもらうと分かる通り、フロント側とほとんど同じ見た目です。
このようにして、誰でもページを管理できる体制が整いました。実際、納品後にすでに文章の追加や修正など様々に手を加えていただいています。
入園料についてくる食べ放題のキウイの選択は、キウイの種類のカスタム投稿タイプのものから検索して反映する形です。
食べ放題キウイは3種類で固定ではないので、いくつでも増減ができます。もちろんブロックで構築されているので並べ替えもできます。
他のページでも同期して表示されるようにこちらは同期パターン化して使用しています。
一ヶ所編集すれば複数のページ (このサイトだと英語ページや中国語ページ) で同じ表示になり変更漏れや手間が減らせます。便利な機能は使わなきゃ損です。
多言語対応
リニューアル前も多言語に対応していましたので、WordPress でも同様に多言語対応を行っています。
多言語サイト構築には Bogo というプラグインを使用しています。ただし、ブロックテーマには非対応な部分も多く、多言語化はブロックテーマではまだ難しいです。
具体的には、メニューやテンプレートパーツとなるヘッダーやフッターは多言語化対象の投稿タイプに登録しても管理画面上からは直接作成できません。
(開発者の方も今後のタスクだと過去にサポートフォーラムで答えています)
※メニュー (post_type = wp_navigation) は、DB 上で翻訳版を作成すれば管理画面上から編集可能になります。
※テンプレートパーツ (post_type = wp_template_part) は、DB 上で編集まで全て行う必要がありました。(2025/3月時点、WordPress 6.7)
今回のリニューアルでは、やや特殊な実装を行うことである程度カバーしており、Bogo による多言語化に成功しています。
また、Bogo による多言語化により、今後別の言語の翻訳を増やしたい場合にも対応が可能です。
アーカイブページなどで翻訳がない時には日本語ページへの導線を確保するようにしてあります。機械翻訳もかなりの精度ですのでリンクがあることで読んでもらえる確率が上がると思います。
Instagram の埋込は私が開発しているプラグイン (Combine Socila Photos | Still BE) をつかって表示しています。このプラグインはブロックエディタに最適化してあるのでエディタ上から見た目を確認しながら簡単に編集ができます。
詳しくはプラグイン紹介ページをご確認ください。
その他
WordPress によるサーバの負荷増加を見込んで、リニューアルと合わせてサーバを新しいものに乗り換えて、PHP のバージョンも更新しました。これによる処理速度が飛躍的に向上して、同時アクセスにも強くなったので、WP でもかなりの数のアクセスに耐えられると予想しています。
今後のさらなる改善ポイントとして、CDN によるコンテンツ配信も提案しています。(対応するかは今後の負荷状況を見て判断となります)
FAQ は元々 WP のカスタム投稿で作成していたので、そのまま流用しています。
リニューアルに合わせて絞り込み検索やカテゴリごとにグルーピングする機能などを追加して、より探しやすいように改善しています。
その他、YouTube の埋め込みタグの遅延読込によるページ表示速度の改善として Lite YouTube Embed を採用しました。WP 向けのプラグインもあったのですが、うまく動かなかったので自前で組み込んでいます。(といっても JS/CSS を追加して、YouTube の埋め込みコードを <lite-youtube> 要素に置換するだけです)
※ Lite YouTube Embed ライブラリは、PageSpeed Insights でもおススメの方法として推奨されるものです。
紹介したサイトのようにブロックエディタをフル活用することでサイトの運用管理が劇的に改善できます。
管理画面から編集ができないなどの困りごとがありましたら是非お問い合わせください。まずはお悩みだけでもお聞かせいただければ最適な案を提案します。
(WP にこだわっているわけではないので、他の CMS や方法を提案することもあります)