子テーマを作ってWordPressの既存テーマをカスタマイズしてみよう

カスタマイズ・小技, 技術メモ, WordPress

2020/10/11
子テーマを作ってWordPressの既存テーマをカスタマイズしてみよう

WordPressを既存のテーマを使用して運営していくうちに、デザインを変えたくなったり、プラグインでは対応できないなどで、使用しているテーマを編集したくなることもあるかと思います。ただ、このやり方だとテーマのアップデートの際に上書きされ、編集した部分が元に戻ってしまいます。そこで、子テーマを作成しておくとアップデート後も、編集した内容を残し反映させることができます。

 

アップデート前の赤色のファイルは修正した部分。
アップデート後は、修正された部分が上書きされてしまう場合があります。

 

アップデート前



アップデート後



 

子テーマを作成しておくと、テーマのアップデートがあった場合でも、

 

親テーマ =>
子テーマ =>

 

親テーマが更新されるだけで、子テーマはそのままの状態です。
なので、デザインや機能を追加した際の内容を引き継ぐことができます。

 

子テーマの必要性

既存のテーマをアップデートしなければ編集しても大丈夫ではありますが、テーマのアップデートをしないと、様々な不具合が起こる可能性があります。WordPressはセキュリティ関連の修正や、新しい機能の追加など、頻繁にアップデートを繰り返しています。WordPressのアップデートに合わせて、テーマやプラグインの修正も必要になる場合があります。そのままにしておくと動作の不具合や表示されないなどトラブルを起こす可能性もあるので、既存のテーマのアップデートは大事です。

 

・既存のテーマを直接変更した場合、そのテーマがアップデートされると変更された内容が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
・子テーマを使用することで開発時間を短縮。
・子テーマの使用することで、広告を入れたり全体のデザインを変えたり自由にできます。
・子テーマの使用することでWordPressのテーマの開発を学ぶことが可能。

子テーマを作成するのに必要なもの

 

子テーマはシンプルな構成で作成することができます。

子テーマ用のフォルダ
twentyfifteenの子テーマを作りたい場合は、twentyfifteen-childなど判別し易い名前が良いです。
style.css
functions.php

この3点を用意してください。

 

style.cssを作成

 

子テーマ用につくったフォルダ内にstyle.cssを作成し、以下を参考に記述してください。

 

Theme Nameを子テーマか判別できるように、Childなどを追加してください。
Templateは、親テーマの名前を記述してください。

 

例の場合だと

 

子テーマ名
Twenty Fifteen Child

親テーマ名
twentyfifteen

 

functions.phpを作成

子テーマ用につくったフォルダ内にfunction.phpを作成し、以下を記述してください。

 

 

 

用意が出来たら、テーマを格納しているフォルダにアップしてください。

外観→テーマに例で作成したTwenty Fifteen Childがあります。これを有効化してください。

 

あとは親テーマから修正したいファイル(single.phpなど)をコピーして子テーマに入れて編集してください。
子テーマにあるファイルが優先的に読み込まれます。

こんな感じで簡単に出来るので、既存のテーマでデザインの修正や広告を追加したい時には、子テーマを用意して対応してください。

 

当サイトはPWYW(Pay what you want)方式を採用しています。
この記事が参考になったり、サイト全体をご評価いただいた場合にお支払い頂ければ幸いです。
金額は自由に決められます。 PayPalで支払い
WP制作ならRU DESIGN

お気軽にお問い合わせください!

WordPressのカスタマイズや修正、オリジナルテーマの作成などリーズナブルな価格でご提供します。 お気軽にご相談下さい。 お問い合わせはこちら

関連記事

ブログにYouTubeのギャラリーを簡単に表示!YotuWP
ブログにYouTubeのギャラリーを簡単に表示!YotuWP
2021/09/12
ブログやサイトにギャラリー風のYoutubeページを追加するのに適しているプラグイン「YotuWP」 YouTubeの動画は埋め込みでページに表示させる事ができ...
Twitterのシェアリンクのテキストにハッシュタグやスペースを追加、ついでにWordPressで使用方法
Twitterのシェアリンクのテキストにハッシュタグやスペースを追加、ついでにWordPressで使用方法
2021/08/28
Twitterのシェアリンクにハッシュタグやスペースを追加する方法です。   基本的なシェアリンクのURL https://twitter.com/s...
Yoast SEOのディクリプションで使用できるタグ一覧
Yoast SEOのディクリプションで使用できるタグ一覧
2021/08/14
ワードプレスでサイト制作時に、有名なプラグイン「All in One SEO Pack」を使用していましたが、ここ数年は「Yoast SEO」がお気に入り。プラ...
文字詰めで美しく!CSS – font-feature-settings
文字詰めで美しく!CSS – font-feature-settings
2021/08/12
font-feature-settingsは、OpenTypeフォントの文字詰めを行う機能があります。 等幅で表示されるOpenTypeフォントを自動カーニング...
WordPress ECサイトプラグイン Welcartのv2.3.0公開
WordPress ECサイトプラグイン Welcartのv2.3.0公開
2021/08/11
WordPressにECサイトを構築する、プラグイン「Welcart」のv2.3.0が公開されました。 v2.3.0の主な修正・追加内容 2021年8月11日現...