Ver1.6 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ソフトを使おう

72 Comments

totomo

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

返信する
totomo

質問が下手ですいません。

親はインストールできました。
後から子テーマをインストールできません。

SANGO Child 親テーマが見つかりません。「sango-theme」の親テーマをインストールしてください。
と出ます。

また、親テーマが見つかりませんでした。この子テーマを利用する前に、親テーマ sango-theme をインストールしてください。

テーマのインストールが完了しました。

とも出ます。

よろしくお願いします。

返信する
totomo

外観ーテーマの編集で見たら
SANGO Child: スタイルシートを選択できました。

これって、無事にインストールできているということですね。

返信する
サルワカくん

おそらく出来ていると思います。
インストールの順番はどちらでも良いと思いますが、親テーマと子テーマ両方をインストールして、
子テーマの方を有効化すればOKです。

返信する
sangoユーザー

sangoの子テーマはどこからDL可能でしょうか?(BOOTHからは親テーマしかDLできないようです)

それとも子テーマ用のフォルダを切ってstyle.css、functions.phpファイルを自分で作成する必要がありますでしょうか?

返信する
モコ

初めまして。
質問失礼致します。

子テーマを反映したら、PCトップページの右にあるはずのサイドバーが記事の下になってしまいました。
どのような原因が考えられますか?

お忙しいところ申し訳ございませんが、宜しくお願い致します。

返信する
サルワカくん

