2.0 Released !

WordPressの子テーマとは?安全にカスタマイズを行う方法

WordPressにはカスタマイズを安全に行うために「子テーマ」と呼ばれるものを使うことができます。

子テーマとは?

通常のテーマ(親テーマ)と組み合わせて使うカスタマイズ用のテーマです。子テーマにより親テーマ自体には手を加えること無く、変えたい部分だけを上書きするような形でカスタマイズすることができます。

子テーマのイメージ

子テーマを使うメリット

親テーマをいじること無く、子テーマを通してカスタマイズすることには大きなメリットがあります。

子テーマに対してカスタマイズを行う

誤って重要なコードを消してしまう不安が軽減

直接これらのファイルのコードを編集すると、誤って重要なコードまで消してしまうかもしれません。子テーマを使っていれば、上書きする形でカスタマイズをしていくため、最悪子テーマのファイルを消したり、元に戻すことで修正ができます。

テーマのアップデート時にもカスタマイズ内容が残る

親テーマ内のファイルに直接手を加えてカスタマイズを行うと、テーマのアップデート(バージョンアップ)時に手を加えたファイルまで修正されてしまいます。つまり、せっかくカスタマイズした内容が消えてしまうのです。

テーマに更新があったときにカスタマイズ内容が消えてしまう

子テーマを用意して、上書きする形でカスタマイズをしていれば、親テーマが更新されたときにも子テーマのカスタマイズ内容が残ります。

テーマに更新があったときに子テーマがあれば内容が残る


子テーマをインストールしよう

ここからは子テーマをWordPressにインストールする方法を解説していきます。SANGOをご利用の方は下のボタンから専用の子テーマをダウンロードできます。

子テーマをダウンロード

子テーマのインストールの方法

親テーマと同じ手順でWordPressの管理画面からインストールすればOKです。アップロード時には、圧縮されたファイル(.zip形式)をそのまま選択しましょう。詳しくはこちらの記事を御覧くださいませ。

WordPressにテーマをインストールする方法WordPressにテーマをインストールする方法
親テーマも必須
親テーマが無ければ子テーマは働きません。

子テーマを有効化

これで親テーマと子テーマ両方がインストールされました。このうちの子テーマの方を有効化しましょう。子テーマが自動で親テーマの内容を読みに行ってくれます。


SANGOの子テーマでカスタマイズを行う方法

SANGO用の子テーマには、以下の2つのファイルが収録されています。

  • style.css
  • functions.php

style.css

このファイルにブログの見た目を変えるためのCSSを書いていきます。「CSSって何?」という方は下の記事にざっと目を通してみてください。きっと参考になるはずです。

初心者向けCSS入門:基本的な書き方を総まとめ!
初心者向けCSS入門:基本的な書き方を総まとめ!

このファイル内に記載されたCSSは、親テーマに上書きされて適用されていきます。編集はFTPソフトと呼ばれるものを使うと便利ですが、管理画面の「外観⇒テーマエディター⇒スタイルシート」から編集することもできます。

ファイルの冒頭に書かれているコードは消さずに、下に追記していきましょう。

functions.php

functions.phpにはテーマを制御する様々なコードを書いていきます。カスタマイズの本や記事を読むと「このコードをfunctions.phpに貼り付けましょう」というように書かれていることがよくあります。そんなときには、こちらのファイル内に記載していけばOKです。

関数を書く場所

その他のファイルをカスタマイズしたいときは

例えば、ブログのヘッダーのデザインを変えるためにheader.phpを編集する必要がでてきたとします。そんなときは、親テーマのheader.phpを子テーマに複製します。すると、親テーマのheader.phpは読み込まれず、子テーマ内のheader.phpが読み込まれるようになります。

つまり、親テーマ内のファイルは残したまま、子テーマの方で自由にファイルを編集できるというわけです。

MEMO

複製する際には子テーマ内にheader.phpという新規ファイルを作り、その中に親テーマのheader.phpの内容をまるっとコピペすればOKです。この作業にはFTPソフトが必要になるのでご注意ください。

【FileZillaの使い方】WordPressでFTPソフトを使おう
【FileZillaの使い方】WordPressでFTPソフトを使おう

