トグルメニュー

WordPress でスタッフ ディレクトリを作成する方法 – 初めてのビーバー テーマ プロジェクト

公開: 2018-03-23

ビーバービルダー製品が 25% オフ!セールは終了です...もっと詳しく!

dynamic-staff-directory
  • ビーバーのテーマ

WordPress でスタッフ ディレクトリを作成する方法 – 初めてのビーバー テーマ プロジェクト

私のお気に入りの Web デザイン ポッドキャストの 1 つは、ShopTalk ショーです。よくある質問は、「Web デザインについて学ぶ最良の方法は何ですか?」というものです。答えは常に、興味のあるテーマを選択し、何かを構築し始めることです。実践的な学習に代わるものはありません。この投稿では、Hashim が Beaver Themer と Page Builder を使用してスタッフ ディレクトリを構築するプロセスを説明します。これは、Beaver Themer の使用方法を学びたい人にとって素晴らしいスターター プロジェクトです。

Beaver Themer から十分な利益を得ていますか?

最初にヘッダーとフッターを制御するためにプラグインを購入しました。 「テーマパーツ」と条件設定をいじってみたのは後になってからです。その後、Beaver Themer で高度なサイトを構築できる可能性に衝撃を受けました。私は Beaver Builders の Facebook グループで、このツールの価格が過小評価されていると主張する変人になりました。

では、Themer の機能を自分で理解するにはどうすればよいでしょうか? Beaver Themer の能力を最大限に理解するための最良の方法は、プラグインのペースを試す小さなプロジェクトを作成することです。

1 つのテスト プロジェクトで Beaver Themer のほとんどの機能を体験することで、ツールをワークフローにどのように組み込むことができるかを確認し始めることができます。その後は、Beaver Themer のようなコード不要のツールを使用できることがわかっているため、自信を持ってより複雑な Web サイトに取り組むことができます。

ゲームですか? 「はい」の場合は、Wordpress を起動し、以下の手順に従います。

#1.互換性のあるテーマを選択してください

多くの人気があり、適切にコード化されたテーマは、Beaver Themer で動作します。それらのいくつかのリストはここで見つけることができます。

カスタマイズ可能なヘッダーやフッターなど、テーマに依存して提供される機能のほとんどは、Beaver Themer を使用して実現できます。したがって、テーマの選択について心配する必要はありません。リストの最初のものを選択すれば、自分に良さそうなものを選択すれば問題ありません。

2.カスタム投稿タイプ/フィールドビルダーを選択します

Beaver Themer のフィールド接続機能は、Wordpress に最初から付属している Post フィールドと Page フィールドのみで使用すると強力です。しかし、カスタム投稿タイプのプラグインと一緒に使用すると、事態は本当におかしくなります。

カスタム投稿タイプは、Wordpress をブログ ツールから CMS に変換します。これらは、ブログやパンフレット サイトを超えた高度な Wordpress プロジェクトの構成要素です。

Themer で最もよく機能する 3 つのプラグイン オプションは、Advanced Custom Fields、Toolset、および Pods です。私の個人的なお気に入りは Toolset ですが、正直に言うと、3 つのツールはすべて仕事を完了します。

3. オプション: 内線番号を選択します

Beaver にすぐに使用できるモジュールがない場合は、サードパーティの拡張機能の使用を検討してください。

私がよく使用する拡張機能の一部は、Wordpress プラグイン ディレクトリに無料であります。たとえば、私は素晴らしい Beaver Cards プラグインのヘビー ユーザーです。

スタックを選択したので、最初のプロジェクトを構築しましょう。

初めてのビーバーテーマプロジェクト: ダイナミックなスタッフディレクトリ

スタッフディレクトリはクライアントからの一般的な要望です。 Beaver Themer を使用すると、動的で状況に応じたコンテンツとレイアウトをスタッフ ディレクトリに追加することで、クライアントに大きな印象を与えることができます。

スタッフ ディレクトリは、Beaver Themer のすべての機能に慣れるために使用するのに最適なプロジェクトでもあります。以下の手順に従えば、午後 1 日で Beaver Themer プロになれるでしょう。

簡単なスタッフディレクトリを作成する

  1. Beaver Builder、Beaver Themer、互換性のあるテーマ、カスタム投稿タイプのプラグインをインストールします。このプロジェクトを完了するには、Beaver Builder 拡張機能の使用はオプションです。
  2. スタッフ プロフィールのカスタム投稿タイプを作成します。初めての場合は、次のチュートリアルのいずれかを使用します。 ACF チュートリアル / ポッド チュートリアル / ツールセット チュートリアル
  3. 次のカスタム フィールドを作成します。
    1. "バイオ"
    2. "名前"
    3. "役職"
    4. 「顔写真」のためのフィールドを作成しないでください。そのためには、組み込みの注目の画像フィールドを使用します。
  4. 7人のスタッフプロフィールを作成します。
  5. 投稿の 3 つを「経営陣」としてタグ付けし、投稿の 2 つを「営業チーム」としてタグ付けします。

