WordPressでクライアントポータルを構築する

Sep 14, 2025
操作方法
Build a client portal with WordPress
（画像クレジット：Webデザイナー）

ユーザーがログインしてドキュメントをダウンロードまたはダウンロードしたり表示したりすることを可能にするエリアを持つことは、電話契約からユーティリティへの消費者によって期待されています。

しかし、デザイナーが彼らのクライアントと協力するとき、すべてがすぐに電子メールの混乱を遮断することができます、 モックアップ と添付ファイル。

この WordPressチュートリアル WordPressを拡張する方法を示します（その他 ウェブホスティング サービス、ビデオ、図面を格納できるクライアントポータルにサービスが利用可能です。クライアントは1か所にすべてアクセスできます。ポータルは、定期的なナビゲーションに表示されない一意のパスワードで保護されたリンクを持つ各顧客にサービスを提供します。

カスタム投稿の種類とフィールドはデータを保存するために使用され、これらはプラグインを介して追加され、テーマが変更された場合はデータの損失を回避します。テーマは少し変更されます。

クライアントポータルを持つと、使用するときはいつでも、それらが必要なときはいつでも、それらが必要なときはいつでも、同じ場所に自分のファイルにアクセスする利便性をお客様に提供します。 クラウドストレージ 。利用可能な販売を表示すること、または成果物の概要を視覚的に概説することによって、開始から作業プロセスの概要を示すために使用することができます。

ファイルをダウンロードしてください このチュートリアルのために。

  • WordPressをVisual Builderに変換する方法

01. WordPressの新鮮なコピーをインストールします

WordPressの新鮮なコピーが開発サーバーにインストールされ、「アンダートラップ」テーマはすばやく仕事を始めるためにボイラープレート基盤を与えるように選択されました。カスタム投稿タイプのUIプラグインが使用されるため、カスタム投稿タイプはテーマとは無関係です。

02.デフォルトのプラグインを削除します

既定のプラグインがWordPressのコピーに付属している場合は、それらを削除してください。このチュートリアルに必要なプラグインは、「高度なカスタムフィールド」と「カスタムポストタイプUI」です。 「クラシックエディタ」もインストールされています。

03.カスタムポストタイプを追加します

カスタム投稿タイプUIインターフェイスを使用して、「顧客」という新しい投稿タイプを追加します。 「POST TYPE SLUG」を入力するときは、スペースの代わりにアンダースコアを使用して、後でテンプレートを作成する方が簡単になります。競合の可能性を減らすために、prefix tu_が追加されました。

04.カスタム投稿タイプの追加/編集インタフェース

Build a client portal with WordPress: The add/edit custom post type interface

特異と複数のラベルの両方を追加してください （画像クレジット：Webデザイナー）

これはWordPress管理メニューに表示されるため、複数のラベル付きの「顧客」と特異な「顧客」を追加します。これらのフィールドに資本化が受け入れられ、WordPressメニューがTidierになります。

05.カスタム書き換えスラグを作成します

Build a client portal with WordPress: Create a custom rewrite slug

より良いユーザーエクスペリエンスのためのカスタムリライトスラグを使用する （画像クレジット：Webデザイナー）

POSTタイプのプレフィックスを使用すると、スラグはポータルに追加された顧客が「/ TU_CUSTOMER /例 - 社」のようなリンクで作成されます。これはきれいに見えません。カスタム書き換えスラグはこれを改善するために使用されます。書き換えスラグを "Customers"に設定すると、カスタム投稿タイプが/ customers /例 - 会社として表示されます。

06.カスタムフィールドのサポートを追加します

Build a client portal with WordPress: Add support for custom fields

「カスタムフィールド」オプションをチェックして変更を送信する （画像クレジット：Webデザイナー）

カスタム投稿タイプに対して有効になっている最後のオプションは、ページの下部近くで見つかった「サポート＆gt;カスタムフィールド」です。これをチェックしてから、ページ下部にある「投稿の種類を追加」します。これは変更を送信して投稿タイプを登録します。

07.カスタムフィールドを追加します

Build a client portal with WordPress: Add custom fields

これで、新しい投稿タイプにカスタムフィールドを追加する必要があります。 （画像クレジット：Webデザイナー）

カスタムフィールドを追加して作成したばかりの投稿タイプに割り当てる必要があります。 "Customer Portal"という名前のフィールドグループを追加するのは、最初のステップで、[フィールドの追加]ボタンでカスタムフィールドを追加します。最初のフィールド "brief"はフィールドタイプ "ファイル"として設定されます。これにより、管理者はこの場所にファイルをアップロードできます。戻り値を「ファイルのURL」に設定してください。

08.フィールドを設定します