ウィジェット設定で、サイドバーにウィジェットが配置されているかご確認頂けますか?
(参考:ウィジェットでの設定
もし、設定に問題がない場合には、確認のためにサイトURLを教えて頂けますと助かります。

返信する
モコ

ありがとうございます。

サイドバーにウィジェットは配置されています。
一度、すべてのウィジェットを外してみたのですが、変わらずでした。
親テーマの時は正常で、右側にサイドバーがあります。

URL送らせていただきます。宜しくお願い致します。

返信する
サルワカくん

拝見したのですが、私が確認した限り、右側に正常に表示されております。
・ブラウザのキャッシュは削除されましたか?
・レスポンシブ対応で、閲覧しているウィンドウのサイズが小さいと自動的に記事下に移動しますが(掲載するスペースがないので)、ウィンドウサイズが小さいということはありませんか?
・解決しない場合、閲覧ブラウザ(IEであればバージョンも)は何でしょうか。

返信する
モコ

ブラウザのキャッシュを削除したところ、正常に表示されました。
お手数をおかけして、申し訳ございません( ; ; )

SANGOとても使いやすいです。

ご丁寧にありがとうございましたm(__)m

あきねこ

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

返信する
サルワカくん

それは災難でしたね・・・。
style.cssとfunction.phpが入っていれば、正常な状態ですのでご安心ください(ちなみに.DS_storeは削除してしまってOKです)。

返信する
ぺこ

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

返信する
サルワカくん

①一度、SANGOの親テーマを有効にします(子テーマは停止)。
②その後、子テーマのサムネイルをクリックすると、削除ボタンが出るようになるはずです。

返信する
ぺこ

早速のご回答ありがとうございます。
無事削除できました。
ありがとうございました。

返信する
マサキ

子テーマで、library-fanctionsの中のファイルたちがなぜか反映されないのですが、ディレクトリレベルで反映されるされないなどありますでしょうか。

/*********************************
embedコンテンツの最大幅の指定
***********************************/
if ( ! isset( $content_width ) ) {
$content_width = 1024;
}

このようなカスタマイズをしたのですが・・・
親ファイルをいじると反映されるのですが、子テーマでは反映されませんでした。

返信する
サルワカくん

子テーマのlibrary内の「fanctions」は正しくはフォルダー名が「functions」ですが、
その部分は間違ってはいないでしょうか。
ご確認お願いします。

返信する
マサキ

フォルダ名は「functions」でした。
そのまま親フォルダをコピーしたので、構造的には同じだと思うのですが・・・

返信する
サルワカくん

あ、WordPressでは子テーマの関数ファイルは、ファイルごと上書きはできなかった気がします・・・。content_widthに関しては、子テーマのfunctions.phpに以下のようにコードを追加すれば上書きされるかと思います。
if ( ! isset( $content_width ) ) {
$content_width = ◯◯;
}

返信する
マサキ

丁寧にありがとうございます。
プロフィールの方に質問していた内容も同様の処理でうまくいきそうです。

返信する
えいぷりお

お世話になります。

外観→テーマ編集→SANGO childを選択して、変更を加えても反映されないので、おかしいなぁと思っていたら、子テーマが有効化されていないことに気づきました。

しかし、子テーマを有効化すると、これまで表示されていた記事ページが表示されなくなり、エラーメッセージが出てしまいます。

解決方法を教えていただけますか?(今は子テーマの有効化をはずし、親テーマを有効化している状態です)

返信する
サルワカくん

お世話になっております。
一度子テーマを削除して、こちらから子テーマをダウンロード、
その後再度子テーマをインストール&有効化してみて頂けますか?
それでもエラーメッセージが出る場合、その内容を教えて頂けると原因の究明ができるかと思います。

返信する
友人屋

超初心者なのですが、投稿したブログが、基本デザインのようにヘッダーアイキャッチの下に表示されず、Recent Postsや最近のコメント、メタ情報などが先頭(センター)にきてしまい途方にくれております。
どうすれば基本デザインにして運用できますでしょうか。

お忙しいところ、申し訳ありません。

返信する
友人屋

早速返信くださいましてありがとうございました。
おっしゃる通りでした。
この失敗でちょっとだけ理解が進みました。ありがとうございました。

返信する
お世話になりっぱなし

いつもお世話になっております。
小テーマを無事入れることができました。
アナリティクスのトラッキングコードをheader.phpに入れたいのですが、小テーマにはスタイルシートしかないことを知りました。
サルワカさんの【FileZillaの使い方】WordPressでFTPソフトを使おうを見ながら、小テーマにheader.phpファイルを入れる事ができる出来るのか!?というところまで来ました。

サーバーからPCへドラッグまでやりました。しかし、『対象のファイルは既に存在しています』上書きしますか?などと案内が出て、自動でテキストエディタが開かないのです・・・

そもそもの考え方が間違えているのでしょうか。

宜しくお願いいたします。

返信する
サルワカくん

analyticsのトラッキングコードは、外観⇒カスタマイズ⇒サイトの基本設定⇒「Google Analytics設定」から簡単に設定可能です!
子テーマでカスタマイズする必要はなしです。
FileZillaではダブルクリックするとファイルが開きます。上書きしますか?と出たら「はい」をクリックすればOKかと思います。

返信する
お世話になりっぱなし

サルワカさん!
先程質問いたしました『お世話になりっぱなし』です!!
出来ました(T_T)
小テーマにheader.php入りました!
賢くなった気分です(T_T)

有難うございました。
これからも精進します(^^)!

返信する
お世話になりっぱなし

そうだったのですね~!
かれこれ3時間ほど奮闘しておりました笑
早く質問させて頂けば良かったです笑笑

早々のご返答有難うございます。
これからも陰ながら応援しています!有難うございました(^^)

返信する
sango愛用者

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

よろしくおねがいします。

返信する
KOJI

こんにちは^^

親テーマをインストールした後に子テーマをインストールし、現在、子テーマを有効化しています。

2点質問がございます。
1)親テーマで設定していた色の設定がすべて初期設定に戻ってしまいました。こういうものなのでしょうか?

2)子テーマのstyle.cssが反映されないです。ウィジェットタイトル前のアイコンを消す方法として記載されていた下記のコードを入力しましたが、反映されません(ブラウザのキャッシュは削除しています)。対応方法を教えて頂けますでしょうか。


.widgettitle:before {
content: none!important;
}

お手すきの時にでもお返事頂ければ幸いです。よろしくお願いいたします。

返信する
サルワカくん

1点目はWordPressの仕様でそういうものですね・・・。
テーマと色のカスタマイズ情報などが紐付けられるため。

2点目は原因が分からないですね。子テーマが読み込まれていれば、
ウィジェット前のアイコンは消えるはずです。ちなみにどのウィジェットですか?

返信する
KOJI

お返事ありがとうございます。

1)WordPressの仕様なのですね。詳細設定のheadタグ内のコードが引き継がれていたので、色の設定もてっきり引き継がれると思っていました。

2)
>ちなみにどのウィジェットですか?
サイドバーのSANGOデフォルトの人気記事とカテゴリーのアイコンです。

