0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ACF PROでWordPressをもっと使いやすく!更新しやすいサイトを作る実践ガイド

0
Posted at

新しいサービスを追加するたびに、既存のページを複製して内容を書き換える。会社の電話番号が変わったら、掲載されている場所を一つずつ探す。担当者が交代すると、どこを編集すればよいか説明し直す。

WordPressの運用で時間がかかるのは、文章を書く作業だけではありません。情報の置き場所を探したり、レイアウトを崩していないか確認したりする時間も、意外と積み重なります。

こうした手間を減らしたいときに検討したいのが、Advanced Custom Fields PRO、通称ACF PROです。

ページに必要な情報を整理し、それぞれに合った入力欄を用意する。表示方法はテンプレート側で管理する。この仕組みを整えることで、日々の更新を進めやすくなります。

ページの複製だけでは、管理が難しくなる理由

たとえば、企業サイトに10種類のサービス紹介ページがあるとします。

それぞれにサービス名、概要、対象者、提供内容、よくある質問、問い合わせ先を掲載しているものの、作成方法は既存ページの複製です。

最初の数ページでは、それほど困らないかもしれません。しかし、運用を続けると少しずつ違いが生まれます。

あるページでは対象者が冒頭に書かれ、別のページでは下部に移動している。問い合わせボタンの文言もそろっていない。以前のサービス名が画像の説明に残っていることもあります。

更新のたびにページ全体を確認する必要があるため、作業する人の注意力に頼る部分が増えてしまいます。

そこで、共通して必要な情報を入力項目として分けます。サービス名はサービス名の欄へ、問い合わせ先はリンク用の欄へ。担当者が毎回配置を考えなくても済むようにするわけです。

ACF PROを使うと、編集画面を業務に合わせられる

Advanced Custom Fields PRO(ACF)は、WordPressのカスタムフィールドを活用し、扱う情報に合った編集画面を作るためのプラグインです。

PRO版には、繰り返し項目を扱うRepeater、複数の構成を組み合わせるFlexible Content、Gallery、オプションページなどの機能があります。

たとえばサービス紹介なら、次のような項目をまとめて管理する設計が考えられます。

  • 一覧ページに表示する短い紹介文。
  • 詳細ページで使うメイン画像。
  • サービスの対象者。
  • 提供内容の一覧。
  • よくある質問。
  • 問い合わせボタンのリンク先。

ただし、項目を追加するだけで公開ページのデザインが完成するわけではありません。保存した情報を表示するには、テーマのテンプレートやブロック、対応する連携機能などで実装する必要があります。

この土台を整えることで、更新担当者が内容の編集に集中できるようになります。

最初に作るべきものは、入力欄の一覧

設定を始める前に、実際に掲載する内容を用意してみてください。

サンプルが1件だけだと、そのページに都合のよい設計になりがちです。説明の短いサービス、質問の多いサービス、画像が少ないサービスなど、条件の異なるものを並べると、必要な項目が見えてきます。

特に確認したいのは、情報がそろっていない場合です。

料金が個別見積もりなら、金額の入力を必須にしてよいでしょうか。問い合わせ先が未設定の場合、ボタンはどう表示するべきでしょうか。

未入力でも問題ない情報まで必須にすると、公開するためだけに仮の値を入れる運用になりかねません。

項目ごとに「必ず必要」「任意」「条件によって必要」を決めておくと、編集画面にも表示側にも無理が生じにくくなります。

Repeaterは、サービスごとに件数が違う情報に便利

よくある質問を掲載するとき、すべてのサービスで質問数が同じになるとは限りません。

3件で十分な場合もあれば、契約条件や納期などを含めて8件ほど必要になる場合もあります。

Repeaterでは、質問と回答のような複数の項目を1組として、必要な数だけ追加できます。固定の質問欄を大量に用意する必要がなく、ページごとの違いを扱いやすくなります。

作業工程や、サービスに含まれる内容の一覧にも同じ考え方を使えます。

一方、複数のサービスで共通する情報には注意が必要です。全ページに同じ会社紹介文をコピーすると、変更時にすべて修正しなければなりません。

その情報がページ固有のものなのか、サイト全体で共有するものなのかを先に分けると、管理方法を選びやすくなります。

Flexible Contentで、ページごとの説明に幅を持たせる

サービスによっては、説明の順序を変えたい場合があります。

具体例を先に見せたほうが伝わるサービスもあれば、対応範囲を説明してから利用の流れを示したほうがわかりやすいサービスもあるでしょう。

