Submit Search
Upload
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
•
Download as PPTX, PDF
•
33 likes
•
15,150 views
Takahiro Nakahata
Follow
2014/9/17にコワーキングスペース茅場町で開催された「ゼロから始めるWordPress勉強会」で使用した資料です。
Read less
Read more
Design
Report
Share
Report
Share
1 of 81
Download now
Recommended
10分間でわかるWordPressのファイル構成
10分間でわかるWordPressのファイル構成
Michiro Sakamoto
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Tasuku Otani
【de:code 2020】 Azure Red hat OpenShift (ARO) によるシステムアーキテクチャ構築の実践
【de:code 2020】 Azure Red hat OpenShift (ARO) によるシステムアーキテクチャ構築の実践
日本マイクロソフト株式会社
Azure DevOps Online Vol.3 - Inside Azure Pipelines
Azure DevOps Online Vol.3 - Inside Azure Pipelines
Kazushi Kamegawa
AlfrescoとSolr(中編)
AlfrescoとSolr(中編)
Ashitaba YOSHIOKA
Alfresco勉強会#28 alfresco 5.0の検索機能をみてみよう
Alfresco勉強会#28 alfresco 5.0の検索機能をみてみよう
Tasuku Otani
Przestrzeganie przepisów bezpieczeństwa i higieny pracy, ochrony przeciwpożar...
Przestrzeganie przepisów bezpieczeństwa i higieny pracy, ochrony przeciwpożar...
Dawid Bogocz
全社情報共有サイトへのAlfresco Community 5 導入事例紹介 - 第27回Alfresco勉強会
全社情報共有サイトへのAlfresco Community 5 導入事例紹介 - 第27回Alfresco勉強会
Ryota Watabe
Recommended
10分間でわかるWordPressのファイル構成
10分間でわかるWordPressのファイル構成
Michiro Sakamoto
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Tasuku Otani
【de:code 2020】 Azure Red hat OpenShift (ARO) によるシステムアーキテクチャ構築の実践
【de:code 2020】 Azure Red hat OpenShift (ARO) によるシステムアーキテクチャ構築の実践
日本マイクロソフト株式会社
Azure DevOps Online Vol.3 - Inside Azure Pipelines
Azure DevOps Online Vol.3 - Inside Azure Pipelines
Kazushi Kamegawa
AlfrescoとSolr(中編)
AlfrescoとSolr(中編)
Ashitaba YOSHIOKA
Alfresco勉強会#28 alfresco 5.0の検索機能をみてみよう
Alfresco勉強会#28 alfresco 5.0の検索機能をみてみよう
Tasuku Otani
Przestrzeganie przepisów bezpieczeństwa i higieny pracy, ochrony przeciwpożar...
Przestrzeganie przepisów bezpieczeństwa i higieny pracy, ochrony przeciwpożar...
Dawid Bogocz
全社情報共有サイトへのAlfresco Community 5 導入事例紹介 - 第27回Alfresco勉強会
全社情報共有サイトへのAlfresco Community 5 導入事例紹介 - 第27回Alfresco勉強会
Ryota Watabe
What is Rack Hijacking API
What is Rack Hijacking API
Nomo Kiyoshi
Alfresco Bulk Import toolのご紹介
Alfresco Bulk Import toolのご紹介
MoritakaSoma
今更ながらの「マイクロサービス」
今更ながらの「マイクロサービス」
Hideaki Tokida
CORS - Enable Alfresco for CORS
CORS - Enable Alfresco for CORS
Jared Ottley
Jose portillo dev con presentation 1138
Jose portillo dev con presentation 1138
Jose Portillo
dude wheres my domain admins v1.pptx
dude wheres my domain admins v1.pptx
Joel Leo
Share UIカスタマイズ Widget編
Share UIカスタマイズ Widget編
MoritakaSoma
HashiCorp Vault 紹介
HashiCorp Vault 紹介
hashicorpjp
TECHNIK FOTOGRAFII I MULTIMEDIÓW
TECHNIK FOTOGRAFII I MULTIMEDIÓW
Szymon Konkol - Publikacje Cyfrowe
Realmの暗号化とAndroid System
Realmの暗号化とAndroid System
Keiji Ariyama
ASTERIA WARPをもっと便利に使いこなすためのtips紹介
ASTERIA WARPをもっと便利に使いこなすためのtips紹介
ASTERIA User Group
Laravelの認証について
Laravelの認証について
Takeo Noda
TECHNIK FOTOGRAFII I MULTIMEDIÓW
TECHNIK FOTOGRAFII I MULTIMEDIÓW
Szymon Konkol - Publikacje Cyfrowe
TECHNIK FOTOGRAFII I MULTIMEDIÓW
TECHNIK FOTOGRAFII I MULTIMEDIÓW
Szymon Konkol - Publikacje Cyfrowe
Alfresco勉強会#28 メタデータテンプレート
Alfresco勉強会#28 メタデータテンプレート
Jun Terashita
ASTERIA WARP開発前に知っておくべき10の鉄則
ASTERIA WARP開発前に知っておくべき10の鉄則
ASTERIA User Group
ASTERIA徹底運用Tips
ASTERIA徹底運用Tips
ASTERIA User Group
TDDBC お題
TDDBC お題
Takuto Wada
今さら聞けないasteria warp運用の基礎 ファイナル
今さら聞けないasteria warp運用の基礎 ファイナル
ASTERIA User Group
なぜあなたのプロジェクトのDevSecOpsは形骸化するのか(CloudNative Security Conference 2022)
なぜあなたのプロジェクトのDevSecOpsは形骸化するのか(CloudNative Security Conference 2022)
Masaya Tahara
Wordpress 子テーマってなにさ
Wordpress 子テーマってなにさ
HOTTA SATOMI
はじめてのオリジナルテーマ制作
はじめてのオリジナルテーマ制作
Seiichiro Mishiba
More Related Content
What's hot
What is Rack Hijacking API
What is Rack Hijacking API
Nomo Kiyoshi
Alfresco Bulk Import toolのご紹介
Alfresco Bulk Import toolのご紹介
MoritakaSoma
今更ながらの「マイクロサービス」
今更ながらの「マイクロサービス」
Hideaki Tokida
CORS - Enable Alfresco for CORS
CORS - Enable Alfresco for CORS
Jared Ottley
Jose portillo dev con presentation 1138
Jose portillo dev con presentation 1138
Jose Portillo
dude wheres my domain admins v1.pptx
dude wheres my domain admins v1.pptx
Joel Leo
Share UIカスタマイズ Widget編
Share UIカスタマイズ Widget編
MoritakaSoma
HashiCorp Vault 紹介
HashiCorp Vault 紹介
hashicorpjp
TECHNIK FOTOGRAFII I MULTIMEDIÓW
TECHNIK FOTOGRAFII I MULTIMEDIÓW
Szymon Konkol - Publikacje Cyfrowe
Realmの暗号化とAndroid System
Realmの暗号化とAndroid System
Keiji Ariyama
ASTERIA WARPをもっと便利に使いこなすためのtips紹介
ASTERIA WARPをもっと便利に使いこなすためのtips紹介
ASTERIA User Group
Laravelの認証について
Laravelの認証について
Takeo Noda
TECHNIK FOTOGRAFII I MULTIMEDIÓW
TECHNIK FOTOGRAFII I MULTIMEDIÓW
Szymon Konkol - Publikacje Cyfrowe
TECHNIK FOTOGRAFII I MULTIMEDIÓW
TECHNIK FOTOGRAFII I MULTIMEDIÓW
Szymon Konkol - Publikacje Cyfrowe
Alfresco勉強会#28 メタデータテンプレート
Alfresco勉強会#28 メタデータテンプレート
Jun Terashita
ASTERIA WARP開発前に知っておくべき10の鉄則
ASTERIA WARP開発前に知っておくべき10の鉄則
ASTERIA User Group
ASTERIA徹底運用Tips
ASTERIA徹底運用Tips
ASTERIA User Group
TDDBC お題
TDDBC お題
Takuto Wada
今さら聞けないasteria warp運用の基礎 ファイナル
今さら聞けないasteria warp運用の基礎 ファイナル
ASTERIA User Group
なぜあなたのプロジェクトのDevSecOpsは形骸化するのか(CloudNative Security Conference 2022)
なぜあなたのプロジェクトのDevSecOpsは形骸化するのか(CloudNative Security Conference 2022)
Masaya Tahara
What's hot
(20)
What is Rack Hijacking API
What is Rack Hijacking API
Alfresco Bulk Import toolのご紹介
Alfresco Bulk Import toolのご紹介
今更ながらの「マイクロサービス」
今更ながらの「マイクロサービス」
CORS - Enable Alfresco for CORS
CORS - Enable Alfresco for CORS
Jose portillo dev con presentation 1138
Jose portillo dev con presentation 1138
dude wheres my domain admins v1.pptx
dude wheres my domain admins v1.pptx
Share UIカスタマイズ Widget編
Share UIカスタマイズ Widget編
HashiCorp Vault 紹介
HashiCorp Vault 紹介
TECHNIK FOTOGRAFII I MULTIMEDIÓW
TECHNIK FOTOGRAFII I MULTIMEDIÓW
Realmの暗号化とAndroid System
Realmの暗号化とAndroid System
ASTERIA WARPをもっと便利に使いこなすためのtips紹介
ASTERIA WARPをもっと便利に使いこなすためのtips紹介
Laravelの認証について
Laravelの認証について
TECHNIK FOTOGRAFII I MULTIMEDIÓW
TECHNIK FOTOGRAFII I MULTIMEDIÓW
TECHNIK FOTOGRAFII I MULTIMEDIÓW
TECHNIK FOTOGRAFII I MULTIMEDIÓW
Alfresco勉強会#28 メタデータテンプレート
Alfresco勉強会#28 メタデータテンプレート
ASTERIA WARP開発前に知っておくべき10の鉄則
ASTERIA WARP開発前に知っておくべき10の鉄則
ASTERIA徹底運用Tips
ASTERIA徹底運用Tips
TDDBC お題
TDDBC お題
今さら聞けないasteria warp運用の基礎 ファイナル
今さら聞けないasteria warp運用の基礎 ファイナル
なぜあなたのプロジェクトのDevSecOpsは形骸化するのか(CloudNative Security Conference 2022)
なぜあなたのプロジェクトのDevSecOpsは形骸化するのか(CloudNative Security Conference 2022)
Similar to UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Wordpress 子テーマってなにさ
Wordpress 子テーマってなにさ
HOTTA SATOMI
はじめてのオリジナルテーマ制作
はじめてのオリジナルテーマ制作
Seiichiro Mishiba
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
テーマ作成のアプローチ
テーマ作成のアプローチ
Seto Takahiro
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
Takehiro Ichinohe
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
Shinichi Nishikawa
WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?
Takeaki Inoue
nameless ある沼にDeepDiveした人のポートフォリオ
nameless ある沼にDeepDiveした人のポートフォリオ
c-mitsuba
WordPress — パーマリンクとクエリ
WordPress — パーマリンクとクエリ
Yusuke Hayasaki
初心者向けWordPress DB & Performance
初心者向けWordPress DB & Performance
Takayuki Miyauchi
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
2013年のWordBench神戸
2013年のWordBench神戸
BREN
WordPress アカンパターン
WordPress アカンパターン
Kazue Igarashi
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
Ojag naha vol13
Ojag naha vol13
Seiei Higa
Ojag naha vol13
Ojag naha vol13
hanachin
WordPressって何
WordPressって何
Kazue Igarashi
Similar to UnderScoreとbootstrapとsassでword pressのテーマをつくろう
(20)
Wordpress 子テーマってなにさ
Wordpress 子テーマってなにさ
はじめてのオリジナルテーマ制作
はじめてのオリジナルテーマ制作
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
テーマ作成のアプローチ
テーマ作成のアプローチ
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
「最新デフォルトテーマをひも解きながら、オリジナルテーマへとカスタマイズするヒントを学ぼう。」in ゆるゆるカフェ
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
WordPressのテーマ選び みんなどうしてますか?
WordPressのテーマ選び みんなどうしてますか?
nameless ある沼にDeepDiveした人のポートフォリオ
nameless ある沼にDeepDiveした人のポートフォリオ
WordPress — パーマリンクとクエリ
WordPress — パーマリンクとクエリ
初心者向けWordPress DB & Performance
初心者向けWordPress DB & Performance
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
2013年のWordBench神戸
2013年のWordBench神戸
WordPress アカンパターン
WordPress アカンパターン
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Ojag naha vol13
Ojag naha vol13
Ojag naha vol13
Ojag naha vol13
WordPressって何
WordPressって何
More from Takahiro Nakahata
設備と設備制御のプロトコルについて
設備と設備制御のプロトコルについて
Takahiro Nakahata
第2回環境制御におけるAI技術の活用に関する研究調査委員会 発表資料 スマートライト 中畑隆拓
第2回環境制御におけるAI技術の活用に関する研究調査委員会 発表資料 スマートライト 中畑隆拓
Takahiro Nakahata
勉強会動画配信方法とYouTubeチャンネル運営について語るMeetUp
勉強会動画配信方法とYouTubeチャンネル運営について語るMeetUp
Takahiro Nakahata
SWEETS with DALI勉強会
SWEETS with DALI勉強会
Takahiro Nakahata
進化する音声翻訳機
進化する音声翻訳機
Takahiro Nakahata
KNXによる映像連動のDALI照明制御とKNXのビジネスについて
KNXによる映像連動のDALI照明制御とKNXのビジネスについて
Takahiro Nakahata
今ある予算で考えます!AI-IoTショールームのススメ!
今ある予算で考えます!AI-IoTショールームのススメ!
Takahiro Nakahata
アップリンク吉祥寺KNXによる映像連動のDALI照明制御
アップリンク吉祥寺KNXによる映像連動のDALI照明制御
Takahiro Nakahata
第3回Control(制御)IoTLTオープニング資料
第3回Control(制御)IoTLTオープニング資料
Takahiro Nakahata
Instruction DALI IoT Kit
Instruction DALI IoT Kit
Takahiro Nakahata
IBM CloudとWatsonとFirebaseとNode-REDとKNXを使ってガチな設備制御をする方法
IBM CloudとWatsonとFirebaseとNode-REDとKNXを使ってガチな設備制御をする方法
Takahiro Nakahata
IoT皇居ラン
IoT皇居ラン
Takahiro Nakahata
第2回ControlIoTLTについて
第2回ControlIoTLTについて
Takahiro Nakahata
保守的な設備制御業界の人間だってクラウドサービスを使いたい!
保守的な設備制御業界の人間だってクラウドサービスを使いたい!
Takahiro Nakahata
オープンプロトコル(KNX/DALI)を利用した照明制御システムの紹介
オープンプロトコル(KNX/DALI)を利用した照明制御システムの紹介
Takahiro Nakahata
IoTLT放送部の紹介
IoTLT放送部の紹介
Takahiro Nakahata
KNXと機械学習・拡張現実・ロボットとつなげることで見える世界
KNXと機械学習・拡張現実・ロボットとつなげることで見える世界
Takahiro Nakahata
僕はIoT・設備制御系YouTuber
僕はIoT・設備制御系YouTuber
Takahiro Nakahata
第2回オープン設備制御研究会「さわって覚えるDALI制御」
第2回オープン設備制御研究会「さわって覚えるDALI制御」
Takahiro Nakahata
あかりサロン26「Light Design Control・2018欧州照明展示会最新レポート」
あかりサロン26「Light Design Control・2018欧州照明展示会最新レポート」
Takahiro Nakahata
More from Takahiro Nakahata
(20)
設備と設備制御のプロトコルについて
設備と設備制御のプロトコルについて
第2回環境制御におけるAI技術の活用に関する研究調査委員会 発表資料 スマートライト 中畑隆拓
第2回環境制御におけるAI技術の活用に関する研究調査委員会 発表資料 スマートライト 中畑隆拓
勉強会動画配信方法とYouTubeチャンネル運営について語るMeetUp
勉強会動画配信方法とYouTubeチャンネル運営について語るMeetUp
SWEETS with DALI勉強会
SWEETS with DALI勉強会
進化する音声翻訳機
進化する音声翻訳機
KNXによる映像連動のDALI照明制御とKNXのビジネスについて
KNXによる映像連動のDALI照明制御とKNXのビジネスについて
今ある予算で考えます!AI-IoTショールームのススメ!
今ある予算で考えます!AI-IoTショールームのススメ!
アップリンク吉祥寺KNXによる映像連動のDALI照明制御
アップリンク吉祥寺KNXによる映像連動のDALI照明制御
第3回Control(制御)IoTLTオープニング資料
第3回Control(制御)IoTLTオープニング資料
Instruction DALI IoT Kit
Instruction DALI IoT Kit
IBM CloudとWatsonとFirebaseとNode-REDとKNXを使ってガチな設備制御をする方法
IBM CloudとWatsonとFirebaseとNode-REDとKNXを使ってガチな設備制御をする方法
IoT皇居ラン
IoT皇居ラン
第2回ControlIoTLTについて
第2回ControlIoTLTについて
保守的な設備制御業界の人間だってクラウドサービスを使いたい!
保守的な設備制御業界の人間だってクラウドサービスを使いたい!
オープンプロトコル(KNX/DALI)を利用した照明制御システムの紹介
オープンプロトコル(KNX/DALI)を利用した照明制御システムの紹介
IoTLT放送部の紹介
IoTLT放送部の紹介
KNXと機械学習・拡張現実・ロボットとつなげることで見える世界
KNXと機械学習・拡張現実・ロボットとつなげることで見える世界
僕はIoT・設備制御系YouTuber
僕はIoT・設備制御系YouTuber
第2回オープン設備制御研究会「さわって覚えるDALI制御」
第2回オープン設備制御研究会「さわって覚えるDALI制御」
あかりサロン26「Light Design Control・2018欧州照明展示会最新レポート」
あかりサロン26「Light Design Control・2018欧州照明展示会最新レポート」
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
1.
_sとBootstrapとSassを使って WordPressのテーマを作る 2014年9月17日
ゼロから始めるWordPress勉強会 @コワーキングスペース茅場町 中畑隆拓
2.
_sとBootstrapとSassを使って WordPressのテーマを作る _sとBootstrapとSassと
テスト用データとThemeCheckを使っ て WordPressのテーマを作る
3.
自己紹介 「なかちょんブログ」で検索 http://blog.nakachon.com/
4.
やろうとおもった理由 • 今までオレオレ流で開発していたので、
必要な機能をその都度作っていた • 納品したらThemeChcekが入っていて、そ の後、声がかからなかった • 「いつかやらなきゃ!」と思ってるとず るずるいっちゃう
5.
説明 • Bootstrap
• Sass • _s • テスト用データ • ThemeCheck
6.
_s(アンダースコア)とは? http://underscores.me/
7.
_s(アンダースコア)とは? → テーマ開発の元となるテーマ
8.
説明 • Bootstrap(後藤さんが説明)
• Sass (小林さんが説明) • _s (自作テーマ用ベーステーマ) • テスト用データ→ サンプル記事 • ThemeCheck → テーマチェック
9.
今回やることのイメージ _s Bootstrap
Theme Check テスト用データ WordPressのテーマ Sass スタイルシートPHP テーマの編集
10.
流れ • テストデータの設定
• _sテーマの設定 • Bootstrap設定 • Sass設定 • style.scss • JSの設定( functions.php) • ナビメニューの設定 • レイアウト設定
11.
今日は、流れを説明することがメインです。 後でみなさんが開発するときに このスライドを見て
あ、ここのファイルを編集すればいいのか こういうふうにすればいいのか というようになればいいとおもっています
12.
_sについて勉強するなら このサイト! Gatespace's
Blog http://gatespace.jp/
13.
テストデータのインポート
14.
インポート用テストデータをダウンロード http://megumi-manuals.com/
15.
テストデータのインポート
16.
テストデータのインポート
17.
テストデータのインポート
18.
注意 ダウンロードしたファイルは ZIPファイルなので
解凍してからインポートしましょう test_data.zip → test-data-ja.xml
19.
テストデータのインポート
20.
テストデータのインポート
21.
テストデータのインポート
22.
テストデータのインポート
23.
テストデータのインポート
24.
_Sのインストール
25.
_sのインストール 英数字でテーマ名をいれる http://underscores.me/
26.
_sのインストール Sass用テーマもできてたのです が、今回は普通のテーマで
説明します。
27.
_sのインストール wp-content/themes フォルダにいれます。
28.
BootstrapのSass
29.
githubからBootstrap-sassをダウン ロード https://github.com/twbs/bootstrap-sass
30.
31.
必要なファイル
32.
assetsをテーマフォルダに移動
33.
style.scssをつくりましょう
34.
その前にテーマを切り替え
35.
_sを適用した最初の状態
36.
まずは、style.cssをコピーして style.scssにする
37.
Sassのコマンド >sass –watch
style.scss:style.css style.scssに変更があるとstyle.cssを上書きする
38.
Bootstrapのscssを読み込む
39.
style.scssにBootstrapのscss @import “assets/stylesheets/bootstrap”;
40.
すると......
41.
_sのstyle.cssには....
42.
_sのReset.cssを消しましょう
43.
すると...
44.
前はこう
45.
JavaScriptの読み込み
46.
functions.phpに記述します
47.
function.phpのdev_scripts()に記述
48.
メニューバーの設定
49.
WordPressのメニュー これを自分で設定するのはけっこう面倒!
50.
wp-boostrap-navwalker を使います。 https://github.com/twittem/wp-bootstrap-navwalker
51.
wp_bootstrap_navwalker.phpを移動 assets/incフォルダに移動するとよい
52.
functions.phpに追加 wp_bootstrap_navwalker.phpを 読み込む
53.
管理画面の外観メニューを設定
54.
そのままだとこういう表示
55.
header.phpを編集 Bootstrapの書き方と wp_bootstrap_navwalkerの書き方
56.
header.phpを編集
57.
メニューバーが設定された サブメニューもいけちゃう!
58.
レイアウトをつくる
59.
header.php
60.
classにcontainerを追加
61.
headerのレイアウト完了!
62.
header.php コンテンツ部分のレイアウト classにcontainerを追加
63.
コンテンツ部分のレイアウト完了!
64.
footer.php
65.
footer.php classにcontainerを追加
66.
footerのレイアウト完了!
67.
2カラム・レイアウトをつくる
68.
右側にサイドバーの2カラムにする
69.
index.php div id=“primary”のclassに、col-md-8を記載
70.
sidebar.php <div class=“col-md-4”>
</div>で囲う
71.
2カラムレイアウト完了!
72.
レイアウトの設定他のファイル • index.php
• page.php • single.php • archive.php ( divではなくsectionになっているので注意)
73.
おまけ
74.
WordPressのメニューの 色を変えたい!
75.
bootstrapの scssファイルを編集 Navbarのスタイルが書かれています
テーマフォルダ/assets/stylesheets /bootstrap/_variables.scss
76.
ThemeCheckプラグイン
77.
78.
テーマのチェックをしてくれます
79.
まとめ
80.
本日お話しした内容 • テストデータの設定
• _sテーマの設定 • Bootstrap設定 • Sass設定 • style.scss • JSの設定( functions.php) • ナビメニューの設定 • レイアウト設定 • おまけ
81.
本日の資料 • このスライド
http://www.slideshare.net/nakachong • 私が作ったテーマファイル (ちょっと追加されてます) http://goo.gl/t5Gv3s 質問&要望あったら連絡ください。 → ブログで書きます!(遅くなるかもしれませんが) http://blog.nakachon.com/
Download now