WordPress(ワードプレス)で子テーマを設定する方法【X serverの場合】

子テーマ
スポンサーリンク

いつも当ブログを読んでいただきありがとうございます。

ブログを10年書いているy-heyです。

 

前回Web教えコーチのものくろさんにサポートをお願いして

画像がアップロード出来ない問題を解決して頂いたことを書きました。

WordPressで画像のアップロードが出来ない場合の解決策とは?
本ブログはWordPressを使って書いておりますが 7月にとある画像をアップロードしようとしたら、 「アップロード中にエラーが発生しました。後ほど再度お試しください。」 という謎のメッセージが出てきて急にアップロードできなくなりました。 その際に行った解決策についてまとめておきます。

その際、「色々とカスタマイズしているみたいなので子テーマを設定するといいですよ」

とアドバイスを頂きました。

そこで早速ですが子テーマを設定しましたので設定方法を振り返ってみましょう!

 

子テーマとは?

WordPressでのサイトの外観を決める要素として「テーマ」というのがあります。

テーマをどれにするかにより外観がガラっと変わります。

例えば当ブログのテーマはHummingbirdを使用しております。

 

外観をカスタマイズする時はテーマ内の

CSSファイルやphpファイルをいじるのですが

もしテーマにアップデートがある場合、

ファイルに追記、変更した内容が全部消えてしまうのです。

 

これを防ぐためにカスタマイズした部分のみを別のテーマに書いておいて

元々のテーマをアップデートしても影響を受けないようにするのが

「子テーマ」です。

 

子テーマの概念はPresenNote殿のサイトや

【重要】WordPressテーマをカスタマイズするなら子テーマを作れ!
ちょっと前の話題になりますが、WordPress が 3.4 にバージョンアップしてまして、デフォルトで入っているテーマ、Twenty Eleven もバージョンアップしたようです。で、Twenty Eleven を 1

寝ログ殿のサイトに詳しく書かれていますので参考にして下さい。

WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方など
WordPress既存テーマをカスタマイズするなら子テーマを使うべきと思います。これは、Wordpress codexにある子テーマの項目でも推奨されています。ただ、Wordpressを使い始めたばかりの時に「子テーマ」「親テーマ」と言われ

 

子テーマの設定方法(X serverの場合)

子テーマのphp, CSSファイルを新規作成する

まずはphp, CSSファイルを作成していきます。

細かくはレンタルサーバーによって異なりますが

ここではXサーバーのファイルマネージャーログイン画面からログインします。

https://www.xserver.ne.jp/login_file.php

X serverログイン

 

ログインすると以下の画面になりますので

自分のサイトを構成するファイルを選択します。

(※私の場合はy-hey.comです)

xserverファイルマネージャー1

 

そしてここからテーマのファイルが入っているフォルダまで移動します。

まずは「public html」をクリックして下さい。

xserverファイルマネージャー2

 

そして「wp-content」をクリックします。

xserverファイルマネージャー3

 

「themes」をクリックします。

xserverファイルマネージャー4

 

すると現在保存されているテーマごとにフォルダが出てきます。

twentyfifteen、stinger5、hummingbird等です。

 

ここで子テーマのフォルダを新しく作成します。

下図のように子テーマとわかるフォルダ名を入力し、

「フォルダ作成」をクリックすれば

新しく子テーマのフォルダが作成されます。

xserverファイルマネージャー5

 

作成したばかりの新規フォルダ名(ここではhummingbird-child)をクリックして

その下の階層に移動します。

そして下図の手順に沿ってfunction.phpファイルとstyle.cssファイルを作成します。

xserverファイルマネージャー6

 

php, CSSファイルの中身を記述

上記の作業を行った時点では作成したphp, cssファイルともに

中身には何も書いていない状態ですので

ここから中身の記述(といってもコピペで済みますが)を行います。

 

まずは以下の手順に従ってphpファイルの編集画面に移動します。

xserverファイルマネージャー7

そこに以下のコードを貼り付けます。そのままコピペで大丈夫です。

creve殿のサイトを参考にさせて頂きました。ありがとうございました。)

Xserver-phpファイル

 

お次はCSSファイルを記述します。

以下のコードを貼り付けますが、テーマ名だけ自分の使っている

親テーマのファイル名と同じになるようにします。

Template:親テーマ名

Theme Name:子テーマ名

となります。

 

下の例ですと親テーマ名を「hummingbird」に

子テーマ名を「hummingbird_child」にして設定してます。

Xserver-CSSファイル

(こちらもcreve殿のサイトを参考にさせて頂きました。ありがとうございました。)

 

子テーマを有効化する

いよいよ作成した子テーマを有効化します。

 

まずはWordPressの管理画面を開いて左側メニューの

外観→テーマをクリックします。

子テーマを有効化1

 

そしてテーマ一覧の中に先ほど作成した子テーマがありますので

それを「有効化」します。

子テーマを有効化2

これで子テーマの初期設定は完了です!

 

まとめ

というわけで子テーマを設定すればバンバンカスタマイズした内容が

親テーマの更新時にすべてリセットされてしまうプチ悲劇?

を防ぐことができます。

 

今後は子テーマ内にカスタマイズ内容をバンバン書いて行きましょう!

 

この記事を読んであなたのブログライフがちょっとだけ豊かになれば幸いです。

最後までお読み頂き本当にありがとうございました。


スポンサーリンク
  

子テーマ

コメントを残す

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

ABOUTこの記事をかいた人

y-hey

アウトドアライフクリエイターとして 多くの人にキャンプ、登山、旅行 について興味を持ってもらい ”人生を120%楽しんでもらいたい” と考えている男です。 2児の父ですが 単独で南米最高峰アコンカグアや アフリカ最高峰キリマンジャロ を一眼レフカメラと共に登ったりしてます。 (普段は自称イクメンです) ブログは2005年から書いてまして(当サイトは2015年からです)空手もやってる多趣味な男です。 もし記事を読んで「役に立った」「面白そう」「笑えるわー」 と思われた方は、いいね、ツイート、はてぶ していただけますと更新の励みになります。 よろしくお願いします!