WordPressのテーマをStinger5からCORE(tcd027)に移行してみた

こんにちは、コーヒーマイスターのmongomeです。

最近、知り合いがどんどん結婚するので、ブログを書く時間が増えている気がします。

私はこのブログをWordPressというCMSを使って管理しているんですが、最近テーマを変更しました。

テーマを変えた理由?

GW暇だったので。。

 

さて、私はこれまではStinger5という無料テンプレートの中でもSEOやレイアウトに定評のあるテンプレートを使っていました。

Stinger5は管理やカスタマイズもしやすく、不満は全くなかったんですよね。

ただ、興味本位で有料テーマのサイトを回っていたら、デザインがメチャクチャ魅力的なテーマがみつかったので。

今回は、何となくtcdのCORE(tcd027)に変えた私の失敗と、事前に確認しておくべき注意点をまとめてみたいと思います。

tcd CORE(tcd027)

スポンサーリンク

とりあえず変えてよかった

まずは結論から。

満足度100%です。

このブログを書いている時点で変更から1週間が経過していますが、PVの推移は順調です。テーマを変えた翌日から、大体それまでの1.2倍前後を行き来しています。

PVが改善した大きな理由としては、1人あたりのPV数が1.4ページから1.7ページに変わった点だと考えてます。Stinger5はとてもシンプルで見やすいテーマですが、直帰率はいつも80%を超えていました。

私のサイドバーへの配置方法がまずかったことが原因だとは思いますが、tcd推奨の配置にしたことで、この数字が改善されたようです。

移行は思ってた以上に大変でしたが、良い改善になったと思います。

 

ちなみに、テーマ切り替えから安定稼働(レイアウト配置の完了やCSSの書き換え)までは10時間程費やしました。

月曜の15時にポチっとダウンロードしてから、気づいた時には深夜の2時を回っていたんですよね。いや〜疲れた。

 

事前に確認しておくべき点

私は実践しませんでしたが、後から経験者の人達の記事を見て

「確かにやっておくべきだった」

と思った点を並べます。

  1. バックアップを取っておく
  2. レスポンシブ対応かを確認する
  3. カスタマイズしたcssとphpを確認する

1は基本ですね。良く何も考えずにテーマ移行をしたものだと自分でも感心します。WordPressならUpdraftPlus Backupsというプラグインがおすすめです。あとで私もバックアップしたんですが、初心者でも簡単にできました。DropBox使いますけどね。(→参考にしたUpdraftPlus Backupsの記事)

2は、今の有料テンプレートならほとんどが対応していると思いますが、中には対応していないテーマもあるので。レスポンシブに未対応だと、スマホのサイズにより画面の表記が微妙にずれます。

いちいち複数通りの解像度で記事を確認するなんて、面倒すぎますよね。

レスポンシブ対応かは、有料テンプレートのスペック表(仕様?)一覧を見れば、大体乗ってます。ポチッとする前に、仕様を確認しましょう。

 

3は後からでもできますが、①落ち着いて対応するため、②修正が落ち着く前でも見れるブログを保つため、にも事前が望ましいでしょう。

私はStinger5を使っていた時には子テーマを作ってCSSやphpを編集していました。

子テーマで何を追加したのかを確認しておけば、フォントが変わっていたり、h2やh3のタグがデフォルトに戻ってしまっていたりという初歩的な忘れは無かったのかもしれません。

 

SEO観点からの問題点がある?

surprised-1184889_640
後で知ったんですが、tcdのテーマは全体的にSEOの考え方が独特のようです。ですので、相性の悪いブロガーさんもいるかと思います。

ダウンロードするまでは、内部構造までは分からないですからね。そんなことにならないよう、事前に以下のような検索ワードでブロガーさんのお悩みを把握しておくべきです。

[tcd seo 弱い] [tcd アクセス 減少] [tcd カスタマイズ 大変]

どのような完璧なテーマでも不満は出てくると思いますが、自分にとってクリティカルな内容が無いかだけでも、事前にチェックしたいですよね(私は後からチェックして、一瞬ビックリしました)。

 

ちなみに、以下が私が後から知ったtcd027の特徴。

  1. ブログタイトルがh1、ディスクリプションがh2に指定される
  2. hタグのclassが設定されていない
  3. All in One SEOとCOREの標準機能がバッティングする

この3つは後で手動で修正してます。

 

テーマ移行後に変更したphpとCSS

テーマを移行したら、まずチェックしたいのがGoogle Insights。これはそのサイトの読み込みスピードを測定してくれる他、phpの構造上の問題を指摘してくれるサイトです(Google insightはこちらから)

google-insights

私のサイトは次第点といったところでしょうか。この値があまりにもひどい場合は、テーマの移行を考え直した方が良いかもしれません。

さて、サイトのチェックが終わったら、早速修正にとりかかります。

 

hタグの最適化

上で説明したように、COREテンプレートでは、ブログタイトル(このブログでいうとコーヒーブログ部)と、その下に表示されるディスクリプションがそれぞれh1とh2に割り振られています。

