自由でクリエイティブな暮らしを応援!
Search

WordPress子テーマの作り方【コピペで解決】

もくじ

はじめに

まず初めに、子テーマで何が出来るかについてお話しします。

基本的にWordPressテーマのデザインは、style.cssやfunctions.phpなどのプログラムコードを書き換えることによってカスタマイズしていくことが多いかと思います。

しかし、誰かの作ったWordPressテーマにはアップデートというものがあります。

これはワードプレステーマ無料・有料問わず、テーマの制作者が新機能を追加したりバグを直したりすると「テーマを新しいバージョンに更新してくださいよ」というアップデートを促す表示がされるようになっています。

テーマをアップデートすると、それまで時間をかけてカスタマイズしてきたコードが全て上書きされてしまいます。夜なべしてコツコツとカスタマイズしてきたコードが一瞬にして消えてしまいまうわけです。バックアップを取っていなかかった場合、これほど恐ろしいことはないかもしれません。

実は、このワードプレステーマのアップデートがあってもデザインを崩すことなく運用できる素晴らしい方法が存在します。

それが、子テーマです。

もともとのワードプレステーマのファイルはそのままに、カスタマイズ用のファイルを作ることが出来ます。こうすることで、本元のテーマが変更されてしまっても、自分のカスタマイズしたデータはそのまま表示させることが出来ます。ワードプレスのテーマをカスタマイズする時は、親テーマのファイルを直接書き替えてカスタマイズする方法もありますが、子テーマのワードプレステーマに対してカスタマイズしていくことをお勧めします。

有料のワードプレステーマはほとんどの場合、子テーマを用意しれくれていますが、無料のワードプレステーマや有料テーマの中にも、子テーマが用意されていない場合があります。

この記事を読む進めて作業していけば、一人でも子テーマを作成できるようになります。

 

 

Step.1 子テーマのフォルダを作る

まずは、子テーマ用のフォルダを作ります。名前はなんでもOKです(半角英数字)

「Twenty sixteen」の子テーマなので、ここでは「twentysixteen-child」としてフォルダを作成します。

 

 

Step.2 子テーマに必要なファイルを作る

作成したフォルダの中に、2つの空ファイルを作成します。

・style.css

・functions.php

 

 

Step.3 親テーマを継承するコードを書く

style.cssには、子テーマ情報を以下のように記入します。

/*
Theme Name:   Twenty sixteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentyfifteen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-fifteen-child
*/

 

上記のstyle.cssで必ず必要になってくるものが2つあります。

Theme Name(子テーマを識別するため名前を書きます)

Template(親テーマのフォルダ名を書きます)

この2つが必ず必要です。

他のテーマで利用する際にも上記コードをstyle.cssにコピペしてTheme NameTemplateを変更してもらっても大丈夫です。

 

最低限必要な内容で作るとこうなります。

@charset "UTF-8";
/*
Theme Name:   (子テーマ名)
Template:     (親テーマのフォルダ名)
*/

 

子テーマの「名前」、「親フォルダ名」を書きましょう。

 

@charset "UTF-8";
/*
Theme Name:   Twenty Sixteen Child
Template:     twentysixteen
*/

Templateには、親テーマのフォルダ名を書きます。FTPソフトなどで親フォルダ名を調べるときは、/inc/themesに親テーマが入っていますのでそこを見ると良いでしょう。

 

 

Step.4 functions.phpを編集

親テーマのstyle.cssが、子テーマのstyle.cssを適用した際にも呼び出されるようにfunctions.phpを編集します。

functions.phpを開いて以下のコードをコピペしてください。

<?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が子テーマにも引き継がれて呼び出されます。

 

 

Step.5 子テーマを有効化する

ここまで出来たらあとはとても簡単です。

ワードプレスの管理画面を開いて、外観からテーマを選ぶと、あなたの作った子テーマがあると思います。その子テーマを選び、有効化します。

お疲れ様です。これで子テーマの設定完了です。

この子テーマを有効化した状態は、親テーマを表示した状態と変わりません。

この状態から、子テーマのstyle.cssに書き足してカスタマイズしていきます。

 

 

注意点

子テーマを作ってカスタマイズしていた場合、子テーマのファイルが利用されるようになります。親テーマで新機能が追加された場合、子テーマではアップデート以前のファイルが入っているということになるので、新機能が使えない場合があります。

その場合は、カスタマイズ箇所をテキストエディタなどにバックアアップし、新しいファイルを再度子テーマにコピー。その後サイトカスタマイズするなどの手間がかかる場合もあります。

 

 

まとめ

いかがでしたか。ワードプレスの子テーマを作っておきことで、親テーマにアップデートがあった場合でも、子テーマのファイルが優先して呼び出されるので、子テーマをいくら編集しても親テーマのアップデートに影響されることなくサイトを運用していくことが可能になります。

ワードプレス子テーマの仕組みを理解することで今後のカスタマイズに役に立つかもしれません。合わせて読んでみてください。

最後までお読みいただき、ありがとうございます。

 

]]>

いいね、シェア、フォロー歓迎!2020テーマは「自然から学び自然と共に生きる」

EVAHKS

運営:嶋耕作(しまこうさく)『相場の熊さん』の愛称で親しまれているFX裁量トレーダー、ライター。自然が好きで日本国内に山所有。ひいお爺様は外交官。20代前半に教育関連事業にて年商3億円達成。その後、肺炎で臨死体験。世界人口4%の性格タイプを持つ。自由と安定。混乱と静寂。異なる性質のふたつを併せ持っている。趣味は読書、映画、アニメ、PUPG、人狼ジャッジメント、バスケ、音楽。好きな場所は、海、森、温泉、猫の肉球。漫画の島耕作はサラリーマンですが、サラリーマンはこの世で一番やりたくない仕事です。

1 Comment
  1. […] 前回の記事、ワードプレス子テーマの作り方で書いた内容で子テーマを作ることができるようになりました。今回は、子テーマがどんな仕組みで表示されるのかを解説します。 […]

Leave a Comment

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください