実践に見るテーマの制作方法

Transcript

1. 実践に見るテーマの制作方法 2019.10.25　安間絵梨奈
2. HELLO! 安間 絵梨奈 コルネ株式会社 フロントエンドエンジニア
3. 2通りのテーマ制作方法
4. 親テーマ 2通りのテーマ制作方法 子テーマ 0ベースからの親テーマ制作 親テーマを利用して子テーマ制作
5. 親テーマのメリット・デメリット ▹ 自由なレイアウトで制作できる メリット ▹ 汎用性の実装による制作コストアップ デメリット ▹ 使い慣れたマークアップが利用できる
6. 子テーマのメリット・デメリット ▹ 親テーマを継承 メリット ▹ とくになし デメリット ▹ 制作コストをおさえられる あえて挙げるとしたら... 親テーマの機能継承の難しさ
7. 親テーマを利用して子テーマ制作 推奨
8. 親テーマ選択の基準
9. 親テーマ選択の基準 ▹ 製造元のサポートがしっかりしていること ▹ Welcart対応テーマであること ▹ 必要な機能が備わっているか ▹ 各ページのレイアウトを確認する
10. 子テーマ制作の実際
11. Welcart 公式親テーマ 多機能 親テーマ
12. Welcart 公式親テーマ パン屋がWelcartを利用するとど うなるかを想像して制作 パン屋だけでなく、スイーツ・ 洋食・オーガニックなど食品 販売に最適なテーマ 購入ページ：https://www.welcart.com/archives/9091.html デモサイト：https://themes.welcart.info/welcart-panetteria/ 無料クーポン プレゼント！
13. 　　　　　　 子テーマ制作実例紹介
14. 健康食品の定期購入販売 サイト 健康食品サイト Sport 　　　　　　 ダウンロード：https://www.collne.com/dl/10th/welcart_panetteria-sport.zip
15. 会員の状態によって 閲覧制限のある情報サイト 会員制情報サイト News ダウンロード：https://www.collne.com/dl/10th/welcart_panetteria-wcnews.zip
16. その前に......
17. 子テーマの作り方をおさらい
18. 子テーマに必要なファイル CSS style.css PHP functions.php screenshot.png 必須 任意
19. style.cssの設定 style.cssの冒頭に テーマの詳細 を記述します。 /* Theme Name: Panetteria Child Theme Template: welcart_panetteria */
20. functions.phpの設定 functions.phpに 親テーマのスタイルシートを読み込む コードを記述 <?php add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' ); function child_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
21. functions.phpの設定 子テーマのスタイルシートが読み込まれない場合 <?php add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' ); function child_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' ); }
22. 任意 必須 Welcartの子テーマに必要なファイル CSS PHP style.css functions.php screenshot.png CSS usces_cart.css
23. usces_cart.cssの設定 方法１：親テーマの usces_cart.css を子テーマにコピー 方法２：親テーマの usces_cart.css を読み込む add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' ); function child_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'parent-cart', get_template_directory_uri() . 　　　　　　　　　　'/usces_cart.css', array('parent-style', 'usces_default_css') ); } 推奨
24. 子テーマ下準備完了
25. 健康食品の定期購入販売 サイト 健康食品サイト Sport 　　　　　　 ダウンロード：https://www.collne.com/dl/10th/welcart_panetteria-sport.zip
26. 定期購入プラグイン WCEX Auto Delivery
27. 「 Sport 」テーマ構成 404.php wc-templates 　 　 　 archive.php auto_delivery.css category.php footer.php front-page.php functions.php header.php page.php screenshot.png search.php sidebar-footer.php single.php style.css usces_cart.css 親テーマから修正したいテンプレートをコピー
28. 「 Sport 」テーマ構成 assets 　 　 　 404.php inc 　 　 　 languages 　 　 　 page-templates 　 　 　 template-parts 　 　 　 wc-templates 　 　 　 archive.php auto_delivery.css category.php footer.php front-page.php functions.php header.php page.php screenshot.png search.php sidebar-footer.php single.php style.css usces_cart.css 子テーマ用にテンプレート追加
29. 会員の状態によって 閲覧制限のある情報サイト 会員制情報サイト News ダウンロード：https://www.collne.com/dl/10th/welcart_panetteria-wcnews.zip
30. ダウンロード＆サービス販売拡張プラグイン WCEX DL Seller
31. 「News」テーマ構成 inc 　 　 　 template-parts 　 　 　 wc-templates 　 　 　 archive.php category.php front-page.php functions.php header.php dlseller.css screenshot.png search-article.php sidebar-footer.php single.php style.css usces_cart.css 親テーマから修正したいテンプレートをコピー
32. 「News」テーマ構成 assets 　 　 　 inc 　 　 　 languages 　 　 　 customize 　 　 　 template-parts 　 　 　 wc-templates 　 　 　 archive.php category.php front-page.php functions.php header.php dlseller.css screenshot.png search-article.php sidebar-footer.php single.php style.css usces_cart.css 子テーマ用にテンプレート追加 images 　 　 　
33. 子テーマ作ろう！
34. ご清聴ありがとうございました スライドURL：http://bit.ly/2Mv6fLM