恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【WordPress】子テーマでカスタマイズ

投稿日:2019-04-17 更新日:




wp_child

 

今回はWordPressの子テーマについて紹介します。

まず、子テーマとは・・・既存のテーマ(親テーマ)のまま変更したい部分だけ記述するカスタマイズ用テーマのことです。

例えば・・・

このように親テーマの変更したい部分だけをカスタマイズしたものを子テーマとして扱います。

 

もしも子テーマを作成せずに親テーマを直接カスタマイズした場合、親テーマが更新された時せっかくカスタマイズしたものが水の泡に…。

そのような事態を防ぐために、まず親テーマを決めてダウンロードし、

子テーマフォルダーとその中に最低限必要なstyle.cssとfunctions.phpの2つを作成します。

 

この時に、親テーマの名前の後に「_child」と入れておくとわかりやすいでしょう。

次に、先ほど作成したフォルダーを子テーマとして認識してもらうために、2つのファイルに下記の記述をしていきましょう。

まず、style.cssに下記の記述をしていきます。
 ※スペルミス等があると上手く反映されないので注意!

{
/*
Template: 親テーマのフォルダ名
Theme Name: 子テーマの名前
*/
}

最低限必要なのはこの2行です。

他にもTheme URI:テーマのURL、Author:テーマの作成者名 等の項目がありますが、使用するテーマごとに記述してください。

 

次に、functions.phpに下記の記述します。

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

 

これで子テーマとして認識されました。

 

うまく認識されていたら外観 > テーマ > style.cssで定義した子テーマの名前が表示されているテーマを有効化すれば成功です!

後はデベロッパーツール等を活用しつつカスタマイズしたいところをstyle.cssに記述していきましょう!

また、HTMLを変更したい場合は親テーマから妥当のHTMLファイルをコピペして変更すればOKです。

案外簡単に作成出来ちゃいますね!

せっかくのカスタマイズが更新で水の泡だぁ…なんてことにならないようにぜひ既存のテーマをカスタマイズするときは子テーマを作成してみてください!

 

他にもこんな記事があります。

WordPressでJSONファイルを読み込む方法

【WordPress】親と先祖の投稿IDを取得できる関数get_post_ancestors

【WordPress高速化】PageSpeed Insightsで99点(実質満点)を取るための施策




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

noda

noda

めざせ万能デザイナー。HTML/CSS、JavaScript、PHP、Photoshop、Illustratorを扱っています。好きな食べものはうどん。