WooCommerceの使い方

WordPressプラグイン情報

  1. Home
  2. Storefrontテーマ情報  /  
  3. Storefrontの子テーマの作り方

はじめに

子テーマを使用した、Storefrontテーマのカスタマイズ例です。
適切に表示させるには、「Storefrontテーマの初期設定」と「商品の新規追加」をしている必要があります。
Storefrontテーマの初期設定

子テーマの作り方

  • storefront-childフォルダを作ります。
  • storefront-childフォルダの中に、style.cssとfunctions.phpファイルを作り、以下のコードをコピペします。

style.css

@charset "UTF-8";
/*
Theme Name: Storefront Child
Author: John Doe
Author URI: https://example.com/
Version: 1.0.0
Description: Storefront Child Theme
Template: storefront
Tags: e-commerce
*/

functions.php

<?php
function storefront_child_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'storefront_child_scripts' );

日本語表示を整える

日本語で綺麗に表示されるようにします。
style.cssに以下のコードを追記します。

style.css

body {
	position: relative;
	margin: 0;
	text-align: left;
	overflow-x: hidden;
	background: #ffffff;
	font-size: 16px;
	line-height: 2;
	color: #333333;
	font-family: 'Helvetica Neue', Helvetica, Arial, 'Yu Gothic', '游ゴシック Medium', sans-serif;
	font-weight: 500;
}
h1, h2, h3, h4, h5, h6 {
	font-family: inherit;
	line-height: 1.4;
	color: inherit;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0.5rem;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1.0rem; }

フッターのクレジット削除方法

functions.phpに以下のコードを追記します。

参考元
https://wordpress.org/support/topic/how-to-remove-built-with-storefront-woocommerce-footer/

functions.php

// Remove Credit
function storefront_child_remove_credit() {
	remove_action( 'storefront_footer', 'storefront_credit', 20 );
}
add_action( 'init', 'storefront_child_remove_credit', 10 );

// Add Credit
function storefront_child_add_credit() {
?>
<div class="site-info">
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
</div>
<!-- .site-info -->
<?php
}
add_action( 'storefront_footer', 'storefront_child_add_credit', 20 );

Bootstrap4 互換性対応

Bootstrap4使用のプラグインと併用するとフッターの表示が崩れます。CSSのクラス名が同じなのが原因です。
style.cssに以下のコードを追記します。

style.css

/* Bootstrap4 Compatibility */
.footer-widgets.col-1,
.footer-widgets.col-2,
.footer-widgets.col-3,
.footer-widgets.col-4 { max-width: 100%; }

ロゴ画像の問題

ロゴ画像がぼやけたり、ロゴ画像の右スペースがクリック対象となっているのを修正します。
style.cssに以下のコードを追記します。

style.css

/* Logo Image */
.site-branding a.custom-logo-link { display: inline-block; }

トップページのカスタマイズ

トップページのテンプレートを「Homepage」にした場合のカスタマイズ方法です。
「デフォルトテンプレート」のままの場合は関係ありません。

  • 「Homepage」テンプレートには、最初からアイキャッチ画像＋6セクションが表示されています。
  • 子テーマのfunctions.php内に以下のコードを追記することで、セクションの削除、追加が可能です。
  • 子テーマを使用せず、Homepage Controlプラグイン を使用してもセクションの並び替えができます。

functions.php

// 最初から読み込まれている7セクションを削除する場合
function storefront_child_remove_homepage() {
	remove_action( 'homepage', 'storefront_homepage_content', 10 ); // アイキャッチ画像＋キャプション
	remove_action( 'homepage', 'storefront_product_categories', 20 );
	remove_action( 'homepage', 'storefront_recent_products', 30 );
	remove_action( 'homepage', 'storefront_featured_products', 40 );
	remove_action( 'homepage', 'storefront_popular_products', 50 );
	remove_action( 'homepage', 'storefront_on_sale_products', 60 );
	remove_action( 'homepage', 'storefront_best_selling_products', 70 );
}
add_action( 'init', 'storefront_child_remove_homepage' );

