WordPressでスタッフディレクトリを作成する方法（従業員プロフィール付き）

長年にわたり、数え切れないほどのユーザーがウェブサイトを構築するのを支援してきましたが、一貫して価値のある機能の1つがスタッフディレクトリです。ローカルビジネスを経営していても、コンサルティング会社を経営していても、従業員ディレクトリがあれば、潜在的なクライアントや顧客はあなたのブランドの背後にある顔を見ることができます。

この記事では、WordPressウェブサイトにスタッフディレクトリを作成する方法を説明します。

これを行うための 2 つの方法を考えました。ページビルダーを使用する方法と、専用のビジネスディレクトリプラグインを使用する方法です。どちらを選択するかは、ビジネスの規模とスタッフディレクトリで何をしたいかによって大きく異なります。

WordPressサイトにスタッフディレクトリを作成する理由

多くのWordPressのビジネスウェブサイトは、従業員ディレクトリを追加することでメリットを得られます。 これは、オーディエンスとつながり、信頼を築くための素晴らしい方法です。

たとえば、地元の店はフレンドリーなスタッフを紹介し、顧客を歓迎するように感じさせることができます。コンサルティング会社は、チームの資格を強調し、潜在的なクライアントに仕事に必要なスキルを持っていると確信させることができます。

教育関連のウェブサイトでさえ、スタッフディレクトリは役立つでしょう。大学のウェブサイトに、連絡先情報や専門分野を持つ教授のディレクトリを含めることを考えてみてください。これは、学生が適切な教員を見つけようとする際に非常に役立ちます。

これを踏まえて、WordPressウェブサイトにスタッフディレクトリを追加するための、初心者向けの2つの方法を見てみましょう。以下のクイックリンクを使用して、希望する方法にスキップできます。

• 方法 1: SeedProd でシンプルなスタッフリストを作成する (小規模チーム向け)
• Method 2: Use Business Directory Plugin (For Large Teams)

方法 1: SeedProd でシンプルなスタッフリストを作成する (小規模チーム向け)

スタッフが最大20名までで、カスタムスタッフページを作成して紹介したい場合に最適な方法です。

ここでは、カスタムページやテーマをデザインするための最高のドラッグ＆ドロップページビルダープラグインである SeedProd を使用します。これは、デフォルトの WordPress エディターよりもはるかに多くの柔軟性、機能、およびアドオンを提供します。

SeedProdには専用の「チームメンバー」ブロックも含まれており、視覚的に魅力的なスタッフディレクトリを構築できます。

SeedProdの機能と価格の詳細については、包括的なSeedProdレビューをご覧ください。

注意: SeedProdがお好みでない場合でも、Thrive Architectを使用して、スタッフディレクトリ付きのカスタムページを作成できます。

ステップ1：SeedProdのインストールと有効化

開始する前に、SeedProd プラグインをインストールして有効化する必要があります。このチュートリアルでは Pro バージョンを使用します。これにより、スタッフディレクトリ用の「チームメンバー」を含む追加のテンプレートとブロックがアンロックされます。

プラグインのインストールが初めての場合は、WordPressプラグインのインストール方法に関するガイドをお読みください。

有効化したら、WordPress管理画面のSeedProd »設定に移動し、SeedProdアカウントからライセンスキーを入力します。キーを入力した後、[キーの検証]をクリックしてPro機能（プロ機能）を有効化します。

ステップ 2: ランディングページテンプレートを選択する

さて、スタッフディレクトリ専用の新しいランディングページを作成しましょう。SeedProd » ランディングページに移動し、「新しいランディングページを追加」をクリックします。

SeedProd は、「近日公開」や「404ページ」などのキャンペーンタイプ別に整理された、さまざまなデザイン済みテンプレートを提供しています。画面上部にあるタブを使用して、これらのカテゴリに基づいてテンプレートをフィルタリングできます。

