WordPressテーマ TCD「MAG」のカスタマイズ

ブログ運営

WordPressテーマ TCD「MAG」のカスタマイズ

僕が5年以上お世話になっているWordPressテーマTCDシリーズ。このブログは「MAG」というテーマですし、他のブログも全てTCDシリーズを利用しています。

元々デザイン性、機能性ともに素晴らしいテーマなのですが、カスタマイズすることでさらにSEOに強く、見栄えの良いブログになります。

そこで今回は、このブログで行っているカスタマイズを紹介していきます。TCDテーマ以外でも応用できることが多いので、参考にしてみてください。

※カスタマイズする際はバックアップを取り、自己責任で行ってください。

TCDのデモサイトはこちら

スタイルシートのカスタマイズ

まずはスタイルシートをカスタマイズしていきます。「外観→テーマ編集」と進み、「スタイルシート(style.css)」を開いてください。

見出し(hタグ)のデザイン

デフォルトではこのような味気ない見出しになります。
TCD カスタマイズ

それをこのようにカスタマイズします。
TCD カスタマイズ

では、スタイルシートの下記の部分を探してください。

/* ———————————————————————-
headline – 見出しのスタイル
———————————————————————- */

ここに、下記のコードを記入します。

記事を投稿する際にはこのように記載します。

このブログでは、同じように複数の見出しデザインを設定し「news_headline4」「news_headline5」のようにh3、h4タグなどで使い分けています。

【h3タグ例】

【記事への記載方法】

【h4タグ例】

【記事への記載方法】

見出しのデザインとCSSコードはこちらからお好きなものを選んでください。
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

文字装飾

文字を蛍光ペンでマーキングするような装飾を作るために、スタイルシートに下記のコードを記載します。

記事にはこのように記載します。

実際にはこのように表示されます。

マーカー  下線

#ffff66はお好きな色に変えてください。60%の数字を変更すると線の太さが変わりますので、ご自由に設定を変えてみましょう。見出しタグ、装飾タグはaddquickというプラグインですぐに呼び出せるようにすると便利です。

Google Analyticsの設定

Google Analyticsはプラグインを使ってもいいのですが、余計なプラグインを入れたくないのでヘッダーに直接コードを記入しています。

「外観→テーマ編集」と進み、「テーマヘッダー (header.php)」を開き、</head>の直前にAnalyticsのコードを記入すればOKです。ただ、このまま記載するとブログ管理画面からのアクセスも記録されてしまいます。

「/?p=****&preview=true」というプレビュー画面が記録されると、正確なデータが採れません。そこで、WordPressにログイン時はAnalyticsのコードを表示させないようにします。

具体的には、Analyticsのコードを以下のコードで挟みます。

実際にはこのようになります。

※「UA-●●●-●」はご自身のコードをご記入ください。

これでログイン状態からのアクセスは記録されません。試しにWordPressにログインした状態でトップページのコードソースを表示してみてください。Analyticsのコードが消えているはずです。

カスタムフィールドの設定

Google Analyticsでウェブテストを行う場合はカスタムフィールドを設定する必要があります。方法はこちらを参考にしてください。

WordPressでA/Bテストを実施する方法

hタグの割り振りを変更

TCDテーマは全ページのh1がサイトタイトルになっています。通常、トップページ以外では記事タイトルをh1にした方がSEO的に良いと言われています。さらに、ディスクリプションが全ページ共通でh2になっているので、これも変更した方がいいでしょう。

これについては、とてもわかりやすい記事があるのでこちらをご覧ください。

特定ページのヘッダーカスタマイズ

メルマガ読者を募集するようなページでは、ヘッドコピーを一番上に表示させたいところです。そこで、特定ページのヘッダー部分をごっそり削除するカスタマイズを行います。

特定ページのヘッダーカスタマイズ

この部分の「グローバルナビゲーション」「サイトタイトル」「パンくずリスト」を削除すると、このようになります。

特定ページのヘッダーカスタマイズ

カスタマイズしたページ例

具体的にはこのような手順になります。
※必ずバックアップを取った上で、自己責任で作業してください。

pageファイルの子テーマを作成

固定ページの子テーマを作成します。

テキストエディターを開き、「個別投稿ページ (page.php)」の中身をそのままコピペして、冒頭に下記のコードを書き加えます。

※「letter」はわかりやすいもので構いません。

さらに、「get_header();」を「get_header(“2”);」に変更します。

全体のコードは最終的にこのようなコードになります。

完成したら「page-2.php」など、わかりやすいファイル名をつけて保存してください。

headerの子テーマを作成

次に、headerの子テーマを作成します。

テキストエディターを開き、「テーマヘッダー (header.php)」の中身をそのままコピペしましょう。その上で、下記のコードを削除すると該当箇所が表示されなくなります。

【グローバルナビゲーション】

【サイトタイトル】

【パンくずリスト】

上記3箇所のコードを削除したら、「header-2.php」という名前を付けて保存してください。pageの子テーマで設定した「get_header(“2”);」と「header-2.php」の「2」が対応していますので、数字を統一させる必要があります。

子テーマをアップロード

今作成した「page-2.php」「header-2.php」の2つのファイルをFTPソフトを使ってアップロードします。アップロード先は「/wp-content/themes/mag_tcd036」です。
※「page.php」や「header.php」がある場所と同じ。

記事投稿

次に固定ページの投稿画面に移ってください。「固定ページの属性」という項目に「テンプレート」というプルダウンメニューがあるはずです。ここで「letter」を選択すると、ヘッダー部分を削除済みの「header-2.php」が呼び出されます。

特定ページのヘッダーカスタマイズ

まとめ

以上、このブログで行っているTCDテーマ「MAG」のカスタマイズ方法でした。TCDは頻繁にアップグレードされるので、その都度上記の手順でファイルをカスタマイズする必要があります。

また、今回紹介した方法の大部分は「MAG」専用のカスタマイズではなく、どのテンプレートでも応用できると思いますので、ぜひ試してみてください。

また、TCDは素晴らしいテンプレートですので一度使ってみることをオススメします。

TCDのデモサイトはこちら

稼ぐノウハウをひたすら垂れ流す無料メールマガジン

会員サービス構築、メールマーケティング、
最新情報、集客、コピーライティング・・・

無料メルマガでは2006年からネットビジネス一本で生計を立てている
実践的なノウハウを垂れ流しています。

再現性抜群の成功メソッドを受け取ってください。

メールアドレス




関連記事

  1. さくらインターネットでWordPressをドメイン直下に置く方法

    ブログ運営

    さくらインターネットでWordPressをドメイン直下に置く方法

    このWordPressをサーバにアップして最初に行ったのが、ブログ…

  2. Googleアナリティクス マイレポートの設定

    ブログ運営

    Googleアナリティクス マイレポートの設定

    Googleアナリティクスは便利だけど、機能が多くて何を見ていいの…

  3. WordPressでウェブテスト

    ブログ運営

    WordPressでA/Bテストを実施する方法

    「WordPressでA/Bテストしたいけど、どうやって特定のペー…

  4. ブログ運営

    ウィジェットを固定するWPプラグイン『Q2W3 Fixed Widget』

    ウィジェットを固定し、下へスクロールしてもサイドバーがついてくるWPプ…

  5. WordPress 目次

    ブログ運営

    目次を自動挿入してくれるWPプラグイン『Table of Contents Plus』

    WordPressの投稿記事や固定ページに目次を自動挿入してくれるプラ…

  6. いちばんよくわかる! WordPress運用効率化

    ブログ運営

    いちばんよくわかる!WordPressの運用効率化

    WordPressの良い点は、「知識がなくても、自分がやりたいこと…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

コメントするためには、 ログイン してください。

稼げるマーケティング本

Kindle本

ココナラで激安サービス出品中!

ココナラ出品

安定したビジネス構築を学ぶためのメルマガ

Kindle関連 おすすめ記事

  1. Kindle用の電子書籍の制作方法
  2. 売れる電子書籍のタイトル
  3. Kindle電子書籍の表紙の作り方

マーケティング関連 おすすめ記事

  1. 初心者でも稼げるおすすめ副業の始め方
  2. 記事に価値を持たせる簡単な方法

おすすめコンテンツ

Kindle本

ココナラ出品

安定したビジネス構築を学ぶためのメルマガ

  1. 売れる電子書籍のタイトル

    電子書籍

    売れるKindle電子書籍のタイトル
  2. 電子書籍

    1年でヨガ教室の生徒を10倍にした集客法
  3. 電子書籍

    Kindle電子書籍出版のための初期登録
  4. 電子書籍

    ビジネス関連のKindle本紹介
  5. Kindle電子書籍の出版方法

    電子書籍

    Kindle電子書籍の出版方法
PAGE TOP