本日から自分語りから、再び技術的なお話に戻ります。
WooCommerceを導入する際に、プラグインを導入してデザインなどの編集についてプラグインのコードをいじってしまうとアップデートしてしまってロールバックしてしまうのは困ってしまうケースがあると思います。
今回の内容は、そんな時にどうすればいいのか？
と言うお話。
基本的にテーマファイルっていじらないで、子テーマというメインテーマを呼び出す編集用のテーマを使用してカスタマイズを行います。
ますは子テーマの作り方について書いていきます。
子テーマを作ろう！
子テーマは、色々プラグインやジェネレーターサイトなどもあるけれど別にそんなに難しくないので覚えておいてソンはありません。
１. テーマののスタイルシートを確認
テーマ内のなかにある style.css というファイルです。
/* Theme Name: テーマの名前 Theme URI: テーマを配布しているURL Description: テーマの説明。ディスクリプションですね Author: テーマを作った制作者の名前 Author URI: テーマ配布サイト。WordPressの公式リポジトリなど Template: テンプレートの名前 Version: バージョン番号 */
こんな記述がスタイル内の冒頭に記載があると思います。
この中で重要なのは、
Template: テンプレートの名前
この部分。
基本この部分さえ間違えなければ作るのはさほど難しくありません。
このヘッドのところの記述ではあとはライセンスについての記述などが追加されてテーマのライセンスポリシーなどが記載されています。
Themeがtwentysixteenならば以下のように記述されています。
/* Theme Name: Twenty Sixteen Theme URI: https://wordpress.org/themes/twentysixteen/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere. Version: 1.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready Text Domain: twentysixteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
という感じです。
ちなみにThemeForestなどで販売されている有料テーマなどは編集が容易なように子テーマが初めから同梱されている事が多いです。
子テーマは、WordPressのルールとして
テーマフォルダ名-child といった記述になることが多いです。
これって、こうしましょうという推奨されている名付け方なので、こだわりがなければフォルダー名はこうした命名にした方が無難。
でもこのようにChildとつけなくても動作するのであまり気にしても仕方ありません。
/* Theme Name: テーマの名前 Description: 子テーマだよと書いておきましょう。 Author: 作った人の名前。英語で書いてね Author URI: 制作者のURL Theme URI: 配布サイトURL Version: バージョンNO License: Located in the 'licensing' folder License URI: Located in the 'licensing' folder Template: 元になるテンプレートの名称 */
テーマがデフォルトでtwentysixteenなどを使用している場合は
Text Domain: twentysixteen
がテンプレート名になる。大抵はメインテーマのフォルダ名がテンプレート名って事になります。
twentysixteen だから twentysixteen-child になります。
そして、子テーマ内のスタイルシートに
/* Theme Name: Twentysixteen - Child theme Description: Twentysixteen Child theme Author: the WordPress team Author URI: https://wordpress.org/ Theme URI: https://wordpress.org/themes/twentysixteen/ Version: 1.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready Template: twentysixteen */
と言う具合になる。
１点。ここで、よくメモ帳などで編集したり、どこかのBlogで記載されているコードを打ち込んで見て真っ白画面になるなんて事もあるかもしれませんが、大抵は文字コードがUTF-8で保存されていないとか、半角で記述されるべき ‘ が全角の ’ となっている事には注意しましょう。
見るだけではこれは判別出来ませんからね。
さて、コレでスタイルの準備はできました。
あとは、
functions.php
が必要になります。
空のfunctions.phpをアップしておいても良いですが、
<?php /* Insert custom functions here */
このくらいは記述してアップしておきましょう。
コレでファイルとしてはそろっているので問題ないのですが、もう一工夫
functions.phpでCSSファイルを外部化しておく。
追記の style.css に追記してもいいのですが、あまり推奨されていません。
また、外部化が推奨されているので、CSSというフォルダを作ってその中に、 style.css を設置してあげましょう。
昔は、@でスタイルを読み込むと記述されていましたが、今は、一工夫コードを書いて読み込みます。
/**
* スクリプトとスタイルを適切にエンキューする方法
*/
function theme_name_scripts() {
wp_enqueue_script( 'style-name', get_stylesheet_uri() . '/css/style.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );WordPress公式リポジトリ ： 関数リファレンス/wp enqueue style
[blogcard url=https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style]
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
構文としてはこんな感じ。
$handle
（文字列） （必須） スタイルシートのハンドルとして使われる名称。特別なケースとして、文字列に ‘?’ という記号が含まれている場合、それより前の部分は登録されたハンドルとして参照され、それより後の部分はクエリストリングとして URL に追加される。
- 初期値： なし
- $src
- （文字列|ブーリアン） （オプション） スタイルシートの URL。例:
https://example.com/css/mystyle.css。このパラメータは WordPress がこのスタイルを認識していない場合のみに必要。ローカルのスタイルには URL を直接書き込むべきではない。代わりに plugins_url (プラグイン向け) と get_template_directory_uri (テーマ向け) を使って適切な URL を取得する。リモートのアセットはプロトコルに影響されない URL で指定できる。例://otherdomain.com/css/theirstyle.css
- 初期値： false
- $deps
- （array） （オプション） このスタイルシートが依存する他のスタイルシートのハンドル配列、つまり、このスタイルシートより前に読み込まれる必要があるスタイルシート。依存関係がない場合は false。
- 初期値： array()
- $ver
- （文字列|ブーリアン） （オプション） スタイルシートのバージョン番号を指定する文字列 (存在する場合) 。このパラメータはキャッシングに関わらず正しいバージョンがクライアントに送信されるようにするために使う。したがって、バージョン番号があってそれがスタイルシートに意味を持つ場合は含めるべきである。
- 初期値： false
$media
（文字列|ブーリアン） （オプション） スタイルシートが定義されているメディアを指定する文字列。例: ‘all‘、’screen‘、’handheld‘、’print‘。有効な CSS-media-types の全容についてはこちらの一覧を参照。
初期値： ‘all’
この処理をして上げることで、CSSというフォルダーのstyle.cssを読み込んでくれます。
さて、WooCommerceのテンプレートをインストール
子テーマ内にwoocommerceというフォルダーを作ってあげる
この中に編集をしたいページテンプレートをアップロードします。
WooCommerceのテンプレートファイルの一覧
/woocommerce/archive-product.php, /woocommerce/auth/footer.php, /woocommerce/auth/form-grant-access.php, /woocommerce/auth/form-login.php, /woocommerce/auth/header.php, /woocommerce/cart/cart-empty.php, /woocommerce/cart/cart-item-data.php, /woocommerce/cart/cart-shipping.php, /woocommerce/cart/cart-totals.php, /woocommerce/cart/cart.php, /woocommerce/cart/cross-sells.php, /woocommerce/cart/mini-cart.php version, /woocommerce/cart/proceed-to-checkout-button.php, /woocommerce/cart/shipping-calculator.php, /woocommerce/checkout/cart-errors.php, /woocommerce/checkout/form-billing.php, /woocommerce/checkout/form-checkout.php, /woocommerce/checkout/form-coupon.php, /woocommerce/checkout/form-login.php, /woocommerce/checkout/form-pay.php, /woocommerce/checkout/form-shipping.php, /woocommerce/checkout/payment-method.php, /woocommerce/checkout/payment.php, /woocommerce/checkout/review-order.php, /woocommerce/checkout/thankyou.php, /woocommerce/content-product.php , -child/woocommerce/content-product_cat.php, /woocommerce/content-single-product.php, /woocommerce/content-widget-product.php, /woocommerce/emails/admin-cancelled-order.php , /woocommerce/emails/admin-new-order.php , /woocommerce/emails/customer-completed-order.php , /woocommerce/emails/customer-invoice.php , /woocommerce/emails/customer-new-account.php, /woocommerce/emails/customer-note.php , /woocommerce/emails/customer-processing-order.php , /woocommerce/emails/customer-refunded-order.php , /woocommerce/emails/customer-reset-password.php, /woocommerce/emails/email-addresses.php, /woocommerce/emails/email-footer.php, /woocommerce/emails/email-header.php, /woocommerce/emails/email-order-items.php, /woocommerce/emails/email-styles.php, /woocommerce/emails/plain/admin-cancelled-order.php, /woocommerce/emails/plain/admin-new-order.php, /woocommerce/emails/plain/customer-completed-order.php, /woocommerce/emails/plain/customer-invoice.php, /woocommerce/emails/plain/customer-new-account.php, /woocommerce/emails/plain/customer-note.php, /woocommerce/emails/plain/customer-processing-order.php, /woocommerce/emails/plain/customer-refunded-order.php , /woocommerce/emails/plain/customer-reset-password.php, /woocommerce/emails/plain/email-addresses.php, /woocommerce/emails/plain/email-order-items.php, /woocommerce/global/breadcrumb.php, /woocommerce/global/form-login.php, /woocommerce/global/quantity-input.php version, /woocommerce/global/sidebar.php, /woocommerce/global/wrapper-end.php, /woocommerce/global/wrapper-start.php, /woocommerce/loop/add-to-cart.php version, /woocommerce/loop/loop-end.php, /woocommerce/loop/loop-start.php, /woocommerce/loop/no-products-found.php, /woocommerce/loop/orderby.php, /woocommerce/loop/pagination.php, /woocommerce/loop/price.php, /woocommerce/loop/rating.php, /woocommerce/loop/result-count.php, /woocommerce/loop/sale-flash.php, /woocommerce/myaccount/form-add-payment-method.php, /woocommerce/myaccount/form-edit-account.php , /woocommerce/myaccount/form-edit-address.php, /woocommerce/myaccount/form-login.php, /woocommerce/myaccount/form-lost-password.php, /woocommerce/myaccount/my-account.php, /woocommerce/myaccount/my-address.php, /woocommerce/myaccount/my-downloads.php, /woocommerce/myaccount/my-orders.php , /woocommerce/myaccount/view-order.php, /woocommerce/notices/error.php, /woocommerce/notices/notice.php, /woocommerce/notices/success.php, /woocommerce/order/form-tracking.php, /woocommerce/order/order-again.php, /woocommerce/order/order-details-customer.php, /woocommerce/order/order-details-item.php , /woocommerce/order/order-details.php , /woocommerce/order/tracking.php, /woocommerce/product-searchform.php, /woocommerce/single-product/add-to-cart/external.php, /woocommerce/single-product/add-to-cart/grouped.php, /woocommerce/single-product/add-to-cart/simple.php, /woocommerce/single-product/add-to-cart/variable.php , /woocommerce/single-product/meta.php, /woocommerce/single-product/price.php, /woocommerce/single-product/product-attributes.php, /woocommerce/single-product/product-image.php, /woocommerce/single-product/product-thumbnails.php, /woocommerce/single-product/rating.php, /woocommerce/single-product/related.php, /woocommerce/single-product/review.php version, /woocommerce/single-product/sale-flash.php, /woocommerce/single-product/share.php, /woocommerce/single-product/short-description.php, /woocommerce/single-product/tabs/additional-information.php, /woocommerce/single-product/tabs/description.php, /woocommerce/single-product/tabs/tabs.php, /woocommerce/single-product/title.php, /woocommerce/single-product/up-sells.php, /woocommerce/single-product-reviews.php, /woocommerce/single-product.php, /woocommerce/taxonomy-product_cat.php, /woocommerce/taxonomy-product_tag.php
テンプレートファイルはテーマによっては古いモノを仕様として使わなくてはいけない時がありますので、そのときには、メインテーマからWooCommerceというフォルダーに入っているファイルを子テーマに移動してあげましょう。
子テーマで編集や修正をしておけば、不具合が起きてもすぐにロールバックできるので、問題発生時に対応は用意です。
次回はもう少し、WooCommerceのテンプレートファイルのいじり方を書いていきたいと思います。
