メタボックスとWPグリッドビルダーを使用して簡単なリストを作成する方法
12002 ワード
あなたのポストまたは製品をページに載せることは、ウェブサイトを構築するとき、一般的な仕事です.それを行うには非常に多くの方法がありますが、ポストについてのデフォルト情報だけでなく、カスタムフィールドからさらにいくつかのことを表示する場合は、このチュートリアルを掘りましょう.私はWP Grid Builderを使用してレストランのアーカイブページを作成し、また、メタボックスによって作成されたカスタムフィールドから情報を取得するつもりです.あなたが下の写真で見ることができるように、フィルタも利用できます.
この練習を始める前に、いくつかの用語を明確にしたい.
我々はレストランのカスタムポストタイプを必要とし、各レストランについての情報は、ポストに保存されます.レストランの名前とイメージは、デフォルトのタイトルとポストの特徴画像です.ステータス、アドレス、バウチャー、およびロゴなどの他の情報は、別のカスタムフィールドに保存されます.
ページでは、カード、グリッド、ファセットを次のようにします.
カード:それはレストランの情報を表示するボックスです.
グリッド:すべてのレストランを一覧表示する領域です.
ファセット:フィルタとソートです.
それを行うには、入力されたレストラン情報にカスタムフィールドを作成することができますフレームワークを持っているMeta Box core pluginが必要です.それは無料で利用可能wordpress.orgので、直接ダウンロードすることができます.次の1つはメタボックスAIOです.そして、それは高度な特徴のためにすべてのメタ・ボックス拡張子を含みます.または、代わりに個別に2つの次の拡張モジュールをインストールできます.
MB Custom Post Type :レストランのカスタムポストタイプを作成します.
Meta Box Builder :簡単にカスタムフィールドを作成するには、バックエンドでUIを持っている.
さらに、WP Grid Builderのアドオンセクションでインストールして、それを活性化することによって、WP Grid BuilderとMeta Boxの間に統合をインストールしたことを確認してください.これは、メタボックスによって作成されたすべてのフィールドをサポートし、カスタムフィールドから簡単にコンテンツをフィルタリングすることを目指しています.
あなたのレストランの新しいポストタイプを作成するには、ポストタイプにメタボックスに移動します.
カスタムフィールドを作成するには、メタボックスのカスタムフィールドに移動し、必要に応じて作成します.
あなたはそれらを作成する方法、または詳細については“Display the latest products”シリーズをフォローアップを知るために参照することができます.
GridBuilderに移動します.
名前をカードをして下に設定を表示するスクロールします.私はデフォルトでカードのレイアウトとカードのサイズ設定を維持します.必要に応じてすべてのこれらの設定をカスタマイズできます.
カードタイプオプションに注意してください.オプションを選択すると、グリッドのレイアウトに任命された.
カード層のセクションでは、メディアオーバーレイとカードフッタをオフにしました.私は、それからイメージを表示するためにカード・メディアを保ちます.
カードにコンテンツを追加するには、ブロックタブに移動し、ブロックを検索します.タイトルのブロックを選択して、レストランの名前を取得し、名前を表示する任意の場所にドラッグします.
アドレスはメタボックスで作成されたカスタムフィールドにあり、カスタムフィールドブロックを選択します.編集ブロックポップアップでは、クラス名(次のステップでスタイリング用に使用します)と、対応するカスタムフィールドのラベルまたはIDを検索します.フィールドを選択し、場所で情報を取得します.
バウチャーとステータス情報を同様に行います.
レストランのロゴは特別なものです.カスタムフィールドからイメージを呼び出すのをサポートするプリビルドされたブロックがないので、新しいカスタムブロックを作成します.
外観メニューのテーマファイルエディタに移動し、次のコードを関数に追加します.PHPファイル.
戻ってカードを編集するには、新しいブロックをカスタムイメージブロックとして表示され、その後、カードに追加されます.
我々は、カードのすべての設定を行った.
オープンGridBuilder“すべてのグリッド”グリッドを作成します.
グリッドで表示するポスト型からコンテンツを取得するには、コンテンツクエリーセクションに移動し、作成した投稿型を選択します.
グリッドのレイアウトについては、それは自動的に選択したカードのカードタイプと同じオプションとして選択されます.別のオプションを選択することはできません.例えば、カードタイプを石積みとして設定しているので、ここでは石積みです.
次に、グリッドの応答性のセクションに移動し、列の数を調整し、別のデバイスの画面上のディスプレイの間隔.
次に、カードスタイルのセクションでは、我々が作成したレストランカードとして、デフォルトのカードとポストタイプのカードの両方を設定します.
次のステップに移りましょう!
ファセットを作成するには、GridBuilderにすべてのファセットに移動します.
あなたが即座に使用できる事前に作られたファセットがたくさんあります.私の場合、私のフィルターとソートファセットの選択ファセットを選択してコンテンツを整理します.次に、新しいファセットを作成する代わりに、これらのものにデータをインポートします.
まず、選択の設定を変更しましょう.動作セクションでは、このファセットがフィルタとして設定されていることがわかります.
フィルタの種類については、ドロップダウンとして設定します.したがって、このオプションは以下のようなドロップダウンリストになります.
次に、スクロールダウンしてフィルタを参照してください.これは、ファセットの最も重要な設定です.あなたが選ぶことができるデータソースの3つのオプションがあります.
この練習では、ユーザーが30 %または50 %の割引をどのように見ることができるように、私はバウチャーでレストランをフィルタリングしたい.この種の情報は、メタボックスで作成したカスタムフィールドに保存されます.だから、カスタムフィールドを選択し、フィールドを選択します.
他の設定では、デフォルトとして保管します.
ソートファセットで、私はまた、デフォルトの設定として保管してください.このセクションでソートするためのオプションを削除または追加できます.
ページへ移動します.
ご存知のように、最初に見せたページは2部に分かれています.つの列のファセット、およびレストランの情報の1つ.
最初のセクションでは、列を追加し、50/50を選択します.各列で、ファセットブロックを追加し、対応する1つを選択します.たとえば、フィルタの名前の選択を追加し、グリッドグリッドという名前のグリッドを選択します.それはあなたがそのグリッドからコンテンツをフィルタリングすることができます.次に、2番目の列がソートとして設定されます.また、並べ替えのレストラングリッドの名前をグリッドを選択します.
第2のセクションのために、それはレストランについての内容です.私はすでにそれのためのグリッドを作成しました.グリッドブロックを追加し、作成したものを選択します.
今、すべてのレストランの情報が表示されます.そして、フィルタとソートがうまく機能することがわかります.
しかし、ロゴやステータスのようにいくつかの良いことがないので、我々は少しスタイルをする必要があります.
ページテンプレートとファセットセクションが十分に良いので、グリッド内のコンテンツをスタイルにしたいだけです.テーマファイルにコードを追加する代わりに、グリッド設定でカスタマイズを行います.
グリッドに移動し、それを編集し、カスタマイズセクションに移動します.次に、CSSとJSコードを対応するボックスに追加します.
私はGithubにすべてのコードを置くので、詳細を参照することができます.
JSコードを少し明確にしたいです.
ページに戻ると、すべての情報がより美しく、特にレストランのステータスとロゴが表示されます.
それで、我々は単純なリスティングページ(アーカイブページ)を作りました.
ご覧のように、WP Grid Builderを使用してドラッグアンドドロップするだけで簡単に簡単なリスティングページを作成できます.この練習があなたのすべてに意味をなすことを望んでください.他の方法については、我々はいくつかの今後のチュートリアル、ちょうど私たちのブログを追跡することがあります.
あなたが他のトピックの詳細チュートリアルを見たい場合は、コメントを残して躊躇しないでください.
ビデオバージョン
始める前に
この練習を始める前に、いくつかの用語を明確にしたい.
我々はレストランのカスタムポストタイプを必要とし、各レストランについての情報は、ポストに保存されます.レストランの名前とイメージは、デフォルトのタイトルとポストの特徴画像です.ステータス、アドレス、バウチャー、およびロゴなどの他の情報は、別のカスタムフィールドに保存されます.
ページでは、カード、グリッド、ファセットを次のようにします.
カード:それはレストランの情報を表示するボックスです.
グリッド:すべてのレストランを一覧表示する領域です.
ファセット:フィルタとソートです.
それを行うには、入力されたレストラン情報にカスタムフィールドを作成することができますフレームワークを持っているMeta Box core pluginが必要です.それは無料で利用可能wordpress.orgので、直接ダウンロードすることができます.次の1つはメタボックスAIOです.そして、それは高度な特徴のためにすべてのメタ・ボックス拡張子を含みます.または、代わりに個別に2つの次の拡張モジュールをインストールできます.
MB Custom Post Type :レストランのカスタムポストタイプを作成します.
Meta Box Builder :簡単にカスタムフィールドを作成するには、バックエンドでUIを持っている.
さらに、WP Grid Builderのアドオンセクションでインストールして、それを活性化することによって、WP Grid BuilderとMeta Boxの間に統合をインストールしたことを確認してください.これは、メタボックスによって作成されたすべてのフィールドをサポートし、カスタムフィールドから簡単にコンテンツをフィルタリングすることを目指しています.
ステップ1：新しいカスタム投稿タイプとカスタムフィールドを作成する
あなたのレストランの新しいポストタイプを作成するには、ポストタイプにメタボックスに移動します.
カスタムフィールドを作成するには、メタボックスのカスタムフィールドに移動し、必要に応じて作成します.
あなたはそれらを作成する方法、または詳細については“Display the latest products”シリーズをフォローアップを知るために参照することができます.
ステップ2：カードを作成する
GridBuilderに移動します.
名前をカードをして下に設定を表示するスクロールします.私はデフォルトでカードのレイアウトとカードのサイズ設定を維持します.必要に応じてすべてのこれらの設定をカスタマイズできます.
カードタイプオプションに注意してください.オプションを選択すると、グリッドのレイアウトに任命された.
カード層のセクションでは、メディアオーバーレイとカードフッタをオフにしました.私は、それからイメージを表示するためにカード・メディアを保ちます.
カードにコンテンツを追加するには、ブロックタブに移動し、ブロックを検索します.タイトルのブロックを選択して、レストランの名前を取得し、名前を表示する任意の場所にドラッグします.
アドレスはメタボックスで作成されたカスタムフィールドにあり、カスタムフィールドブロックを選択します.編集ブロックポップアップでは、クラス名(次のステップでスタイリング用に使用します)と、対応するカスタムフィールドのラベルまたはIDを検索します.フィールドを選択し、場所で情報を取得します.
バウチャーとステータス情報を同様に行います.
レストランのロゴは特別なものです.カスタムフィールドからイメージを呼び出すのをサポートするプリビルドされたブロックがないので、新しいカスタムブロックを作成します.
外観メニューのテーマファイルエディタに移動し、次のコードを関数に追加します.PHPファイル.
add_filter(
'wp_grid_builder/blocks', function( $blocks ) {
// 'custom_image_block' corresponds to the block slug.
$blocks['custom_image_block'] = [
'name' => __( 'Custom image block', 'text-domain' ),
'render_callback' => function() {
// Get current post, term, or user object.
$post = wpgb_get_post();
$image = get_post_meta( $post->ID, 'custom_field_name', true );
if ( empty( $image ) ) {
return;
}
$source = wp_get_attachment_image_src( $image );
if ( empty( $source ) ) {
return;
}
printf(
'<img src="%s" width="%s" height="%s">',
esc_url( $source[0] ),
esc_attr( $source[1] ),
esc_attr( $source[2] )
);
},
];
return $blocks;
}
);
戻ってカードを編集するには、新しいブロックをカスタムイメージブロックとして表示され、その後、カードに追加されます.
我々は、カードのすべての設定を行った.
ステップ3：グリッドを作成する
オープンGridBuilder“すべてのグリッド”グリッドを作成します.
グリッドで表示するポスト型からコンテンツを取得するには、コンテンツクエリーセクションに移動し、作成した投稿型を選択します.
グリッドのレイアウトについては、それは自動的に選択したカードのカードタイプと同じオプションとして選択されます.別のオプションを選択することはできません.例えば、カードタイプを石積みとして設定しているので、ここでは石積みです.
次に、グリッドの応答性のセクションに移動し、列の数を調整し、別のデバイスの画面上のディスプレイの間隔.
次に、カードスタイルのセクションでは、我々が作成したレストランカードとして、デフォルトのカードとポストタイプのカードの両方を設定します.
次のステップに移りましょう!
ステップ4：ファセットを作成する
ファセットを作成するには、GridBuilderにすべてのファセットに移動します.
あなたが即座に使用できる事前に作られたファセットがたくさんあります.私の場合、私のフィルターとソートファセットの選択ファセットを選択してコンテンツを整理します.次に、新しいファセットを作成する代わりに、これらのものにデータをインポートします.
まず、選択の設定を変更しましょう.動作セクションでは、このファセットがフィルタとして設定されていることがわかります.
フィルタの種類については、ドロップダウンとして設定します.したがって、このオプションは以下のようなドロップダウンリストになります.
次に、スクロールダウンしてフィルタを参照してください.これは、ファセットの最も重要な設定です.あなたが選ぶことができるデータソースの3つのオプションがあります.
この練習では、ユーザーが30 %または50 %の割引をどのように見ることができるように、私はバウチャーでレストランをフィルタリングしたい.この種の情報は、メタボックスで作成したカスタムフィールドに保存されます.だから、カスタムフィールドを選択し、フィールドを選択します.
他の設定では、デフォルトとして保管します.
ソートファセットで、私はまた、デフォルトの設定として保管してください.このセクションでソートするためのオプションを削除または追加できます.
ステップ5 :新しいページを作成する
ページへ移動します.
ご存知のように、最初に見せたページは2部に分かれています.つの列のファセット、およびレストランの情報の1つ.
最初のセクションでは、列を追加し、50/50を選択します.各列で、ファセットブロックを追加し、対応する1つを選択します.たとえば、フィルタの名前の選択を追加し、グリッドグリッドという名前のグリッドを選択します.それはあなたがそのグリッドからコンテンツをフィルタリングすることができます.次に、2番目の列がソートとして設定されます.また、並べ替えのレストラングリッドの名前をグリッドを選択します.
第2のセクションのために、それはレストランについての内容です.私はすでにそれのためのグリッドを作成しました.グリッドブロックを追加し、作成したものを選択します.
今、すべてのレストランの情報が表示されます.そして、フィルタとソートがうまく機能することがわかります.
しかし、ロゴやステータスのようにいくつかの良いことがないので、我々は少しスタイルをする必要があります.
ステップ6 :スタイルのページ
ページテンプレートとファセットセクションが十分に良いので、グリッド内のコンテンツをスタイルにしたいだけです.テーマファイルにコードを追加する代わりに、グリッド設定でカスタマイズを行います.
グリッドに移動し、それを編集し、カスタマイズセクションに移動します.次に、CSSとJSコードを対応するボックスに追加します.
私はGithubにすべてのコードを置くので、詳細を参照することができます.
JSコードを少し明確にしたいです.
jQuery('.status').each(function () {
if (jQuery(this).html() == 'Open') {
jQuery(this).addClass('open');
} else {
jQuery(this).addClass('close');
}
});
jQuery('.status').each(function () {})は、レストランの状態のためのダイナミックなクラスを作成することです.クラスは、カードに戻るステータスフィールドの値に基づいて自動生成されます.それが開いているなら、クラスはopenとして生成されます.そうでなければ、クラスはcloseです.生成されたクラスの名前に応じて、私はレストランの2つのステータスの2つの異なるスタイルがあります.ページに戻ると、すべての情報がより美しく、特にレストランのステータスとロゴが表示されます.
それで、我々は単純なリスティングページ(アーカイブページ)を作りました.
最後の言葉
ご覧のように、WP Grid Builderを使用してドラッグアンドドロップするだけで簡単に簡単なリスティングページを作成できます.この練習があなたのすべてに意味をなすことを望んでください.他の方法については、我々はいくつかの今後のチュートリアル、ちょうど私たちのブログを追跡することがあります.
あなたが他のトピックの詳細チュートリアルを見たい場合は、コメントを残して躊躇しないでください.
Reference
この問題について(メタボックスとWPグリッドビルダーを使用して簡単なリストを作成する方法), 我々は、より多くの情報をここで見つけました https://dev.to/wpmetabox/how-to-create-a-simple-listing-using-meta-box-and-wp-grid-builder-57o4テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol