ステップアップ!WordPress中級

子テーマを作る

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
実際にデフォルトのテーマを親に持つ子テーマを作成する方法を解説します。
講師:
08:47

字幕

このレッスンでは 子テーマの作り方について学習します それでは早速 子テーマを 作っていきたいと思います エディターで wp-content の中にある テーマフォルダを開きます 新しいテーマを作りますので 新規フォルダーを作成して 好きな名前を付けます フォルダーが作成できたら 開いて 新規ファイルを作成します スタイル CSS を作成します 通常のテーマを 作成する場合には スタイル CSS と index.php それからスクリーンショット png が 必要になりますが 子テーマを作る場合には index.php は必要ありません 一番最低限必要なものは スタイル CSS だけになります スクリーンショット png はそもそも 必ずなければいけないものではないので あった方がいいんですが 特になくても大丈夫です スタイル CSS を開きます 通常のテーマと同様に スタイルシートのコメントを使って テーマの情報を登録していきます テーマネームや テーマ URI を入れていきます それから Discription そして Author を入れます それから Version ここまでは普通のテーマを 作成する時と同じです 違うのがこの次に書く Template という パラメーターです この Template というパラメーターに 親になるテーマの フォルダー名 テーマフォルダー名を入力します 今回は Twenty Twelve というテーマの 子テーマにしたいので この twentytwelve というのを書きます 大文字と小文字を区別しますので 正確なフォルダー名を 入れるようにして下さい これで コメントを閉じて終了です 子テーマの作成はこれだけで完了です とても簡単ですね CSS に Template という一行を足すだけです それでは実際に管理画面で 確認をしてみます はい今 Twenty Twelve が 設定されているサイトになっています 管理画面のテーマに移動します 新しく今作成した 子テーマのサンプルテーマという テーマが追加がされています この様にスクリーンショット png がない 場合にはブランクで表示されますので 必ずしもなければいけない というわけではありません 唯 あった方が何のテーマだったかが 分かり易いので 作成しておくといいかなと思います それでは早速子テーマを 有効化してみます 子テーマのサンプルテーマが 有効化になりました この子テーマには親テーマの Twenty Twelve が必須ですということで 何が親のテーマになっているかというのも ここに分かります そして スタイル CSS を追加しただけ ですけれどもこの様に 親のテーマの機能を引き継ぐことができます ウィジェット メニュー そしてヘッダー背景 といった 親テーマが 設定している機能がデフォルトで 使える様になっています それでは実際にサイトの方を 確認してみましょう サイトが表示されました 今 CSS が全く反映されて いない様に見えます 実際にどの様な HTML に なっているのかを ウェブのインスペクターを 使って見てみましょう 出力されている HTML を 確認すると そうですねヘッダータグや ナビゲーションタグ等が 出ていますので Twenty Twelve のテンプレートファイルが 使用されていることが分かります 実際の画面自体は HTML は Twenty Twelve のテーマで 表示されています 詳細ページ等も HTML は Twenty Twelve になっています 唯ですね 子テーマにすると CSS スタイル CSS が 自動的に子テーマのものを 表示するようになります 先ほど作った子テーマの CSS が読み込まれています 親テーマのスタイル CSS は デフォルトでは読み込まれません その為に今この様な形の スタイルが全く適用されていない デザインになっています 一旦 Twenty Twelve の 状態にしたい場合には スタイル CSS からですね Twenty Twelve の CSS を読み込む様にすれば良さそうです エディターに移動します このテーマのスタイル CSS に アットインポートを使って 親テーマである Twenty Twelve の スタイル CSS を読み込む様にしてみます こうですね できたらアップロードして サイトで表示を確認してみます Twenty Twelve のデザインになりました この様にスタイル CSS を用意するだけで 簡単にあるテーマのコピーを 作成することができます もう一度エディターに移動すると この今作成した child-theme という 新しい子テーマは 今スタイル CSS だけがありますが ここに カスタマイズしていきたい テンプレートファイルを 追加していくことで 簡単に親テーマを元にして新しい テーマを作成していくことが できるということですね この様にすれば 元あるテーマを書き換えることなく そのテーマのカスタマイズを していくことができますので ぜひとも覚えておきたい テクニックだと思います このレッスンでは 子テーマの作成方法について 学習しました

ステップアップ!WordPress中級

このコースではWordPressのマルチサイトという機能を使って、通常では作るのが難しい本格的なウェブサイトの構築方法を解説します。 同機能を有効にする手順から実際にマルチサイトを使ってサイトを構築する方法、また本格的なウェブサイトを作るうえで役に立つ実践的なWordPressのカスタマイズ方法までを丁寧に説明します。

3時間24分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 2,990
発売日:2014年02月15日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。