WPテーマ「賢威」から「JIN」に変えた場合の対処法

WPテーマ「賢威」から「JIN」や「STORK」に変えた場合の対処法

こんにちは、えば（‎@eba0819）です。
今回はWordPressのテーマ変更について！

WordPressのテーマ（テンプレート）として有名な「賢威」

アフィリエイト歴が長い方なら使われたことがあるかもしれません。

私も賢威7をずっと使っていたんですが、正直デザインが・・・
(・_・;)
慣れないCSSを変更してだいぶカスタマイズしてきました。

しかし！もう変えようと決意し、最近流行りの『JIN』に変更♪
(*´艸｀*)

そこで問題なのが、賢威ならではの設定をしていたので、それが新しいテーマに変えると崩れるんじゃないか？？という心配です。
(>_<)

そこで今回は、賢威からJINやSTORKなどの他のテーマに変更する場合のやり方を解説します！

テーマを賢威から他のJINに変えて問題ないのか？
賢威の「共通コンテンツ」設定をしていた場合
Googleアナリティクスも設定し直す
JINにはアドセンスのコードを貼る場所がある
サイトデザインを設定

テーマを賢威から他のJINに変えて問題ないのか？

WordPressのテーマは途中で変更できます。

しかし、賢威の場合は独特の機能があって、それを利用している場合や、テーマ編集でいろいろカスタマイズしてきた方は

「賢威から他のテーマに変更したらヤバいんじゃない？？」
(＠_＠;)

と思うんですよね・・・

私もそう思ってずっとできなかったんですが、今回思い切ってJINに変更してみたら、うまくできました♪

私がやった変更方法をご紹介します。

＊カスタマイズになりますのでバックアップをとるなどして自己責任でお願いいたします。

賢威の「共通コンテンツ」設定をしていた場合

賢威にはHTMLコードをショートコードに変えて使える「共通コンテンツ」という便利機能があります。

これを使っていた方は、別のテーマに変えた場合、対処する必要があります。

①賢威の「共通コンテンツ」で作っていたショートコードを全部メモなどにコピペします。

ちなみに、
私が吹き出し用に作ったショートコードはこんなものでした。

[cc id=8244]◯◯◯[cc id=8245]

②そして新しく変更したテーマで、同じようにHTMLコードを作ります。（記事作成画面のテキストなどで）

例えばJINで吹き出しを作ってみると、こんなHTMLコードになりました。
[chat face=”-e1576637651821.png” name=”声” align=”right” border=”gray” bg=”none”] 吹き出しの内容 [/chat]

③次に、プラグインの「Search Regex」を使います。

このプラグインは、サイト内にある全ての文字や数字やコードなどを一括置換できる神プラグインです。

こちらの記事でも使い方を紹介しています。
⇒wordpressの文字色変更と追加する方法はプラグインで簡単！

Search Regexを入れて有効化すると、WP管理画面の「ツール」に入っています。

Search Regexの画面がこちら↓

上のマスに変更前のコード（賢威の共通コンテンツのショートコード）を入れます。

下のマスに変更したいコード（JINで作ったHTMLコード）を入れます。

例
上で紹介した私の変更例だと

上のマスに⇒[cc id=8244]

下のマスに⇒[chat face=”-e1576637651821.png” name=”声” align=”right” border=”gray” bg=”none”]

を入れて一括置換しました。

①のSearchボタンをまず押すと、変更前と変更後のプレビューが見れます。そこで、うまくできているか確認してください。

これで良かったら②Replace＆Seveを押すと、一括置換できます！

注意

一括置換できるのですが、</h2>や</span>など、いろんな場合で使われているコードを変更すると、コードが崩れてしまうのでご注意ください。

Googleアナリティクスも設定し直す

賢威と他のテーマでは、アナリティクスのトラッキングコードを入れる場所が違うので、入れ直します。

JINの場合はこの画像のように

①HTMLタグ設定をクリックし
②【head内】の部分があり
③このマスの中に、アナリティクスのトラッキングコードを入れます。

JINにはアドセンスのコードを貼る場所がある

JINって便利だな～と思ったのがここ！

JINには、アドセンスのコードを貼る場所が用意されています！すごい～

①広告管理をクリック
②いろんなパターンのマスがあるので、自分が貼りたい広告のコードを好きな場所に貼ります。

＊賢威だとテーマの編集に入れないといけないのでドキドキするんですよね
(^o^;

サイトデザインを設定

サイトのデザインは一から設定します。

外観⇒カスタマイズ
このページでいろんな設定ができます。

アイキャッチ画像の大きさを揃える場合

JINの場合、記事一覧のページでアイキャッチ画像の大きさがサイズごとにそのまま表示されます。

それを全部同じ大きさに統一させたい場合は、このコードを「外観⇒カスタマイズ⇒追加CSS」に入れます。

.pickup-image,
.new-entry-item .eyecatch,
.post-list-thumb {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.pickup-image:before,
.new-entry-item .eyecatch:before,
.post-list-thumb:before {
    content:"";
    display: block;
    padding-top: 56.25%; /* 16:9 */
}
.pickup-image img,
.new-entry-item .eyecatch img,
.post-list-thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
   -webkit-transform: translate(-50%, -50%) !important;
   transform: translate(-50%, -50%) !important;
}