WordPressテーマ変更の準備と手順。New Standard2→3に変更しました!

Wordpressテーマ変更の準備と手順

〜オンラインのピアノサークルやってます〜

ピアノを弾く方へ、
ちょっとした楽しみ・励み・学びをプラスするサークル。
Piano Plus+ サークルをのぞいてみませんか?

くわしくはこちら↓
ピアノを弾く方向けオンラインコミュニティ
「Piano Plus+ サークル」ができました!

こんにちは!さいりえです。

このたび、当サイト「崔理英のオフィシャルサイト&ブログ」をリニューアルしました。

このサイトはWordpressというプラットフォームを利用しているのですが、その中で「テーマ」というテンプレートのようなものがあります。

今回、そのテーマを変更しました。

「New Standard 2 」から「New Standard 3 」への変更です。

同じシリーズの上位版にアップグレードしたので、見た目や仕様はそこまで変わっていませんが、よりわかりやすい、使いやすいサイトとしてこれから運用していけそうです。

この記事では、

  • WordPressで作ったサイトのテーマ変更って?
  • テーマ変更前にやったこと
  • テーマ変更時の作業内容
  • サイトリニューアル完了!感想など

を書き留めておきます。

テーマの変更を考えている方、ブログ運営に興味がある方はぜひお読みください。

▼当サイトで使用しているWordpressテーマ「New Standard」シリーズのレビューはこちら▼

テーマ変更はなかなか腰が重くなる!大変な理由と決断の理由

WordPressのテーマ変更は、なかなか大変です(テーマとは、テンプレートのようなものです)。

わたしもこれまで、Wordpressで

  • 新規サイト作成
  • テーマの変更
  • サイトの移行(無料ブログ→Wordpressへ)
  • サイトの統合(2つのサイトを1つにまとめる)
  • サイトの分割(既存のサイトを姉妹サイトと分ける)

などいろいろやってきましたが、どれもなかなか骨が折れる仕事でした。

さいりえ
その経験のおかげか、今では新しいサイト1つや2つアッサリ作れちゃいます!

【過去記事】2017年にサイトを統合したときの経緯(それなりにマニアックなのでご注意ください)

サイト&ブログがリニューアルオープン!WordPressのお引っ越しでやったことまとめ

テーマ変更って何が大変なの?

さて、上に挙げたサイト移行や統合にくらべれば、テーマ変更はまだマシなほうではありますが、それでも大変。

何が大変かというと

  • 新しいテーマでのデザインや色選びなど、一から行わないといけない
  • 前テーマの設定が新テーマで反映されないことがある(真っ白になる or 表示が崩れる)
  • 画像のサイズなどを変更しないといけないことも
  • ショートコード(テーマ特有のコード)を使っている場合、新しいテーマですべて書き換えないといけない

などなど…

テーマの変更自体はボタンひとつですぐできるのですが、そうすると未完成なサイトが公開されてしまいます。

今回の場合、New Standard2から3へのアップグレードで、大きな構成は同じなので、そこまで長時間はかからないだろう…と読んでいましたが、やはり数時間〜半日はかかるはず。

それでもテーマ変更に踏み切った理由

これまで3年近く使っていたNew Standard 2 。

その上位互換であるNew Standard 3 は、2019年6月にリリースされました。

ユーザーテストに参加させていただき、新テーマもすでにそのときに手に入れていたのですが、なかなか重い腰が上がらず…

それでも、ようやくやることになりました。理由は

  • New Standard 3 の、ますますパワーアップしたトップページ機能を使いたい!
  • こまかな仕様も最新版のほうが良さそう
  • 最新のテーマのほうが、今後のアップデートも期待できる

ほぼトップページ目当てです。

もともと「2」のころから、自由度の高いトップページが魅力で気に入っていたのですが、「3」ではさらにカスタマイズ度が高まり、自分が好きなようにページを作れるのが魅力です。

具体的には

  • 決められた項目ではなく、なんでも自由に配置できる
  • ブログ記事をカテゴリーごとに分けてトップページに載せることも可能
  • 外部サイトへのリンクも目立つように載せられる

など、ほしい機能がいくつもあったので。

とはいえ、いろいろ優先したいことがあって数ヶ月後回しにしていたのですが、新型コロナのことで仕事も減っておうち時間が多くなったので、この機会にやっちゃおう!と実行することにしました。

さいりえ
結果、真夜中の3〜4時間で一通り作業が終わったので、良かったです!

WordPressのテーマ変更前にやったほうがいいこと

さて、テーマを変更する前にやったほうがいいこと!を書いていきます。

つぎの4点。

  • (簡単でもいいから)テストする
  • バックアップをとる
  • 必要事項をコピーしてメモ帳アプリなどに貼り付けておく。もしくはノートにメモする
  • 変更前テーマで表示されているサイトをスクショ(スクリーンショット)で記録しておく

