WordPressでマニュアル閲覧サイトを作った話【PHP】

勤務先で使っているマニュアルたちの管理が煩雑になったということでどうにかできないもんかと相談がありました。
こちらの会社でしていたマニュアル作成・管理は以下の通り

  • word、excel、powerpointなど種別問わず部署や個人単位でマニュアルを作成
  • もともとは個人のPC管理していたものをDropbox共有していたが探しにくい、わかりにくい。
  • デジタルリテラシーにも差があり、多職種が一つの場所で勤務していてそれぞれ職種ごとにマニュアルを探したい

こんな状況だったので以下の提案を行いました

  • DropboxからGoogle driveでのアップロード、管理に切り替え
  • 作成したマニュアルの種別は問わないが、アップロードした際に共有権限を設定するよう徹底(じゃないと見れない時がある)
  • 閲覧自体(コンテンツをクリックした時の飛び先)はGoogleのままとして、それらを検索できるような仕組みとしてWordPressでサイトを作る

とにかく見やすくなってわかりやすくなれば良いよとのことで、制作を始めました。

実はこれまで同じような考えでnotionを使って管理をしようとしていたのですが、

  • 職員への周知がうまくいかない
  • 意外と検索するための操作が直感的でなかった(フィルター・ソート機能は良かったけども)

といった感じでnotionは職場風土的に合わなさそうというのも経験しましてWordPressでカスタマイズしちゃおうと考えたわけです。

使用したテーマ

オリジナルテーマを作成しました。
理由としては、詳細ページについての作り込みをする必要がなかった+独自にページを追加していく方が良かったから。

個人的にはブログ機能をしっかり作り込みたいとかの時には既存テーマがいいと思ってますが、デザインにこだわりなく機能面だけ好き勝手いじりたい時ならオリジナルテーマの方が早いしプラグイン依存も最低限で済むと思っています。

テーマ構成

必須ファイル以外だとこんな感じ

使用したプラグイン

サイトを運用していく上での動線やUI設計

  • 職員(ユーザー)はサイトトップURLにアクセスしたらログインを迫られる
  • ログインについては管理者である私の方でアカウントを作成・周知済みとしてそれを使ってログイン
    (特にメール認証や2段階認証は付けなくて良いと判断)
  • ログイン後は画面上部に置いた『検索バー』を利用して、マニュアルタイトルの関連語句で検索
  • コンテンツ本体部分は新着アップロード順でマニュアルを表示
  • コンテンツサブ部分にはWordなどのファイル種別、もしくは職種別で絞り込めるようなソート機能を実装
  • 検索や絞り込みしたマニュアルは複数ページに渡って表示
  • マニュアルタイトルをクリックするとGoogle drive内の当該ファイルにアクセスして閲覧することができる

といった状態にしました。

ちなみにこの辺の言語化・具体化についてはFigmaを使用しました。
言うたら個人開発になるわけですが、頭の中をスッキリ整理した方がやりやすいかと思って作ってみました。

そして今回の場合、スマホもしくはipadでの利用が多いことが想定されたため、UI設計も大きな画面というよりタブレット以下の画面を想定して作成してみました。

テンプレートパーツの読み込みなど基本的なところで参考になった記事

ログイン機能・ログアウト機能実装に関して参考になった記事

カスタム投稿タイプ・カスタムタクソノミー設定に関して参考になった記事

http://galileo-venus.com/2020/05/22/20200518_wp_acfsearch/#%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C%E3%82%92ACF%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%95%E3%81%9B%E3%82%8B

サイト内検索機能の実装で参考になった記事

メインループ・サブループ作成に関して参考になった記事

ページ送りについて参考になった記事

クエリのインスタンス化する際の引数に入れる配列で、paged=>$pagedを入れていないことが原因でページ送りうまくいかない話を確認することができました。

今回の公開先はエックスサーバーで独自いを取得してすることになりましたが、いずれはサーバーおよびドメインの移管作業もしておきたいところ(管理を一元化していく目的で)

この記事を書いた人

kumarishin