コーポレートサイトを静的サイトからWordPressに変更した話

  • 目的:コーポレートサイトの運用
  • 課題:静的サイトのため事業拠点の増減で全ページ更新し直す必要があった
  • 方法:WordPressで動的にコンテンツを表示するように変更
  • 成果:https://yamashina.iehohs.com/
スポンサーリンク

コーポレートサイトのリニューアル

昨年、僕の大きな仕事はコーポレートサイトのリニューアルでした。

4~5年ぐらい前に業者に依頼して作成してから作りっぱなしのゾンビサイトでした。必要な公開資料などのコンテンツの更新はあっても、新規事業や拠点の増減については反映されていないという、パンフレットの「詳細はHPで」という文言が虚しくなる状況でした。

僕が情シスの仕事に携わるようになって最新の情報に更新し直しましたが、静的サイトだったため1つ変更するだけでもすべてのページを手直ししないといけません。これでは事業変更がある度に膨大な時間を取られてしまいます。

それならば動的サイトにしてしまえば今後のメンテナンスは楽になると思い立って半年ぐらいかけてWordPress化しました。CMSを使えばコーディングの知識はなくてもコンテンツ作成はできるので担当者の交代もしやすいです。

本物のサイトを載せちゃうといろいろめんどくさいので、サンプルのサイトを用意しました。地元である山科の史跡を紹介するサイトです。

https://yamashina.iehohs.com/

史跡(事業所)一覧

トップページのサイドバーに「山科の史跡一覧」とあります。これが事業所一覧だと思ってください。

メインカラムには「歴史散歩」と「歴史学入門」があり、ここはお知らせ投稿の部分ですね。

せっかくサンプルを作るならばコンテンツもしっかり作り込もうと思った結果、このコンテンツを作り上げるのにかなり時間がかかりました。

メニューの「山科の史跡」に移ると、史跡の一覧が所在地と最寄駅を添えて並びます。

このページではサイドバーの史跡一覧はダブってしまうので非表示にしています。

史跡のページはWordPressの固定ページで作成しており、親ページを「山科の史跡」にすることで一覧に表示させるようにしています。表示順も指定できます。

サムネイルはアイキャッチ画像、所在地と最寄駅はカスタムフィールドで入力すると出てきます。

増やしたければ固定ページを新規追加し、減らしたければ削除することで、すべてのページの一覧に反映されます。

お知らせ欄

「歴史散歩」と「歴史学入門」の2種類はカテゴリー選択で表示する場所を変えています。

実際のコーポレートサイトでは、「お知らせ」と「トピックス」に分けて「トピックス」は更新順で表示するようにしました。投稿順だと古い記事は埋もれていきますが、更新順にしておけば一定期間見せたい記事や随時情報が変わる記事を常に上に表示させることができます。

タグには関連する史跡を入れていきます。タグは本来フリーで入力するものですが、選択式に変えています。

このタグを指定すると、各史跡のページのサイドバー上部に関連記事として表示することができます。

事業所数が多くなると、お知らせがどの事業所に関連するものなのかがわかりにくくなります。事業所ページから関連するお知らせだけが見えると便利だと思ってこの機能を付けました。

カスタマイズ例

コードはもう少し準備してから公開しますのでお待ちください。

reCAPTHA

お問い合わせフォームにはスパム対策でGoogleのreCAPTHAを入れておきます。

下記サイトで登録してキーを発行します。

https://www.google.com/recaptcha/admin/create

ドメインごとの管理になるので、「iehohs.com」のドメインを登録すれば「www.iehohs.com」も「yamashina.iehohs.com」も両方いけます。

2種類のキーをCantact Formのインテグレーション画面から入力して登録しておきます。

保護マークを非表示にする

https://developers.google.com/recaptcha/docs/faq

有効の状態だと画面右下に保護マークが出てきて邪魔なのでCSSを追加して非表示にします。

非表示にする場合は代わりの下記の文言を表示する必要があります。

コメント

タイトルとURLをコピーしました