WordPressをカスタマイズする前に子テーマを作っておく

WordPressテーマ「Gallery (TCD012)」
WordPressテーマ「Avalon (tcd040)」

子テーマについての前置き

WordPressはほとんどの方が既存のテーマから
お好みのものを選んで使用していらっしゃると思います。

テーマを初期状態のまま使うのももちろんアリ。

ですが、WordPressに慣れていくにつれて
もっとこうしたいのにな~っていう要求は膨らむもの。

そんな時「カスタマイズしてみようかな?」と思い立ちます。

カスタマイズ方法を検索で調べると
「CSSファイル」がどうとか「PHPファイル」がどうとかって
丁寧に説明されているサイトはたくさんあります。

でも、その説明を見てそのままカスタマイズに踏み入ると
おそらく「管理画面」→「外観」→「テーマの編集」から
直接テーマファイルを触ることになると思うんですね。

この方法が悪いとは言いませんが、
もしもテーマがバージョンアップされて
その都度新しいテーマファイルをインストールし直すとしたら
せっかくカスタマイズしたファイルが元に戻ってしまいます。

そのためにカスタマイズしたファイルのバックアップを取っておくのも1つの手。
でもいちいち張り替えるのめんどくさい・・・

そんな時に役立つのが「子テーマ」という機能です。

子テーマとは?

名前こそ聞いたことがあるけれど、特に調べることもなく
なぁなぁにしてしまっている方も多いのではないでしょうか。

「子テーマ」というのは
「親テーマ」があってこそ機能するテーマでして、その役割は

親テーマを触らずにカスタマイズを可能にすること」です。

親テーマはあなたが今お使いのテーマのことです。
そこに子テーマを新しく作成し、カスタマイズはすべて子テーマ内で行います。

point

  • カスタマイズの内容は親テーマより子テーマが優先されます。
  • 親テーマをアップグレードしても子テーマは変わりません。

元々テーマ内に追記CSSを書ける機能が備わっているものもありますが
そうでないテーマがほとんどですね。

なので、自分で追記CSSを書ける場所を作ろうというのが
カスタマイズ前に行なっておきたい「子テーマの作成」なんです。

CSSに限らず、PHPファイルもすべて子テーマ内に作成することができます。

小テーマを作成してみよう

小テーマを作成するといっても、テーマを自作するわけではありません。
カスタマイズは親テーマをベースに行なっていきましょう。

小テーマの作成は非常に簡単です。

FTPソフトやサーバーのファイルマネージャーなどで
テーマが格納されている階層を開きます。

/WordPressをインストールしたディレクトリ/wp-content/themes

WordPressnavi

同じ階層に以下の名前で新しいディレクトリ(フォルダ)を
作成します。

あなたが使用しているテーマ名-child

WordPressnavi

名前は何でもいいんですけど、
親テーマ名を入れておいた方がのちのち分かりやすいです。

作成したらそのディレクトリを開いておきましょう。

テキストエディタで「style.css」というファイルを作成します。

ファイル内には以下のように記載してください。

/*
Theme Name: 親テーマ名-child
Template: 親テーマ名
Author: あなたの名前
*/
 
@import url('../親テーマ名/style.css');

「Theme Name」と「Template」は必須項目です。
これを記述しないと子テーマとして認識されません。

「Author」は英数字で記載されると良いかと思います。

point

以下の記述を加えることによって親テーマのCSSをインポートしてくれます。

@import url(‘../親テーマ名/style.css’);

インポートせずに、親テーマのCSSをそのままコピペしてもかまいません。

コピペした場合、親テーマをベースとしてカスタマイズしやすいです。

インポートのコードを使う場合は変更したい箇所があれば
その都度書き足していくということになります。

先ほど作成したディレクトリ内にCSSファイルをアップロードします。

その他、カスタマイズする必要がありそうなPHPテーマファイルを
同時にアップロードしても良いと思います。

ただし、「function.php」だけはまだアップロードしないでください。
これについては後ほど記述します。

子テーマの反映を確認します。

「管理画面」→「外観」→「テーマ」を開くと子テーマの反映が確認できます。

WordPressnavi

子テーマを有効化し、今後はこのテーマファイルからカスタマイズを行います。

「管理画面」→「外観」→「テーマ編集」を開くと
画面右上に以下のような表示が出ます。

WordPressnavi

「function.php」の扱い方

function.phpは他のPHPファイルとは違い、
WordPressの機能などを指定するコアファイルです。
そのため慎重に扱う必要があります。

うっかり全角スペースを入れるだけでも
WordPressが表示されなくなったりするほど気まぐれです。

子テーマとして使用する際、
他のPHPファイルやCSSファイルが親テーマを「上書き」するのに対し
function.phpは親テーマへの「追加」として反映されます。

そのため親テーマのfunction.phpファイルをそのまま引っ張ってくると
画面真っ白け・・・などのエラーが発生してしまいます。

子テーマにfunction.phpを作成する場合、
名前はそのままで内容だけ以下のように書き換えてください。

<?php
 
/* 必要な記述はここに追記していきます */
 
?>

function.phpは親テーマへの「追加」として扱われるため
内容を変更する場合は親テーマを直接書き換える必要があります。

機能を追加したい場合は上記の方法で行なってください。

WordPressテーマ「BRIDGE(TCD049)」
WordPressテーマ「MAG(TCD036)」

こんな記事も書きました!

laptop-computer-1245981_1280

コピペで使えるCSSデザイン枠テンプレート

どシンプルなものからちょっと凝ったものまで、 CSSでスタイリングしたデザイン枠のテンプレートです...

MORE

desktop-2325627_1280

WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方

カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...

MORE

food-2940553_1280

ローディング・読み込み中の画像を簡単に作成できるツール

ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...

MORE

coffee-2446645_1280

ページ遷移時のフェード効果を実装するjQuery

リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。 今回新たに作成し...

MORE

background-2846221_1280

MacやiPhoneのスクショはめ込み画像を作る

そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...

MORE

cup-2884023_1280

名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...

MORE

computer-1185626_1280

CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた

アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」...

MORE

background-2850091_1280

CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...

MORE

home-office-569153_1280

コピペで使える固定ソーシャルボタンBOX

WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...

MORE

alarm-clock-2132264_1280

無料で簡単にロゴを作れるツール「LOGASTER」が斬新!

Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...

MORE

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

flower