WordPress子テーマ作り方と反映されない時のテンプレートcss対処法コンテンツへスキップ日めくりオトナ稼業その疑問、解消します!WordPress子テーマ作り方と反映されない時のテンプレートcss対処法WordPressの子テーマの作り方とテンプレートの設定方法を超初心者でもわかるように解説。反映されない時はココをチェック!子テーマは記事が入っていても簡単に作れます。変更したcssが反映されない時の対処法も含めて、具体的にお伝えします。スポンサードリンクWordPressの子テーマとはお恥ずかしい話ですが、長い間、WordPressのテーマをインストールして記事を入れてしまったら子テーマは作れないとばかり思っていました。この程度の知識しかなかった私ですが、実際子テーマを作ってみると、WordPressr利用者のみんなが言うように、子テーマがあることに大きなメリットがあることがわかり、今では普通に子テーマを使えるようになりました。子テーマがあるとダメ元でカスタマイズにチャレンジできるので、私の場合、WordPressにに対するビビリ感を克服することができました。WordPressの超初心者さんにも理解できるように、私のつまづいたところも注意点として挙げながらご説明していきますね。子テーマとはWordPressの子テーマっていうのは、親テーマの内容を定義しなおして、上書き(オーバーライド)することができるテーマのことをいいます。親テーマは大元、子テーマはカスタマイズ専用といったイメージです。「フォントを変えたいなー」と思ったときには、あなたが選んだテーマ(親テーマと言います)のスタイルシートを直接いじるのではなく、子テーマのスタイルシートの記述を換えます。すると、書き換えたスタイルシートがウエブサイトに反映されます。フォントの変更についてはこちらをどうぞ。WordPressのフォントを変更してゴシック体にする方法なぜ子テーマでカスタマイズするの?なぜ子テーマでカスタマイズするのかというと、親テーマのファイルを直接書き換えると、そのテーマのアップデートの時にファイルが機械的に書き換えられてしまうからです。いうことは・・・カスタマイズしたところが消えてしまうんですね。WordPressのテーマのアップデートはセキュリティーのアップデートもあれば、WordPress本体のアップデートもありますので無視するわけにはいきません。子テーマでカスタマイズしておけば、アップデートがあってもその内容は保持され続けるというわけです。これは、「子テーマ」を利用する最大のメリットになります。子テーマが必要な理由=メリット2つ上述のように、WordPressのアップデートに備えるというのも子テーマが必要な理由のひとつですが、元の内容を確認する上でも親テーマ・子テーマと存在すると比較が出来て便利です。ご存知のように、WordPressはテーマ内のソースコードを読み込むことでWebサイトを生成しています。テーマ内のソースコードを書き換えることで、Webサイトのレイアウトを変更することができます。それを親テーマで直接すると元の内容を確認することができなくなってしまいますよね。自分で変更したレイアウトがNGで元に戻したいと思っても、元のソースコードがないと復元するのはとても面倒臭いです。テキストにマザーを保存してコピーで書き換える方法もあります。その方法を長く選んでいた私の体験から言うと、いちいちテキストにマザーを保存してコピペを書き換えて更新ボタンを押すよりも、子テーマを作るほうが圧倒的に使い勝手が良かったです。WordPressのアップデートでデフォルトにならないために。カスタマイズした(書き換えた)ときに比較対照が出来るように。WordPress子テーマの作り方では、早速子テーマを作りましょう。構えないでOKですよ。子テーマを作るには、2つのファイルとそれらを格納するディレクトリが必要となります。FTPソフト(FFFTPなど)で新規のフォルダを作る。「style.css」を作り、子テーマフォルダ内に転送する。「functions.php」を作り、子テーマフォルダ内に転送する。子テーマを有効化する。新規のフォルダ(ディレクトリ)を作るでは、最初に専用のディレクトリを用意しましょう。ファイルを分類整理するための入れ物のこと。厳密にはディレクトリとフォルダは意味が異なるんですが、ここではわかりやすくするため、フォルダを作ると思ってください。FTPソフト(FFFTPなど)で新規のフォルダを作ります。FTPソフトのあなたのWordPressを設置したドメインのフォルダを開きます。「theme」を開きます。「theme」の中にはあなたがアップロードしたテーマやWordPressのデフォルトテーマが入っています。■「theme」の中に子テーマのフォルダを作る※子テーマという名前ですが、親テーマや他のテーマと並列に配置します。※作成するフォルダの名前(子テーマの名前)は「(元のテーマ名)_child」としておくと後で見てもわかりやすいです。※子テーマの名前に空白があるとエラーが出るので、ハイフンなどで空白を作らないように注意です。「style.css」を作る「style.css」を作り、子テーマフォルダ内に転送します。デスクトップ上(ローカルフォルダ)にテキストファイル「style.css」を作ります。※テキストの拡張子が.txtと表示される場合は.cssに変更します。次に、作成した「style.css」に以下のコードを記入してください。子テーマとして認識してもらうコードです。Name:子テーマ名*/※コメントアウトの「/*」「*/」も忘れずに記入すること。コメントアウトをザックリ簡単に言うと、書いてあるソースコードに対するコメントのことです。コメントアウトをしておくと、あとからどんな記述だったかわかるので便利です。ちなみに、このサイトはWordPressのオリジナルテーマtwentysixteenを使っているので以下のようにしています。Name」と「Template」が必須項目で、あとは無くてもかまいません。Name」と「Template」だけにしています。Name」と「Template」の順番は関係ありません。2.作成した「style.css」を子テーマフォルダ内に転送します。「functions.php」を子テーマに転送する「functions.php」を作り、子テーマフォルダ内に転送します。デスクトップ上(ローカルフォルダ)にテキストファイル「functions.php」を作ります。※テキストの拡張子が.txtと表示される場合は.phpに変更します。作成した「functions.php」に以下のコードを記入してください。子テーマとして認識してもらうコードです。}作成した「functions.php」を子テーマフォルダ内に転送します。すると親テーマのスタイルが小テーマに引き継がれます。「style.css」と「functions.php」の転送が終わったら子テーマの出来上がり。あとは子テーマを有効化するだけです。子テーマを有効化する子テーマを有効化します。WordPressの管理画面メニューから「外観」→「テーマ」を選択します。テーマ一覧画面が開くと「子テーマ」が追加されているのを確認してください。有効化するとWordpressの公開ページを表示する際、作成した「子テーマ」が読み込まれる事になります。子テーマが有効になりましたね。次は、各テンプレートファイル(header.phpやfooter.php、single.phpなどの)の設定方法について、解説していきます。「テンプレートファイルって何?」って状態でしょうか。テンプレートファイルというのは、WordPressのテーマを構成している「index.php」や「single.php」、「page.php」などのファイルのこと。テンプレートファイルには「header.php」や「footer.php」のように、すべてのページ内で使用できるファイル(パーツテンプレート)と、「single.php」や「archive.php」のように、ある条件の下でのみ使用されるファイルがあります。子テーマに必要なテンプレートファイルの設定方法に入っていきますね。テンプレートファイルの設定方法カスタマイズしたいファイルを、「子テーマ」のファイルにアップします。「header.php」をカスタマイズしたいのであれば、「header.php」を新規作成し、子テーマにアップします。親テーマの「header.php」をダウンロード。デスクトップなどで保存したものを子テーマのフォルダにドラッグアンドドロップするのがわかりやすいと思います。※このときファイル名は、必ず親テーマのモノと同じ名前を定義します。「header.php」なら「header.php」のままです。」などのテンプレートファイルは、「style.css」と一緒で、親テーマのファイルを、全上書きします。「同じ名前のテンプレートファイルがある場合、子テーマが優先されて親テーマは無視される」ということです。それゆえ、変更したいテンプレートファイルは親テーマから子テーマへコピーしてカスタマイズするわけです。親テーマの内容を全コピー、そしてカスタマイズしたい部分だけ、変更・追記していくという流れになります。WordPress子テーマが反映されない時の対処法!「子テーマ」を作成したのに反映されていない!私の体験では、とてもちっぽけな自分のミスが殆ど。その時の主な原因を下記にまとめましたので参考にしてみてくださいね。「Template」に指定した「親テーマのディレクトリ名」が間違っている。子テーマのファイル(ディレクトリ)にアップしたテンプレートファイル名が、親テーマのテンプレートファイルと違っている(※ファイル名は必ず統一する事)。WordPressの管理画面上で、「子テーマ」を有効化していない。WordPressの管理画面メニューから「外観」→「テーマの編集」の右上、「編集するテーマを選択」が子テーマになっていない。うっかりミスもあります。慌てないでひとつづつチェックしてみてくださいね。デザインの変更が反映されない!デザインの変更が反映されない時は、以下の点をチェックします。CSSのコード間違いコピペしてきたコードなどの場合、ちゃんとコピペできていないこともあります。>」が切れていたり、全角が入っていることもあります。自分でアレンジしたときに、大文字や小文字の変換間違いをすることもあるので、もう一度、コードを見直してみてください。キャッシュが残っていないかどうかコードを見ても、リロード(更新)をしても、読み込まれない場合は、他のブラウザで見てみます。他のブラウザで見て、きちんと表示されていれば、キャッシュの問題です。自分が普段よく使っているサイトのIDやパスワードも消えてしまうので、もう一度入れ直してログインしなければならなくなります。そんな時に試してみてほしいのが、これからご紹介する方法です。わたしは普段Chromeを使っているので、Chromeの説明になります。キャッシュの削除をせずに更新する方法やり方は超簡単です。リロードしたいページのどこでも良いので右クリック。すると「検証」という項目がでますので、そこをクリックして検証画面(デベロッパーツール)を開きます。検証画面を開いたら、ブラウザの左上のリロード(更新)ボタンを長押ししてください。通常の再読み込みハード再読み込みキャッシュの消去とハード再読み込み真ん中の「ハード再読み込み」をクリックします。ハード再読み込みは、キャッシュ機能を無視してサーバーから強制的にページをダウンロードする方法のようです。わたしは、履歴をクリアしなくても、この方法でうまくいったことが何度もあります。それでもダメな場合は、一番下の「キャッシュの消去とハード再読み込み」を試してみるといいと思います。キャッシュはクリアされてしまいますが、自分で試せる最終手段。「ハード再読み込み」でうまくいくといいですね。まとめ子テーマさえあれば、カスタマイズしたいときに、親テーマを子テーマにそのままコピーをして変更していけば良いということです。やってしまえば簡単、利便性がとても良くなることなので是非トライしてみてください。注意点は、1.アップデート時のトラブルを避けるため、親テーマのテンプレートファイルは直接変更しないこと。2.カスタマイズは子テーマ内で完結させること。この2点は心に留めておいてくださいね。子テーマができると、興味のあるカスタマイズに気楽にチャレンジできますよ。