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

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

www.slashd.com

企画デザイン事務所 スラッシュディー | 岡山市のWEBプロデュース会社。想いをつなぐデザイン事務所。

スラッシュディーは岡山市のWEBプロデュース会社です。企画制作からマーケティングコンサルまでワンストップで対応。WEBサイトでの集客を完...

私は今まで多数の個人ブログを作成・運営してきましたが、有料のテーマを使うのはこのサイトが初めてでした。

使ってみると「WordPressテーマTCD」はホームページを作るのに最適なテーマだと分かりました。

しかし、カスタマイズは一般の方には難しい部分もあります。

このページが、少しでも参考になればと思います。

※WordPressテーマ「UNIQUE」は少し古いテーマです。現在のWordPressテーマTCDの各テーマに共通しない部分もありますので、ご注意ください。

子テーマを作る

実は「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です。

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」導入の際には参考にしていただければ幸いです。

以下の記事が、WordPressテーマ「EGO.」の子テーマについて参考になります。

関連記事子テーマをつくる際、同じstyle.cssを2度読み込んでいないかチェックしよう！

2023.07.09

「EGO.」は土井農園さまのサイト制作にも利用させていただきました。

doi-nouen.com

最上干柿の土井農園 – ちょっと心のこもった干柿あります　岡山県矢掛町 土井農園 通販サイト

晴れのめぐみ岡山ブランド認定の最上干柿、干し柿を使った和スイーツ、自然のサイクルを活かした栽培にこだわった野菜や果実のご飯のおともや手作...

プロモーション

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能 他、機能多数。

プロモーション