ステップアップ!WordPress中級

コントローラーを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
子テーマの特長は親テーマのテンプレートを継承しつつ、独自のカスタマイズを行えることです。実際にテンプレートが引き継がれる仕組みやそこからカスタマイズする方法を解説します。
講師:
14:28

字幕

このレッスンでは 子テーマを使ったテーマの カスタマイズ方法について学習していきます 最初にスタイルシートを使って デザインをカスタマイズする方法を紹介します 例えば このサイト名の文字の色を 変更してみましょう 最初に ブラウザのインスペクターを使って html を確認します この h1 の中にある a タグが このタイトルを表示している部分です スタイルを見ると このスタイルで色を 変更していることが分かります サイトヘッダー h1 a サイトヘッダー h2 a というところですね この CSS を上書きしていけば いいことが分かります それではエディターで 実際に変更してみましょう 子テーマの中に作成した スタイル CSS を開きます 今確認した サイトヘッダー h1 a それからサイトヘッダー h2 a を 書いてこの中にスタイルを 記述していきます 文字の色を 赤にしてみたいと思います この様にすれば 子テーマの CSS で上書きすることができます そして上書きする場合には 必ず impotant 属性を付ける様にしましょう important が付いている方が 優先して スタイルが適用されます これによって 最初にこのアットインポートで Twenty Twelve の スタイルを読み込んで その後に 同じこの要素に対して別の色を より重要度の高い 優先度の高い状態で 適用することで 上書きすることができます アップロードができたら 画面を確認してみます はい文字の色が変わりました この様にスタイルを 変更したいだけであれば 適用したい要素或いは 上書きしたいクラスに対して 子テーマのスタイル CSS で important 属性を使って 上書きしていくことができます 次に 新しいテンプレートファイルを子テーマに 追加する方法を確認してみます 一度サイトを表示します 今カテゴリーのページを開くと Twenty Twelve の category.php を使ってこの様に カテゴリーページが表示されるのが分かります 特定のカテゴリー ここでは Day というカテゴリーだけを 別のテンプレートで表示したい場合に どの様にすれば良いのかを 紹介したいと思います それではまたエディターに移動します 最初に 親である Twenty Twelve の テンプレートファイルの構成を確認してみます 今 category.php というのがあります 個別のカテゴリー毎に ページを用意したい場合には category-slag.php で そのスラッグ専用の カテゴリーページが作成できます ですので今 Day というカテゴリーの テンプレートファイルを作るために まず Day のカテゴリースラッグを 確認したいと思います ブラウザに移動して 管理画面を開きます 投稿カテゴリーから Day というカテゴリーのスラッグは day 小文字の day であることが分かりますので 新しいカテゴリスラッグ php を 子テーマに用意してみたいと思います 子テーマのフォルダの中に 新規ファイルで category-day.php を作成します 作成できたら ファイルを開いて編集していきます ここでは 親の Twenty Twelve の category.php を 元に作っていきたいと思うので まず category.php のソースコードをコピーして category-day に貼り付けます 最初に 不要な部分を削除していきます はいこれで category-php の基本的な 構造レイアウト構造の部分が category-day の方にも作成できました 後はこの中に自由に このスラッグ用の テンプレートを作成していけば いいということになります ここでは単純にカテゴリー名だけを 表示してみたいと思います single_cat_titleという テンプレートタグは今選択されている カテゴリーのアーカイブページ でのカテゴリー名を 表示するタグです 例えばこんな風に 新しいテンプレートファイルを作成して これで表示を確認してみましょう サイトに移動します カテゴリーの Day という カテゴリーのアーカイブページを開くと 今作成したテンプレートの内容が 表示されました 他のカテゴリーを選択すると はい 親のテーマである Twenty Twelve の category.php が そのまま使われています はい 今の動きというのは カテゴリースラッグはこの子テーマの 中にある category-day.php が作られ Twenty Twelve の category.php はその他のカテゴリーの 時に使われたということです テンプレートはテンプレート階層というのがあり 使われるテンプレートの優先順位があります category.php よりも category-slug.php の方が 優先順位が高いので Day というカテゴリーではこの category-day.php が使われるのですが 子テーマと親テーマでは 同様に子テーマの方が 優先順位が高いんですね なので子テーマの中でまず使える テンプレートファイルがあるかどうかを WordPress は判断します category-day に関しては この category-day.php があるので こちらのテンプレートが使われます しかし他のカテゴリーページを 表示しようとした時にこの子テーマの中には 他のカテゴリー用の category.php は存在しませんので 親である Twenty Twelve の方にある category.php を WordPress が自動的に使用して表示しているという そういうロジックになっています それでは 親のテーマフォルダー内にある テンプレートファイルと同じファイルを 子テーマの中に作成した場合には どの様な表示になるのでしょうか 一度サイトを表示します 今このフッターには WordPress の サイトへのリンクが貼られていますが このフッターの表記を変更してみましょう エディターで 子テーマのフォルダーの中に footer.php を作成します footer.php を編集します footer.php は Twenty Twelve の 中にも存在します これですね このソースを コピーして使い回したいと思います 不要な所を削除して はい ここに新しいコードを 記述していきます コピーライトを表記するようにしたいと思います はいできました それでは保存をしてサイトで 表示を確認をしてみます リロードします はい子テーマの方に作成した footer.php の表記になりました 他の画面に移動しても はい 子テーマの footer.php が使われています こうですね 同じテンプレートファイルが 子テーマと親のテーマに存在する場合 WordPress は自動的に子テーマの方を 優先して表示するようになります ですので 子テーマの方で 親にあるテンプレートファイルを 作っておけばそのテンプレートファイルで 上書きカスタマイズすることが できるということですね それでは最後に ブログインフォのテンプレートディレクトリーの 動きについて確認したいと思います footer.php に 新しい記述を書いていきます ブログインフォの テンプレートディレクトリーは 自分のテーマのフォルダーまでのパスを 表示してくれるという便利な テンプレートタグです このテンプレートディレクトリーが 子テーマで使用した場合に どのパスを表記するのかというのを ちょっと確認してみたいと思います はいサイトで表示を確認してみます テンプレートディレクトリーは wp-content/thmes/twentytwelve となるということで ブログインフォテンプレート ディレクトリーは 親のテーマフォルダーへの パスを表記します ちょっと不思議なんですが親の テーマのフォルダーを開くんですね なので親のテーマの中にある jsjava ディスクファイルとか或いは画像ファイル といったものはそのままブログインフォ テンプレートディレクトリーのパスで 読み込んでくることができます それでは 子テーマのフォルダーまでのパスを 表示する為にはどうしたらいいのかというと スタイルシートディレクトリーを使うと 子テーマのディレクトリーを 表示することができます 新しい記述を書いていきます bloginfo, stylesheet directory はい書けたら保存をして上書きをして 移動します stylesheet_directoryは wp-content/theme/child-theme となるということで スタイルシートディレクトリーの方を 指定すれば子テーマの ディレクトリーまでのパスを 表示することができます この仕組みによってですね 親のテンプレートファイルを そのまま使う場合に 親のテンプレートファイルで書かれている blog info テンプレートディレクトリーの パスはそのまま正しいパスになります そして逆に今度子テーマの中に用意した 子テーマでのみ使う画像ですとか java スクリプト等は スタイルシートディレクトリーを 使うことによって パスを表示して読み込むことが できるということです このレッスンでは 実際に子テーマをカスタマイズしていく 方法について学習しました

ステップアップ!WordPress中級

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

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

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

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

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