Celtis-one 子テーマについて

カスタマイズのすすめ

Celtis-oneテーマを使用している方にカスタマイズを行うための子テーマを作成しました

Celtis-oneのデザインはシンプルですが、正直なところクールではありません (^^)

私は、デザインよりはプログラムが好きな人なのでHTML,CSSはどうも苦手です

そこでオシャレでクールなサイトをたくさん作って頂けれるようにカスタマイズのベースとなる子テーマを作成しました

子テーマとは

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

子テーマとは、親テーマの機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマのことです。

親テーマのコードには手を加えずにスタイルやレイアウトを変更することが出来て、親テーマがアップデートされても子テーマの変更は保持されます。

従って、カスタマイズする時には、子テーマを使用して行うことが鉄則です

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

子テーマのしくみ

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

ちなみに Celtis one child 子テーマの style.css は次のような記述がされています
Theme Name: Celtis one Child Them
Template: celtisone

次に @import url(‘../celtisone/style.css’); で親のCSSを読み込んでいます。

インポートせずに親テーマのCSSファイルを全て書き直すことも出来ますが、基本的には、親テーマをインポートしてカスタマイズしたい箇所に修正を加えていきます

注意:親テーマの style.css を import 文で読み込むと、直接記述してある場合より読み込みが若干遅れブラウザ表示で一瞬大きな文字等のチラツキ表示が出る場合があります
そのような場合は、親テーマの style.css を import で読み込まずに、子テーマの style.css ファイルにCSSの定義をコピーして貼り付けてしまえばチラツキはなくなります

注意:Celtis one 親テーマでは、IE7,8 用のレスポンシブ対応に respond.js を使用しているので、それように style.css からメディアクエリー記述部のみを抜き出して rwdstyle.css というファイルを作り読み込ませています
子テーマで style.css をカスタマイズする場合、メディアクエリー部に変更を加えたら忘れずに rwdstyle.css も修正して下さい

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

子テーマ – WordPress Codex 日本語版

Child-theme[3]

カスタマイズの準備

カスタマイズは、ローカル環境に XAMPP 等で WordPress の動作環境を構築して行うことがお勧めです

ちょっと古い記事ですが、この辺りを参考にローカル環境のWordPress を構築します

最近の情報は、検索すれば沢山見つかると思います

快適に作業できるようにすることが大事です

お気に入りのツール等を使って作業して下さい (^^)

子テーマのインストール

通常のテーマのインストールと同じ手順で行うことが出来ます

親テーマ、子テーマは、下記リンクページからダウンロードできます

WordPress テーマ : Celtis-one

インストール手順もそこに記載してありますが、子テーマをインストールする前に親テーマのインストールが必要です

インストール手順

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

この手順を親テーマ、子テーマの順に繰り返します

インストール終了後、Celtis-one Child テーマを有効化すれば、子テーマが動作します

カスタマイズ

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

お気に入りのエディタ等でCSSを編集します

確認はブラウザで行うことができます

少し古い記事なので、現状と若干変わっていますがこの辺りを参考にして下さい

functions.php プログラム等もカスタマイズしたいという場合には、NetBeans がお勧めです

この辺りを参考にして下さい

 テーマを作成する励みにもなりますので、オシャレな子テーマが出来たら、コメントして下さい。待ってまーす (^^)

子テーマでのカスタマイズに限界を感じたら、オリジナルテーマの作成もいいですよ。面白いし、勉強にもなります

 


まとめ記事紹介

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