コンテンツ
- 01.WordPressの新しいコピーをインストールします
- 02.デフォルトのプラグインを削除します
- 03.カスタム投稿タイプを追加します
- 04.カスタム投稿タイプの追加/編集インターフェース
- 05.カスタム書き換えスラッグを作成する
- 06.カスタムフィールドのサポートを追加する
- 07.カスタムフィールドを追加する
- 08.フィールドを設定します
- 09.WordPressテンプレートファイルを作成します
- 10.全幅の単一投稿レイアウトを作成します
- 11.ループを開始し、コンテンツを作成します
- 12.PHPを使用して動的な値を呼び出す
- 13.ダミーデータを使用してテスト顧客を作成します
- 14.欠落データのエラーを処理します
- 15.インターフェースを整理します
- 16.サイトマップから除外します
電話契約からユーティリティまで、ユーザーがログインしてドキュメントをダウンロードまたは表示できる領域を持つことは、消費者から期待されています。
ただし、デザイナーがクライアントと協力する場合、すべてがすぐに電子メールの混乱、モックアップへのリンク、および添付ファイルに分解される可能性があります。
このWordPressチュートリアルでは、WordPress（他のWebホスティングサービスが利用可能）をドキュメント、ビデオ、および図面を保存できるクライアントポータルに拡張して、クライアントがそれらすべてに1か所でアクセスできるようにする方法を示します。ポータルは、通常のナビゲーションには表示されない、パスワードで保護された一意のリンクを各顧客に提供します。
カスタム投稿タイプとフィールドはデータの保存に使用され、テーマが変更された場合のデータ損失を回避するために、これらはプラグインを介して追加されます。テーマは若干変更されます。
クライアントポータルがあると、クラウドストレージを使用する場合と同じように、必要なときにいつでも同じ場所でファイルにアクセスできるという便利さが得られます。利用可能なアップセルを表示するなど、さまざまなビジネス上の利点があります。また、成果物の概要を視覚的に示すことで、最初から作業プロセスの概要を説明するために使用できます。
ファイルをダウンロードする このチュートリアルでは。
- WordPressをビジュアルビルダーに変える方法
01.WordPressの新しいコピーをインストールします
WordPressの新しいコピーが開発サーバーにインストールされ、「アンダーストラップ」テーマが選択されて、作業を迅速に開始するための定型的な基盤が提供されます。カスタム投稿タイプUIプラグインが使用されるため、カスタム投稿タイプはテーマに依存しません。
02.デフォルトのプラグインを削除します
WordPressのコピーにデフォルトのプラグインが付属している場合は、それらを削除します。このチュートリアルに必要なプラグインは、「高度なカスタムフィールド」と「カスタム投稿タイプUI」です。 「ClassicEditor」もインストールされています。
03.カスタム投稿タイプを追加します
カスタム投稿タイプUIインターフェースを使用して、「customer」と呼ばれる新しい投稿タイプを追加します。 「Posttypeslug」を入力するときは、スペースの代わりにアンダースコアを使用し、単数形で記述してください。これにより、後でテンプレートを簡単に作成できるようになります。競合の可能性を減らすために、プレフィックスtu_が追加されました。
04.カスタム投稿タイプの追加/編集インターフェース
WordPressの管理メニューに表示されるように、「customers」というラベルの付いた複数形と単数形の「customer」を追加します。これらのフィールドでは大文字化が受け入れられ、WordPressメニューがより整理されます。
05.カスタム書き換えスラッグを作成する
投稿タイプのスラッグにプレフィックスを使用すると、ポータルに追加された顧客は「/ tu_customer / example-company」のようなリンクで作成されます。これはきちんと見えません。カスタムの書き換えスラッグを使用してこれを改善します。リライトスラグを「customers」に設定すると、カスタム投稿タイプが/ customers / example-companyとして表示されます。
06.カスタムフィールドのサポートを追加する
カスタム投稿タイプで有効になっている最後のオプションは、ページの下部にある[サポート>カスタムフィールド]です。これにチェックマークを付けてから、ページの下部にある「投稿タイプを追加」します。これにより、変更が送信され、投稿タイプが登録されます。
07.カスタムフィールドを追加する
カスタムフィールドを追加して、作成したばかりの投稿タイプに割り当てる必要があります。 「customerportal」という名前のフィールドグループを追加することが最初のステップであり、次に[フィールドの追加]ボタンを使用してカスタムフィールドを追加します。最初のフィールド「brief」はフィールドタイプ「file」として設定され、管理者はこの場所にファイルをアップロードできます。戻り値を「ファイルURL」に設定します。
08.フィールドを設定します
次に追加するフィールドは「ブランドアンケート」です。これは、顧客が記入する必要のあるGoogleフォームへのリンクで構成されます。これに最も適したフィールドタイプは「URL」です。これと同じ方法を、外部サービスにリンクするすべてのフィールドに使用できます。終了したら、[場所]ボックスまで下にスクロールし、ロジック[投稿タイプの表示] = "顧客"を使用します。次に、フィールドグループを公開します。
09.WordPressテンプレートファイルを作成します
WordPressは、顧客ダッシュボードを表示する方法を知っている必要があります。このために、WordPressテンプレート階層に従って、この特定の投稿タイプのテンプレートファイルを作成します。ルートテーマディレクトリにsingle-tu_customer.phpというファイルを作成します。
10.全幅の単一投稿レイアウトを作成します
single-tu_customer.phpファイルを開き、get_header関数とget_footerWordPress関数を追加します。これらの機能の間に、テーマに合ったコンテンツを保持するための全幅レイアウトを作成します。
？php get_header（）;？> div id = "single-wrapper"> div id = "content" tabindex = "-1"> div> div id = "primary"> main id = "main">-！コンテンツ-> / main> / div> / div>！-。row-> / div>！-＃content-> / div>！-＃single-wrapper->？php get_footer（） ;？>
11.ループを開始し、コンテンツを作成します
main>要素内で、the_postを呼び出し、情報を保持するコンテナ要素を作成します。レイアウトのアイデアを得るためにプレースホルダー情報を使用し、要素のスタイル設定を開始します。カード要素は、ヘッダー、説明、およびリンクを含むブートストラップカードになります。
main id = "main">？php while（have_posts（））：the_post（）; ？> var13-> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>？php endwhile; //ループの終わり。 ？> var13-> / main>！-＃main->
12.PHPを使用して動的な値を呼び出す
高度なカスタムフィールドプラグインに付属する関数「the_field」を使用して、カスタムフィールドの動的コンテンツを顧客テンプレートに入力します。 「field_name」は、手順3で入力した値です。
div> div> h5> Brief / h5> p>これは元の簡単なドキュメントです/ p> a href = "？php the_field（ 'brief'）;？> var13->" target = "none"> Open / a > / div> / div>
13.ダミーデータを使用してテスト顧客を作成します
WordPressダッシュボードにアクセスすると、左側のバーから新しい顧客を追加できます。顧客>新しい顧客を追加します。投稿ビューはおなじみですが、下にスクロールすると、すべての新しいカスタムフィールドが表示されます。テストデータを入力して、すべてが正しく機能していることを確認します。
14.欠落データのエラーを処理します
ドキュメントを忘れた場合、またはそのドキュメントを利用するにはプロセスが早すぎる場合、ボタンが機能しないと顧客が混乱する可能性があります。値を表示する前に値が存在することのチェックを追加すると、カードの「欠落フィールド」のバリエーションを表示する機会が与えられます。値が欠落しているときにカードに「無効」クラスを追加すると、使用できないカードのスタイルを設定できます。
？php if（get_field（ 'field_name'））：？> var13-> field_nameに値がある場合に表示されますか？php else：// field_nameがfalseを返しましたか？> var13->フィールドが存在しない場合に表示されますか？php endif ; // if field_nameロジックの終わり？> var13->
15.インターフェースを整理します
インターフェイスの構造が完成したので、適切なスタイルを設定できます。 CSSを使用すると、ページ上のカードと色の外観を改善できます。ナビゲーションの色が明るい青に変更され、紹介テキストが追加されてユーザーの方向性が改善されました。
16.サイトマップから除外します
カスタム投稿タイプは検索エンジンの結果に表示されるべきではありません。投稿タイプは、SEOプラグインを介して、またはメタタグとrobots.txtを使用して手動で、ウェブサイトのサイトマップから除外する必要があります。
meta name = "robots" content = "noindex、nofollow" />ユーザーエージェント： *禁止：/ customers /
新しいウェブサイトをデザインしてみませんか？素晴らしいウェブサイトビルダーを使用して、プロセスを非常に簡単にします。
