WooCommerceでStorefrontの子テーマを作る時によく使いそうなもの

2016.9.23

WordPress

はじめに

WooCommerceは世界的に人気のあるECシステムです。

とても便利なプラグインですが、カスタマイズするには意外と日本語の情報が少ないな、という印象でした。

今回はWooCommerceの公式テーマである「Storefront」の子テーマを作る時によく使いそうなものをまとめてみました。
子テーマの作り方は他のテーマと同じで functions.php か編集したテンプレートファイルを子テーマフォルダの中に入れておけば良いです。
functions.phpを編集する際はバックアップを取るなりしておいたほうが良いと思います。

使うことが多そうなもの

inlineで出力されているCSSを消去

Storefrontでは管理画面の外観から色をカスタマイズすることができ、その部分がインラインCSSとして出力されています。
CSSファイルで管理したい場合はこの仕様は不要なので、インラインCSSを削除します

// inlineで出力されているCSSを消去
function my_theme_remove_storefront_standard_functionality() {
  set_theme_mod('storefront_styles', '');
  set_theme_mod('storefront_woocommerce_styles', '');  
}
add_action( 'init', 'my_theme_remove_storefront_standard_functionality' );

Storefrontのfontを読み込まない

Storefrontではデフォルトで数種類のGoogle Fontsの読みこんでいます。これらのフォントを使用しない場合は読み込まないようにしましょう。

// StorefontのGoogle Fontsを読み込まない
function wpse_dequeue_google_fonts() {
  wp_dequeue_style( 'storefront-fonts' );
}
add_action( 'wp_enqueue_scripts', 'wpse_dequeue_google_fonts', 20 );

コンテンツ幅を変更する

デフォルトではコンテンツ幅は980pxになっていると思います。こちらを任意の幅に変更します。

// コンテンツ幅を変更する（1200px）
if ( ! isset( $content_width ) ) {
  $content_width = 1200;
}

フッターのコピーライト部分を編集する

フッターのコピーライト部分に「〜designed by WooThemes.」と表記があるのを編集します。下記ではその部分のみ取り除いています。

// フッターのコピーライト部分を編集する
if ( ! function_exists( 'storefront_credit' ) ) {
  function storefront_credit() {
    ?>
    <div class="site-info">
      <?php echo esc_html( apply_filters( 'storefront_copyright_text', $content = '&copy; ' . get_bloginfo( 'name' ) . ' ' . date( 'Y' ) ) ); ?>
    </div><!-- .site-info -->
    <?php
  }
}

商品一覧ページの商品の表示数を変更する

WordPressの表示設定の数とは違う数で表示させたいときに使います。場合に応じて数を変更してください。

// 商品一覧ページの商品の表示数を変更する（30個）
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 30;' ), 20 );

商品一覧ページで商品を１列に4つ表示させる

Storefrontの商品一覧ページでは、１列に3つ商品が表示されています。これを１列に3つ商品を表示できるようにします。

// 商品一覧ページで商品を１列に4つ表示させる
function loop_columns() {
  return 4;
}
add_filter('loop_shop_columns', 'loop_columns', 999);

商品ページで関連商品を１列に4つ表示させる

Storefrontの商品ページでは、下部に関連商品が出力されるようになっています。
デフォルトでは１列に3つ商品が表示されていますが、これを１列に4つ表示できるようにします。

// 商品ページで関連商品を１列に4つ表示させる
function woocommerce_output_related_products() {
 woocommerce_related_products(4,1);
}

上記の「1」の部分を変えると何列にするかも変更することができます。

さいごに

カスタマイズするときはどのファイルにその部分の記述があって何を上書きしたら良いのかわからなくなる時があります。
参考になればと思います。