WEB制作

【初めてWordPressのテーマを変える】STINGER8からJINへ移行後にやったこと

JIN

50記事目にして遂にWordPressのテーマを変えた(@HEBOCHANS)です。

WordPressを含むWEB制作で食べているとはいえ、初めてのテーマ移行には不安もあったので「STINGER8からJINへ移行後にやったこと」をまとめました。

TOTO

テーマ変えるとどうなるの?

GIGLIO

僕たち消えちゃうの??

この記事は以下のような方にオススメです。

  • WordPressのテーマを初めて変えるので不安。
  • テーマ移行前にやっておくべきことが知りたい。
  • テーマ移行後どうなったか知りたい。
  • WordPressのテーマをJINに変えたい。

移行前にやっておくべきこと

  1. バックアップをとる
    └ UpdraftPlus (おすすめプラグイン)
    └ BackWPup (プラグイン)
  2. ローカル環境でテストする
    └ Local by Flywheel (アプリ)
    └ Theme Test Drive (プラグイン)
  3. 追加CSSのバックアップをとる

僕はバックアップもせず、ローカル環境でテストもせず、追加CSSのメモだけ持ってぶっつけ本番で移行しました。

いま考えたらなんと恐ろしい…。

移行後にやること

  1. Googleアナリティクス/サーチコンソール/アドセンスの再設定
  2. All in One SEO Packの停止
  3. アイキャッチ画像のリサイズ
  4. プラグインの削除/追加
  5. 追加CSSでデザインの修正
  6. カスタマイズをイジる (楽しい)
    └ サイトの基本設定からカラーやSNS設定まで (デザインの部分)
  7. ウィジェットをイジる (楽しい)
    └ 主にサイドバーやフッターの設定
  8. メニューをイジる (楽しい)
    └ ナビメニューや固定フッター等の設定

ざっとこんな流れになります。

一見やること多めですが、後半は楽しいフェーズです。

テーマを変えたらまずやること!

Googleアナリティクス/サーチコンソール/アドセンスの再設定です!

覚えていますか?

僕はアナリティクスの再設定だけやって、ひたすらカスタマイズと記事を書いていて広告が表示されていないことに約2日間、気が付きませんでした!(ブロガー失格!)

みなさんにはそんなことが起きないよう最初にやって欲しいのです。

まずはそれぞれの「トラッキングコード」を取得します。

 Googleアナリティクスのトラッキングコードの取得方法

Googleアナリティクスはコチラ

「管理」 > 「トラッキング情報」 > 「トラッキングコード」 > 「グローバル サイトタグ(gtag.js)」をコピー

 Googleサーチコンソールのトラッキングコードの取得方法

Googleサーチコンソールはコチラ

「設定」 > 「所有権の確認」 > 「HTMLタグ」 > 「metaタグ」をコピー

 Googleアドセンスのトラッキングコードの取得方法

Googleアドセンスはコチラ

「広告」 > 「自動広告」 > 「自動広告を設定」 > コードをコピー

*「手動広告」を設定したい場合はこの作業は必要ありません。

 トラッキングコードを貼り付ける

「HTMLタグ設定」 > 【head内】に貼り付ける > 「変更を保存」

*3つのトラッキングコードの順番は何でもオッケーです。(ただし改行などして分かりやすく)

この機会にメモ等に3つのトラッキングコードをまとめて保存しておきましょう。

header.phpを開く必要がないのはカンタンで嬉しいですね!

All in One SEO Packの停止

JINでは「All in One SEO Pack」が「非推奨プラグイン」となっていますので、ひとまず停止しましょう。

JINへのテーマ移行マニュアルに沿って進めていく

ここでようやくマニュアルを開きましょう。

あとはマニュアルに沿って進めていくだけですが、Stinger8 → JIN に移行した際におかしくなったポイントとその解決法を書いていきたいと思います。

結論から言うと思ってたより崩れてませんでした。

  • 画像が一切表示されなくなった!
  • 装飾(追加CSS)の再設定
  • この機会に整理整頓したくなった!

では、解決法を見ていきましょう。

画像が一切表示されなくなった!

思ってたより崩れてなかったとはいえ、画像が一切表示されなくなったので崩れてる感はありました。笑

「アイキャッチ」「記事内の画像」「吹き出しの犬」「プロフィール画像」もすべてです。

症状としては設定はちゃんとされているのに、ずっとLoading状態から変わらないといった感じです。

ググったところプラグインが原因じゃないかということで、プラグインを1つずつ停止してみることにしました。

