ビジネス向けWEBサイトをつくる

子テーマでできること広告・PR

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

本ページはプロモーションが含まれています

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

企画デザイン事務所 スラッシュディー | 岡山市のWEBプロデュース会社。想いをつなぐデザイン事務所。
www.slashd.com
企画デザイン事務所 スラッシュディー | 岡山市のWEBプロデュース会社。想いをつなぐデザイン事務所。
スラッシュディーは岡山市のWEBプロデュース会社です。企画制作からマーケティングコンサルまでワンストップで対応。WEBサイトでの集客を完...

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

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

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

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

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

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

子テーマを作る

実は「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とつけるのが慣例）

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

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定（絵文字読み込み・コード最適化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

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

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

「responsive.css」が親のfunctions.phpでrequireされたPHPに入っているので、子テーマで読み込んだstyle.cssより後で読み込まれてしまうのです。

スマホのカスタマイズを行う際には「カスタムCSS」を設定する必要があります。
「カスタムCSS」が最も後に読み込まれるCSSです。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

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度読み込んでいないかチェックしよう！

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

最上干柿の土井農園 – ちょっと心のこもった干柿あります　岡山県矢掛町 土井農園 通販サイト
doi-nouen.com
最上干柿の土井農園 – ちょっと心のこもった干柿あります　岡山県矢掛町 土井農園 通販サイト
晴れのめぐみ岡山ブランド認定の最上干柿、干し柿を使った和スイーツ、自然のサイクルを活かした栽培にこだわった野菜や果実のご飯のおともや手作...

プロモーション

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。
詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

five × 1 =

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
プロフィールはこちら
お問い合わせはこちら
※以下は私が活動している企業情報にリンクしています。