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

2020/6/20 WordPress

当社のコーポレートサイトは有料のWordPressテーマ「UNIQUE」で作りました。

参照 企画デザイン事務所 スラッシュディー（slashd.com）

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

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

スポンサーリンク

子テーマを作る

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

style.cssの作成

@charset "utf-8";
/*
Theme Name:UNIQUE child
Author:Slashd
Template:unique_tcd044
Version:1.5
*/

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

functions.phpの作成

<?php
// スタイルシートの読み込み -----------------------------------------------------------------------
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
    wp_dequeue_style('style');
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style( 'style-child', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
    //JSをフッタで読み込む
	//wp_enqueue_script( 'jscript-child', get_stylesheet_directory_uri() . '/js/jscript.js', array(), '', true );
}
//JSをヘッダで読み込み -----------------------------------------------------------------------
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
function twpp_enqueue_scripts() {
  wp_enqueue_script( 
    'custum-script', 
    get_stylesheet_directory_uri() . '/js/jscript.js'
  );
}

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

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

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

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

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

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

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

WordPressテーマTCDのhead.phpをカスタマイズする（カスタムCSSを不要にする）
やっと当サイトテーマのカスタマイズが一段落付きました。 不良と言えるほどではないにしても、気になる点が結構出て...
www.slashd.com
2018-08-26 10:59

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

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

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

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

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

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

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

<div id="page_header">
  <h2 class="headline rich_font" style="font-size:<?php echo esc_html($headline_font_size); ?>px;"><?php the_title(); ?></h2>
  <!-- 追加 start -->
  <div class="desc" style="font-size:<?php echo esc_html($desc_font_size); ?>px;">
   <p><?php wp_title(); ?></p>
  </div>
  <!-- 追加 end -->
 </div>

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」の以下の部分を修正する必要があります。

■修正前

<title><?php wp_title('|', true, 'right'); ?></title>
<meta name="description" content="<?php seo_description(); ?>">
<?php if($options['use_ogp']) { ogp(); }; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

■修正後

<title><?php wp_title('|', true, 'right'); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

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

最後に

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

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

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

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

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

by T.Y.

スポンサーリンク