サイトをアレンジしたいということで、追加cssを使用する方法を学びましたが。（この記事）
追加cssについて調べてみると出てくる「子テーマ」という言葉。
今回はmixhostサーバーでwordpressを使用している場合の「子テーマ」について紹介しますね。
WordPressの子テーマは、コピーアンドペーストで簡単に作れます！
WordPressの子テーマとは？
WordPressの子テーマとは、親テーマ（WordPressの一般的なテーマ）を自分流にアレンジするために用意するテーマのことです。
子テーマを利用することで、親テーマの修正したい部分を上書きすることができるのです！
でもそれって追加cssでいいのでは？という疑問もあると思います。
子テーマを使用するメリットとしては親テーマのバージョンアップの際に変更をそのまま保存できるという点です。
追加cssを利用したカスタマイズは、バージョンアップで消えてしまう可能性があるのです。
バージョンアップは、セキュリティの向上や不具合解消も含んでいるので、しておいた方が良いものです。
バージョンアップにも対応できるように子テーマを利用してカスタマイズするといいのですね◎
WordPressの子テーマってどうやって作るの？
子テーマの作り方3ステップを紹介するとこんな感じ
- 子テーマ用のフォルダを作成する
- 子テーマファイル内にstyle.cssを作成
- 親テーマと子テーマの紐付け
ステップ1 子テーマ用のフォルダを作成する
WordPressの子テーマのフォルダをまず作成します。
フォルダは親テーマと同じ位置に作成しますが、
さて、mixhostサーバーの場合は、どこにあるのでしょう？
mixhostサーバは、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です。