// 並び替えをする場合（数字を変えます）
add_action( 'homepage', 'storefront_homepage_content', 11 );
add_action( 'homepage', 'storefront_product_categories', 21 );
add_action( 'homepage', 'storefront_recent_products', 31 );
add_action( 'homepage', 'storefront_featured_products', 41 );
add_action( 'homepage', 'storefront_popular_products', 51 );
add_action( 'homepage', 'storefront_on_sale_products', 61 );
add_action( 'homepage', 'storefront_best_selling_products', 71 );

デザイン面の微調整

デザイン面の微調整をします。
style.cssに以下のコードを追記します。

style.css

/* Input Shadow */
input.search-field { box-shadow: none; }
/* Blog Title */
.entry-header .entry-title { padding: 30px 0; }
/* Link */
a:focus {
	outline: none;
	cursor: pointer;
}
.site-branding a,
ul.page-numbers li a,
ul.products li.product a,
.woocommerce-breadcrumb a,
.primary-navigation ul li a,
.storefront-product-section ul.products li a { text-decoration: none; }

まとめ

このページで紹介した全コードをまとめてあります。

style.css

@charset "UTF-8";
/*
Theme Name: Storefront Child
Author: John Doe
Author URI: https://example.com/
Version: 1.0.0
Description: Storefront Child Theme
Template: storefront
Tags: e-commerce
*/
body {
	position: relative;
	margin: 0;
	text-align: left;
	overflow-x: hidden;
	background: #ffffff;
	font-size: 16px;
	line-height: 2;
	color: #333333;
	font-family: 'Helvetica Neue', Helvetica, Arial, 'Yu Gothic', '游ゴシック Medium', sans-serif;
	font-weight: 500;
}
h1, h2, h3, h4, h5, h6 {
	font-family: inherit;
	line-height: 1.4;
	color: inherit;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0.5rem;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1.0rem; }

/* Bootstrap4 Compatibility */
.footer-widgets.col-1,
.footer-widgets.col-2,
.footer-widgets.col-3,
.footer-widgets.col-4 { max-width: 100%; }

/* Logo Image */
.site-branding a.custom-logo-link { display: inline-block; }

/* Input Shadow */
input.search-field { box-shadow: none; }
/* Blog Title */
.entry-header .entry-title { padding: 30px 0; }
/* Link */
a:focus {
	outline: none;
	cursor: pointer;
}
.site-branding a,
ul.page-numbers li a,
ul.products li.product a,
.woocommerce-breadcrumb a,
.primary-navigation ul li a,
.storefront-product-section ul.products li a { text-decoration: none; }

functions.php

<?php
function storefront_child_scripts() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'storefront_child_scripts' );


// Remove Credit
function storefront_child_remove_credit() {
	remove_action( 'storefront_footer', 'storefront_credit', 20 );
}
add_action( 'init', 'storefront_child_remove_credit', 10 );

// Add Credit
function storefront_child_add_credit() {
?>
<div class="site-info">
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
</div>
<!-- .site-info -->
<?php
}
add_action( 'storefront_footer', 'storefront_child_add_credit', 20 );

// 最初から読み込まれている7セクションを削除する場合
function storefront_child_remove_homepage() {
	remove_action( 'homepage', 'storefront_homepage_content', 10 );
	remove_action( 'homepage', 'storefront_product_categories', 20 );
	remove_action( 'homepage', 'storefront_recent_products', 30 );
	remove_action( 'homepage', 'storefront_featured_products', 40 );
	remove_action( 'homepage', 'storefront_popular_products', 50 );
	remove_action( 'homepage', 'storefront_on_sale_products', 60 );
	remove_action( 'homepage', 'storefront_best_selling_products', 70 );
}
add_action( 'init', 'storefront_child_remove_homepage' );

// 並び替えをする場合（数字を変えます）
add_action( 'homepage', 'storefront_homepage_content', 11 );
add_action( 'homepage', 'storefront_product_categories', 21 );
add_action( 'homepage', 'storefront_recent_products', 31 );
add_action( 'homepage', 'storefront_featured_products', 41 );
add_action( 'homepage', 'storefront_popular_products', 51 );
add_action( 'homepage', 'storefront_on_sale_products', 61 );
add_action( 'homepage', 'storefront_best_selling_products', 71 );