WordPress

WordPressテーマTCDの注意点。子テーマの作り方や、CSSを書くときの注意等。

更新日:

当社のコーポレートサイトは有料のWordPressテーマ「UNIQUE」で作りました。
私は今まで多数の個人ブログを作成・運営してきましたが、有料のテーマを使うのは初めてです。
使ってみると「WordPressテーマTCD」はホームページを作るのに最適なテーマだと分かりました。
しかし、カスタマイズは一般の方には難しい部分もあります。
このページが、少しでも参考になればと思います。

(このページは、ある程度WordPressをご存じの方を対象に書いています。)

スポンサーリンク

子テーマを作る

実は「WordPressテーマTCD」は子テーマを作る必要がありません。
カスタマイズするために「カスタムCSS」を設定する機能があらかじめ用意されているからです。
しかし、もともとのPHPファイルを修正する箇所も出てくるので、私の場合は子テーマを作成しました。

style.cssの作成

Versionは親テーマに合わせておきます。
そうしないと、テーマの更新通知が来ます。

functions.phpの作成

スタイルシートの読み込みで子テーマのstyle.cssが有効になります。
私の場合はJavaScriptも子テーマ用のものを作りました。

これらのファイルを「themes」フォルダーに「unique-child」というフォルダーを作ってアップロードします。
(-childとつけるのが慣例)

以上で子テーマが完成です。

子テーマだけではカスタマイズ出来ない

子テーマさえ作れば自由にカスタマイズできると思っていたのですが…
どうしても「カスタムCSS機能」を使わないといけない状況に陥りました。

「responsive.css」が親のfunctions.phpでrequireされたPHPに入っているので、子テーマで読み込んだstyle.cssより後で読み込まれてしまうのです。
スマホのカスタマイズを行う際には「カスタムCSS」を設定する必要があります。
「カスタムCSS」が最も後に読み込まれるCSSです。

(追記)以下のページをご参照頂ければ、ほぼ子テーマだけでカスタマイズを完了出来ます。

WordPressテーマTCDのhead.phpをカスタマイズする(カスタムCSSを不要にする)

やっと当サイトテーマのカスタマイズが一段落付きました。 不良と言えるほどではないにしても、気になる点が結構出てきました。 ...

続きを見る

CSSに!important 宣言しないと機能しません

「WordPressテーマTCD」は「TCDテーマオプション」で基本的な設定ができます。

しかし、デメリットもあって、ほとんどのスタイルがHTMLの中で定義してあるため、CSSの設定が有効になりません。
そのためCSSに!important 宣言をする必要があります。

固定ページの英字タイトル下の日本語タイトルの設定

「WordPressテーマTCD」のデモページにはページタイトル下に日本語タイトルが小さく入っています。
同じようにしたかったのですが、日本語タイトルを入力する欄が見つけられませんでした。

これには少し閉口しました。

仕方なく「page.php」と「page-noside.php」を子テーマに設置し、以下のコードを書き込んでいます。
ページタイトルから設置しています。

All in One SEOと共存できない

「WordPressテーマTCD」はSEOプラグインの「All in One SEO」と相性が悪いです。
これは「WordPressテーマTCD」自体にSEO機能が備わっているためなのですが、ページ毎のSEO設定は「All in One SEO」の方が優れていると感じます。
そこで、私の場合は「All in One SEO」を導入しました。

そのためには「header.php」の以下の部分を修正する必要があります。

■修正前

■修正後

discriptionの設定とogpの設定は「All in One SEO」で定義します。

最後に

やってみると困った現象も起きます。

トップページ設定で画像を変更しようとして先に削除するとコンテンツビルダー設定が消えてしまいます。
決して設定してある画像を削除してはいけません。

それにTCDテーマオプションの設定を行うと、ブログの英字タイトルがいつもカタカナに置き換わります。

少しイライラする不良ですが、全体の機能性を考えると帳消しになります。
とにかくユーザーの思いにこたえてくれるテーマです。

以上、「WordPressテーマTCD」導入の際には参考にしていただければ幸いです。

by T.Y.

-WordPress
-,

Copyright© Slashd Inc. BLOG , 2019 All Rights Reserved.