71 COMMENTS

美咲 2019/07/12

ヘッダーアイキャッチの見出しの文字色を変えたいです

外観のテーマエディタやFTPで .header-image__headline.font { color: pink; } のようように打ってみましたが、ダメでした。 どのようにすればいいでしょうか?

回答を見る
mari 2019/06/30

子テーマにすると記事一覧のレイアウトが崩れてしまう

親テーマでは、記事一覧のレイアウトで、右側にウィジェットが表示されていたのですが、子テーマを有効化すると、記事の下に表示されてしまいました。CSS等は、何もいじっていないのですが、何か対策はありますでしょうか?

回答を見る
もも 2019/04/05

テーマの編集ボタンがありません。。。

初めまして。ブログ開設初心者です。子テーマ有効化にしました。その後、外観→テーマの編集ボタンを探しているのですが、見当たりません。 そもそもの設定に問題があるのでしょうか?

回答を見る
Ricola 2019/02/01

子テーマに書いたCSSが反映されない

初めまして、素敵なテーマで大変気に入っています。初Wordpressサイト作成で一番肝心なところで引っかかっています。親テーマインストール後に、小テーマを無事インストールし、順調にカスタマイズしていますが、公開しても親テーマのルックスが反映されてしまいます。キャッシュの問題でしょうか?何かアドバイス頂けましたらありがたいです。

回答を見る
テル 2018/10/17

子テーマのスタイルシートが反映されない