これを、どちらとも<p>へ変更しました。pはパラグラフを意味するので、h1やh2と違ってGoogleからSEO重要文字列として認識されません。

 

デフォルトのままだとだめなの?

Googleはソースコードを読み取ってサイトを理解しています。この場合、ブログのトップにh1とh2があるので、その次にくるブログの記事タイトルにh1を割り振ることができません。

いや、できるんですが、整理された文書構造ではなくなってしまうので、Googleの評価は上がらないという意見が多いです。

私は次の記事を参考にして、ブログタイトルとディスクリプションを<p>に、記事タイトルをh2からh1に変更しました。

参考記事:TCDテンプレート「AN」をカスタマイズして内部SEOを行う

 

はじめからそうしておけよ!と言いたくなるところですが、SEOの良い悪いは決定事項ではありません。実際TcdのQ&Aページにも、ブログタイトルにh1を割り振るのは、将来的なSEO効果を狙ってのことだと断言しています。

TCDシリーズご愛用者様からサポート窓口によくいただくお問合せ(その2)

 

googleアドセンスとアナリティクスを配置

テンプレートを変更した後にGoogleアドセンスやアナリティクスを見て

「カウントが0だ!」

とならないよう、タグを新しいテンプレートのヘッダーへ追加しておきましょう。

WordPressでGoogleアナリティクスの設定方法

コメント欄の移動

COREのテンプレートでは、コメント欄は記事の直下に設置されています。ファイルでいうと、comment.phpの以下の分ですね。

 

<!–?php if ($options[‘show_comment’]) : if (function_exists(‘wp_list_comments’)) { comments_template(”, true); } else { comments_template(); }; endif; ?–>
<!–?php endif; ?–>

 

PC画面だと何の問題もないのですが、スマホ画面だと追加のガジェットがコメント欄より下に設置されてしまいます。

そのため、この部分をフッターのすぐ上に配置します。

<記事本文>
|
<SNSアイコン>
|
<コメント欄>
|
<ガジェット>
|
<フッター>

これを

<記事本文>
|
<SNSアイコン>
|
<ガジェット>
|
<コメント欄>
|
<フッター>

に入れ替えます。

 

変える必要があるのはスマホ画面だけなので、if文の分岐を加えてPC画面は標準のままになるよう設定をしてあげます。

「if分岐とかよくわからない」

という方でも安心してください。パシさんの以下のサイトを読めばどなたでも変更できます。

WordPressでスマホとPCで表示する内容を変える

 

標準のディスクリプション文を削除

tcdテンプレートには、標準でSEO用のタイトルとディスクリプションを指定する機能があります。

all
こちらはAll in One SEOの標準機能画面

 

tcd
こちらがtcdの標準機能。

どちらも記事編集画面に表示されますが、2つあるとソースコードを読む時にGoogleが混乱してしまう可能性があります。

そのため、tcd側を無効にします。

無効にする方法は次のサイトが参考になりました。といっても1~2行消すだけなので簡単です。

プラグイン「All in one SEO pack」を使用するときの注意事項

まとめ

いかがでしたでしょうか?

テンプレートの変更で悩んでいる方の参考になれば幸いです。

ではでは〜

スポンサーリンク
スポンサーリンク

6 件のコメント

  • はじめまして。本日、TCD027を購入したものなのですが、色々調べているうちにこちらへたどり着きました。

    見出しについてお聞きしたいのですが、そのままだとシンプルすぎるので変更したいのですが、
    これまでのTCDと違って見出しのCSSが分かりずらくどのように変更すれば良いのか困っています。

    もし、良ければ教えて頂けますでしょうか?よろしくお願いします。

    • midoさん、こんにちは。
      tcd027の見出しってシンプルですよね。h2やh3タグもただの太文字ですし。

      hタグの見出しは、news_headline1(2)を使うと奇麗になりますよ。
      私は記事を書く時に<h2 class=”news_headline1″>見出し

  • はじめまして。
    COREの貴重な実例として拝見させて頂きました。
    トップページのメニューのマウスオーバー時のアクションが動作していない点は若干気になる所ですが。
    概ね綺麗にまとめられているようで非常に参考になりました。
    こちらのテーマを導入するにあたり、恐らくトップページの情報をどのように設定するか苦労されたのでは、と思いますがその辺についてのお話を問題の無い範囲で聞かせて頂けると幸いです。

    • ひろさん

      はじめまして、mongomeです。

      コメントありがとうございます!
      実はトップページはそこまでカスタマイズはしていなくて。
      COREのテンプレートにあったレイアウトを参考に(というかほとんどそのまま)使ってます。

      あまり参考にはなりませんね^^;

  • […] 他にも魅力は目白押しなのですが、StingerからTCDテーマに変える上で思ったのと違った!という方も入ると思います。よく聞くのは<Hタグ>の問題です。コレに関してはこちらのサイトで詳しく載っておりますので是非御覧ください(^^)(逃) […]

  • コメントを残す