テンプレートにマウスカーソルを合わせるとプレビューが表示され、虫眼鏡アイコンをクリックすると拡大表示されます。気に入ったテンプレートが見つかったら、チェックマークアイコンをクリックして選択してください。

この例では、「富裕層向け販売ページ」テンプレートを使用して、スタッフメンバーリストに変換します。

次に、ランディングページにわかりやすい名前を付けます。SeedProd はこのタイトルに基づいて自動的に URL を生成しますが、必要に応じてカスタマイズできます。

ページ名と選択したテンプレートに満足したら、「ページの保存と編集を開始」をクリックするだけで、スタッフディレクトリの作成を開始できます。

ステップ3：カスタムページのデザイン

SeedProdがテーマビルダーインターフェースを起動します。右側にはフロントエンドテンプレートのライブプレビューが表示され、左側にはブロック設定が表示されます。ここで、必要に応じてページのデザインをカスタマイズできます。

ページビルダーの詳細については、以下のガイドをご覧ください。

• WordPressでランディングページを作成する方法
• WordPressでバイラル待機リストランディングページを作成する方法
• コンバージョンするWordPressのSqueeze Pageを作成する方法

このチュートリアルでは、ページをスタッフディレクトリのように見せるために、いくつかのテキストを変更しました。また、スタッフプロフィール用のスペースを確保するために、いくつかのブロックを削除しました。

ステップ4：チームメンバーブロックの追加とカスタマイズ

スタッフリストセクションを追加するには、左側のブロックセクションにある検索バーを使用し、「カラム」ブロックを選択します。これにより、複数のスタッフメンバーを 1 か所に表示できます。見つけたら、そのブロックを最適な場所にドラッグアンドドロップしてください。

次に、列レイアウトを選択します。

これは、何人のスタッフメンバーを紹介したいかによって異なります。

次に、SeedProdが提供するすべてのブロックが表示されます。例としては、カウントダウンタイマー、プログレスバー、ローテーションするお客様の声スライダーなどがあります。

ここで、「チームメンバー」ブロックを探します。このブロックを各列にドラッグアンドドロップするだけです。

おそらく、チームメンバー全員を表示するには1列では十分ではないでしょう。その場合は、コピー＆ペーストするだけで済みます。

それを行うには、列ブロックにカーソルを合わせ、すべてのブロックの周りに青い色が表示されるまで待ちます。次に、ツールバーの「行を複製」ボタンをクリックします。

SeedProd は、重複した行を元の行の下に自動的に表示します。

これで、各スタッフメンバーの情報を追加できるようになりました。

まず画像を追加しましょう。これを行うには、[チームメンバー]ブロックをクリックし、ブロック設定サイドバーで「独自の画像を使用」を選択します。

メディアライブラリが開きます。

画像を選択してください。次に、「選択」をクリックします。

完了したら、さらに画像設定をカスタマイズできます。

例えば、画像のaltテキストを挿入したり、幅をカスタマイズしたり、画像の配置を上から左または右に変更したりできます。

下にスクロールすると、デフォルト名、タイトルの見出しタグ（H1から段落など）、名前の配置を変更できます。

SeedProdを使用すると、スタッフディレクトリページがモバイル、デスクトップ、またはタブレットで表示されるかによって、名前の表示方法を調整することもできます。

次に役職と説明です。

この指定により、スタッフの役職を挿入できます。

一方、説明欄には、従業員に関する重要な情報を挿入できます。その人が何をするかだけでなく、連絡先情報（メールアドレスや会社の電話番号など）を提供することもできます。

名前と同様に、スタッフディレクトリページが表示されている場所に基づいて、この役職と説明のレイアウトを調整できます。

下に進むと、チームメンバーブロックのデザインをカスタマイズするための設定があります。

例えば、画像の角丸を変更したり、画像と人物の説明の間に区切り線を有効にしたりできます。

必要に応じて、従業員のソーシャルメディア情報を追加できます。デフォルトでは、SeedProd は Facebook と Twitter のソーシャルアイコンを追加しますが、LinkedIn など、ビジネスに関連する他のアイコンを挿入することもできます。

