Storefrontをカスタマイズするときの第一歩

Storefrontテーマフォルダにある下記2ファイルのソースコードを確認するのがStorefrontをカスタマイズするときの第一歩だと思います。
inc/storefront-template-hooks.php
inc/storefront-template-functions.php

StorefrontのWebページを構成しているphpファイル内にはdo_action関数がそこかしこに記述されています。そのdo_action関数が指定しているアクションにフックされている関数が、Webページの見た目を実装しています。

Storefrontをカスタマイズする際は、それらフックされている関数の動きを変更することが必要になるでしょう。

inc/storefront-template-hooks.phpを見ると、do_adtion関数で指定されたアクションにどの関数をフックしているか把握できます。
続いて、inc/storefront-template-functions.phpを見ると、それらフックされた関数の実装内容を把握できます。

例えば、Webページのフッター表記は、footer.php にある

do_action( 'storefront_footer' );

が出力しているので、フッター表記を変更したい場合は、storefront_footerアクションにフックされた関数の動きを変更する必要があります。

まずは、inc/storefront-template-hooks.php ファイル内で、storefront_footerアクションを探してみると…下記2つのadd_action関数が見つかります。

add_action( 'storefront_footer', 'storefront_footer_widgets', 10 );
add_action( 'storefront_footer', 'storefront_credit',         20 );

上記のadd_action関数の第2引数を見ると、
storefront_footerアクションにフックされた関数が下記2つだとわかります。

storefront_footer_widgets
storefront_credit

この2つの関数は、inc/storefront-template-functions.php に下記のように実装されています。

if ( ! function_exists( 'storefront_footer_widgets' ) ) {
	function storefront_footer_widgets() {
	　// 省略
	}
}

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' ) ) ); ?>
			<?php if ( apply_filters( 'storefront_credit_link', true ) ) { ?>
			<br /> <?php printf( esc_attr__( '%1$s designed by %2$s.', 'storefront' ), 'Storefront', '<a href="http://www.woocommerce.com" title="WooCommerce - The Best eCommerce Platform for WordPress" rel="author">WooCommerce</a>' ); ?>
			<?php } ?>
		</div><!-- .site-info -->
		<?php
	}
}

上記の関数を参考に、子テーマ内のfunctions.phpでこれらの関数を上書き実装すれば、Webページのフッター表記が変更できます。下記ではstorefront_credit関数だけ上書き実装しています。

if ( ! function_exists( 'storefront_credit' ) ) {
	function storefront_credit() {
		?>
		<div class="site-info">
			<?php echo esc_html( apply_filters( 'storefront_copyright_text', $content = '&copy; ' . 'sanpeity' . ' ' . date( 'Y' ) ) ); ?>
		</div>
		<?php 
	}
}

カスタマイズしたStorefrontでECサイトを構築している人ってどのくらいいるんですかねぇ。

では、ごきげんよう。

Storefrontとは、WordPress 上でECサイトを構築できるプラグインWooCommerceの公式テーマです。

本記事で取り扱っているStorefrontのバージョンは2.2.5です。

ECサイト構築のご用件がございましたらご相談ください。
takuma_yamanaka@sanpeity.com