お世話になります。 子テーマに以下の記述をしていますが、反映されません。 デベロッパーツールで確認すると「theme1」の存在も確認出来ません。 子テーマでcss等を編集したら、すぐに反映されるものなんでしょうか? 時間がかかるものなんでしょうか? お手数おかけします。 よろしくお願いします。 @charset "UTF-8"; /* Theme Name: SANGO Child Theme U…

回答を見る
アキラ 2018/09/24

はじめまして! お世話になります。 .page1{ margin-top:30px; margin-bottom:30px; } を反映させたいんですが、どのようにすればいいでしょうか?? 子テーマに記載したのですが反映されません。

回答を見る
リエ子 2018/09/17

ステキなテーマを提供していただきありがとうございます! たいへん重宝しております。 可能でしたら教えていただきたいのですが、 サブディレクトリごとに子テーマを 設定することはできますか? (例) メインサイト(https://abc.com) └サブサイト(https://abc.com/123) メインサイトとサブサイトで 異なる子テーマを適用したいのですが、 インストール方法や設定などがあるん…

回答を見る
2018/09/09

こんにちわ。お尋ねします。 外観→テーマエディター→SANGO Child→スタイルシートに、 .post .entry-title{display: none;} と記載したのですが、このコードが反映されません。 子テーマは有効化してあります。 考えられる原因を教えてください

回答を見る
ヤマ 2018/08/22

回答お願いします。 質問1 テーマを選択するとき、sangoをカスタマイズすると、sango childがライブプレビューになり、逆もまた同じです。これはsangoとsango childはリンクできているのでしょうか? 質問2 sango でメインカラーを白、sango childでメインカラーを赤にしていると、sangoのカスタマイズをクリックしただけでウェブ上で白になり、childを開くと赤…

回答を見る
KEN 2018/07/25

すみません、教えてください。 トップ記事一覧のタイトル下に本文抜粋を入れたいと思い、子テーマ内に library/functions/sng-function.phpのファイルを設置して編集しましたが反映されませんでした。試しに親テーマを編集すると問題なく反映されました。 子テーマのサブディレクトリを反映させるには子テーマのfunctions.phpに何か追記する必要があるのでしょうか? 色々と調…

回答を見る
大島 早希 2018/07/11

いつも使わせていただき、ありがとうございます。 ビジュアル入力ではなく、テキスト入力をHTMLで行い、クロムの検証でHTMLを確認したところ、入力したときにはない、pタグがすべてのタグの前に挿入されています。 例えば、ならば、となっております。 このpタグを除去する方法はありますか? 教えていただけると助かります。

回答を見る
霧島もとみ 2018/06/29

カスタマイズの「追加CSS」はどこに保存されるのか

はじめまして。 子テーマ「SANGO Child」を使用し、カスタマイズの「追加CSS」のメニューからCSS編集を行っています。ホームページの表示に反映はされているのですが、sango-theme-childフォルダ内の「stlye.css」を開いてみたところ、このファイルは初期状態のままでした。 カスタマイズの「追加CSS」から編集した場合は、どこか別の場所に格納されるのでしょうか。ご教授いただ…

回答を見る
アニカブ 2018/06/20

こんにちわ。 サンゴのテーマを有効化しいろいろとデザインを変更しようとしているのですが、CSSを書いても全くデザインが反映されません。 まだこれと言って何かをいじっているわけではないのですがなぜなのでしょう...。 知識不足で申し訳ないのですが、対処方をご教授いただけますでしょうか。 ちなみに、以前サンゴのテーマを使ってサイトを作っていましたがその時は問題ありませんでした。

回答を見る
hirapa 2018/05/13

こんにちは。 子テーマのインストールについての質問です。 先に親テーマのインストールを完了させ、後から子テーマのインストールをしようとしたところ、「親テーマが見つかりません。「sango-theme」の親テーマをインストールしてください。」というエラーメッセージが表示され、子テーマが「外観」→「テーマ」に反映されません。そのため、子テーマを有効化することができません。 知識不足で大変恐縮なのですが…

回答を見る
KOJI 2018/05/01

こんにちは^^ 親テーマをインストールした後に子テーマをインストールし、現在、子テーマを有効化しています。 2点質問がございます。 1)親テーマで設定していた色の設定がすべて初期設定に戻ってしまいました。こういうものなのでしょうか? 2)子テーマのstyle.cssが反映されないです。ウィジェットタイトル前のアイコンを消す方法として記載されていた下記のコードを入力しましたが、反映されません(ブラウ…

回答を見る
sango愛用者 2018/04/26

いつもお世話になっています。 自分はサイドバーに色々な物を配置しているのですが、そのせいでトップページでサイドバーが長く不格好です。 トップページの記事数を調節できませんか? よろしくおねがいします。

回答を見る
えいぷりお 2018/03/24

お世話になります。 外観→テーマ編集→SANGO childを選択して、変更を加えても反映されないので、おかしいなぁと思っていたら、子テーマが有効化されていないことに気づきました。 しかし、子テーマを有効化すると、これまで表示されていた記事ページが表示されなくなり、エラーメッセージが出てしまいます。 解決方法を教えていただけますか?(今は子テーマの有効化をはずし、親テーマを有効化している状態です)

回答を見る
マサキ 2018/03/12

埋め込みコンテンツ(embed)の最大幅を変えたい

子テーマで、library-fanctionsの中のファイルたちがなぜか反映されないのですが、ディレクトリレベルで反映されるされないなどありますでしょうか。 /********************************* embedコンテンツの最大幅の指定 ***********************************/ if ( ! isset( $content_width ) …

回答を見る
ぺこ 2018/03/04

子テーマを削除したい

はじめまして。 お世話になっております。 子テーマでカスタマイズしていたのですが、 おかしくなってしまったので削除して再度インストールしたいのですが、 子テーマを削除するにはどういたら良いのでしょうか? 基本的な質問ですみません。

回答を見る
あきねこ 2018/02/19

はじめまして。 いつもお世話になっています。 子テーマを使用してカスタマイズをしていたんですが、テーマの編集に失敗し、子テーマを壊してしまったので一度削除して再インストールしましたがうまくいっているのか心配です。 FTPソフトを使って編集をしたいんですが、子テーマの中はstyle.cssとfunction.php、このほかに.DS_Storeの3つがあるんですが正常な状態なんでしょうか? 素人なた…

回答を見る
モコ 2018/02/09

初めまして。 質問失礼致します。 子テーマを反映したら、PCトップページの右にあるはずのサイドバーが記事の下になってしまいました。 どのような原因が考えられますか? お忙しいところ申し訳ございませんが、宜しくお願い致します。

回答を見る
totomo 2018/01/12

お世話になります。 先に親をインストールしてから 子テーマをインストールしたいのですが できません。 対応方法をご教示よろしくお願いいたします。

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン