カスタマイズを潰さない!WordPress子テーマの作り方|まず一度、会ってもらえるSEO@千葉県市原市

まず一度、会ってもらえるSEO@千葉県市原市|ウェブデザインときた

お問い合わせはこちら

お問い合わせは、メールでお気軽に

2日後の13:00までに返信します

お問い合わせ用ページ

カスタマイズを潰さない!WordPress子テーマの作り方

WordPressは、「WordPressテーマ」と呼ばれるデザインテンプレートを差し替えるだけで、ホームページのデザインを変えることができ、非常に便利です。
ですが、巷に出回っているWordPressテーマは、いわゆる「既製品」ですので、自分好みにカスタマイズしたいことも多々ありますよね?

WordPressテーマのカスタマイズには、注意すべき点が2つあります。

  • 変更を1歩間違えると、画面が表示されなくなる。
    この場合、ログイン画面も表示できなくなります。
    対策は、「FTPソフトとテキストエディタでカスタマイズを行う」です。詳しくは後述の、FTPソフトとテキストエディタに関する記事へのリンクを参照ください。
  • WordPressテーマをアップデートすると、カスタマイズが全て上書きされて消えてしまう。
    対策は、今回紹介する「子テーマを作ってカスタマイズを行う」です。

子テーマというのは、カスタマイズしたいWordPressテーマを「親」と設定して別テーマを作る手法です。カスタマイズを実施したファイルだけを子テーマのテーマファイルとし、その他のファイルは親テーマのテーマファイルを使って、WordPressホームページを表示します。

親テーマがアップデートされても、子テーマはアップデートされませんので、カスタマイズした部分は上書きされずに残ります。

というわけで、WordPress子テーマの作り方を紹介します。
なお、子テーマを作るには、FTPソフトとテキストエディタが必要です。以下の記事を参考にしてご用意ください。

子テーマの作り方

ここでは、デフォルトテーマ「Twenty Fourteen」の子テーマを「Twenty Fourteen Child」という名前で作成します。

(1)パソコン上に、任意のフォルダを新規作成する。

(2)テキストエディタを開き、以下の内容を記述する。

/*
    Theme Name: Twenty Fourteen Child
    Template: twentyfourteen
    Description: 子テーマの説明
    Author: 制作者
    Author URI: 制作者のURL
    Version: 1.0 など
*/

@import url(‘../twentyfourteen/style.css’);

Theme Name(必須)
子テーマの名前を記述します。
Template(必須)
親テーマのフォルダ名を記述します。テーマ名ではないことにご注意ください。
Description(任意)
子テーマの説明を記述します。
Author(任意)
制作者名を記述します。
Author URI(任意)
制作者のURLを記述します。
Version(任意)
バージョンを記述します。
@import url(‘../○○○○○○○/style.css’);(必須)
親テーマのstyle.cssの設定内容を取り込むための記述です。
「○○○○○○○」の部分は、親テーマのフォルダ名(「Template」の記述内容と同一)です。

(3)上記(2)で作成した内容を、以下の設定で保存(名前を付けて保存)する。

  • 保存先:上記(1)で作成したフォルダ
  • ファイル名:style.css
  • 文字コード(※):UTF-8
  • 改行コード:LFのみ

※「文字コード」は、「エンコード」となっているテキストエディタもあります。

名前を付けて保存

(4)FTPソフトで、フォルダごとサーバーにアップロードする。
※アップロード先:「WordPressがインストールされているフォルダ/wp-content/themes」の下

FTPで、フォルダごとサーバーにアップロード

WordPressにログインして、「外観→テーマ」でテーマ一覧画面を表示すると、作成した子テーマが選択できるようになっています。

テーマ選択画面

あとは、親テーマのフォルダからテーマファイルをダウンロードしてカスタマイズし、子テーマのフォルダにアップロードして動作確認していくだけです。

子テーマが持つ「親テーマがアップデートされても、子テーマはアップデートされない」という特徴には、「カスタマイズが潰れない」というメリットがあるかわりに、以下のデメリットもあります。

  • 親テーマのアップデートが「不具合の改修」といった場合でも、子テーマはアップデートされません。
  • 親テーマのアップデートに伴い、画面表示に異常が出る可能性があります。
    子テーマにあるファイルは「親テーマの古いバージョン」ですので、WordPressテーマ全体としては、異なるバージョンのテーマファイルを使って画面を表示する形となります。

ですので、「親テーマをアップデートした場合、子テーマのメンテナンスが必要になることもある」という点はご注意ください。

「子テーマを作ってカスタマイズしたい」といったご要望がありましたら、以下までご相談ください。

ご相談はこちら