一番上の「a3 Lazy Load」から20以上あるプラグインを確かめていきます…。

いきなりビンゴ!笑

「a3 Lazy Load」が原因でした。笑

JINに入れておきたいプラグイン「BJ Lazy Load」があったので、それを代わりに入れて解決!

と思いきや…

画像が切れてるアイキャッチがあった!

と言っても画像自体が切れているわけではなくデザイン上、うまく入らないといった感じでしょうか。

一応マニュアルの「サムネイル画像を揃えよう」にある「Regenerate Thumbnails」を試しましたが変わらず、というか再生成が終わったのかも良く分からず。

「EWWW Image Optimizer」と干渉することがあるみたいですね。

幸い、切れてる画像は全部で9枚で内8枚はブログ開始当初のアイキャッチで現在の自分ルールと違い、作り直そうと思っていたこともあり再アップロードしました。

ついでにアップしたものの未使用だった画像もすべて削除しました。(スッキリ!)

教訓

画像は横長を選ぼう!

装飾(追加CSS)の再設定

追加CSSに記載していたショートコードはこんな感じでした。

プラグインによるもの、過去テーマ(Stinger8)独自のもの、自分で書いた独自のもの、の3種類です。

  • もくじ (プラグイン)
  • リンクカード (プラグイン)
  • カエレバ系 (プラグイン)
  • ボックス (過去テーマ)
  • 見出し (過去テーマ)
  • 小見出し (過去テーマ)
  • 太文字 (過去テーマ)
  • マーカー (独自)
  • ボックスシャドー (独自)
  • 余白 (独自)

これだけあっても崩れていたのは「ボックスの余白」くらいでした。

paddingとmargin-bottomを新たに書いて解決しました。

*追加CSSは「子テーマ」に記入しましょう。「親テーマ」に書くとアップデートの際に更新されて消えてしまいます。

JINにデザインCSSが標準搭載されている目次プラグイン「Table of Contents Plus」をもともと使っていたのもラッキーでした。

ここでも1箇所くらいでしか使っていなかったCSSを削除したり、並び替えたり、コメントで整理したりしました。(スッキリ!)

この機会にメモ等に追加CSSも保存しておきましょう。

神プラグイン

マニュアルでも紹介されているタグを一括置換できるプラグイン「Search Regex」が神すぎて

この機会に整理整頓したくなった!

ここまでで「画像」も「追加CSS」も整理できたので、記事内の気になってた部分も整理整頓したくなったのです。

Search-Regex
「Search pattern」に変更したいテキストやコードを、「Replace pattern」に新たなテキストやコードを入力して「Replace & Save」ボタンを押すだけで一括で置き換わります!

「Search」「Replace」ボタンで事前に確認することもできます。

このプラグインのおかげでずっと気になってたけど、めんどくさくて放置してた部分を数分で直すことができました。

まとめ

  1. Googleアナリティクス/サーチコンソール/アドセンスの再設定を忘れずに
  2. All in One SEO Packを停止する
  3. 移行マニュアルに沿って進める
    └ 画像の再設定が必要かも
    └ 過去テーマのショートコードの再設定が必要かも
    └ この機会に整理整頓しよう!

ほかに「カテゴリーの整理」「人気記事ランキングを設置」したりと新テーマの移行は良いきっかけになってくれました。

あとは「プラグインの見直し」くらいですね。

JINを使ってる人まとめ

開発者のひつじさんを始めJINを使ってる人の一覧です。

他人のテーマの調べ方

「このテーマ何だろう?」

気になるサイトを見つけたら以下の方法でテーマを調べることができます。

*特定できない場合もあります。

 WordPress Theme Searchを使う

最もカンタンなのがWordPress Theme Searchを使う方法です。

検索ボックスにURLをコピペするだけです。

 ソースコードから検索する

右クリックで「ページのソースを表示」 > 「command + F」で検索ボックスを表示 > 「wp-content/themes/」と入力。

JINの場合は「wp-content/themes/jin/~」のように表示されます。

おわり

「WordPressって何?」

という状態からブログを開設し、念願のテーマ移行を無事に終えて、最低限のカスタマイズができました。

テーマ変更による「アクセス数の変動」など時間が経ったら追記したいと思います。

そして、

これから「JINのSANGO化計画」が始まります。

HTML/CSSが分からなくてもできるカンタンなカスタマイズ記事を書いていきますので、ぜひチェックしてみてください。

Let’s マテリアルデザイン!

プロフィール