ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成＆カスタマイズ〜
Report
Share
•62 likes•59,400 views
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成＆カスタマイズ〜
•62 likes•59,400 views
Report
Share
Download to read offline
2015年10月31日に開催されたWordCamp Tokyo 2015でのセッションスライドです。
More Related Content
What's hot
What's hot(20)
Viewers also liked
Viewers also liked(20)
Similar to ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成＆カスタマイズ〜
Similar to ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成＆カスタマイズ〜(20)
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成＆カスタマイズ〜
- 8. WordPressが 大好きです！ Webデザイナー WordPressテーマ・プラグイン デベロッパー WordPress公式ディレクトリ テーマ「 Chocolat 」 プラグイン「 MS Custom Login 」作者 WordPressスターターテーマ「 _s 」コントリビューター http://mignonstyle.com/ mignon_style mignonxstyle Mignon Style
- 10. 子テーマとは 01
- 13. とさか くちばし はね しっぽ しっぽ とさか くちばし はね 既存のテーマ 新しいテーマ 親テーマを 継承 親テーマ 子テーマ WordPressでは既存のテーマを「親テーマ」 親テーマを受け継いだテーマを「子テーマ」と 言います このしくみを 「継承」と 言います
- 14. どうして 子テーマがいいの？
- 28. 親テーマの選び方 02
- 37. 子テーマの作り方 03
- 38. 子テーマの作り方 03 の前に
- 40. オススメ！ WordPressのテーマで使うCSSやPHPファイルは 文字コードを UTF-8形式（BOMなし） で保存します 無料のテキストエディタ Adobe Brackets Windows・Mac TeraPad サクラエディタ Windows mi CotEditor Mac テキストエディタ1
- 45. MyTheme テーマディレクトリ my-theme 既存のテーマ MyTheme テーマディレクトリ my-theme-child 自分のテーマ テーマの更新は「 ディレクトリ名 」と「 テーマ名 」が 既存のテーマと一致しているかをチェックしてるので どちらかを違う名前にすればOK 既存のテーマ名を使用したいときは
- 47. 子テーマの作り方 03 WordPress Codex 日本語版 https://wpdocs.osdn.jp/子テーマ
- 49. style.cssの作成2 style.cssの冒頭に テーマの詳細 を記述します style.css /* Theme Name: Twenty Fifteen Child Template: twentyfifteen */ Theme Name: 子テーマのテーマ名 Template: 親テーマのディレクトリ名
- 50. style.css /* Theme Name: Twenty Fifteen Child Template: twentyfifteen */ @import url( '../twentyfifteen/style.css' ); 親テーマのスタイルシートを読み込みます スタイルシートの読込3 @import で親テーマの スタイルシートを読み込み
- 51. style.css /* Theme Name: Twenty Fifteen Child Template: twentyfifteen */ @import url( '../twentyfifteen/style.css' ); 親テーマのスタイルシートを読み込みます スタイルシートの読込3 @import で親テーマの スタイルシートを読み込み この書き方は 今は 非推奨です
- 52. 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' ); } functions.phpに親テーマの スタイルシートを読み込むコードを記述 スタイルシートの読込3 コピペでOK！ 今は コレ！！
- 53. functions.php functios.phpの始めに 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
- 54. 子テーマのスタイルシートが読み込まれない場合 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' ) ); }
- 55. 子テーマのスタイルシートが読み込まれない場合 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を 追加
- 58. 管理画面からアップロードする場合1 フォルダ my-theme my-theme.zip Z I P 子テーマのフォルダをZIP 形式に圧縮
- 59. 管理画面の 外観 > テーマ > 新規追加 「 テーマのアップロード 」で zipファイルを選択 今すぐ インストール zip ファイルを 選択 親テーマがインストールされていないときは 自動的にインストールされる
- 61. 子テーマを有効化5 管理画面の 外観 > テーマ > でテーマを選んで有効化 子テーマが 表示された！
- 62. 子テーマの カスタマイズ 04
- 63. 難易度 ★ ☆ ☆ ☆ ☆ リンクの色や 背景の色を 変えたい! CSSのカスタマイズ 1
- 70. style.css /* Theme Name: Twenty Fifteen Child Template: twentyfifteen */ .entry-title a { color: #ab0d0d; } コピペで OK！ 変更内容を子テーマのstyle.cssに記述します
- 72. 難易度 ★ ★ ★ ☆ ☆ 投稿日を 削除したい！ テンプレートファイルの カスタマイズ 1 2
- 74. Twenty Fifteen の 投稿日を削除する場合 ① Firebugで 編集したい箇所の class名を確認 <span class="posted-on">
- 78. 投稿日が 消えた！
- 80. 難易度 ★ ★ ★ ★ ★ 投稿日の 表示位置を 変更したい！ テンプレートファイルの カスタマイズ 2 3
- 87. 親テーマのテンプレートファイル（content.php）を 子テーマのフォルダにコピー コピー content.php content 子テーマ content.php content 親テーマ
- 90. よく使うテンプレートタグ WordPress Codex 日本語版 https://wpdocs.osdn.jp/テンプレートタグ サイトのタイトルを表示 <?php bloginfo( 'name' ); ?> サイトのキャッチフレーズを表示 <?php bloginfo( 'description' ); ?> 投稿のタイトルを表示 <?php the_title(); ?> 投稿日を表示 <?php echo get_the_date(); ?> 投稿のカテゴリーを表示 <?php the_category(); ?> 投稿のタグを表示 <?php the_tags(); ?> 投稿のパーマリンクを出力 <?php the_permalink(); ?> サイトのURLを出力 <?php echo home_url(); ?> 投稿の内容を表示 <?php the_content(); ?> 投稿の抜粋を表示 <?php the_excerpt(); ?> 投稿のアイキャッチを表示 <?php the_post_thumbnail(); ?> テーマディレクトリのURLを出力 <?php echo get_template_directory_uri(); ?>
- 94. テーマを構成するテンプレートファイル WordPress Codex 日本語版 https://wpdocs.osdn.jp/テーマの作成 style.css index.php single.php page.php header.php footer.php sidebar.php comments.php screenshot.png functions.php スタイルシート メインのテンプレート 投稿ページのテンプレート 固定ページのテンプレート ヘッダーのテンプレート（ get_header()で読み込み ） フッターのテンプレート（ get_footer()で読み込み ） サイドバーのテンプレート（ get_sidebar()で読み込み ） コメント欄のテンプレート（ comment_form()で読み込み ） テーマのスクリーンショット（ 1200px × 900px以内 ） 関数（ PHPの命令文 ）用のファイル 必須 必須
- 95. 読み込まれるテンプレートファイルの順番 WordPress Codex 日本語版 https://wpdocs.osdn.jp/テンプレート階層 ページの種類 404ページ 検索結果ページ カテゴリーアーカイブ タグアーカイブ 作成者アーカイブ 日付アーカイブ 投稿ページ 固定ページ フロントページ category- $slug.php tag-$slug.php author- $nicename.php index.php category.php tag.php author.php date.php single-post.php page-$id.php front-page.php category-$id.php tag-$id.php author-$id.php page-$slug.php 404.php search.php archive.php single.php page.php home.php 優先順位高 い 低 い
- 100. 1200px × 900px 以内 テーマを有効化したときのキャプチャ screenshot.pngを追加1 1200px 900px screenshot.png
- 102. style.css style.cssの記述を追加4 /* Theme Name: Twenty Fifteen Child Template: twentyfifteen Theme URI: テーマのサイトURI Author: テーマの作者名 Author URI: テーマ作者のサイトURI Description: テーマの説明 Version: テーマのバージョン License: ライセンス License URI: ライセンスのURI Tags: テーマのタグ */ 追加
- 108. まとめ