テーマ「ShapeShifter」をプラグイン「WooCommerce」に対応させてみる。

日付 2016年2月12日

カテゴリーチュートリアル

ワードプレスの代表的なプラグイン「bbPress」と「WooCommerce」にテーマ「ShapeShifter」を対応させたいと思い、現在アップデートに向けてカスタマイズ中なので、ちょっと基本的な方法を紹介していこうと思います。

プラグイン「bbPress」は使ったことがあるんですが、「WooCommerce」はECサイトを構築するためのプラグインですので、本格的に商売する意図が無い場合はなかなか使うこともありませんので、ちょっと苦労しています。ええ、僕もECサイトを作るきっかけがないもんですから、「WooCommerce」も実際に使ったことはありません。配送サービス用のアドオンも有料ですから、自分では試していません。

まぁ「WooCommerce」のアドオン全てに対応させる方が難しいと思いますので、とりあえず標準的な「WooCommerce」への対応を施し方を紹介していきます。

「WooCommerce」のページの種類

プラグインを導入した時に「固定ページ」として生成されるページがいくつかあります。

マイアカウント
チェックアウト
カート
ショップ

「WooCommerce」のページはこれら生成されたページのショートコードによって、商品アーカイブなどのページを出力しています。

ところが、実際にプラグイン「WooCommerce」を有効化して、ショップページを開いてみると、自分のテーマに沿わないような出力がされますよね。

「WooCommerce」のページでは、テーマのルートディレクトリに「woocommerce.php」が存在しない場合、プラグインに用意されたテンプレートファイルが代わりに呼び出されるようになっていて、「header.php」、「footer.php」などのテンプレートファイルを読み取り、プラグインのファイルがそのページを生成します。

ここでスタイルを修正するのも手の１つですが、「woocommerce.php」を作成してしまえば、自分で出力を制御できますので、こちらでチャレンジしていく方法についてです。

条件タグ

まずは条件タグです。

どのページが表示されているかを知るための関数がいくつか用意されていますので知っておきましょう。

if( function_exists( 'is_woocommerce' ) && is_woocommerce() ) { // WooCommerce
  if( is_shop() ) { // ショップ
  } elseif( is_product_category() ) { // 商品カテゴリー
  } elseif( is_product_tag() ) { // 商品タグ
  } elseif( is_product() ) { // 商品
  }
} elseif( function_exists( 'is_woocommerce' ) && is_cart() ) { // カート
} elseif( function_exists( 'is_woocommerce' ) && is_checkout() ) { // チェックアウト
} elseif( function_exists( 'is_woocommerce' ) && is_account_page() ) { // マイアカウント
}

ちょっとややこしいんですが、「ショップ」や「商品ページ」などは「is_woocommerce()」で特定できます。

この他にもいろんな条件タグがありますが、一応代表的なものを選んだつもりです。

その他の「WooCommerce」の条件タグ：

is_account_page
is_add_payment_method_page
is_ajax
is_cart
is_checkout
is_checkout_pay_page
is_filtered
is_lost_password_page
is_order_received_page
is_product
is_product_category
is_product_tag
is_product_taxonomy
is_shop
is_store_notice_showing
is_view_order_page
is_wc_endpoint_url
is_woocommerce

アルファベット順になっています。

ページの出力

では、テーマのルートディレクトリに「woocommerce.php」を作成します。

これを「page.php」などのように編集していきます。

実はこのテンプレートファイルが適用されるのは、前の項目で紹介した「is_woocommerce」に該当する「ショップ」や「商品」のページで、他の「マイアカウント」や「チェックアウト」「カート」といったページは「固定ページ」として出力されます。

ええ、「ショップ」も固定ページのショートコードで生成されているんですが、これだけちょっと別扱いなんです。

「マイアカウント」や「チェックアウト」「カート」に関しては固定ページのテンプレートのままでもOKです。「the_content」で出力します。

そして、「ショップ」や「商品」ページを生成する場合は、WooCommerce関数「woocommerce_breadcrumb()」と「woocommerce_content()」という関数が用意されていますので使っておきましょう。名前の通り前者「woocommerce_breadcrumb()」はパンくずリストを出力し、後者「woocommerce_content()」は商品アーカイブや商品ページを、ページ毎に生成してくれます。ただ、見てみるとショートコードで生成されていますので、おそらくこちらも「the_content」でも大丈夫だと思うんですが、念のため推奨される関数を使用しておくべきなんでしょう。

ええ、本当に簡単に済ますなら、この程度で出力できてしまうんですよ。

テンプレートファイルのサンプルを見たい場合は、プラグイン「WooCommerce」の「tempaltes」というフォルダ内に各ページのテンプレートファイルが用意されていますので、参考にしながらフックで出力されるコンテンツを編集するという形が取れるようになっています。

僕は面倒なんでそのまま出力してしまっているんですけど、余裕が出てきたら上記の簡単設定ではなく、各アイテム（商品名・詳細など）を使ったオリジナル設定にも挑戦してみるのも、オリジナリティが出るんじゃないかと思います。

テーマに合わせてカスタマイズ

上記の方法で基本的な出力は大丈夫だと思うんですが、ちょっとしたオプション設定も紹介していきます。

例えば、テーマ「ShapeShifter」では、SNSアイコン・ボタンを出力するものがありますが、これらにはページのURLが必要になりますので、「WooCommerce」で生成されたページのURLを取得する方法などを紹介します。

それぞれのページのURLを取得

「固定ページ」のテンプレートを使用している「カート」などのページは、ワードプレスの標準的なパーマリンクの取得方法で問題ありません。まぁシェアすることもないと思いますので、不要だとは思います。

問題は「is_woocommerce」で分岐できるショップページで、少し複雑かもしれません。

if( is_shop() ) { // The main shop
	$permalinkUrl = get_post_type_archive_link( 'product' );
} elseif( is_product_taxonomy() ) { // タクソノミーページ
	global $wp_query;
	if( is_product_category() ) { // A product category
		$permalinkUrl = get_term_link( $wp_query->queried_object->term_id, $wp_query->queried_object->taxonomy );
	} elseif( is_product_tag() ) { // A product tag
		$permalinkUrl = get_term_link( $wp_query->queried_object->term_id, $wp_query->queried_object->taxonomy );
	} else {
		return;
	}
} elseif( is_product() ) { // A single product
	global $post;
	$permalinkUrl = get_permalink( $post->ID );
}

「ショップ」は「固定ページ」で出力されていますので、「get_permalink」を使いたくなるんですが、ショートコードの処理で商品ページをループさせています。つまり、固定ページのURLを取得するように「get_permalink」などの関数を使用すると、ループで出力された最後の商品ページのURLが取得されてしまうので注意してください。

タクソノミー（カテゴリー・タグ）は、一般的なタクソノミーURLの出力方法を使っていますので、他のタクソノミーにもそのまま使えると思います。タクソノミーのその他をreturnにしているのは、勝手に不要だと判断しただけです。

上の例は一応シェアを目的とした場合のURLですので、ページは指定していません。１ページ目を取得できるようになっています。