これを行うには、「+ 新規追加」をクリックするだけです。

次に、ソーシャルアイコンをカスタマイズするための設定リストが表示されます。

ここで、画像シンボルをクリックしてソーシャルアイコンを変更します。

アイコンライブラリが現在開きます。

希望するソーシャルメディアプラットフォームを検索し、「+」ボタンをクリックして使用してください。

次に、少し下にスクロールして、ソーシャルメディアのタイトルと個人のソーシャルリンクを追加します。

アイコンの色も変更できます。

この段階で、設定サイドバーを下にスクロールできます。

ここで、ソーシャルアイコンのサイズ、配置、色、形状をすべて変更できます。

チームメンバーブロックをさらにカスタマイズしたい場合は、「高度」タブに切り替えます。

ここでは、ブロックのデザインを変更するための追加設定を見つけることができます。例えば、パディングとマージンをカスタマイズしたり、影の効果を追加したり、CSSアニメーションを有効にしたりできます。

次にすることは、残りのスタッフプロフィールでも同じ手順を繰り返すだけです。

スタッフディレクトリページの最終的な見た目に満足したら、[保存]ボタンをクリックして進捗を保存してください。

最後に、スタッフディレクトリページをウェブサイトで公開するには、「公開」ボタンをクリックします。

これで完了です！SeedProdを使用してスタッフディレクトリが稼働しました。

こちらがデモウェブサイトでの表示例です：

方法2：ビジネスディレクトリプラグインを使用する（大規模チーム向け）

チームが小さい場合は、方法1で十分かもしれません。しかし、チームが大きい場合、1ページに数十のプロフィールが表示されると、訪問者にとって圧倒される可能性があります。

ここで、専用のスタッフディレクトリプラグインが役立ちます。今回は、Business Directory Pluginの無料版を使用します。

このプラグインを使用すると、WordPressウェブサイトに専用のチームメンバーディレクトリを作成できます。検索バー、フィルター、各スタッフメンバーの個別のプロフィールページがすべて揃っています。また、他の種類のディレクトリウェブサイトを作成するためにも使用できます。

とはいえ、プレミアムビジネスディレクトリプラグインにアップグレードすることもできます。これにより、有料ディレクトリの決済ゲートウェイ、プレミアムテーマ、評価/レビューなどのプロ機能にアクセスできるようになります。

詳細については、Business Directory Pluginのレビューをご覧ください。

ステップ1：ビジネスディレクトリプラグインのインストールとセットアップ

まず、Business Directoryプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化したら、Directory » Directory Content に移動し、「Form Fields」をクリックします。ここでは、後でスタッフ情報（説明、ウェブサイト、電話番号、住所など）を挿入するために使用する事前作成済みのフィールドが表示されます。

これらのフィールドは良い出発点ですが、さらにカスタマイズすることもできます。「新しいフォームフィールドを追加」をクリックして、新しいフィールドを作成しましょう。

まずフィールドの関連付けから始めましょう。デフォルトでは、スタッフリストプラグインはこれを「投稿メタデータ」のままにします。これは、フィールドがブロックエディターのメイン編集エリアの下にカスタムフィールドとして表示されることを意味します。このオプションはこのままにしておきます。

収集したい情報に応じて、フィールドタイプをテキストからラジオボタン、ソーシャルメディアリンク、チェックボックスなどに変更することもできます。

次に、各フィールドに明確なラベル（「LinkedInプロフィール」など）を提供します。ユーザーが入力プロセスをガイドするためのオプションの説明を追加することもできます。

特定のデータ形式を必要とするフィールドについては、フィールドバリデーターを設定して、正確な情報が入力されるようにすることができます。

メールアドレス、URL、電話番号など、いくつかのオプションがあります。

以下で、「必須」ボックスをチェックすることで、特定のフィールドを必須にすることができます。これは、重要な情報に役立ちます。

