SlideShare a Scribd company logo
1 of 24
松戸WordPress部
2015年2月18日
はじめてのオリジナルテーマ制作
もっと
名前 三柴 誠一郎
職業 フリーランス(34デザインねっと)
仕事 Web制作のディレクション、デザイン、コーディング
経歴 サラリーマン(IT業界)17年 ⇒ ニート9ヶ月 ⇒ フリーランス1年
趣味 カメラ、 旅、 料理、 滝めぐり、 ダムめぐり、 城めぐり
特徴 絶望的に方向音痴
自己紹介
①オリジナルテーマを作るために
②スターターテーマ(_s)を使ってみよう
③テンプレート階層と優先順位を理解しよう
④オリジナルテーマを作ってみよう
本日のテーマ
①オリジナルテーマを作るために
②スターターテーマ(_s)を使ってみよう
③テンプレート階層と優先順位を理解しよう
④オリジナルテーマを作ってみよう
本日のテーマ
テーマファイルの作成場所
WordPressをインストールしたディレクトリ内
「wp-content」 > 「themes」
WordPressをインス
トールしたディレクトリ
テーマファイル
の作成場所
テーマファイル作成に必要なファイル
WordPressで「利用可能なテーマ」を作成するためには、最低限
index.php (テンプレートファイル)と、style.css (スタイルシート)
が必要です。
index.php (テンプレートファイル)
style.css (スタイルシート)
※とりあえずは、どちらのファイルも
 何も記述していなくてもOK!
管理画面で確認
必要なファイルがない場合「壊れて
いるテーマ」となってしまいます。
「新しいテーマ」が
追加されます。
※画像を表示させるには、
 screenshot.png が必要です。
準備は整った!!
手法
• テンプレートファイル(PHP)、スタイルシート(CSS)をひたすらコーディング
長所
• 細かいところまで自分の思い通り作れる
• 複雑なサイトも作れる
短所
• 時間がかかる
オリジナルテーマ制作のおもな手法①
スクラッチで制作する
手法
• 親テーマの変更したい部分を、子テーマに反映して修正
長所
• 親テーマの機能が利用できる
• 短期間で制作できる
短所
• 親テーマに依存してしまう
• functions.php の修正に慣れが必要
オリジナルテーマ制作のおもな手法②
親テーマをベースとして子テーマを作る
手法
• ダウンロードしたファイルをベースにコーディング
長所
• 制作に必要となるテンプレートファイルがそろっている
• 特に組み込まれている機能がなく自分の思い通り作れる
短所
• オリジナルのバージョンアップを継承しない
オリジナルテーマ制作のおもな手法③
スターターテーマ(_s)を利用する
①オリジナルテーマを作るために
②スターターテーマ(_s)を使ってみよう
③テンプレート階層と優先順位を理解しよう
④オリジナルテーマを作ってみよう
本日のテーマ
スターターテーマ(_s)とは
スタイルシート
style.css【必須】 テーマのスタイルシート
rtl.css 右から左に記述する言語用のスタイルシート
テーマ関数ファイル function.php WordPressの(管理画面・サイト)を制御します
テンプレートファイル
index.php【必須】 メインテンプレート
single.php 投稿ページの個別表示用テンプレート
page.php 固定ページの個別表示用テンプレート
他にも 404.php, archive.php, search.php, image.php などあります
モジュールテンプレート
header.php get_headre()で読み込まれる
footer.php get_footer()で読み込まれる
content.php get_template_part( ‘content’ ) で読み込まれる
他にも comments.php, content-single.php などなどあります
テーマ制作に必要となるテンプレートファイルが
あらかじめ用意されている!
入手方法
①テーマ名を入力
②クリック
Sass対応版はココを選択
以下にアクセス!
http://underscores.me/
ダウンロードされたファイル
テーマを反映する
[有効化]をクリック
※とてもシンプルな画面
 が表示されます
