WordPressで子テーマを作ってみよう!【mixhostサーバの場合】

サイトをアレンジしたいということで、追加cssを使用する方法を学びましたが。(この記事)

追加cssについて調べてみると出てくる「子テーマ」という言葉。

今回はmixhostサーバーでwordpressを使用している場合の「子テーマ」について紹介しますね。

WordPressの子テーマは、コピーアンドペーストで簡単に作れます!

WordPressの子テーマとは?

WordPressの子テーマとは、親テーマ(WordPressの一般的なテーマ)を自分流にアレンジするために用意するテーマのことです。

子テーマを利用することで、親テーマの修正したい部分を上書きすることができるのです!

でもそれって追加cssでいいのでは?という疑問もあると思います。

子テーマを使用するメリットとしては親テーマのバージョンアップの際に変更をそのまま保存できるという点です。

追加cssを利用したカスタマイズは、バージョンアップで消えてしまう可能性があるのです。

バージョンアップは、セキュリティの向上や不具合解消も含んでいるので、しておいた方が良いものです。

バージョンアップにも対応できるように子テーマを利用してカスタマイズするといいのですね◎

WordPressの子テーマってどうやって作るの?

子テーマの作り方3ステップを紹介するとこんな感じ

  • 子テーマ用のフォルダを作成する
  • 子テーマファイル内にstyle.cssを作成
  • 親テーマと子テーマの紐付け

ステップ1 子テーマ用のフォルダを作成する

WordPressの子テーマのフォルダをまず作成します。

フォルダは親テーマと同じ位置に作成しますが、

さて、mixhostサーバーの場合は、どこにあるのでしょう?

mixhostサーバは、cPanelというコントロールパネルを使用しています。

cPanelへのログイン方法はこちら

cPanelにログインしたら、ファイルマネージャーを選択します。

ファイルマネージャーの中の

<public_html>→<ドメイン名>→<wp-content>→<themes>

themesの中にはWorePressでダウンロードしたファイルが入っています。その中に子テーマのフォルダを作成しましょう。

何の子テーマなのかわかりやすい名前いいですね。

今回は親テーマがedinなので、「edin_ko」にしました。

ステップ2 子テーマファイル内にstyle.cssを作成

作成した子テーマフォルダ内にstlye.cssのファイルを作成します。

左上の「+ファイル」をクリックして、以下のように記入して作成。

できました。

右クリックでeditをクリック。

そして以下のように記述しましょう。

Template:親テーマ名

Theme name:子テーマ名

これで、このファイルが子テーマとして認識されます。

ステップ3 親テーマと子テーマの紐付け

次に、子テーマファイル内に、functions.phpを作成します。

functions.phpはWordPressのテーマに必要不可欠なファイルなのですが、細かい解説はこちらのサイトがわかりやすいです。

そして、また右クリックeditで以下のように記載。これで親テーマと子テーマが紐付けすることができます。

こちらをコピペして使用してください。

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

これで、管理画面で子テーマを編集できるようになります。

子テーマのファイル「edin_ko」が追加されているのがわかりますね。

edinの子テーマであることが書いてあります。

これで子テーマ作成は完了です。

テーマを有効化する前にライブプレビューをクリックしてチェックしてみましょう。

みてみると、元々のedinテーマに、追加cssが効いていない状態になっているのがわかります。

子テーマファイルに作成したcssファイルに記述していくことで、カスタマイズすることができます。

これで子テーマを作成完了しました。

紹介したmixhostサーバーはこちら↓このサイトもmixhostサーバーを使用して作っています。

クラウドレンタルサーバー

ドメインはお名前.comです。

お名前.com