返信する
サルワカくん

ブラウザでページのソースコードを確認してみて頂けますか?
sango-theme-child/style.cssを開けば、該当のCSSが書かれているかが分かります。
もしきちんと書かれているなら、CSSの文法や書く場所の間違い(他の{}などと入れ子になってしまっている等)、
書かれていないのであれば、やはりキャッシュが原因の可能性があります。
例えば、キャッシュプラグインが効いてしまっている可能性や、エックスサーバーのmod_page_speedにより
過去のCSSが読み込まれ続けている可能性があります。

返信する
KOJI

すみません。確認したところ、cssにpagespeedとあるので、
エックスサーバーのmod_page_speedが原因ぽいです。
解決できなければ、また再度コメントいたします。

非常に基本的なことに丁寧にお答えいただきありがとうございます。

hirapa

こんにちは。

子テーマのインストールについての質問です。

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

知識不足で大変恐縮なのですが、対処方をご教授いただけますでしょうか。

また、下記のメッセージが「外観」→「テーマ」の下部に表示されるため、子テーマのインストールは完了していると思われます。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
以下のテーマはインストール済みですが、足りない部分があります。

名前      説明
SANGO Child 親テーマが見つかりません。「sango-theme」の親テーマをインストールし
       てください。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

よろしくお願い致します。

返信する
サルワカくん

新Verのフォルダー名(zip解凍後のフォルダー名)はsango-themeになっていますか?この名前が異なると、認識されません。

返信する
hirapa

ご返答ありがとうございます。

ご教授頂いた通り、新Verのフォルダー名をsango-themeに直して、再度インストールをしたら、親テーマが正しく認識されました。

早速のご対応、ありがとうございました。
大変助かりました。

返信する
アニカブ

こんにちわ。

サンゴのテーマを有効化しいろいろとデザインを変更しようとしているのですが、CSSを書いても全くデザインが反映されません。

まだこれと言って何かをいじっているわけではないのですがなぜなのでしょう…。

知識不足で申し訳ないのですが、対処方をご教授いただけますでしょうか。

ちなみに、以前サンゴのテーマを使ってサイトを作っていましたがその時は問題ありませんでした。

返信する
サルワカくん

拝見したところ、追加されたCSSが反映されているようなのでブラウザのキャッシュの問題だと思います。(サーバー側でキャッシュの設定をしていることが原因の場合もあります)

返信する
アニカブ

無事解決できました。こんな初歩的なことにも対応していただきありがとうございます!

これからもSANGOを使っていきたいと思っているので、またトラブルがあった時には対応よろしくお願いします。

返信する
霧島もとみ

はじめまして。

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

カスタマイズの「追加CSS」から編集した場合は、どこか別の場所に格納されるのでしょうか。ご教授いただければありがたいです。よろしくお願いします。

返信する
サルワカくん

追加CSSはWordPressの標準搭載機能であり、テーマとは切り離されています。
追加CSSは、WordPressのデータベース(MySQL)に格納されます。

返信する
霧島もとみ

追加CSSが子テーマのCSS編集のことだと思っていたため、混乱してしまいました。ご回答ありがとうございました。

そこで追加CSSに記述していた内容を削除し、子テーマのstyle.cssに記述してみたところ、今度はその内容が反映されなくなりました。原因をググって探してみましたが当てはまるものは見つかりませんでした。子テーマを有効にしてはいるのですが・・・。何か考えられる原因があるでしょうか。

返信する
霧島もとみ

子テーマのCSSの内容が反映されました。慣れていないこともあり、焦り過ぎたようです。子テーマが反映されない時のこともサルカワさんの記事に書かれてあったのも後から見付けました。大変お騒がせしてしまい、すみませんでした。

返信する
大島 早希

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

返信する
大島 早希

教えていただき、ありがとうございました。
子テーマのfunctions.phpの書き換えをしてみたところ、woordpressの仕様であるタグが挿入されることはなくなりました。

返信する
KEN

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

返信する
サルワカくん

functions系ファイルの上書きはできません。
上書きをすると、テーマのアップデートにより問題が生じる可能性が非常に大きいからです。
じゃあどうするかというと、function() {~}の関数ごとに子テーマのfunctions.phpから上書きをします(知識がないと少しむずかしいかもしれません)。
関数系のファイルをそのまま上書きしたい場合には、今後のアップデートを諦めて、直接親テーマのファイルを編集するしかないですね。