①オリジナルテーマを作るために
②スターターテーマ(_s)を使ってみよう
③テンプレート階層と優先順位を理解しよう
④オリジナルテーマを作ってみよう
本日のテーマ
テンプレート階層と優先順位
WordPressのページを表示するには、テンプレートを利用します。
ページの見栄えや操作性を良くするためには、複数のテンプレー
トを利用する必要があります。ページの種別によって使用されるテ
ンプレートと優先順位が決まっています。
テンプレート階層 検索
クリック!
テンプレート階層 - WordPress Codex
http://wpdocs.sourceforge.jp/テンプレート階層
一部を抜粋
ページの種別 優先順位 ← 高い 低い →
メインページ
(トップページ)
front-page.php home.php index.php
固定ページ ページテンプレート page-$slug.php page-$id.php page.php index.php
個別投稿ページ single-$posttype.php single.php index.php
カテゴリーアーカイブ category-$slug.php category-$id.php category.php archive.php index.php
カスタムタクソノミー
アーカイブ
taxnomy-$taxnomy-
$term.php
taxnomy-
$taxnomy.php
taxnomy.php archive.php index.php
検索結果ページ search.php index.php
404ページ 404.php index.php
①オリジナルテーマを作るために
②スターターテーマ(_s)を使ってみよう
③テンプレート階層と優先順位を理解しよう
④オリジナルテーマを作ってみよう
本日のテーマ
デモします
①スターターテーマ(_s)をダウンロードして適用
②よく使うプラグインをインストール
③functions.php を編集し管理画面をカスタマイズ
④テンプレートを編集しページをカスタマイズ
デモの流れ
ご清聴ありがとうございました
おわり

More Related Content

Viewers also liked

はじめてのカスタマイズ
はじめてのカスタマイズはじめてのカスタマイズ
はじめてのカスタマイズSeiichiro Mishiba
 
Word press をはじめたら覚えておきたい7つの事
Word press をはじめたら覚えておきたい7つの事Word press をはじめたら覚えておきたい7つの事
Word press をはじめたら覚えておきたい7つの事Seiichiro Mishiba
 
絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみた絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみたSeiichiro Mishiba
 
データベースと仲良くなろう
データベースと仲良くなろうデータベースと仲良くなろう
データベースと仲良くなろうSeiichiro Mishiba
 
とあるぼっち開発者の憂鬱とGit
とあるぼっち開発者の憂鬱とGitとあるぼっち開発者の憂鬱とGit
とあるぼっち開発者の憂鬱とGitSeiichiro Mishiba
 
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎Seiichiro Mishiba
 
カスタムフィールドを使ってハッピーになろう
カスタムフィールドを使ってハッピーになろうカスタムフィールドを使ってハッピーになろう
カスタムフィールドを使ってハッピーになろうSeiichiro Mishiba
 
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回Hitsuji
 
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編Hitsuji
 
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回Hitsuji
 
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回Hitsuji
 
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介kenji goto
 
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメSeiichiro Mishiba
 

Viewers also liked (15)

はじめてのカスタマイズ
はじめてのカスタマイズはじめてのカスタマイズ
はじめてのカスタマイズ
 
Word press をはじめたら覚えておきたい7つの事
Word press をはじめたら覚えておきたい7つの事Word press をはじめたら覚えておきたい7つの事
Word press をはじめたら覚えておきたい7つの事
 
絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみた絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみた
 
はじめてのGit
はじめてのGitはじめてのGit
はじめてのGit
 
データベースと仲良くなろう
データベースと仲良くなろうデータベースと仲良くなろう
データベースと仲良くなろう
 
とあるぼっち開発者の憂鬱とGit
とあるぼっち開発者の憂鬱とGitとあるぼっち開発者の憂鬱とGit
とあるぼっち開発者の憂鬱とGit
 
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
 
カスタムフィールドを使ってハッピーになろう
カスタムフィールドを使ってハッピーになろうカスタムフィールドを使ってハッピーになろう
カスタムフィールドを使ってハッピーになろう
 
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
 
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
 
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
 
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
 
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
 
CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
 
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ
 

Similar to もっとはじめてのオリジナルテーマ制作

Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~Keisuke Imura
 
WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?Takeaki Inoue
 
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜schoowebcampus
 
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜schoowebcampus
 
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜schoowebcampus
 
WordPress 運用前の初期設定
WordPress 運用前の初期設定WordPress 運用前の初期設定
WordPress 運用前の初期設定Shigeki Takai
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!FLOW web planning & design
 
一歩踏み込むWordPress
一歩踏み込むWordPress一歩踏み込むWordPress
一歩踏み込むWordPress正樹 平野
 
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろうWordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろうMignon Style
 
コード嫌いのためのDreamweaver デザインビューの極意
コード嫌いのためのDreamweaver デザインビューの極意コード嫌いのためのDreamweaver デザインビューの極意
コード嫌いのためのDreamweaver デザインビューの極意Mori Kazue
 
WordPress x Elementor を使ってみた話
WordPress x Elementor を使ってみた話WordPress x Elementor を使ってみた話
WordPress x Elementor を使ってみた話Mitsushige Ishiguro
 
静的HTMLファイルをWordPressのテーマにするワークショップ
静的HTMLファイルをWordPressのテーマにするワークショップ静的HTMLファイルをWordPressのテーマにするワークショップ
静的HTMLファイルをWordPressのテーマにするワークショップmasaya yamao
 
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜Mignon Style
 
WordBench熊本第3回勉強会
WordBench熊本第3回勉強会WordBench熊本第3回勉強会
WordBench熊本第3回勉強会Akinori Tateyama
 
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...Akira Tachibana
 
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~Akinori Tateyama
 
AgileJapan2012島根サテライト ワークショップ
AgileJapan2012島根サテライト ワークショップAgileJapan2012島根サテライト ワークショップ
AgileJapan2012島根サテライト ワークショップTakenori Takaki
 
エンジニアのプレゼンスライド作成入門
エンジニアのプレゼンスライド作成入門エンジニアのプレゼンスライド作成入門
エンジニアのプレゼンスライド作成入門Tomoaki Imai
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121Shohei Aoyama
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121Shohei Aoyama
 

Similar to もっとはじめてのオリジナルテーマ制作 (20)

Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
 
WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?
 
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
 
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
 
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
 
WordPress 運用前の初期設定
WordPress 運用前の初期設定WordPress 運用前の初期設定
WordPress 運用前の初期設定
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
 
一歩踏み込むWordPress
一歩踏み込むWordPress一歩踏み込むWordPress
一歩踏み込むWordPress
 
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろうWordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
 
コード嫌いのためのDreamweaver デザインビューの極意
コード嫌いのためのDreamweaver デザインビューの極意コード嫌いのためのDreamweaver デザインビューの極意
コード嫌いのためのDreamweaver デザインビューの極意
 
WordPress x Elementor を使ってみた話
WordPress x Elementor を使ってみた話WordPress x Elementor を使ってみた話
WordPress x Elementor を使ってみた話
 
静的HTMLファイルをWordPressのテーマにするワークショップ
静的HTMLファイルをWordPressのテーマにするワークショップ静的HTMLファイルをWordPressのテーマにするワークショップ
静的HTMLファイルをWordPressのテーマにするワークショップ
 
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
 
WordBench熊本第3回勉強会
WordBench熊本第3回勉強会WordBench熊本第3回勉強会
WordBench熊本第3回勉強会
 
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
 
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
 
AgileJapan2012島根サテライト ワークショップ
AgileJapan2012島根サテライト ワークショップAgileJapan2012島根サテライト ワークショップ
AgileJapan2012島根サテライト ワークショップ
 
エンジニアのプレゼンスライド作成入門
エンジニアのプレゼンスライド作成入門エンジニアのプレゼンスライド作成入門
エンジニアのプレゼンスライド作成入門
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 

もっとはじめてのオリジナルテーマ制作