「フィールド表示オプション」で、フィールドが表示される場所を制御できます。たとえば、すべてのディレクトリカテゴリに適用するか、特定のカテゴリにのみ適用するか、管理者のみが編集できるか、またはフィールド値をフロントエンドに非表示にするかを選択できます。

フィールド設定のカスタマイズが完了したら、一番下までスクロールしてください。

次に、「フィールドの追加」をクリックして変更を保存します。

従業員ディレクトリリストに必要なフィールドを作成するまで、この手順を繰り返してください。

フォームフィールドメニューに戻り、スタッフディレクトリに適用されない既存のフィールドを削除できます。

不要なフィールドにカーソルを合わせ、「削除」をクリックするだけです。

次に、「カテゴリ」タブに移動します。「一般」という名前のデフォルトカテゴリが表示されます。

スタッフディレクトリのために、これを「従業員」のようなより説明的な名前に変更しましょう。これにより、すべての従業員ディレクトリのリストが分類されます。

これを行うには、「クイック編集」をクリックします。

次に、GeneralをEmployeeに変更します。

スラッグも変更し、「カテゴリを更新」をクリックするのを忘れないでください。

会社に複数の部署があり、さらにリストを整理したい場合は、「新しいカテゴリを追加」をクリックして異なるカテゴリを作成できます。

ポップアップが表示されます。ここで、カテゴリ名と親カテゴリ（該当する場合）を入力します。その後、「新しいカテゴリを追加」をクリックします。

次に、「プラン」タブに切り替えます。ここでは、有料のビジネスディレクトリを作成するのではなく、チームを紹介することに焦点を当てているため、不要なデフォルトの有料プランオプションはすべて削除してください。

プランにカーソルを合わせ、「削除」をクリックするだけです。

無料リスティングについては、削除できないためそのままにしておきます。

ステップ2：従業員ディレクトリページを作成する

ある時点で、「Business Directory Pluginは、正しく機能するために[businessdirectory] ショートコードを含むページが必要です。このページは自分で作成するか、Business Directoryに自動的に作成させることができます。」という通知が表示される場合があります。

セットアップをすばやく簡単に行うには、「必須ページを自動作成する」をクリックすることをお勧めします。このディレクトリページは、現在のWordPressテーマに合わせてデザインが自動的に調整されます。

デフォルトでは、プラグインは「Business Directory」という名前のページを作成しますが、これは作成しているものには正確ではありません。

このページを変更するには、WordPressダッシュボードで固定ページに移動し、ディレクトリページを見つけます。次に、その上にカーソルを合わせて「編集」をクリックします。

ブロックエディターで、ページ名を「従業員ディレクトリ」や、その目的に適した任意の名前などに単純に変更します。

ディレクトリページの視覚的な魅力を高めるために、追加のブロックを追加することもできます。ただし、[businessdirectory] ショートコードはそのままにしておく必要があります。

ページのカスタマイズを自由に続けてください。例えば、配色やフォントを変更して、ページを際立たせることができます。

最後に、「更新」をクリックして変更を保存します。

ステップ 3: スタッフメンバーディレクトリを作成する

すべての設定が完了したので、個々のスタッフメンバーのリストを作成しましょう。ディレクトリ » ディレクトリコンテンツに移動し、「リスト」タブを開きます。「新しいリストを追加」をクリックして開始します。

ビジネスディレクトリプラグインのカスタムフィールドが表示されたブロックエディターに移動します。「タイトル」セクションに、スタッフの名前またはニックネームを入力します。

以下の専用セクションで、役割と専門知識の詳細な説明を追加できます。この説明は、ディレクトリではなく個々のプロフィールページにのみ表示されるため、長くすることができます。

「ディレクトリリストのフィールド / 画像」までスクロールし、以前に作成または変更したカスタムフィールドを使用して、スタッフメンバーの情報を入力します。

これには、連絡先情報やソーシャルメディアへのリンクが含まれる場合があります。

「画像」タブに切り替えます。

ここで、メディアライブラリまたはコンピューターからスタッフメンバープロフィールの画像をアップロードできます。

