WordPressテーマのブランド「TCD」では、便利にカスタマイズするための子テーマを作ることができます。
一部のTCDテーマが対象となりますが、あらかじめ筆者が子テーマを作成して、ダウンロードできるようにしておきました。
その「子テーマ」とは何なのか？どのように使えば良いのか？この記事では、TCDテーマの子テーマの作成方法やカスタマイズ術を解説しました。
TCDの微調整・カスタマイズを代行します
「調べても解決方法が見つからない」
「自力での修正に限界を感じている」
この記事の内容を含め、TCD特有の仕様による表示崩れや、個別のデザイン調整をピンポイントで解決します。
テーマのアップデートに影響しにくい手法で、運用効率を妨げないコードを実装します。
TCD WordPressテーマの「子テーマ」とは？
WordPressの「テーマ」は、一般的に「親テーマ」のことを指しています。この親テーマに影響を与えずにカスタマイズできるのが「子テーマ」です。
この子テーマの作成は必須ではなく、プログラミングのコードでカスタマイズしない方は不要です。
子テーマがなくても、WordPress管理画面 ＞ カスタマイズ ＞ 追加CSSの欄からコードを追加することで、若干のデザイン調整をすることができます。
メリット
- 親テーマの更新によって、カスタマイズ内容が上書きされるリスクを避けられる
- 親テーマの機能やスタイルを活かしながら、必要な部分だけを変更・拡張できるため、開発効率が良い
- 親テーマがしっかり作られていれば、その恩恵（機能・セキュリティ対応など）を受けつつ、独自デザインや機能を追求できる
デメリット
- 子テーマを扱うには、親テーマの構造を少し理解しておく必要があり、学習コストがかかる場合がある
- 子テーマは親テーマに依存しているため、親テーマの開発が停止・変更されたり、構造が大きく変わったりすると、子テーマが動作しなくなるリスクがある
- ごく少ない変更（CSSを少し変更するだけ）であれば、子テーマを用意するほどの労力が見合わない場合もある
TCD WordPressテーマ 子テーマのダウンロード（無料）
子テーマを作るのが手間だと思う方は、すでに作成したものをダウンロードできるようにしておきました。ただし、こちらは無料で提供されているTCD「GLUE」の子テーマで、筆者が作成したものです。
TCDテーマはホームページ（企業、社内ポータルサイト、整骨院、飲食店など）、ブログ（有料・買い切り）、ECサイト、LP（1カラム）など様々なテーマを提供しています。そのため、全てのTCDテーマに対応できるかチェックできていません。
もし、うまく動作しない場合は、後述する「子テーマ作成プラグイン」を使うか、別途カスタマイズしてください。以下のボタンを押すと、ZIPファイル形式でダウンロードできます。
※以下のZIPファイルは、マルウェアのスキャン済みです。念の為、VirusTotal（Google傘下のChronicleが運営）など、マルウェア・チェックツールでスキャンしてください。
こちらのダウンロードが不安な場合は、次の項目を参考に自作してください。
TCD WordPressテーマの子テーマ作成方法
TCD WordPressテーマの子テーマを作るには、2つの方法があります。
プラグインで作成する方法
子テーマは専用のプラグインでも作成できます。今回は「Child Theme Configrator」というプラグインを使用し、子テーマを作成する手順で解説します。
まずは、以下の方法でプラグインをインストールします。
- 左サイドバーの「プラグイン」>「新規プラグインを追加」をクリック
- 検索窓に「Child Theme Configrator」と入力
- 表示されたChild Theme Configratorの下にある「今すぐインストール」をクリック
その後、表示された「有効化」を押せばプラグインを利用できます。
左サイドバーの「ツール」>「Child Theme」をクリックします。
- 「Select a Parent Theme（親テーマを選択）」の項目からテーマを選択
- 「Analyze（分析）」をクリック
特に問題なければ、”This theme appears OK to use as a Child theme.（このテーマは子テーマとして使用しても問題ないようです。）”と表示されます。
他にも細かい設定項目もありますが、今回はこのまま「Create New Child Theme（新しい子テーマを作成」をクリックします。
問題なく生成できれば、”Child Theme 〇〇 has been generated succefully（子テーマ 〇〇が正常に生成されました。）”と表示されます。
- 「外観」>「テーマ」を押して子テーマを選択します。
- 表示された子テーマの「有効化」を押して適用されます。
現在、このプラグインで作成した子テーマを使っていますが、今のところ不具合はありません。
TCDテーマは種類が豊富なため、この方法で不具合がありそうでしたらサポートにお問い合わせするか、以下のプログラミングのコードで作成してください。
プログラミングで作成する方法
子テーマの作り方は難しくなく、とても簡単です。以下の3つを作成します。
- 子テーマ用のフォルダ
- style.cssファイル：デザインの調整するためのファイル
- function.phpファイル（任意）：主に機能を追加するためのファイル
子テーマは、パソコンにはじめからインストールされている、メモ帳のソフトウェアで作成できます。
はじめに、子テーマ用のフォルダを作成し、「glue-child」などのファイル名を付けます。
次に、作成したフォルダの中でテキストエディタ（メモ帳などのソフトウェア）を開き、以下のコードをコピー＆ペーストします。その後、「style.css」というファイル名にして保存します。
/*
Theme Name:Child Theme
Template:glue_free002
*/もう一つのファイルは、必須ではなく任意です。以下をコピーしてテキストエディタにペーストし、「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にアップロードできませんのでご注意ください。
最後に、「glue-child」のフォルダごとzip形式で圧縮します。圧縮すると、「glue-child.zip」という表記になります。
WindowsやGoogleクロームブックをご利用の場合は、右クリックすると「zip」の項目が出てきます。そちらをクリックするだけでzipファイルが完成します。
もし、これらの作成方法でうまくいかない場合は、以下のTCD公式ブログの記事もご確認ください。
参考記事：WordPressの子テーマを作る理由と自作方法 | TCD WordPressテーマ
TCD WordPressテーマの子テーマの使い方
作成した子テーマは、親テーマと一緒にインストールします。WordPressテーマのインストール方法については、別の記事にまとめています。
参考記事：TCD WordPressテーマとは？評判・料金・使い方を徹底解説
注意点としては、子テーマの方を有効化してください。親テーマの情報は、その子テーマが引き継ぎます。
※子テーマの画像は設定していませんので、上記のような表示になります。
子テーマをカスタマイズする手順
テーマをカスタマイズしたい場合は、親テーマではなく、子テーマにプログラミングのコードを追加します。ただし、プログラミング言語の知識が必要となりますので、ある程度学習が必要です。
TCD WordPressテーマでは、「TCD LABO」というカスタマイズの解説サイトがあり、そちらから学習もできます。
また、GeminiやChatGPTなど生成AIに作成してもらうこともできますが、うまく動作したり、しなかったりと、運による部分もあります。
参考記事：ChatGPT 日本語での始め方と使い方
サーバー内のファイルへのアクセス・編集方法
作成した子テーマおよびファイルを編集するには、以下の方法で、サーバー内のファイルへアクセスする必要があります。
レンタルサーバーからダウンロード・アップロードするには、2つの方法があります。
- レンタルサーバーのファイルマネージャー
- ファイル転送ソフトウェアのFTPソフト
※この他にWordPressの管理画面内にある「テーマファイルエディター」からファイルが表示できますが、サーバー側などのセキュリティ対策で編集できないことが多いです。
これらの内、「ファイルマネージャー」のほうが簡単でおすすめです。ご利用のサーバーでファイルマネージャーを開ける項目を確認してください。
各ファイルやページのカスタマイズ
すでに作成した子テーマのファイル（style.cssとfunctions.php）だけでも、ある程度カスタマイズができます。しかし、各ページのファイルを追加してカスタマイズすることもできます。
例えば、投稿ページ（記事ページ）をカスタマイズするとしたら、以下の手順で行ないます。
- 親テーマの投稿ページのファイル（single.php）を、サーバーのファイルマネージャーからダウンロード
- ファイル（single.php）を、子テーマのフォルダにアップロード
- ファイルを編集してカスタマイズ
ページのファイルをダウンロードしたい場合は、ファイルマネージャを開き、以下の順にフォルダを開きます。
ご利用のドメイン > public_html > wp-content > themes > 親テーマのフォルダ名
そこに表示された、「single.php」をクリックします。
上部メニューの「ダウンロード」を押して、ポップアップ画面の「ダウンロード」も押すとPC上にダウンロードされます。
そのまま、すでにアップロードした子テーマに、アップロードします。今回は、すでに子テーマを作成してアップロードしている前提で進めています。
子テーマ作成時に、このsingle.phpを入れてzipファイルにしても良いです。その後、WordPress内からインストールすれば同じ状態になります。
サーバーからアップロードするには、以下の順にフォルダを開きます。
ご利用のドメイン > public_html > wp-content > themes > 子テーマのフォルダ名
子テーマのフォルダを開いたら、上部にある「アップロード」を押します。
single.phpファイルを選択して「アップロード」を押します。
次に、ご利用のWordPressサイトへログインします。左サイドバーの「外観」から「テーマファイルエディター」の順に押します。
その後、右側の「Single Post（single.php）」を押します。こちらが表示されているということは、single.phpがアップロードできている状態です。
当ブログの場合は、記事タイトルの下に段落タグと文を追加ししました。
同様に、固定ページやカテゴリーページをカスタマイズしたい場合も、同様の操作ですることができます。
関連記事：TCDテーマの使い方と基本設定
まとめ：子テーマを活用して自力で安全に管理する
TCD WordPressテーマの子テーマを使うことで、親テーマに影響を与えずにカスタマイズできます。子テーマは簡単に作成することができますが、カスタマイズするのにプログラミングの知識が必要となります。
プログラミングのコードは、TCDのカスタマイズ解説サイト「TCD LABO」や、生成AIを活用しながらチャレンジしてみてください。
理想の仕上がりを、プロの技術で。
「自分で調整してみたけれど、どうしても1pxのズレが気になる」
「コードを触る時間をもっとコンテンツ制作に充てたい」
そんな時は、TCDテーマの独自仕様を熟知したカスタマイズサービス「サイトリノベ」にお任せください。
1pxの精度にこだわり、アップデート耐性まで考慮した「負債にならないコード」で、あなたのサイトを理想の形に整えます。