テストする

テーマを変更したらどんなふうになるのか?

を、見ておきます。

わたしは「WP Theme Test」というプラグインを使っています。

ログイン状態のときだけ、別のテーマで表示できる!というもの。

たとえばこのツイートは、わたしのブログ記事を

  • New Standard 2
  • JIN
  • SANGO

でテストしてみたものです(約1年前ですが)。

このように、大体のイメージを確認します!

今回の場合、同じNew Standardどうしなので、思っていたよりはちゃんと表示されていました。

  • 記事や固定ページはほぼ問題なく表示される
  • メニュー設定などもそのままでいけそう
  • トップページやヘッダー等は真っ白になるので、新たに作成しないといけない
  • 一部のランディングページなど、表示されないページもある
  • 気づかない、反映されていない部分はありそう

という感じでした。

イメージができたら、いよいよ具体的に変更の準備をしていきます。

(ローカルテスト環境を作ってそこで仮のサイトを作って…という本格的な方法もありますが、そこまでは必要ないと思ってやりませんでした。)

バックアップをとる

つぎに、バックアップをとっておきます。

わたしは「BackWPup」というプラグインを使用しています。

これまで数度、サイトが真っ白になったり、まったくログインできなくなったり…

その都度、バックアップから復元したり、FTPファイル(とかいうもの?)をいじったり、サーバー側に保管されているデータを引っ張ってきたり…

と、多少は修羅場を経験しているので、今回も念のため。

さいりえ
サイトやブログを運営している方、定期的にバックアップしましょう!

必要事項をコピペ、メモする

つぎに、必要事項をコピーして、メモ帳アプリに貼り付けておきました。

  • テーマのカスタマイズ設定
  • 追加CSS
  • 投稿上下やCTAのテキスト等
  • プロフィール、ウィジェットの内容
  • ランディングページの内容(新しいテーマで作り直しが必要になりそうなので)

実際は、ウィジェットの内容はそのまま引き継がれていたので、必要なかったようです。

スクショしておく

前テーマを使用したときのサイト表示画面や、設定画面の一部をスクリーンショットして保存しておきます。

理由は2つ。

  • テーマを変えてから、「あれ、どんな表示だったかな?」と迷ったときのために
  • のちのち、過去のテーマのデザインが懐かしくなったりするので

2つめは、コレまでの経験上、たまーに昔の自分のサイトを見てみたいな〜と思うことがあるので、そんなときのために。

それに、これまでのページ、とても気に入ってたんです。

崔理英オフィシャルサイトのスクショ

それと、すごく懐かしいんですが、4〜5年前に使っていた旧ブログのロゴも出てきました。

さいりえ
なつかしい〜!

ここまで準備したら、いよいよ実際の設定を変更していきます。

いよいよテーマ変更!スピーディにすべきことは速く!

だいたいのイメージがついたところで、いよいよ実行です。

ブログ読者の方にわからないうちに、新しいテーマに変えて、形を整えたい…!という、もはや秘密の作戦実行隊となっています。

ということで、やることを整理。

テーマ変更の手順と、やること

ミッションはこんな感じです。

  • 夜中にスタート(ブログへの訪問者数が減るAM1時くらいから)
  • テーマを切り替える!
  • 先ほどコピーした設定などを素早くペースト
  • トップページ、ヘッダーやフッターを作る
  • ランディングページを作る
  • 全体を見て、おかしなところを整える

(目標:3〜4時間)

まずここまで。

そして後日、

  • カラーやフォントなど、もう少しカスタマイズ
  • 気になるところを調整
  • 新テーマならではの機能をもっと試す

など、急ぎではない項目をちょいちょいと行う。

こんな計画でいきます!

夜中にスタート

新しいサイトではなくて、毎日1000アクセスくらいあるサイトですので、できるだけ「工事中の姿」をお見せしたくない。

そのためには、

  • アクセスが少ない夜中にやる
  • 時間をかけず、一気にやる(せめて最低限、整うラインまで)

つまり「空白の時間」をできるだけ短くしたい!ということです。

そんなわけで、夜な夜な、AM1時から作業を開始しました。

さいりえ
この日はたまたま、明け方まで子どもが夜泣きしなかったので、助かりました!

いざ、テーマを切り替える!

WordPressのダッシュボード(設定画面)で、いよいよテーマを New Standard 3 に切り替えます。

約3年使用したNew Standard2 ともお別れです。

さいりえ
New Standard 2 さん、長いことありがとう〜〜!!

テーマを替えると、トップページがこんなに寂しい表示に。

さいりえ
これは…やばいっ!

トップページを作る

せっかくサイトに来てくださった方がビックリして帰ってしまわないように、急いでトップページを作っていきました。

なんとか、夜中のうちに形になりました!

