まず最初に見てほしいページ

最初に見てほしいページ

オススメの記事、カテゴリをまとめています(こちら

エックスサーバー×ワードプレスで誰でも簡単に子テーマを作る方法

ども!テルです。

僕がブログを書き始めた当時、子テーマを使っていなかったので親テーマのまま、CSSの編集などをしていました。

でもブログテーマが更新されると頑張って設定したCSSが全部飛んでしまうんですよね。。

なので、そのたびにコピーしてあったCSSを、再度親テーマのCSSに追加するという超アナログなことをしていました(汗)

当時は自分なりに調べて子テーマとか良く分からなければアナログな方法でも良いという記事があったのでその通りにしてたんですが、、、

  • めんどくさすぎ!
  • ブログテーマ更新されすぎ!
  • ブログ書くならCSSから逃れることはできない

ということが良く分かったので、子テーマを作ることにしました。

でもエックスサーバーの子テーマ作成を書いたブログが無い。。。

他のサーバーを使っている方のブログを見て何とか設定をしてみましたが、そこら辺の知識が無いので一苦労しました。

もし同じ境遇の人がいたら読んでみてください。

スポンサーリンク

子テーマとは

①子テーマとは何か?

ワードプレスの親テーマで設定した情報を引用しつつ、変えたい設定のみ変えることができます。

どういうことかと言うと、情報は親→子の順番で読み込まれます。

通常は親テーマに全てのブログテーマの情報、子テーマに変えたいところの情報があります。

親テーマで読み込まれた情報は、子テーマを読み込む際に、重複された分は消えます。

つまり子テーマにある情報が優先されるということですね。

②子テーマを設定する必要性

冒頭でも説明しましたが、ブログテーマは度々更新されます。

子テーマを設定していると、更新されるのは親テーマのみなので、子テーマの設定はそのまま残ります。

テーマを更新するたびにCSSなどの設定が飛ぶのは嫌ですもんね。

スポンサーリンク

エックスサーバーで子テーマを作る手順

では実際の手順について説明していきます。

①エックスサーバーのインフォパネルの設定

インフォパネルから以下のサーバーの項目から『ファイル管理』を押下します。

そうすると以下の画面になりますので、自身のウェブサイトURLをクリックしてください。

その後、以下の順で進んでいくと、このような画面に行きつきます。

  • 自身のウェブサイトURL
  • public_html
  • wp-content
  • themes

青枠のところに使用しているテーマの子テーマとして分かりやすいタイトルを入力してください。

そうすると赤枠のところのように子テーマのフォルダが作成されます。

僕の場合は、STORKを使っているので、子テーマはjstork-childにしました。

②子テーマのファイル作成

上で作成した子テーマのフォルダをクリックしてください。

ここに、『親テーマの情報を読み込みます』という指示をするシートを作成します。

〇style.cssファイル

先ほどのフォルダを作成する要領で、『style.css』というファイルを作成してください。

その後、style.cssのチェックボックスをクリックして『編集』のボタンを押下してください。

開いたら、以下のソースコードをコピペしてください。

  • Theme Name:先ほど設定したフォルダの名称
  • Template:親テーマのフォルダ名称
  • @import:ここも自身の親テーマのフォルダ名称

以上を正確に入力しないと子テーマが反映されませんので注意してください。

/*
Theme Name: jstork-child
Template: jstork
*/
 
@import url('../jstork/style.css');

〇functions.phpファイル

子テーマのフォルダの中にstyle.cssファイルと同様に『functions.php』ファイルを作成してください。

そして以下のコードを入力します。

ここはコピペで良いですね。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

これでサーバー側の設定は完了です。

スポンサーリンク

ワードプレスに子テーマを反映させる

①外観の設定

ワードプレスから外観をクリックしてください。

以下のように子テーマが反映されているはずです。

僕の場合だとjstork-childが出てきています。

これを『有効化』というボタンをクリックして有効にするだけですね。

②外観設定の注意点

〇子テーマのアイキャッチ

FTPサーバーの親テーマのフォルダにはアイキャッチ画像が保存されています。

これを子テーマにもコピペすれば、僕のように親テーマと同じ画像が表示されます。

ですが、この設定をしていない場合は上記のような画像は表示されず、白黒チェックの柄が表示されるのみです。

特に影響ないので、これは好みですね。

〇親テーマとの微妙な設定のズレ

理由はよくわかっていないのですが、子テーマに切り替えると親テーマの『カスタマイズ』の項目で設定した項目が一部反映されない現象がありました。

もしかしたら自分だけかもしれないですが、子テーマに切り替えた後は自身のウェブサイトのホーム画面を確認した方が良いと思います。

ちなみに再度設定しなおしたら問題ありません。

まとめ

設定としては以上です。お疲れ様でした。

自分が設定するときにこの記事があれば助かったのですが。。。

ポイントは以下です。

POINT

  • 子テーマ化は避けて通れないので、早い段階で設定すべし
  • 子テーマのファイル作成は慎重に
  • 子テーマができたら色々カスタマイズしてみよう

これで安心してブログ作成進められると良いですね!

 

ではまた!

この記事のURLをコピーする

コメントを残す

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