マッチングサイトのトップページ構造


今回はマッチングサイトのトップページがどのような構造になっているかをお話しします。
 

1. 構造

(1) このサイトのトップページは①中心部分、②上のヘッダー(上の画像が横に動くスライダー)部分、③右のウィジェット部分、④下のウィジェット部分で構成されています。

(2) WordPressは大抵①~④の寄せ集めによって1つのページができあがります(③を省略する場合もあります)。
 

2. ヘッダー

上のヘッダー(上の画像が横に動くスライダー)部分は、テーマのカスタマイズによって簡単に設定できます。


 

3. 右と下のウィジェット

(1) 右のウィジェット部分と下のウィジェット部分も、表示したいものをマウスで動かして置くだけで簡単に設定できます。

(2) そして②上のヘッダー(上の画像が横に動くスライダー)部分、③右のウィジェット部分、④下のウィジェット部分は一度設定しておくと他の(または全ての)ページや投稿記事に使うことができます。

(3) したがって毎回書き換えるのは①中心部分だけです。
 

4. 中心部分

(1) では中心部分を書くのは大変でしょうか。いいえ。驚くほど簡単です。このサイトのトップページの中心部分は以下だけです。

(2) [tx_calltoac・~]、[tx_prodscrol・ type=”recent_products”~]、[tx_divide・~]って何だか分かりますか。これはショートコードというものです。あるプラグインをインストールするとショートコードを貼り付けるだけで勝手に表示されます。

(3) [tx_prodscrol・ type=”recent_products”~]の”recent_products”は、WooCommerceプラグインの登録商品の中の「最近の商品」に属する商品を表示するという意味です。

(4) ゼロからプログラミングするよりはるかに安全で信頼できて、かつ簡単です。これが出来るのは100万人以上の有効化済みインストールのWooCommerceプラグインをベースとしているからです。つまり、これに合うプラグインとテーマも数百以上あり、何でも出来るのです。
 
本記事はここまでです。ありがとうございました。