商品の詳細を通常の記事詳細ページと区別するために、シンプルな商品詳細ページのテンプレートを作成する必要があることがあります。この記事では、商品詳細ページのテンプレートであるElementorとGutenbergエディタこのような商品詳細ページのテンプレート作成を実現し、関連する実装アイデアと具体的な手順を共有する。

ページの分割とレイアウト

その前に、ページを作る必要がある。バラバラになったアイテム..標準的な商品詳細ページは次のように分けられます。上部と下部上部は左右に分割でき、下部も左右に分割できる。このようにページを分割することで、デザインとレイアウトをよりモジュール化することができる。

Elementorで商品詳細ページのテンプレートを作成する

1.シングル投稿テンプレートの作成

1. 新しいテンプレートElementorのテーマビルダー関数を使って、新しいSingle Postテンプレートを作成します。
2. 前半を作る::
   • 追加コンテナそして、左右の列が等しい2列構造として設定されている。
   • コンテナの背景画像を設定するには、ダイナミックラベル機能を使用して、背景画像として注目画像を選択し、スタイル設定で上書きします。
   • 左カラム：投稿タイトルモジュール、パンくずナビゲーションを追加（使用可能）ランク数学SEOもしかしたらスリムSEOプラグインで提供されるものなど）と、2つのボタンモジュールです。WeChatボタンは、QRコードをクリックするためのPopupポップアップとして設定することができます。
   • 右サイドバー：注目画像モジュールを追加する。
3. 後半を作る::
   • コンテナを追加し、再び2列に分け、左の列の幅を約75%に設定する。
   • 左カラム：記事の内容を呼び出すPost Contentモジュールをドラッグし、ページめくりや共有などのモジュールを追加することもできます。
   • 右カラム：検索モジュール、タイトルモジュール、最近の記事または製品の呼び出しを挿入します。

制作後、テンプレートを公開し、全記事または指定したカテゴリに適用する。こうすることで、異なる商品（記事）タイトル、特集画像、詳細説明を設定しても、自動的に商品の内容が変わり、フォーマットも固定で統一され、使いやすくなります。

2.記事コンテンツの挿入

Elementorで直接投稿を書く代わりに、Post Contentモジュールを挿入して通常の投稿コンテンツを呼び出すことをお勧めする。こうすれば、WordPressバックエンドのGutenbergエディタを使ってコンテンツを書き続けることができ、より便利で効率的だ。

Gutenbergエディターで商品詳細ページのテンプレートを作成する

グーテンベルグ・エディターの機能は、以下の機能拡張によってさらに向上している。プラグイン強力なページ構築機能を実現できる。次の2つの実装アイデアを共有する。

アイデア1：シンプルなアプローチ

この方法は、固定テンプレートを作成したり、プラグインのテンプレートカスタマイズ機能を使ったりする必要がなく、定期的に記事を書くのと似ている。

1. Gutenberg拡張プラグインのインストールとしてケイデンス・ブロックもしかしたらグリーンシフトその他

2. 前半を作る::
   • 新しい記事を作成し、Gutenbergエディタを使ってROWモジュールを追加します。
   • 左カラム：タイトルモジュール、パンくずナビゲーションモジュール、ボタンモジュールをそれぞれ追加します。ポップアップボタンはGreenshiftのPopupモジュールで作成できます。
   • 右サイドバー：WordPress付属のカバーモジュールを挿入し、フィーチャー画像を設定します。
3. 後半を作る::
   • ROWモジュールを追加する。テーマがすでにサイドバー機能を持っている場合は、商品コンテンツを直接構成します。そうでない場合は、手動でサイドバーを設定します。
4. クイックコピー機能::
   • Yoast Postなどのレプリケーションプラグインをインストールする。
   • 新しい商品を追加する場合、記事リストの[商品テンプレート]の横にある[クローン]または[クイックドラフト]をクリックし、テキストと画像を変更するだけです。

この方法は、一見面倒に見えるが、以下の方法と連動している。コピープラグイン非常に便利で、定期的に使用することで効率が大幅に向上する。

アイデア2：高度なメソッド

この方法では、テーマのフック機能現在アストラ・プロそしてケイデンス・プロそしてブロックジー・プロなどがこの機能をサポートしている。

1. 新しいフックテンプレート: 希望する記事のカテゴリーに適用することを指定する。
2. 前半を作る::
   • 2列に分かれた新しいROWモジュールを作成し、左側にタイトル、パンくずナビゲーション、ボタンモジュールを追加し、右側にカバーモジュールを追加し、それをフィーチャー画像に設定する。
3. 後半を作る::
   • WordPressに付属しているPost Contentモジュールを挿入する。
   • 実際の状況にもよるが、テーマがすでにサイドバー機能を備えている場合は、追加で作成する必要はない。そうでない場合は、手動で2列に分割し、右側をサイドバーとする。

このアプローチは、より高度で柔軟性があり、より詳細なカスタマイズが必要なプロジェクトに適しています。

概要

上記は、ElementorとGutenbergエディタを使って簡単に商品詳細ページのテンプレートを作成するための詳細ガイドです。ページ構造を合理的に分割し、ElementorとGutenbergエディタの強力な機能を使用することで、商品詳細ページのモジュール化されたテンプレート化されたデザインを簡単に実現することができます。