ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
•
9 gostaram•17,344 visualizações
2016年2月21日に開催されたWordBench東京「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 でのセッションスライドです。
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Semelhante a ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼ (20)
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
- 1. WordPressのテーマ制作みんなどうしてる？ ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼ 子テーマでWordPressのテーマをつくろう ∼ Mignon Style
- 2. Mignon Style Webデザイナー WordPress公式ディレクトリ テーマ「Chocolat」 プラグイン「MS Custom Login」デベロッパー WordPressスターターテーマ「_s」コントリビューター http://mignonstyle.com/ @mignon_style mignonxstyle https://profiles.wordpress.org/mignonstyle Adobe BracketsのWordPress用コードヒントも作ってます！
- 3. 2013年7月 WordPressの勉強をはじめる 2014年5月 WordPress公式ディレクトリにテーマ「Chocolat」を登録 2014年6月 WordCamp Kansai 2014に遊びに行く 2014年8月 WordFes Nagoya 2014 登壇/実行委員 2014年10月 WordCamp Tokyo 2014 登壇 2014年10月 WordPress公式ディレクトリにプラグイン「MS Custom Login」を登録 2015年4月 BracketsにWordPress用コードヒントのアドオンを登録 2015年7月 WordCamp Kansai 2015 実行委員 2015年8月 WordFes Nagoya 2015 実行委員 2015年9月 _s のコントリビューターになる 2015年10月 WordCamp Tokyo 2015 登壇 2016年1月 WordBash Kyoto 登壇/運営 WordBashハングアウト放送中！！
- 4. テーマ「 Chocolat 」 https://ja.wordpress.org/themes/chocolat/
- 5. プラグイン「 MS Custom Login 」 https://ja.wordpress.org/plugins/ms-custom-login/
- 13. ええっ!!
- 17. そんなときは 子テーマ！！
- 18. 02 子テーマの活用
- 20. どうして 子テーマがいいの？
- 27. 「テーマを 更新」を
- 28. ポチッ
- 29. 03 WordPress Codex 日本語版 https://wpdocs.osdn.jp/子テーマ 子テーマの作り方
- 31. 2 style.cssの作成 style.cssの冒頭に テーマの詳細 を記述します /* Theme Name: Twenty Sixteen Child Template: twentysixteen */ Theme Name: 子テーマのテーマ名 Template: 親テーマのディレクトリ名
- 32. 3 スタイルシートの読込 親テーマのスタイルシートを読み込みます /* Theme Name: Twenty Sixteen Child Template: twentysixteen */ @import url('../twentysixteen/style.css'); @importで親テーマの スタイルシートを読み込み
- 33. この書き方は 今は 非推奨です
- 34. 3 スタイルシートの読込 今はコレ！！ functions.phpに親テーマの スタイルシートを読み込むコードを記述 functions.php <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } コピペでOK！
- 35. 親テーマのスタイルシートを読み込んだ後 子テーマのスタイルシートを自動的に読み込みます functios.phpの始めに PHPの「開始タグ」を記述 functions.php <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } 親テーマのstyle.cssを追加 PHPの「終了タグ」は書かなくてもOK
- 36. 子テーマのスタイルシートが読み込まれない場合 functions.php <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) ); }
- 37. 子テーマのスタイルシートが読み込まれない場合 functions.php <?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) ); } 親テーマのstyle.cssを追加 子テーマのstyle.cssを追加
- 41. 管理画面の 外観 > テーマ > 新規追加 「テーマのアップロード」でzipファイルを選択 今すぐインストール 親テーマがインストールされていないときは 自動的にインストールされる
- 42. 2 FTPでアップロードする場合 子テーマのフォルダをWordPressをインストールしてる サーバーのwp-content/themesにアップロード wp-content /themes ディレクトリに入れます 親テーマがインストールされていないと子テーマが エラーになるので親テーマを自分でインストール
- 43. 5 子テーマを有効化 管理画面の 外観 > テーマ > でテーマを選んで有効化 子テーマが表示された！
- 44. 04 子テーマ制作の ポイント
- 46. バックアップは とってないの？
- 48. ・・・・・・
- 51. テーマの 詳細ページ を表示
- 52. Tracで 参照
- 53. 1つ前の バージョンを 選択
- 54. Zip Archive を選択
- 59. 05 親テーマの選び方
- 62. functions.php 子テーマで同名の関数を書き換えることができる if ( ! function_exists( 'my_theme_posted_on' ) ) { function my_theme_posted_on () { } } ! function_exists があるかチェック!!
- 63. 特定のタイミングで関数を呼び出したり 書き換えたりできる functions.php function my_theme_posted_on () { do_action( 'my_theme_posted_on_pre' ); return apply_filters( 'my_theme_posted_on_result', $result ); } フィルタやフックがあるかチェック!!
- 64. 子テーマって なんだか大変そう…