New Standard では、このような自由な配置もほぼワンタッチでできるので、設定時間はそんなにかかりません。

  • 掲載する内容、配置のイメージを考えておくこと(ノートにラフにスケッチするのも◯)
  • 画像などの素材を事前に準備しておくこと

が大事です。

わたしの場合、これまで使っていた写真等をほぼ使いまわしたので、あまり時間はかからず、トップページそのものは30分〜1時間で作ることができました。

さいりえ
ふう、なんとか見られるようになって良かった〜

新しくなったトップページを見てみる!という方はこちらをクリック

また、ダッシュボードの設定画面で、いろいろ細かな設定を行いました。

これも、そこまで時間はかかりませんでした。

さいりえ
テーマを切り替える前にメモ、コピーしていた内容をほとんど写しました!

こまかな修正・調整

つぎに、サイトを見ながら、表示やリンクがおかしくなっているところを修正していきました。

たとえば

  • もくじの表示
  • メニューの表示、リンク先(内容を変更したため)
  • ウィジェット
  • 背景の色
  • アイコンなどのデザイン

など。

これは、各項目数分で終わりました。

ただ、全部チェックしたわけではなく、いまこの記事を書いている最中にも「あれっ?」と思いながら微調整をしています。

それから、もくじのプラグインはこれまで「Table of Contents Plus」を使っていたのですが、この機会に「Rich Table of Contents」に変更しました。

追加CSSも必要なく、きれいなもくじが表示されるようになりました!

楽しくなってきたので、リンクツリーのような、こんな固定ページも作りました。

さいりえの運営サイト・SNS

ランディングページを作り直す

これが一番面倒でした。

じっくりやるのは別の日でも良いですが、毎日アクセスがあるページなので、開けて「なにこれ?見れないよ!」という状態は避けたいです。

当サイトでは2つのランディングページを作っていましたが、両方とも表示が真っ白になってしまったので、やり直し。

たとえば、公式LINEの過去の配信をまとめたページ。

以前はこんな感じだったのですが

同じ仕様で作れず、こんな感じになっちゃってます。

ランディングページと固定ページのちがい3

ふつうの固定ページになってしまいました…

とはいえ「真っ白なページ」ではなくなったし、情報はわかるので、ひとまずしばらくこのまま運用します!

ランディングページのプラグインはNew Standard専用のものを使っていたので、そのまま使用できないか?ということを今確認中です。

 

テーマ移行作業終了!変更してみて思うこと

ここまでで、約3〜4時間。

中断せず作業できたので、夜中のうちに終わりました!(パチパチ)

細かいことは、またこれから気づいたときにやっていこうと思います。

変更して1日たって思うこと。

  • やっぱりトップページが使いやすい!
  • 同じ系統へのテーマ変更だったので、そんなに大変じゃなかった
  • テーマ変更のタイミングで、サイトの内容も見直せるので、良い機会になった
  • まだまだ作り込めそうなのが楽しみ
  • 自分のサイト・ブログへの愛着がますます強まる!

わたしは複数サイトを運用しているのですが、自分でも

「あ〜ここ、使いにくいなぁ、わかりにくいなぁ」

「もう少しこうしたほうがいいんだろうな…」

「時間をとってやらなきゃなぁ…」

と思いながら、後回しにしてしまっていることがたくさんあります。

テーマを変更するというのは一大リニューアルなので、今までやっていなかった部分もメンテナンスせざるをえません。良い機会でした。

そして何より、手をかけることで、このサイトへの愛着がまた深まりました。

ここ1年は姉妹サイト「Piano Plus+」のほうに力を入れていたんですよね。

〜ご案内〜

Piano Plus+ は一番最近作ったサイトなので、デザインもけっこう納得してます!こちらもよろしくお願いします。

ピアノの練習方法、ソルフェージュから受験対策まで、濃い内容の記事が集まっています。

姉妹サイト「Piano Plus+」を見てみる

これからまた、本元である当サイト(「ピアニスト崔理英オフィシャルサイト&ブログ」)も育てていこうと思います!

ブログも書いていこうと思うので、よろしくお願いいたします。

 

〜オンラインのピアノサークルやってます〜

ピアノを弾く方へ、
ちょっとした楽しみ・励み・学びをプラスするサークル。
Piano Plus+ サークルをのぞいてみませんか?

くわしくはこちら↓
ピアノを弾く方向けオンラインコミュニティ
「Piano Plus+ サークル」ができました!

◇◇◇
ピアノが好き、もっと素敵に弾きたい!という方へ・・・

LINE@はじめました! ご登録はこちらのボタンから。

友だち追加

もしくはID検索→「@cac2640m」から「友だち登録」していただけます。

くわしくは→「LINE@:さいりえのピアノレッスン室」はじめました!

◇◇◇

ーお知らせー

本気でピアノの練習・演奏に取り組みたい方のための特設サイト「Piano Plus+(ピアノプラス)」がオープンしました。

ピアノを愛する方のご訪問をお待ちしています!