Downloaded 71 times
Uploaded byMignon Style
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成＆カスタマイズ〜
2015年10月31日に開催されたWordCamp Tokyo 2015でのセッションスライドです。
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成＆カスタマイズ〜
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. WordPressが 大好きです！ Webデザイナー WordPressテーマ・プラグイン デベロッパー WordPress公式ディレクトリ テーマ「Chocolat 」 プラグイン「 MS Custom Login 」作者 WordPressスターターテーマ「 _s 」コントリビューター http://mignonstyle.com/ mignon_style mignonxstyle Mignon Style
- 9.
- 10.
- 11.
- 12.
- 13. とさか くちばし はね しっぽ しっぽ とさか くちばし はね 既存のテーマ 新しいテーマ 親テーマを 継承 親テーマ子テーマ WordPressでは既存のテーマを「親テーマ」 親テーマを受け継いだテーマを「子テーマ」と 言います このしくみを 「継承」と 言います
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. オススメ！ WordPressのテーマで使うCSSやPHPファイルは 文字コードを UTF-8形式（BOMなし） で保存します 無料のテキストエディタ AdobeBrackets Windows・Mac TeraPad サクラエディタ Windows mi CotEditor Mac テキストエディタ1
- 41.
- 42.
- 43.
- 44.
- 45. MyTheme テーマディレクトリ my-theme 既存のテーマ MyTheme テーマディレクトリ my-theme-child 自分のテーマ テーマの更新は「 ディレクトリ名 」と「テーマ名 」が 既存のテーマと一致しているかをチェックしてるので どちらかを違う名前にすればOK 既存のテーマ名を使用したいときは
- 46.
- 47. 子テーマの作り方 03 WordPress Codex 日本語版https://wpdocs.osdn.jp/子テーマ
- 48.
- 49. style.cssの作成2 style.cssの冒頭に テーマの詳細 を記述します style.css /* ThemeName: Twenty Fifteen Child Template: twentyfifteen */ Theme Name: 子テーマのテーマ名 Template: 親テーマのディレクトリ名
- 50. style.css /* Theme Name: TwentyFifteen Child Template: twentyfifteen */ @import url( '../twentyfifteen/style.css' ); 親テーマのスタイルシートを読み込みます スタイルシートの読込3 @import で親テーマの スタイルシートを読み込み
- 51. style.css /* Theme Name: TwentyFifteen 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を 追加
- 56.
- 57.
- 58. 管理画面からアップロードする場合1 フォルダ my-theme my-theme.zip Z IP 子テーマのフォルダをZIP 形式に圧縮
- 59. 管理画面の 外観 >テーマ > 新規追加 「 テーマのアップロード 」で zipファイルを選択 今すぐ インストール zip ファイルを 選択 親テーマがインストールされていないときは 自動的にインストールされる
- 60.
- 61. 子テーマを有効化5 管理画面の 外観 >テーマ > でテーマを選んで有効化 子テーマが 表示された！
- 62.
- 63. 難易度 ★ ☆☆ ☆ ☆ リンクの色や 背景の色を 変えたい! CSSのカスタマイズ 1
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70. style.css /* Theme Name: TwentyFifteen Child Template: twentyfifteen */ .entry-title a { color: #ab0d0d; } コピペで OK！ 変更内容を子テーマのstyle.cssに記述します
- 71.
- 72. 難易度 ★ ★★ ☆ ☆ 投稿日を 削除したい！ テンプレートファイルの カスタマイズ 1 2
- 73.
- 74. Twenty Fifteen の投稿日を削除する場合 ① Firebugで 編集したい箇所の class名を確認 <span class="posted-on">
- 75.
- 76.
- 77.
- 78.
- 79.
- 80. 難易度 ★ ★★ ★ ★ 投稿日の 表示位置を 変更したい！ テンプレートファイルの カスタマイズ 2 3
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 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(); ?>
- 91.
- 92.
- 93.
- 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 優先順位高 い 低 い
- 96.
- 97.
- 98.
- 99.
- 100. 1200px × 900px以内 テーマを有効化したときのキャプチャ screenshot.pngを追加1 1200px 900px screenshot.png
- 101.
- 102. style.css style.cssの記述を追加4 /* Theme Name: TwentyFifteen Child Template: twentyfifteen Theme URI: テーマのサイトURI Author: テーマの作者名 Author URI: テーマ作者のサイトURI Description: テーマの説明 Version: テーマのバージョン License: ライセンス License URI: ライセンスのURI Tags: テーマのタグ */ 追加
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.