追加されるフィールドは「ブランドアンケート」です。これは、顧客が記入するべきGoogleフォームへのリンクで構成されます。このための最適なフィールドタイプは "URL"です。これと同じ方法は、外部サービスにリンクするすべてのフィールドに使用できます。終了したら、[場所]ボックスをオンにしてスクロールし、[POST TYPE "=" CUSTERS "の場合はロジック" SHOW "を使用してください。次にフィールドグループを公開します。

Generate CSS

£50を節約するためにCSSを生成するためのチケットを予約する （イメージクレジット：getty /未来）

09. WordPressテンプレートファイルを作成します

WordPressは、顧客ダッシュボードを表示する方法を知る必要があります。このためには、この特定のPOSTタイプのためのTemplateファイルを作成するようにWordPressテンプレート階層に従います。ルートテーマディレクトリにsingle-tu_customer.phpというファイルを作成します。

10.全幅のシングルポストレイアウトを作成します

Build a client portal with WordPress: Create a full-width single post layout

コンテンツの全幅のレイアウトを作成します （画像クレジット：Webデザイナー）

single-tu_customer.phpファイルを開き、get_headerとget_footer WordPress関数を追加します。これらの関数の間で、テーマと連携するコンテンツを保持するための全幅のレイアウトを作成します。

<218】<λphpget_header（）;;＆gt;

11.ループを起動してコンテンツを作成します

Build a client portal with WordPress: Start the loop and create the content

あなたのコンテンツをレイアウトするためにプレースホルダーを使う （画像クレジット：Webデザイナー）

＆lt; main＆gt。要素は、情報を保持するためのコンテナ要素を作成して作成します。レイアウトのアイデアを得るためにプレースホルダ情報を使用して、要素のスタイルを開始します。カード要素は、ヘッダー、説明、リンクを持つブートストラップカードになります。 

メインクラス= "サイトメイン" ID = "MAIN"＆GT;
＆lt; while while（has_posts（））：the_post（）; ？＆gt;

12. PHPを使用して動的値を呼び出します

関数 "the_field"を使用して、高度なカスタムフィールドプラグインに付属の関数で、カスタムフィールドからの動的コンテンツが顧客テンプレートに入力されます。 'field_name'は、手順3で入力された値です。 

 divクラス= "カードテキストセンター"＆gt。

13.いくつかのダミーデータをテスト顧客にします

Build a client portal with WordPress: Make a test customer with some dummy data

ダミーの顧客を作るためにWordPressダッシュボードに行きます （画像クレジット：Webデザイナー）

WordPressダッシュボードにアクセスすると、左側のバーから新しい顧客を追加できます。顧客＆gt;新しい顧客を追加します。ポストビューはよく知られていますが、スクロールダウンはすべての新しいカスタムフィールドを表示します。すべてが正しく機能していることを確認するためにテストデータを入力してください。

14.不足しているデータに対してエラーを処理します

Build a client portal with WordPress: Handle errors for any missing data

文書が利用できない場合は明確であることを確認してください （画像クレジット：Webデザイナー）

文書が忘れられている場合、またはその文書のプロセスが利用可能になるプロセスの早すぎる場合は、ボタンが機能しない場合は顧客を混乱させる可能性があります。表示する前に値が存在するチェックを追加するカードの「欠落フィールド」のバリエーションを表示する機会を与えます。値が欠けているときにカードにクラス「無効」を追加すると、利用できないカードをスタイル化させることができます。 

 <;ΔPHPif（get_field（ 'field_name'））：？＆gt;
field_nameに値があるときに表示されます
＆lt;

15.インターフェースを片付ける

インターフェースの構造が完成するようになったので、正しくスタイル化することができます。 CSSを使用すると、ページ上のカードや色の外観を向上させることができます。ナビゲーションの色は軽い青に変更され、紹介テキストを追加することでユーザーの方向が向上しました。

16.サイトマップから除外します

カスタムポストタイプは検索エンジンの結果に見つかりません。 POSTタイプは、SEOプラグインを介して、またはメタタグとrobots.txtを使用して手動でWebサイトマップから除外する必要があります。 

 <メタ名= "ロボット" Content = "NoIndex、NoFollow" / gt;
ユーザーエージェント： *
許可：/顧客/

新しいウェブサイトをデザインしたいですか？鮮やかなものを使う ウェブサイトビルダー プロセスを超シンプルにするために。

関連記事：

  • 2019年の最高のWordPressホスティングサービス
  • 13クライアントへの投球のための素晴らしいツール
  • WordPress Webサイト：14素晴らしい例

操作方法 - 最も人気のある記事

Photoshopでのストーリーボード

操作方法 Sep 14, 2025

（イメージクレジット：マークエヴァンリム） Photoshopでのストーリーボードは、あな�..

KRITAチュートリアル：デジタルアートソフトウェアの基本を学ぶ

操作方法 Sep 14, 2025

ページ1/2： KRITAチュートリアル：周りのあなたの道を見つける KRITAチュートリアル：周りのあなたの..

角度8の内側は何ですか？

操作方法 Sep 14, 2025

（画像クレジット：未来） Angular 8はGoogleのAngularの最新版です - のうちの1つ 最高..

WordPressをビジュアルビルダーに変える方法

操作方法 Sep 14, 2025

（イメージクレジット：エレメンター/ジョセフフォード） ビジュアルビルダーはWordPre..

現実的なCG布の作成方法

操作方法 Sep 14, 2025

3Dで布や布地で作業するときは、良い解像度と素晴らしい外観の両方を達成するのが難しいこと�..

すべての電子メールクライアントで完璧なメッセージを作成する

操作方法 Sep 14, 2025

働く電子メールマーケティングキャンペーンのために、電子メールは受信トレイに到達し、他のすべてのものから目立つ必要があります。し�..

60秒でPhotoshopを使ったシネマグラフを作成する

操作方法 Sep 14, 2025

あなたが新しいスキルを拾うことができると思うかもしれませんが、座って学ぶ時間を見つけることはできませんか？アドビの 今すぐ�..

肖像画や顔を意識した液状化で創造的な液化

操作方法 Sep 14, 2025

私たちは皆、Photoshopの液体化ツールで遊びをしましたが、最新のPhotoshop CCの反復で、 アド..

カテゴリ