WordPress子テーマの作り方!

WordPressのカスタマイズは子テーマで

今回は、WordPressの子テーマの作り方についての初心者向けの解説です。

WordPressは、様々なテーマのテンプレートを適用することで、あっという間にデザインを変えることができます。

カスタマイズOKのものなら、テーマを選んだあと、細かいところを自分仕様にカスタマイズするわけです。

だけど、直接テーマのテンプレートをカスタマイズすると、

カスタマイズしすぎて、元のテンプレか自分がカスタマイズしたのかわからなくなった。
テーマをバージョンアップしたら、カスタマイズしたのが消えてしもた!!

という悲惨な事態に陥ることがorz

こういう時は、子テーマを作って、カスタマイズしたらいいんだ!!と聞いたわたしは、以前子テーマ作りに挑戦したのですが、あえなく玉砕しました。

ですが、今回やっと、やってみたらさっくりできたので、メモ代わりに解説しておきます。

子テーマは別フォルダ

まず、一つ目のポイントは、子テーマのフォルダは、親テーマのフォルダとは別になっており、そこに子テーマのCSSやphpのテンプレートが収納される、ということです。

ワードプレスのテーマは、ワードプレスフォルダの中の

/wp-content/themes/

の中に格納されています。

ここをFTPソフトなどでのぞくと、インストールしてあるテーマのフォルダがいろいろ見えるはずです。

まず最初に、ここに子テーマのフォルダを作ります。名前は自分がわかれば適当でOK。

「親テーマの名前+custom」とかにしておくと、わかりやすくて良いかも!

cssファイルを作る

子テーマのフォルダを作ったら、さらにそのフォルダの中に、cssファイルを作ります。

/wp-content/themes/hogehogecustom/style.css

こんな感じですか。

cssファイルの作り方は、わたしはFTPソフトの空ファイル作成で作って、そのあとワードプレスの管理画面からそのファイルを開いて必要なことを書きこみました。

空ファイルを管理画面から開くと、壊れてるよ!!と赤字で警告が出ましたが、必要なことを書き込んだら消えました。

ワードプレスの管理画面からは、新規にファイルは作れないので、なんらかの方法でとりあえず、からっぽでもなんでもそこにファイルを作ってやる必要があるのです。

ローカルでcssファイルを作って、FTPソフトでアップロードする、という手もあると思います。

どうしてもFTPソフト使えないという人は、さくらのレンタルサーバなら、サーバの管理画面にファイルマネージャーという、サーバの管理画面でファイル作成できるシステムがあるので、そういうところを使ってもよいかも。ほかのレンタルサーバでもそういう機能はあるのかな?

cssファイルで親テーマを読み込む

さて、この子テーマのcssファイル作成で大事なことは、親テーマのcssを読み込んでくる機能を持たせることです。

自分がカスタマイズするcssは全部この子テーマのcssファイルに書き込むわけですが、一番最初に、この親テーマのcssを読み込んでるよ!と、宣言するのです。

それについては、こちらの記事が大変わかりやすく参考になったので、こちらを見てやってください。

▶ WordPressテーマのカスタマイズ!子テーマを作る方法|Taka’s Life

今話題のStinger3というテーマを使って解説しておられます。

わたしも、実は今回Stinger3の作業のためにこのブログ記事を見つけました。

phpファイルはまるっとコピー

そして、CSS以外のPHPファイルは、子テーマに親テーマと同じ名前のphpファイルを作成し、そこに、親テーマに書いてあることを全部まるっとコピペします。

そのあと、子テーマのphpファイルをカスタマイズしていけば、子テーマのphpファイルに書いた内容がブログに反映されます。

子テーマ作成まとめ

前回、ドツボにはまって、子テーマがまったく反映されなかったのですが、今回Taka’s Lifeさんの記事のとおりに作成したら、簡単にあっさり作成できました。

前回のわたしの苦しみはなんだったんでしょうね?

子テーマの設定がうまくできないという方は、是非参考にしてみてください。

※ 商品やセットの値段や内容・送料については、記事執筆当時あるいは更新当時の内容です。変更になっている場合もありますので、ご利用の際は必ず各自でご確認ください。

おすすめサービス

このブログを運営しているレンタルサーバ ▶ エックスサーバー
このペイントソフトでデジタルは描いてる ▶ CLIP STUDIO PAINT PRO



 

WordPress
たからにゃをフォローする
女子ビズ
タイトルとURLをコピーしました