自作テーマにWooCommreceを対応させる方法

WooCommreceを導入したいけど、自作テーマではどうもうまくいかない。

  • 商品一覧ページのレイアウトが崩れる
  • 商品詳細ページのタブ切り替えが動かない
  • レビューじゃなくコメントになる

どうやら、対応したテーマでなければ、うまく表示されないようなのです。

WooCommreceサポートの宣言をする

このテーマはWooCommreceサポートしてますよ。と宣言しないといけません。
宣言するには、functions.phpに下記を追記します。

/***************************************************
// WooCommerce support の宣言
***************************************************/
function woocommerce_support(){
 add_theme_support('woocommerce');
}
add_action('after_setup_theme', 'woocommerce_support');

これで、WooCommrece対応のテーマになりました。

WooCommrece用のテンプレートを用意する

中には、宣言するだけで大丈夫な時もあるのですが、ボクの自作テーマではダメでした。

そこで、WooCommrece用のテンプレート「woocommerce.php」を用意します。

■woocommerce.php
<?php get_header();
woocommerce_content();
get_footer();?>

上記のようにヘッダーとフッターを読み込んで、WooCommreceの内容を表示する関数「woocommece_content()」を使います。
これでボクのテーマでは、無事、WooCommreceの内容が表示されました。

商品画像用のjsを読み込む

これで大丈夫と思っていたら、詳細ページの商品画像のjsがうまく動きません。
本来なら、サムネイルをクリックすると、画像がスライドして、拡大マークをクリックするとポップアップか何かで、拡大画像が表示されると思うのですが、サムネイルをクリックすると、いきなり拡大画像が表示されます。
しかも、ポップアップではなく画像自体のパスにです。

これは、商品画像を制御するjsを読み込んでいないからでした。
functions.phpに下記を追記します。

function woo_product_gallery_setup(){
  add_theme_support('wc-product-gallery-zoom');
  add_theme_support('wc-product-gallery-lightbox');
  add_theme_support('wc-product-gallery-slider');
}

見れば、大体分かると思いますが、上から、amazonみたいにマウスオーバーで拡大するやつ、ポップアップで画像を拡大するやつ、スライダーです。

確認してみると、あれ?…動かない!!

ここで、結構ハマってしまいました。
実は、head内でデフォルトのjqueryを止める処理していたんですね。

<?php wp_deregister_script('jquery');?>

headのこの1行を削除したら、無事動きました。

ポップアップの画像拡大があれば、別に必要ないかなと思い、敢えて1番目の「wc-product-gallery-zoom」を読み込むのを止めました。個人的にはこの挙動の方が好みです。

パンくずも忘れずに

「woocommerce.php」を使っているページの「パンくず」がおかしくなるって気付きましたか?
ボクはしばらく気付きませんでした。

WooCommerce独特の処理が入るらしく、パンくずにおかしな情報が出るくるようになってしまいました。
WooCommrece用のパンくずを表示してくれる関数があるので、一旦、これを使います。

woocommerce_breadcrumb();

最後に

後は、Wordpressの管理メニューの「外観」→「カスタマイズ」→「WooCommerce」で「商品カタログ(一覧)」や「商品画像」のサイズなど、好みに合わせて設定しましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です