これが完了したら、設定サイドバーの「Listing」タブに移動しましょう。「Directory Categories」セクションで、「Employee」または以前に作成したカテゴリの横にあるチェックボックスをオンにします。

必要に応じて追加のタグを追加することもできます。

「抜粋」セクションでは、短くても情報量の多い説明を書くことができます。これは、すべてのプロフィールが一覧表示されるメインのスタッフディレクトリページに表示されます。

「ディスカッション」セクションでコメントを無効にすることもお勧めします。

これは、プラグインがデフォルトでページに連絡フォームを追加しているため、ページ上の不要な乱雑さを避けるためです。

「リスティング情報」セクションで、「無料リスティング」プランを選択し、「OK」をクリックします。

まずプランを割り当てないと、リスティングを公開することはできません。

すべてに満足したら、「公開」をクリックしてスタッフメンバーのプロフィールを公開します。

これらの手順を繰り返すだけで、すべてのチームメンバーのプロフィールを作成できます。

ステップ4：従業員リスティングページのカスタマイズ

従業員ディレクトリページをプレビューすると、従業員リストをフィルタリングするための検索フォームが表示されます。

以下は、チームメンバーの明確で整理されたリストです。

スタッフプロフィールページを開くと、従業員の情報と、訪問者が連絡するためのお問い合わせフォームが表示されます。

このようになります：

これらのページの表示方法に満足しておらず、カスタマイズしたい場合は、WordPressダッシュボードのDirectory » Settingsに移動してください。次に、「Listings」をクリックします。

ここでは、1ページあたりに表示されるリストの数を変更したり、検索フォームの設定を変更したり、コメントフォームや連絡フォームを無効にしたり、ボタンを調整したりできます。

完了したら、「変更を保存」をクリックするのを忘れないでください。

「外観」メニューに移動することもできます。

ここで、ディレクトリページのボタンのスタイルとプライマリカラーを変更できます。また、Font Awesome Icons をインストールしたり、プロプランにアップグレードしてリスティングレイアウトをカスタマイズしたりすることもできます。

「画像」タブに切り替えると、スタッフプロフィールの画像の表示方法を変更できます。

例えば、ライトボックス効果をオンにしたり、メインのリストページでサムネイル画像を無効にしたり、サムネイル画像のサイズを変更したりできます。再度、[変更の保存]をクリックすることを忘れないでください。

WordPress でディレクトリを作成する方法については、これらの記事をご覧ください。

• WordPressでWebディレクトリを作成する方法 (ステップバイステップ)
• WordPressで検索可能なメンバーディレクトリを作成する方法
• おすすめのWordPressビジネスディレクトリプラグイン

ボーナスヒント：WPFormsを使用して従業員情報を収集する

小規模なチームでも大規模なチームでも、ディレクトリに必要なすべてのスタッフ情報を収集することは困難な場合があります。メールやスプレッドシートを通じて手動で詳細を取得するのは時間がかかることがあります。

このプロセスを合理化するために、強力でありながら使いやすいWordPressフォームビルダープラグインであるWPFormsの使用をお勧めします。すぐに始められるように、事前に構築された従業員ディレクトリフォームテンプレートが付属しています。

このテンプレートには、名前、メールアドレス、電話番号、部署、役職など、多くの関連フィールドが既に含まれています。便利なコンタクトフォームビルダーを使用して、ニーズに関連するフィールドを追加することもできます。

ラジオボタンや画像アップロード、スパムのようなフォーム送信を防ぐためのCAPTCHAなど、さまざまなフィールドタイプから選択できます。

WPFormsの詳細については、当社の完全なWPFormsレビューをお読みください。

この記事でWordPressでスタッフディレクトリを作成する方法を学べたことを願っています。また、コードなしでカスタムWooCommerceカートページを作成する方法に関するガイドや、デジタル製品の作成と販売のためのツールに関する専門家のおすすめも確認したいかもしれません。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。