RESPONSIVE 子テーマ導入

この記事で紹介しているのは 2013年11月まで使用していたテーマの子テーマについてです
現在は自作したWordPressのテーマ Celtis-one を使用しています (^^)

Celtis-oneテーマは、ブログやギャラリーサイトの構築に向いている、日本語版の見やすくてシンプルでモダンなレスポンシブテーマです

デザインはシンプルですが、機能は満載なのでよろしければ試してみてください (^^)

 


 

子テーマ

会社用のホームページの作成を始める前に大切なことがありました。
子テーマの導入です。
これをやっておかないと後で苦労します。

WordPressのテーマには、バージョンアップ機能があり、新しい機能が追加されたり、不具合の修正がされた場合には、管理画面(ダッシュボード)の使用テーマのところにバージョンアップの案内が表示されます。
バージョンアップ案内のリンクをクリックすると自動的にバージョンアップが行われます。

テーマをバージョンアップしてしまうとテーマ内のプログラムコードをカスタマイズしている場合には、そのカスタマイズが元に戻されてしまいます。

当初は、カスタマイズなんてまだまだ先の話と思っていたのですが、直に必要となってしまったので、真っ先に子テーマの導入は行なっておくべきです。

子テーマとは、親テーマの機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマのことです。
親テーマのコードには手を加えずにスタイルやレイアウトを変更することが出来て、親テーマがアップデートされても子テーマの変更は保持されます。

一番シンプルな子テーマとしては、style.css ファイルを一つだけのものです。CSSの設定をカスタマイズすることで表示されるスタイルを変更することが出来ます

 

子テーマのインストール

ThemaID Responsive の子テーマのインストール方法は下記サイトに説明があります
http://themeid.com/forum/topic/3759/responsive-child-theme-installation/

How to install Responsive Child Theme?

Installing a Child Theme is a breeze and just the same as any other (Parent Theme).

Step One:

Download our Child Theme example. Save file as, don’t open (extract the zip file).

Step Two:

Now that your Child Theme is saved locally (your computer) go to WordPress Dashboard navigate to Appearance > Themes

clip_image001

Step Three:

Navigate to Install Themes

clip_image002

and now click on “upload” link

clip_image003

Step Four:

This is your final step where we are uploading the Child Theme you have previously saved on your computer. Choose file and click on “Upload Now”

clip_image004

clip_image005

Now all we need to do is to activate our Child Theme once the zip file has been uploaded:

clip_image006

All set and this is how to install and activate Responsive Child Theme.

インストール手順

  1. 子テーマのZipファイルをPCにダウンロード
  2. WPダッシュボードの外観→テーマ→テーマのインストールタブを選択
  3. アップロードのリンクをクリック
  4. ダウンロードしていたZipファイルを指定して、今すぐインストールをクリック

インストール終了後、Responsive Child Theme を有効化します

FTPでテーマフォルダを見ると子テーマが出来ているのが確認できます
wp-content/themes/responsive-child-theme

子テーマに新しい style.css が出来ているので、このCSSファイルを修正すればフォント等のスタイルを変えることが出来ます。

子テーマのしくみ

子テーマとして認識させるためには、必ず記述しなければならない項目が2つあります。
Theme Name と Template です。
Theme Name は、子テーマの名称です。
Templete は、親テーマのフォルダ名(ディレクトリ名)で、親テーマの場所を示しています

ちなみに新しいCSSは次のような記述がされています
Theme Name: Responsive Child Theme
Template: responsive

他にも Version, Author, Licence 等が記述されています

次に @import url(‘../responsive/style.css’); で親のCSSを読み込んでいます。
親テーマのCSSファイルをインポートせずに全て書き直すことも出来ますが、基本的には、親テーマをインポートしてカスタマイズしたい箇所のidやclassを指定し直します
CSSで指定されるスタイルは、後から読み込まれる子テーマでの指定が適用されます

他にも @media でデバイスごとの定義がされているようですが、現時点では内容は理解できていないのでそのままとします

子テーマについて詳しく知りたい場合は、このあたりを参考にしてください

clip_image001[5]

子テーマ – WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

 

これでカスタマイズするための準備は出来ました。
次はこそは、トップページの構成についてです。

関連コンテンツ


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss