WordPress

※ページに広告を含みます。

WordPressテーマTCDの子テーマの作り方とカスタマイズ方法

WordPressテーマのブランド「TCD」では、便利にカスタマイズするための子テーマを作ることができます。

一部のTCDテーマが対象となりますが、あらかじめ筆者が子テーマを作成して、ダウンロードできるようにしておきました。

その「子テーマ」とは何なのか?どのように使えば良いのか?この記事では、WordPressテーマTCDの子テーマの概要や、作り方などを解説しました。

WordPressテーマTCDの子テーマとは?

WordPressの「テーマ」は、一般的に「親テーマ」のことを指しています。この親テーマに影響を与えずにカスタマイズできるのが子テーマ」です。

この子テーマの作成は必須ではなく、プログラミングのコードでカスタマイズしない方は不要です。

子テーマがなくても、WordPress管理画面 > カスタマイズ > 追加CSSの欄からコードを追加することで若干のデザイン調整をすることができます。

メリット

  • 親テーマの更新によってカスタマイズ内容が上書きされるリスクを避けられる
  • 親テーマの機能やスタイルを活かしながら、必要な部分だけを変更・拡張できるため、開発効率が良い
  • 親テーマがしっかり作られていれば、その恩恵(機能・セキュリティ対応など)を受けつつ、独自デザインや機能を追求できる

デメリット

  • 子テーマを扱うには、親テーマの構造を少し理解しておく必要があり、学習コストがかかる場合がある
  • 子テーマは親テーマに依存しているため、親テーマの開発が停止・変更されたり、構造が大きく変わったりすると、子テーマが動作しなくなるリスクがある
  • ごく少ない変更(CSSを少し変更するだけ)であれば、子テーマを用意するほどの労力が見合わない場合もある

WordPressテーマTCDの子テーマのダウンロード

子テーマを作るのが手間だと思う方は、すでに作成したものをダウンロードできるようにしておきました。

ただし、こちらはWordPressテーマTCD「Rebirth(現在は廃盤)」の子テーマで、筆者が作成したものです。

TCDテーマはホームページ(企業、社内ポータルサイト整骨院、飲食店など)、ブログ(有料・買い切り)、ECサイトLP(1カラム)など様々なテーマを提供しています。全てのTCDテーマに対応できるかチェックできていません。

もし、うまく動作しない場合は、次の項目で解説している「子テーマ作成プラグイン」を使うか、別途カスタマイズしてください。以下のボタンを押すと、ZIPファイル形式でダウンロードできます。

※こちらのZIPファイルは、マルウェアのスキャン済みです。それでも不安な方は、次の項目を参考に自作してください。

Rebirth子テーマのダウンロード

WordPressテーマTCDの子テーマの作り方

WordPressテーマTCDの子テーマを作るには、2つの方法があります。

プラグインで作成する方法

子テーマは専用のプラグインでも作成できます。今回は「Child Theme Configrator」というプラグインを使用し、子テーマを作成する手順で解説します。

まずは、以下の方法でプラグインをインストールします。

  1. 左サイドバーの「プラグイン」>「新規プラグインを追加」をクリック
  2. 検索窓に「Child Theme Configrator」と入力
  3. 表示されたChild Theme Configratorの下にある「今すぐインストール」をクリック

その後、表示された「有効化」を押せばプラグインを利用できます。

Child Theme Configratorのインストール方法

左サイドバーの「ツール」>「Child Theme」をクリックします。

Child Theme Configratorの使い方0
  1. 「Select a Parent Theme(親テーマを選択)」の項目からテーマを選択
  2. 「Analyze(分析)」をクリック
Child Theme Configratorの使い方1

特に問題なければ、”This theme appears OK to use as a Child theme.(このテーマは子テーマとして使用しても問題ないようです。)”と表示されます。

Child Theme Configratorの使い方2

他にも細かい設定項目もありますが、今回はこのまま「Create New Child Theme(新しい子テーマを作成」をクリックします。

Child Theme Configratorの使い方4

問題なく生成できれば、”Child Theme 〇〇 has been generated succefully(子テーマ 〇〇が正常に生成されました。)”と表示されます。

Child Theme Configratorの使い方5
  1. 「外観」>「テーマ」を押して子テーマを選択します。
  2. 表示された子テーマの「有効化」を押して適用されます。
Child Theme Configratorの使い方6

現在、このプラグインで作成した子テーマを使っていますが、今のところ不具合はありません。

TCDテーマは種類が豊富なため、この方法で不具合がありそうでしたらサポートにお問い合わせするか、プログラミングのコードで作成してください。

プログラミングで作成する方法

子テーマの作り方は難しくなく、とても簡単です。以下の3つを作成します。

  • 子テーマ用のフォルダ
  • style.cssファイル
  • function.phpファイル

ここでは、無料のTCDテーマ「Rebirth」の子テーマの作り方でご紹介します。

子テーマは、パソコンにはじめからインストールされている、メモ帳のソフトウェアで作成できます。

はじめに子テーマ用のフォルダを作成します。フォルダ名は何でも良いのですが、今回は「rebirth_child」としました。

WordPressの子テーマのフォルダ名

次に、作成したフォルダの中でテキストエディタ(メモ帳などのソフトウェア)を開き、以下のコードをコピー&ペーストします。

その後、「style.css」というファイル名にして保存します。

/*
Theme Name:Rebirth Child
Theme URI:
Description:WordPressテーマTCD「Rebirth」の子テーマ。
Template:rebirth_free001
Author:
Version:1.1.2
*/

※「Author(著者)」の箇所は空白にしています。

もう一つのファイルは、以下をコピーしてメモ帳にペーストし、「function.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')
);
}
?>

注意点としては、「style.css.txt」や「function.php.txt」ではなく、「style.css」と「function.php」というファイル名にしてください。

また、ファイル名の文字列を間違えると、WordPressにアップロードできませんのでご注意ください。

最後に、「rebirth_child」のフォルダごとzip形式で圧縮します。圧縮すると、「rebirth_child.zip」という表記になります。

WindowsやGoogleクロームブックの場合は、右クリックするとzip形式で圧縮する項目が出てきます。そちらを押すだけでzipファイルが完成します。

作成した子テーマのZIPファイル化

一部のTCDテーマでは、少し違うコードで子テーマを作成する必要があるようです。

もし、これらの作成方法でうまくいかない場合は、以下のWordPressテーマTCDの記事もご確認ください。

参考記事:WordPressの子テーマを作る理由と子テーマを自作する方法 | WordPressテーマTCD

WordPressテーマTCDの子テーマの使い方

作成した子テーマは、親テーマと一緒にインストールします。WordPressテーマのインストール方法については、別の記事にまとめています。

関連記事:WordPressテーマTCDとは?評判・料金・使い方を徹底解説

注意点としては、子テーマの方を有効化してください。親テーマの情報は、その子テーマが引き継ぎます。

子テーマの有効化

※子テーマの画像は設定していませんので、このような表示になります。

WordPressテーマTCDの子テーマのカスタマイズ方法

テーマをカスタマイズしたい場合は、親テーマではなく、子テーマにプログラミングのコードを追加します。

ただし、「HTML」、「CSS」、「PHP」というプログラミング言語の知識が必要となりますので、ある程度学習が必要です。

WordPressテーマTCDでは、「TCD LABO」というカスタマイズの解説サイトがあり、そちらから学習もできます。

また、ChatGPTなど生成AIに命令して作成してもらうこともできますが、うまく動作したり、しなかったりと、運による部分もあります。

参考記事ChatGPT 日本語での始め方と使い方 PC・スマホ・アプリでできることとは?

style.cssとfunction.phpのカスタマイズ

子テーマからカスタマイズするには、WordPressの管理画面から、左側の「外観」を押します。

※セキュリティ設定などが原因で、この方法で保存できない場合はサーバーの「ファイルマネージャー」から同じファイルを探して編集してください。

その後、1の「」を押します。2にある、以下のファイルを選択します。

  1. 「テーマファイルエディター」をクリック
  2. 「Stylesheet」または「Theme Functions」をクリック
子テーマの使い方2

※Stylesheetでは「CSS」、Theme Functionsでは「PHP」というプログラミング言語を使用します。

各ファイルの記載されているコードの下、3の箇所にカスタマイズ用のコードを作成して入力します。

各ページのカスタマイズ

解説した子テーマのファイルだけでも、ある程度カスタマイズができます。しかし、各ページごとのカスタマイズもできます。

例えば、投稿ページ(記事ページ)をカスタマイズするとします。その場合、親テーマの投稿ページのファイル(single.php)をご利用のサーバーからダウンロードします。

それを子テーマのフォルダにアップロードしてから、編集してカスタマイズすることができます。

レンタルサーバーからダウンロード・アップロードするには、2つの方法があります。

  1. レンタルサーバーのファイルマネージャを使う
  2. ファイル転送ソフトウェアのFTPソフトを使う

1.の「ファイルマネージャ」のほうが簡単でおすすめです。今回は、国内シェアNo.1レンタルサーバー「エックスサーバー」のファイルマネージャで解説します。

ご利用のサーバーによってWordPressファイルの場所が違う場合がありますので、各公式サイトなどでご確認ください。

ファイルマネージャを開き、以下の順にフォルダを開きます(以下、エックスサーバーの画面で。

ご利用のドメイン > public_html > wp-content > themes > 親テーマのフォルダ名

そこに表示された、「single.php」をクリックします。

子テーマのページカスタマイズ1

上部メニューの「ダウンロード」を押して、ポップアップ画面の「ダウンロード」も押すとPC上にダウンロードされます。

子テーマのページカスタマイズ2

そのまま、すでにアップロードした子テーマに、アップロードします。今回は、すでに子テーマを作成してアップロードしている前提で進めています。

子テーマ作成時に、このsingle.phpを入れてzipファイルにしても良いです。その後、WordPress内からインストールすれば同じ状態になります。

サーバーからアップロードするには、以下の順にフォルダを開きます。

ご利用のドメイン > public_html > wp-content > themes > 子テーマのフォルダ名

子テーマのフォルダを開いたら、上部にある「アップロード」を押します。

子テーマのページカスタマイズ3

single.phpファイルを選択して「アップロード」を押します。

子テーマのページカスタマイズ4

次に、ご利用のWordPressサイトへログインします。左サイドバーの「外観」から「テーマファイルエディター」の順に押します。

その後、右側の「Single Post(single.php)」を押します。こちらが表示されているということは、single.phpがアップロードできている状態です。

当ブログの場合は、記事タイトルの下に段落タグと文を追加ししました。

子テーマのページカスタマイズ5

同様に、固定ページやカテゴリーページをカスタマイズしたい場合も、同様の操作ですることができます。

まとめ

WordPressテーマTCDの子テーマを使うことで、親テーマに影響を与えずにカスタマイズできます。

子テーマは簡単に作成することができますが、カスタマイズするのにプログラミングの知識が必要となります。

TCDテーマのカスタマイズ解説サイトTCD LABOや、ChatGPTなどの生成AIを活用しながらカスタマイズしてみてください。

TOP