WooCommreceを導入したいけど、自作テーマではどうもうまくいかない。
- 商品一覧ページのレイアウトが崩れる
- 商品詳細ページのタブ切り替えが動かない
- レビューじゃなくコメントになる
どうやら、対応したテーマでなければ、うまく表示されないようなのです。
WooCommreceサポートの宣言をする
このテーマはWooCommreceをサポートしてますよ。と宣言しないといけません。
宣言するには、functions.phpに下記を追記します。
■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｣で｢商品カタログ(一覧)｣や｢商品画像｣のサイズなど、好みに合わせて設定しましょう。