Flexible Contentでは、異なる入力項目を持つレイアウトを定義し、それらを追加・並べ替える構成を作れます。

たとえば「本文と画像」「事例紹介」「利用の流れ」「お客様のコメント」といったセクションを用意する方法です。

各セクションの見た目をあらかじめ実装しておけば、担当者は用意された構成の中でページを組み立てられます。

大切なのは、必要以上に種類を増やさないことです。似たようなセクションが並ぶと、どれを使うべきか迷ってしまいます。

まずはよく使う構成から始め、実際の運用で不足が見つかったときに追加するほうが、扱いやすい状態を保てます。

電話番号や営業時間は、更新場所をまとめる

共通情報の管理は、小さなサイトでも効果を実感しやすい部分です。

電話番号がヘッダー、フッター、会社概要、問い合わせページに直接入力されていると、番号変更のたびに複数箇所を編集することになります。

オプションページを使うと、こうした情報をまとめて入力する管理画面を用意できます。各表示箇所が同じ保存先を参照するように実装すれば、変更する場所を集約できます。

ただし、拠点ごとに異なる営業時間や、キャンペーン専用の電話番号まで一つにまとめるべきではありません。

共通化する前に「どこに表示する情報なのか」「本当に同じ値を使うのか」を確認しておくと、意図しない変更を防ぎやすくなります。

導入前には、機能と運用条件を分けて確認する

必要な機能が決まったら、導入する環境と入手するパッケージを確認します。

たとえば、GPLWPPassで導入候補を探す場合も、掲載されているバージョン、提供内容、更新方法を確認しておくと、実装計画を立てやすくなります。

特に、すでに稼働しているサイトでは、使用中のテーマやほかのプラグインとの組み合わせも考慮したいところです。

本番環境へ変更を加える前にバックアップを取り、可能であればテスト環境で動作を確認します。既存の入力項目を置き換えるなら、現在のデータをどのように引き継ぐかも決めておく必要があります。

プラグインの機能確認と、サイトへの組み込み方の確認を分けて進めると、作業の見通しがよくなります。

入力画面の言葉を整えるだけでも、使いやすさは変わる

「説明文」という項目名だけでは、どこに表示される文章なのかわからないことがあります。

「サービス一覧に表示する短い紹介文」と書けば、役割が伝わります。

画像欄なら、必要に応じて「横長の画像を使用」「詳細ページ上部に表示」といった案内を添えます。文字量に目安がある場合も、入力する場所で確認できるようにしておくと便利です。

説明を増やしすぎる必要はありません。担当者が迷いそうな点に絞って、短く具体的に書くことが大切です。

完成後は、設定を知らない人に入力してもらうと改善点が見つかります。「この画像はどこに出ますか」という質問があれば、その項目には表示場所の説明が足りないのかもしれません。

確認には、少し扱いにくい内容を使う

見栄えのよいサンプルだけでは、実際の運用で起こる問題を見つけにくくなります。

長いサービス名、文章量の多い回答、縦長の画像、空の任意項目などを入れて、公開ページを確認してみてください。

繰り返し項目は、1件だけの場合と件数が多い場合の両方を試します。スマートフォンで見たときに、見出しが不自然に折り返されたり、ボタンの文字が読みにくくなったりしていないかも確認します。

ACFで情報を整理しても、表示速度やレイアウトが自動で最適化されるわけではありません。画像の扱い方やテンプレートの処理を含め、サイト全体として確認する必要があります。

自由に書く部分まで、細かく分けなくてよい

すべての文章をカスタムフィールドへ移す必要はありません。

読み物としての流れが大切な記事や、構成が毎回大きく変わる文章は、標準のエディターのほうが編集しやすい場合があります。

サービス紹介でも、概要や料金などは個別の項目にし、詳しい説明は通常のエディターで書く構成が考えられます。

判断の基準は、入力欄を増やせるかどうかではなく、更新担当者が迷わず作業できるかどうかです。

まずは、手間のかかるページを一つ改善する

ACF PROを導入するからといって、サイト全体を一度に作り直す必要はありません。

追加するたびにレイアウト調整が必要なページや、更新漏れが起こりやすい情報から着手すると、改善の効果を確かめやすくなります。

入力項目を整理し、表示方法を実装し、実際の内容を登録する。そこで見つかった問題を直してから、ほかのページへ広げていきます。

次のサービスを追加するときに、古いリンクを探し回らずに済む。営業時間を変えるときに、修正箇所を思い出す必要がない。

そうした更新のしやすさまで含めて設計することで、公開後も使い続けやすいWordPressサイトに近づけます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?