Twitterでブログ更新情報を配信中

WordPress

【WordPress】無料テーマの名前を変更して新しいテーマとして作成する

WordPressのテーマを使うとき、既存のテーマ名のままではオリジナリティに欠けます。実際にはクライアントさまの会社名などをテーマ名として登録することが一般的です。

今回は任意のテーマを元に子テーマを作成し、さらに新しいテーマとして認識させる方法をご紹介します。テーマごとにファイルの特徴はありますが、変更箇所はすべて共通しているので必要ファイル、記述に注意すればOKです！

内容は子テーマがある場合とない場合とで作業を分けています。状況に合わせて読み進めてください。

子テーマが必要な理由

既存のテーマは内容が不定期にアップデートされます。これはテーマの脆弱性や使いやすさを改善するためにテーマの制作者側が行うものです。

このような特性上、親となる元のテーマとは別に子テーマ用のフォルダを作成し、使うファイルをコピー、編集する必要があります。つまり、親テーマだけでは編集したファイルが、テーマの更新時に、WordPress側ですべて上書きされ、データが消えることになります。

まずは「スタイルシートヘッダ」という専用の記述で、親と子のテーマを関連付けるところから始めます。子テーマを作成しただけでは認識されないため必ず本作業を行いましょう。

子テーマがある場合は

テーマを設置する

ブログサイトによく使われる「LION BLOG」をサンプルで利用します。こちらは親テーマ、子テーマがあるので、それぞれダウンロードしてください。

LION BLOGのダウンロードページ

外観から新規追加＞テーマのアップロードを選び、親テーマからアップロードしましょう。

Wordpressにテーマをアップロード

親テーマのスタイルシートヘッダを変更

wp-content>themeの順に進み、親テーマの「lionblog」を選択します。

親テーマのスタイルシートヘッダを変更

エディタでstyle.cssを開き、スタイルシートヘッダの記述を確認します。

@charset "UTF-8";
 /*----------このエリアは削除すると正しく動作しない可能性があります----------
 Theme Name: LION BLOG
 Theme URI: http://fit-jp.com/theme/
 Description: FIT(フィット) が制作するブログ用WordPressTHEME
 Author: Kota Naito　@FIT(フィット)
 Author URI: http://fit-jp.com/about/
 License: GNU GENERAL PUBLIC LICENSE
 License URI: http://www.gnu.org/licenses/gpl.html
 Version: 2.0.0
 Copyright (C) Fit(フィット).
 ----------このエリアは削除すると正しく動作しない可能性があります----------*/

「Theme Name」は必ず変更してください。ここが外観で表示されるテーマ名として認識されます。Theme URIからCopyrightまでの内容は任意で自分の情報に置き換えましょう。

 @charset "UTF-8";
 /*----------このエリアは削除すると正しく動作しない可能性があります----------
 Theme Name: Original
 Theme URI: http://original.com/theme/
 Description: ブログ用テーマ「Original」
 Author: Your name
 Author URI: http://yoursite.com/about/
 License: GNU GENERAL PUBLIC LICENSE
 License URI: http://www.gnu.org/licenses/gpl.html
 Version: 2.0.0
 Copyright (C) Original(オリジナル).
 ----------このエリアは削除すると正しく動作しない可能性があります----------*/

子テーマのスタイルシートヘッダを変更

つづいて子テーマの「lionblog-child」を選択します。

子テーマのスタイルシートヘッダを変更

こちらも同様にエディタでstyle.cssを開き、記述を確認します。ここで気をつけたいのは、「Template」の項目です。親テーマのフォルダ名を書くことで、その子テーマであることを認識させています。唯一、親テーマにはなく、子テーマにだけある項目です。

@charset "UTF-8";
 /*----------このエリアは削除すると正しく動作しない可能性があります----------
 Theme Name:   LION BLOG Child
 Theme URI:    http://fit-jp.com/theme/
 Description:  FIT(フィット) が制作するブログ用WordPressTHEME「LION BLOG」の子テーマ
 Author:       Kota Naito　@FIT(フィット)
 Author URI:   http://fit-jp.com/about/
 Template:     lionblog
 Version:      1.2
 License:      GNU GENERAL PUBLIC LICENSE
 License URI:  http://www.gnu.org/licenses/gpl.html
 ----------このエリアは削除すると正しく動作しない可能性があります----------*/

「Template」をテーマ名に合わせたフォルダ名に変更し、その他の内容も任意で自分の情報に置き換えます。

 @charset "UTF-8";
 /*----------このエリアは削除すると正しく動作しない可能性があります----------
 Theme Name:   Original Child
 Theme URI:    http://original.com/theme/ 
 Description:  ブログ用テーマ「Original」 の子テーマ
 Author:       Your name 
 Author URI:   http://yoursite.com/about/
 Template:     original
 Version:      1.2
 License:      GNU GENERAL PUBLIC LICENSE
 License URI:  http://www.gnu.org/licenses/gpl.html
 ----------このエリアは削除すると正しく動作しない可能性があります----------*/

フォルダ名を変更

先ほどのフォルダ名に合わせて親テーマを「original」、子テーマを「original-child」とします。

フォルダ名を変更

テーマ用の画像を変更

外観に表示されるテーマの画像を変更します。「original」と「original-child」の中にあるscreenshot.png（jpg）を削除し、新しい画像をscreenshotの名前で設置します。

テーマ用の画像を変更

子テーマがない場合は

子テーマがない場合は、親テーマの名前に「-child」とつけたフォルダを別途用意します。その中に以下のファイルを作成します。

子テーマのデータを作成

この時、style.cssにスタイルシートヘッダの記述をして、親と子の認識をさせます。

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' );
     wp_enqueue_style( 'child-style',
         get_stylesheet_directory_uri() . '/style.css',
         array('parent-style')
     );
 }
?>

自作テーマの場合は

自作テーマの場合は、親と子に分ける作業は必須ではありません。理由は、既存のテーマとは違い、Wordpress側で更新されることがないためです。メンテナンスなど自分で行わなければならない反面、作成者によるアップデートが入らない点では安全です。

今後の運用を考えるなら大枠は親テーマとして保存し、変更を加えるときは子テーマを利用すると保守性が上がります。誤って作業しても、バックアップデータに依存せず復旧できますよ。

今回は子テーマの作成、名前を変更して新しいテーマとして認識させる方法をご紹介しました。

「子テーマが必要になる理由」で解説した通り、作成者側のアップデートで内容が上書きされる恐れがあるので、必ず子テーマを作成、編集するようにしてくださいね。

「スタイルシートヘッダ」の記述は、親と子のテーマを関連付けるだけでなく、ライセンスや制作者名があることで不正対策にもなります。できる限り詳細に書くよう心がけましょう。