進め！ テーマ作成の道/kwpm_kyoto4

2019年5月5日、Kansai WordPress Meetup 京都 #4 「テーマのカスタマイズ」で登壇した際のスライドです。

Transcript

1. テーマ作成の道! Kansai WordPress Meetup in Kyoto 進め!
2. ひしもち（久本 美咲） • Webデザイン＆マークアップ • フリーランス • WordPress歴４年弱 • 両生類・爬虫類が好き • ゲームも好き 本日のスライドカラーテーマは、 マダラヤドクガエルくんです。
3. 【初心者向け】 テーマ作成
4. 既存テーマのカスタマイズ 子テーマの作成 オリジナルデザインでテーマの自作
5. テーマ作成の下準備 1. HTML/CSSでコーディングしたページを用意する。 2. 開発環境を用意する。 ex） XAMPP入れる。 サーバー上にもうひとつインストールする。 Local by Flywheel を使う。
6. 最低限必要なファイルを作成する！ WordPressの管理画面で、「テーマ」として認識される ために最低限必要なファイルは…… • style.css • index.php index.php は、 ひとまず白紙でも大丈夫！
7. style.css に必要な記述 公式テーマディレクトリへ 登録しようと思うなら各項 目の記載が必要。 /* Theme Name: テーマの名前 Theme URI: テーマURL Author: 作成者 Author URI: 作成者のURL Description: テーマの説明 Version: バージョン情報 License: ライセンス情報 License URI: ライセンスURL Tags: カンマ区切りでタグを指定 */ ですが……
8. style.css に必要な記述 テーマとして動かすために 必須なのは、テーマの名前 のみ！ /* Theme Name: テーマの名前 Theme URI: テーマURL Author: 作成者 Author URI: 作成者のURL Description: テーマの説明 Version: バージョン情報 License: ライセンス情報 License URI: ライセンスURL Tags: カンマ区切りでタグを指定 */
9. 【目標】 まずは作ってみる！
10. よく使われるテーマファイル • style.css • functions.php • index.php • header.php • sidebar.php • footer.php • page.php • archive.php • single.php • comments.php
11. HTMLファイルを、分割する 1. header.php 2. index.php 3. sidebar.php 4. footer.php ① ② ③ ④
12. その他の cssファイル、jsファイル • style.css • functions.php • index.php • header.php • sidebar.php .css .js css .css js .js …
13. headerやfooterを読み込む header.php や footer.php などの共通で使用するパー ツは、表示させたい場所に 指定のコードを書いて読み 込むことができます。 <?php get_header(); ?> header.phpを読み込む <?php get_footer(); ?> footer.phpを読み込む <?php get_sidebar(); ?> sidebar.phpを読み込む
14. wp_head(); と wp_footer(); <?php wp_head(); ?> </head> 直前に記述。必要な外部プログラム等を読み込むHTMLを 出力する。プラグインの動作等に影響。 <?php wp_footer(); ?> </body> 直前に記述。画面上部に管理バーを表示させたりしてい る。画面上部に突如現れた謎の余白の原因となることが多い。
15. 【オメデトウ】 枠組み完成！
16. 【WordPress】 テンプレートタグを使う
17. // サイトのURL <?php echo home_url(); ?> // サイトのタイトル（管理画面 一般設定で入力したもの） <?php bloginfo(‘name’); ?> //ページのタイトル（記事ページでは投稿のタイトル、カテゴリーページではカテゴリー名、など） <?php wp_title(); ?> //サイトのキャッチフレーズ（管理画面 一般設定で入力したもの ） <?php bloginfo(‘description’); ?> //このテーマディレクトリまでのパス <?php echo get_template_directory_uri(); ?> サイトのURLや画像のパスを置換える
18. // サイトのURL <?php echo home_url(); ?> //このテーマディレクトリまでのパス <?php echo get_template_directory_uri(); ?> エスケープ処理　esc_url() // サイトのURL <?php echo esc_url( home_url(‘/’) ); ?> //このテーマディレクトリまでのパス <?php echo esc_url( get_template_directory_uri() ); ?>
19. 推奨/非推奨　いろんな書き方 今まで使われていた 書き方や方法 新しい書き方や方法 ？ 推奨？ 非推奨？
20. WordPress Codex（日本語版） http://wpdocs.osdn.jp/ ！
21. 【目標達成】 まずは作ってみた！
22. 【次の目標】 機能追加・テーマチェック
23. functions.phpで、できること • css、jsを読み込む　※ head内で読み込んでも動く • アイキャッチ画像を表示させる機能を追加 • ウィジェット機能を追加 • その他諸々の機能を追加 （すこしずつ慣れていけば大丈夫！）
24. その他、あったほうがいいファイル • screenshot.png • 404.php • search.php • comments.php 関係ないけど いてもいいカエル
25. Theme Check でテスト 公式ディレクトリへ登録する際の審査基準で、テーマ チェックを行ってくれるプラグイン。指定したテーマに 対して、あるべきCSSの記述が抜けていたり、機能が不足 していないかをチェックできる。 https://ja.wordpress.org/plugins/theme-check/
26. テーマユニットテスト 表示確認用のダミーデータをインポートして、様々な使 用ケースにおいて表示崩れなどの不具合が発生しないか をテストできる。 https://github.com/jawordpressorg/theme-test-data-ja https://wpdocs.osdn.jp/テーマユニットテスト
27. 【まとめ】 まずは作ってみる！ 作ったらより良くする！
28. ご清聴 ありがとうございました Kansai WordPress Meetup in Kyoto END Twitter @HsmtWeb