返信する
KEN

早速ご回答を頂きありがとうございます。一度検討してみたいと思います。引き続きよろしくお願いいたします。

返信する
ヤマ

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

質問2
sango でメインカラーを白、sango childでメインカラーを赤にしていると、sangoのカスタマイズをクリックしただけでウェブ上で白になり、childを開くと赤になります。これは何のためですか?

返信する
ヤマ

親テーマのフロントページに、テキストにて、

こんにちわ

と入れたました。次に、
外観→テーマの編集→sango child を選択し、style.cssにて、

.yama{font-size:100px;}

と書き込みましたが、反映されません。
なぜですか?

返信する

こんにちわ。お尋ねします。

外観→テーマの編集→SANGO Child→スタイルシートに、

.post
.entry-title{display: none;}

と記載したのですが、このコードが反映されません。
子テーマは有効化してあります。

考えられる原因を教えてください

返信する
サルワカくん

投稿のタイトルを消すのですね?
コードは合っているので、キャッシュの削除し忘れ、CSSに文法間違いがある、などが原因として考えられますね。
(SANGOのバグでそのような現象が起こることはありません)
ブラウザの検証を使ってソースコードを見てみると良いかと思います。

返信する

返信ありがとうございました。
どうやら、親テーマのstyle.cssなどを触ったために起こっていた不具合だったようです。というのも、昨日、データを全削除してから作り直したら、反映されなかったことなどができるようになりました。

返信する
リエ子

ステキなテーマを提供していただきありがとうございます!
たいへん重宝しております。

可能でしたら教えていただきたいのですが、
サブディレクトリごとに子テーマを
設定することはできますか?

(例)
メインサイト(https://abc.com)
└サブサイト(https://abc.com/123)

メインサイトとサブサイトで
異なる子テーマを適用したいのですが、
インストール方法や設定などがあるんでしょうか?

お手数ですがご教示いただけたら幸いです。

返信する
サルワカくん

恐縮ながら、そのあたりについては僕はあまり詳しくないですね…。
ただし、方法はWordPressで共通なので、「wordpress サブディレクトリ 複数サイト」 などと検索すると
参考になりそうな記事がヒットするようです。

返信する
リエ子

サルワカさん
こんばんは!
お忙しい中お返事いただきありがとうございました!

いただいた情報で調べてみたところ、Wordpressでサブディレクトリを追加すると、テーマ機能は共通管理項目になる様子…。

メインサイトとサブディレクトリサイトに異なる子テーマを適用することはCSSで可能なのかもしれませんが、わたしのようなド素人では無理と判断しました。

参考情報いただけただけでも十分助かりました。
ありがとうございました!

返信する
アキラ

はじめまして!
お世話になります。

.page1{
margin-top:30px;
margin-bottom:30px;
}

を反映させたいんですが、どのようにすればいいでしょうか??
子テーマに記載したのですが反映されません。

返信する
サルワカくん

子テーマのstyle.css内の
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう*/
*/が消されてしまっているようです。
コメントアウトがそれ以降全体に適用されてしまっているようなので、日本語の文末に*/をつけてあげてみてください。

返信する
テル

お世話になります。
子テーマに以下の記述をしていますが、反映されません。
デベロッパーツールで確認すると「theme1」の存在も確認出来ません。
子テーマでcss等を編集したら、すぐに反映されるものなんでしょうか?
時間がかかるものなんでしょうか?

お手数おかけします。
よろしくお願いします。

@charset “UTF-8”;
/*
Theme Name: SANGO Child
Theme URI: https://saruwakakun.design
Author: SARUWAKA
Author URI: https://saruwakakun.com
Template: sango-theme
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

div.theme1 {
margin-top: 25px;
margin-bottom: 25px;
padding: 5px;
}

返信する
サルワカくん

問題なく反映されているようですよー
ブラウザのキャッシュもしくはプラグインのキャッシュが原因だと思います。

返信する
テル

お世話になります。キャッシュが原因だったようです。お忙しい中、このようなご質問でお時間を取らせてしまって申し訳ございません。
そして迅速なご対応誠にありがとうございます。

返信する

コメントを残す

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