Ver1.4.1をリリースしました(5/19)

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

52 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のトラッキングコードは、外観⇒カスタマイズ⇒詳細設定から簡単に設定可能です!
子テーマでカスタマイズする必要はなしです。
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の仕様であるタグが挿入されることはなくなりました。

返信する

コメントを残す

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