Submit Search
Upload
もっとはじめてのオリジナルテーマ制作
•
2 likes
•
1,204 views
Seiichiro Mishiba
Follow
2015年2月18日:松戸WordPress部:もっとはじめてのオリジナルテーマ制作
Read less
Read more
Internet
Report
Share
Report
Share
1 of 24
Recommended
はじめてのオリジナルテーマ制作
はじめてのオリジナルテーマ制作
Seiichiro Mishiba
FoundationのSassを使いはじめた人と使いたいと考えている人へ
FoundationのSassを使いはじめた人と使いたいと考えている人へ
Seiichiro Mishiba
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
Takehiro Ichinohe
DDDモデリング勉強会 #7
DDDモデリング勉強会 #7
株式会社Jurabi
松戸WP部バックアップとリストア
松戸WP部バックアップとリストア
Seiichiro Mishiba
JavaScript04 jquery プラグインを使おう
JavaScript04 jquery プラグインを使おう
Yossy Taka
アジャイルサムライ~Pythonista道場 #PyLadiesTokyo 1周年記念パーティー 2015/10/24
アジャイルサムライ~Pythonista道場 #PyLadiesTokyo 1周年記念パーティー 2015/10/24
Shinichi Nakagawa
価値を見せる技術 #DevLOVE ベースボールからみる技術
価値を見せる技術 #DevLOVE ベースボールからみる技術
Shinichi Nakagawa
Recommended
はじめてのオリジナルテーマ制作
はじめてのオリジナルテーマ制作
Seiichiro Mishiba
FoundationのSassを使いはじめた人と使いたいと考えている人へ
FoundationのSassを使いはじめた人と使いたいと考えている人へ
Seiichiro Mishiba
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
Takehiro Ichinohe
DDDモデリング勉強会 #7
DDDモデリング勉強会 #7
株式会社Jurabi
松戸WP部バックアップとリストア
松戸WP部バックアップとリストア
Seiichiro Mishiba
JavaScript04 jquery プラグインを使おう
JavaScript04 jquery プラグインを使おう
Yossy Taka
アジャイルサムライ~Pythonista道場 #PyLadiesTokyo 1周年記念パーティー 2015/10/24
アジャイルサムライ~Pythonista道場 #PyLadiesTokyo 1周年記念パーティー 2015/10/24
Shinichi Nakagawa
価値を見せる技術 #DevLOVE ベースボールからみる技術
価値を見せる技術 #DevLOVE ベースボールからみる技術
Shinichi Nakagawa
はじめてのカスタマイズ
はじめてのカスタマイズ
Seiichiro Mishiba
Word press をはじめたら覚えておきたい7つの事
Word press をはじめたら覚えておきたい7つの事
Seiichiro Mishiba
絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみた
Seiichiro Mishiba
はじめてのGit
はじめてのGit
Seiichiro Mishiba
データベースと仲良くなろう
データベースと仲良くなろう
Seiichiro Mishiba
とあるぼっち開発者の憂鬱とGit
とあるぼっち開発者の憂鬱とGit
Seiichiro Mishiba
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
Seiichiro Mishiba
カスタムフィールドを使ってハッピーになろう
カスタムフィールドを使ってハッピーになろう
Seiichiro Mishiba
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
Hitsuji
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
Hitsuji
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
kenji goto
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ
Seiichiro Mishiba
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Keisuke Imura
WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?
Takeaki Inoue
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
WordPress 運用前の初期設定
WordPress 運用前の初期設定
Shigeki Takai
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
More Related Content
Viewers also liked
はじめてのカスタマイズ
はじめてのカスタマイズ
Seiichiro Mishiba
Word press をはじめたら覚えておきたい7つの事
Word press をはじめたら覚えておきたい7つの事
Seiichiro Mishiba
絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみた
Seiichiro Mishiba
はじめてのGit
はじめてのGit
Seiichiro Mishiba
データベースと仲良くなろう
データベースと仲良くなろう
Seiichiro Mishiba
とあるぼっち開発者の憂鬱とGit
とあるぼっち開発者の憂鬱とGit
Seiichiro Mishiba
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
Seiichiro Mishiba
カスタムフィールドを使ってハッピーになろう
カスタムフィールドを使ってハッピーになろう
Seiichiro Mishiba
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
Hitsuji
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
Hitsuji
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
kenji goto
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ
Seiichiro Mishiba
Viewers also liked
(15)
はじめてのカスタマイズ
はじめてのカスタマイズ
Word press をはじめたら覚えておきたい7つの事
Word press をはじめたら覚えておきたい7つの事
絶望的に方向音痴な僕が神社サイトを作ってみた
絶望的に方向音痴な僕が神社サイトを作ってみた
はじめてのGit
はじめてのGit
データベースと仲良くなろう
データベースと仲良くなろう
とあるぼっち開発者の憂鬱とGit
とあるぼっち開発者の憂鬱とGit
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
WordPress 勉強会@松戸 | テンプレートファイルとクエリ基礎
カスタムフィールドを使ってハッピーになろう
カスタムフィールドを使ってハッピーになろう
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
CSS の歩き方
CSS の歩き方
初心者でもすぐできる Wordpress バックアップのススメ
初心者でもすぐできる Wordpress バックアップのススメ
Similar to もっとはじめてのオリジナルテーマ制作
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Keisuke Imura
WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?
Takeaki Inoue
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
schoowebcampus
WordPress 運用前の初期設定
WordPress 運用前の初期設定
Shigeki Takai
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
一歩踏み込むWordPress
一歩踏み込むWordPress
正樹 平野
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
Mignon Style
コード嫌いのためのDreamweaver デザインビューの極意
コード嫌いのためのDreamweaver デザインビューの極意
Mori Kazue
WordPress x Elementor を使ってみた話
WordPress x Elementor を使ってみた話
Mitsushige Ishiguro
静的HTMLファイルをWordPressのテーマにするワークショップ
静的HTMLファイルをWordPressのテーマにするワークショップ
masaya yamao
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
WordBench熊本第3回勉強会
WordBench熊本第3回勉強会
Akinori Tateyama
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
Akinori Tateyama
AgileJapan2012島根サテライト ワークショップ
AgileJapan2012島根サテライト ワークショップ
Takenori Takaki
エンジニアのプレゼンスライド作成入門
エンジニアのプレゼンスライド作成入門
Tomoaki Imai
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
Similar to もっとはじめてのオリジナルテーマ制作
(20)
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
ゼロからのWordPress(第三回)〜テーマの構造、カスタマイズの基礎〜
WordPress 運用前の初期設定
WordPress 運用前の初期設定
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
一歩踏み込むWordPress
一歩踏み込むWordPress
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
コード嫌いのためのDreamweaver デザインビューの極意
コード嫌いのためのDreamweaver デザインビューの極意
WordPress x Elementor を使ってみた話
WordPress x Elementor を使ってみた話
静的HTMLファイルをWordPressのテーマにするワークショップ
静的HTMLファイルをWordPressのテーマにするワークショップ
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
WordBench熊本第3回勉強会
WordBench熊本第3回勉強会
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
AgileJapan2012島根サテライト ワークショップ
AgileJapan2012島根サテライト ワークショップ
エンジニアのプレゼンスライド作成入門
エンジニアのプレゼンスライド作成入門
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Prejob wordpress v2_1121
もっとはじめてのオリジナルテーマ制作
1.
松戸WordPress部 2015年2月18日 はじめてのオリジナルテーマ制作 もっと
2.
名前 三柴 誠一郎 職業 フリーランス(34デザインねっと) 仕事 Web制作のディレクション、デザイン、コーディング 経歴 サラリーマン(IT業界)17年 ⇒
ニート9ヶ月 ⇒ フリーランス1年 趣味 カメラ、 旅、 料理、 滝めぐり、 ダムめぐり、 城めぐり 特徴 絶望的に方向音痴 自己紹介
3.
①オリジナルテーマを作るために ②スターターテーマ(_s)を使ってみよう ③テンプレート階層と優先順位を理解しよう ④オリジナルテーマを作ってみよう 本日のテーマ
4.
①オリジナルテーマを作るために ②スターターテーマ(_s)を使ってみよう ③テンプレート階層と優先順位を理解しよう ④オリジナルテーマを作ってみよう 本日のテーマ
5.
テーマファイルの作成場所 WordPressをインストールしたディレクトリ内 「wp-content」 > 「themes」 WordPressをインス トールしたディレクトリ テーマファイル の作成場所
6.
テーマファイル作成に必要なファイル WordPressで「利用可能なテーマ」を作成するためには、最低限 index.php (テンプレートファイル)と、style.css (スタイルシート) が必要です。 index.php
(テンプレートファイル) style.css (スタイルシート) ※とりあえずは、どちらのファイルも 何も記述していなくてもOK!
7.
管理画面で確認 必要なファイルがない場合「壊れて いるテーマ」となってしまいます。 「新しいテーマ」が 追加されます。 ※画像を表示させるには、 screenshot.png が必要です。
8.
準備は整った!!
9.
手法 • テンプレートファイル(PHP)、スタイルシート(CSS)をひたすらコーディング 長所 • 細かいところまで自分の思い通り作れる •
複雑なサイトも作れる 短所 • 時間がかかる オリジナルテーマ制作のおもな手法① スクラッチで制作する
10.
手法 • 親テーマの変更したい部分を、子テーマに反映して修正 長所 • 親テーマの機能が利用できる •
短期間で制作できる 短所 • 親テーマに依存してしまう • functions.php の修正に慣れが必要 オリジナルテーマ制作のおもな手法② 親テーマをベースとして子テーマを作る
11.
手法 • ダウンロードしたファイルをベースにコーディング 長所 • 制作に必要となるテンプレートファイルがそろっている •
特に組み込まれている機能がなく自分の思い通り作れる 短所 • オリジナルのバージョンアップを継承しない オリジナルテーマ制作のおもな手法③ スターターテーマ(_s)を利用する
12.
①オリジナルテーマを作るために ②スターターテーマ(_s)を使ってみよう ③テンプレート階層と優先順位を理解しよう ④オリジナルテーマを作ってみよう 本日のテーマ
13.
スターターテーマ(_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 などなどあります テーマ制作に必要となるテンプレートファイルが あらかじめ用意されている!
14.
入手方法 ①テーマ名を入力 ②クリック Sass対応版はココを選択 以下にアクセス! http://underscores.me/
15.
ダウンロードされたファイル
16.
テーマを反映する [有効化]をクリック ※とてもシンプルな画面 が表示されます
17.
①オリジナルテーマを作るために ②スターターテーマ(_s)を使ってみよう ③テンプレート階層と優先順位を理解しよう ④オリジナルテーマを作ってみよう 本日のテーマ
18.
テンプレート階層と優先順位 WordPressのページを表示するには、テンプレートを利用します。 ページの見栄えや操作性を良くするためには、複数のテンプレー トを利用する必要があります。ページの種別によって使用されるテ ンプレートと優先順位が決まっています。 テンプレート階層 検索 クリック!
19.
テンプレート階層 - WordPress
Codex http://wpdocs.sourceforge.jp/テンプレート階層
20.
一部を抜粋 ページの種別 優先順位 ← 高い 低い → メインページ (トップページ) 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
21.
①オリジナルテーマを作るために ②スターターテーマ(_s)を使ってみよう ③テンプレート階層と優先順位を理解しよう ④オリジナルテーマを作ってみよう 本日のテーマ
22.
デモします
23.
①スターターテーマ(_s)をダウンロードして適用 ②よく使うプラグインをインストール ③functions.php を編集し管理画面をカスタマイズ ④テンプレートを編集しページをカスタマイズ デモの流れ
24.
ご清聴ありがとうございました おわり