DiviのテーマビルダーとACFを使用して動的な求人投稿テンプレートを作成する方法
公開: 2019-12-26Divi Theme Builderを動的コンテンツと組み合わせて使用すると、プラグインを自作のテンプレートに置き換えることにすぐに気付くでしょう。 今日のチュートリアルでは、DiviテーマビルダーとACFフィールドグループを使用して、完全に動的な求人投稿テンプレートを作成する方法を示します。 この動的な求人投稿テンプレートは完全にカスタマイズ可能であり、JSONファイルも無料でダウンロードできます。
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
求人投稿テンプレートを無料でダウンロード
無料の求人投稿テンプレートを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.投稿カテゴリを追加する
投稿カテゴリに移動
オープンジョブポジションテンプレートを作成する最初の部分は、追加するオープンジョブポジションに使用する新しい投稿カテゴリを追加することです。 WordPressダッシュボード内の投稿カテゴリに移動します。
オープンジョブポジションカテゴリを追加する
部門ごとに親カテゴリと個別のカテゴリを追加します。
- 就職口
- コミュニケーション
- 設計
- 発達
- マーケティング
- …
2.ACFのインストールとプロジェクトフィールドの設定
ACFのインストールとアクティブ化
無料のAdvancedCustom Fieldsプラグインをインストールして有効にし、続行します。
フィールドグループを設定する
WordPressダッシュボード>カスタムフィールド>新規追加に移動して、新しいフィールドグループを設定します。
フィールドグループは、このチュートリアルの前の部分で追加した親カテゴリの一部である投稿にのみ表示されるようにします。 これを行うには、次のルールがフィールドグループに適用されることを確認してください。
- 投稿タイプは投稿と同じで、
- 投稿カテゴリは求人と同じです
フィールドを追加
フィールドグループが作成されたら、さまざまなフィールドを追加します。 このチュートリアルのプレビューとまったく同じテンプレートを再作成するには、次のカスタムフィールドが必要です。
- 責任
- フィールドラベル：責任
- フィールドタイプ：テキストエリア
- 必要な経験
- フィールドラベル：必要な経験
- フィールドタイプ：Wysiwygエディター
- 必要なスキル
- フィールドラベル：必要なスキル
- フィールドタイプ：Wysiwygエディター
- ボーナス資格
- フィールドラベル：ボーナス資格
- フィールドタイプ：Wysiwygエディター
- 位置
- フィールドラベル：場所
- フィールドタイプ：テキスト
- 職種
- フィールドラベル：ジョブタイプ
- フィールドタイプ：チェックボックス
- 選択肢：フルタイム+パートタイム+フリーランス（選択肢ごとに改行）
- リダイレクトを適用する
- フィールドラベル：リダイレクトを適用
- フィールドタイプ：URL
3.新しいブログ投稿を追加します
募集中の役職のタイトル、簡単な説明とカテゴリを追加する
カスタムフィールドグループとそのすべてのフィールドを完了したら、サンプルの募集職種の投稿を作成します。 タイトル、職務内容を入力し、カテゴリを選択します。
すべてのカスタムフィールドに入力します
すべてのカスタムフィールドに入力して続行します。
4.新しいテンプレートを作成します
Diviテーマビルダーに移動し、新しいテンプレートを追加します
サンプルのブログ投稿が配置されたら、オープンジョブポジションテンプレートを作成します。 これを行うには、Diviテーマビルダーに移動し、[新しいテンプレートの追加]をクリックします。
オンを使用
求人カテゴリの投稿にテンプレートを使用します。
5.テンプレート本体の作成を開始します
次に、[カスタムボディの追加]をクリックし、[カスタムボディの作成]を選択して、デザインの作成を開始します。 これにより、テンプレートエディタにリダイレクトされます。
セクション＃1
グラデーションの背景
Diviテンプレートエディタ内に、セクションがあります。 そのセクションを開き、グラデーションの背景を追加します。
- 色1：＃ff6600
- 色2：＃fbff30
- グラデーション方向：126度
ボトムディバイダー
次のセクションに下部仕切りを追加します。
- 仕切りスタイル：リストで検索
- 仕切りの高さ：8vw
- 仕切りの配置：セクションコンテンツの下
間隔
また、下部のパディングもいくつか含めます。
- ボトムパディング：400px
行＃1を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
列1に宣伝文モジュールを追加する
動的コンテンツ
モジュールの追加を開始する時が来ました！ 列1に必要な最初のモジュールは、宣伝文句モジュールです。 タイトルボックスの場所の動的コンテンツを選択し、コンテンツボックスを空のままにします。
- タイトル：場所
アイコンを選択
アイコンを選択して続行します。
アイコン設定
[デザイン]タブに移動し、アイコンの設定を次のように変更します。
- アイコンの色：#ffffff
- 画像/アイコンの配置：左
- アイコンのフォントサイズを使用：はい
- アイコンフォントサイズ：25px
タイトルテキスト設定
H3テキスト設定も変更します。
- タイトル見出しレベル：H3
- タイトルフォント：ラト
- タイトルテキストの色：#ffffff
- タイトルテキストサイズ：1.4rem
アニメーション
最後に、アニメーション設定でアイコンアニメーションを削除します。
- 画像/アイコンアニメーション：アニメーションなし
宣伝文句モジュールのクローンを作成し、列2に複製を配置します
列1の宣伝文句モジュールを完了したら、それを1回複製して、複製を2番目の列に配置できます。
動的コンテンツとアイコンの変更
アイコンと一緒にタイトルの動的コンテンツを変更してください。
- タイトル：職種
ボタンモジュールを列3に追加
コピーを追加
最後の列に、ボタンモジュールを追加します。 選択したコピーをいくつか追加します。
ダイナミックリンク
次に、動的適用リダイレクトリンクを選択します。
- ボタンリンクURL：リダイレクトを適用する
- ボタンリンクターゲット：[新しい]タブ
配置
モジュールの[デザイン]タブに移動し、さまざまな画面サイズで配置を変更します。
- ボタンの配置：右（デスクトップ）、左（タブレットと電話）
ボタンの設定
ボタンのスタイルも設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：1rem
- ボタンのテキストの色：＃ff6600
- ボタンの背景色：#ffffff
- ボタンの境界線の幅：0px
- ボタンの境界線半径：100px
- ボタンフォント：Montserrat
- ボタンのフォントスタイル：大文字
間隔
そして、間隔設定にいくつかのカスタムパディング値を追加して、モジュールの設定を完了します。
- トップパディング：15px
- ボトムパディング：15px
- 左パディング：50px
- 右パディング：50px
行＃2を追加
カラム構造
次の行へ！ 次の列構造を選択します。
列にテキストモジュールを追加
動的コンテンツ
列に新しいテキストモジュールを追加し、投稿タイトルの動的コンテンツを選択します。
- 動的コンテンツ：投稿/アーカイブタイトル
- 前：<H1>
- 後：</ H1>
H1テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてH1テキスト設定を変更します。
- 見出しフォント：Montserrat
- 見出しフォントの太さ：重い
- 見出しのテキストの色：#ffffff
- 見出しのテキストサイズ：8rem（デスクトップ）、4rem（タブレット）、2.5rem（電話）
Dividerモジュールを列に追加
可視性
次に必要なモジュールはディバイダーモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
次に、モジュールの線の色を変更します。
- 線の色：#ffffff
サイジング
サイズ設定も変更します。
- 仕切りの重量：8px
- 幅：30％
- モジュールの配置：左
セクション＃2を追加
間隔
次のセクションに進みましょう！ デフォルトの上部パディングをすべて削除します。
- トップパディング：0px
行＃1を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加します。
間隔
行設定を開き、デフォルトの上部パディングを削除します。
- トップパディング：0px
投稿コンテンツモジュールを列に追加
背景色
投稿コンテンツモジュールを行に追加し、背景色を白に変更します。
- 背景色：#ffffff
テキスト設定
モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：Raleway
- テキストサイズ：1.1rem
- テキスト行の高さ：2.1em
間隔
次に、さまざまな画面サイズの間隔の値を試してみてください。
- 上マージン：-300px
- トップパディング：100px（デスクトップ）、50px（タブレットと電話）
- 下部のパディング：100px（デスクトップ）、50px（タブレットと電話）
- 左パディング：100px（デスクトップ）、50px（タブレットと電話）
- 右パディング：100px（デスクトップ）、50px（タブレットと電話）
国境
境界線の半径も追加します。
- すべてのコーナー：20px
ボックスシャドウ
そして、微妙なボックスシャドウを追加して、モジュールの設定を完了します。
- ボックスシャドウブラー強度：50px
- 影の色：rgba（0,0,0,0.09）
行＃2を追加
カラム構造
次の列構造を使用して別の行を追加します。
テキストモジュール＃1を列に追加
H2コンテンツを追加する
H2コンテンツを含むテキストモジュールを行の列に追加します。
H2テキスト設定
モジュールのH2テキスト設定を次のように変更します。
- 見出し2フォント：Montserrat
- 見出し2フォントの太さ：重い
- 見出し2のテキストの色：＃ffa500
- 見出し2テキストサイズ：1.5rem
Dividerモジュールを列に追加
可視性
次に必要なモジュールはディバイダーモジュールです。 'ShowDivider'モジュールが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
次に、モジュールの線の色を変更します。
- 線の色：＃ffa500
サイジング
そして、サイズ設定をいじってモジュールの設定を完了します。
- 仕切りの重量：6px
- 最大幅：80px
テキストモジュール＃2を列に追加
動的コンテンツ
この列で必要な次の最後のモジュールは、別のテキストモジュールです。 関連する動的コンテンツを選択します。
- 動的コンテンツ：必要な経験
生のHTMLを有効にしてください。
- 生のHTMLを有効にする：はい
テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Raleway
- テキストサイズ：1.1rem
順序付けられていないリストテキスト設定
順序付けされていないリストの行の高さも変更します。
- 順序付けられていないリスト行の高さ：2.3em
間隔
次に、間隔設定に移動し、いくつかのカスタムパディング値を追加します。
- トップパディング：50px
- ボトムパディング：50px
- 左パディング：50px
- 右パディング：50px
国境
境界線の半径も追加します。
- すべてのコーナー：20px
ボックスシャドウ
そして、微妙なボックスシャドウを追加して、モジュールの設定を完了します。
- ボックスシャドウブラー強度：50px
- 影の色：rgba（0,0,0,0.09）
行＃3を追加
カラム構造
最後の列へ！ 次の列構造を使用します。
列2のモジュールのクローンを作成し、新しい行の列1と2に複製を配置します
前の行に追加したモジュールのクローンを2回作成し、複製を新しい行に配置します。
テキストモジュール＃1のコピーを変更する
重複する各テキストモジュールのH2コピーを必ず変更してください。
テキストモジュール＃2の動的コンテンツを変更する
動的コンテンツとともに。
- 動的コンテンツ：必要なスキル
- 動的コンテンツ：ボーナス資格
繰り返しになりますが、動的コンテンツを含む両方のテキストモジュールで生のHTMLが有効になっていることを確認してください。
- 生のHTMLを有効にする：はい
6.テーマビルダーの変更を保存して結果を表示する
テンプレート本体が完成したら、テーマビルダーの変更をすべて保存して、サンプルのオープンジョブポジションの投稿で結果を表示できます。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Divi Theme BuilderとACFプラグインを使用して、動的で完全にカスタマイズ可能なオープンジョブポジションテンプレートを作成する方法を紹介しました。 投稿テンプレートでは動的コンテンツのみを使用しているため、将来の募集職種をWebサイトに簡単に追加できます。 JSONファイルも無料でダウンロードできました！ ご不明な点がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。