これで、単純なディレクトリの骨子ができました。これを自分のサイトに掲載してもらうために、クライアントは喜んで代理店に料金を支払います。

それでは、クライアントを驚かせ、このディレクトリを Beaver Themer で強化しましょう。

動的なスタッフディレクトリを作成する

まず、Beaver Themer を使用して、個々のスタッフ プロファイルのテンプレートとスタッフ ディレクトリのアーカイブを作成します。ここの手順を参照してください。

次に、フィールド接続を使用して、カスタム フィールドからコンテンツを取得し、レイアウトします。

さて、自分の背中を押してください。2 つの個別のページをデザインするのにかかる時間で、8 つの既存のページと今後の任意の数のページにわたって使用される2 つのテーマ テンプレートを作成しました。

それでは、Beaver Themer を使用して、「リーダーシップ」カテゴリのアーカイブ用のテンプレートを作成します。

このテンプレートでは、3 人の幹部の写真が、メインのアーカイブ ページでデザインしたものとは異なるように表示されます。写真をもっと大きくするか、タイトルを別のフォントにする必要があるかもしれません。メイン アーカイブには写真とリンクのみを表示し、エグゼクティブ アーカイブには完全な経歴を表示するように設計することを検討してください。夢中になって、自分に合った方法でデザインしましょう。

最後に、Beaver Themerを使用して「販売」カテゴリのテーマ部分を作成します。

営業担当者用のページでは、ヘッダーの下に、会社が営業担当者をさらに募集していることを知らせる行を作成します。

出来上がり!これで、クライアントは、美しく、動的で、更新が簡単なスタッフ ディレクトリを手に入れることができました。 Beaver Themer を使用して構築しました。カスタム コードは 1 行も必要ありませんでした。

その過程で、個々の投稿とアーカイブのテンプレートを作成する方法と、対象のページに動的な行を追加する方法を学びました。

次回、クライアントから一連の要件を受け取ったとき、または自分で Web サイトのアイデアを思いついたときは、その計画を、Beaver Themer を活用した一連のカスタム投稿タイプと動的テーマ テンプレートに変える方法を検討してください。

質問 – あなたの Beaver テーマスタック

Beaver Themer の使用経験がある場合は、共有してください – サイトの構築に何を使用していますか?好みのテーマ、カスタム投稿タイプのプラグイン、Beaver Builder アドオンは何ですか?

ハシム・ウォーレンについて

Hashim Warren は、ノースカロライナ州グリーンズボロを拠点とするマーケティング ストラテジストです。彼は、住宅建設業者がフック アンド ターゲットでより多くの仕事とより大きな仕事を獲得できるよう支援しています。

8件のコメント

  1. マーク、2018 年 3 月 28 日午前 3 時 45 分

    ビデオまたはデモ サイトがあれば、これは本当に素晴らしいチュートリアルになりますが、素晴らしい仕事をしてくれてありがとう



  2. トム・グエン、2018年5月1日午後8時35分

    私はマークの提案に同意します。



  3. April Wier 、2018年5月17日午後5時09分

    私はトムのコメントに同意します。



  4. シンディ・ワイコフ、2018年6月30日午後9時34分

    私も同意します。完成したプロジェクトがどのようなものになるのか見てみたいと思います。



  5. ジェリー・キング、2018年11月12日午前4時11分

    こんにちは、ハシム、素晴らしいチュートリアル、ありがとう。このプロセスを使用して、訪問者が郵便番号の基準に基づいてビジネスを検索できるビジネス ディレクトリを構築できますか?そして、すべてのビジネスの場所を示す地図をディレクトリに含めるのはどれほど難しいでしょうか?



  6. ジェフ・ブラウン、2019年1月13日午前11時12分

    地元の芸術団体のために、私の地域の企業向けの地理ディレクトリを作成することに興味があります。それを支援するアドバイスやチュートリアルはありますか?



    • ロビー・マッカラー、2019年1月13日午後5時44分

      良い質問ですね。 Themer はあなたのサイトのスタイルを整えるのにきっと役立ちます。ただし、申し訳ありませんが、地理ディレクトリのプラグインについては詳しくありません。ポッドを使用してカスタム投稿タイプを作成してみることもできます。それは良い出発点になるかもしれません…



  7. ライアン、2019年5月8日午後7時46分

    ありがとうハシム、本当にインスピレーションを受けています。しばらく Ultimate Member を使用していますが、多くの問題が発生しています。私は自分の BB スキルを拡張することを楽しみにしています。これは私にとって良いプロジェクトです。



私たちのニュースレター

私たちのニュースレターは個人的に作成され、月に 1 回程度送信されます。迷惑な行為やスパム行為はまったくありません。
約束します。

ニュースレターに参加する

今すぐ Beaver Builder を試してみましょう

Beaver Builder