サイトを一新！ 新テーマ「Thor」を導入

当サイトは、2016年にワードプレスによるブログサイトを開設して以来、サイトのテーマについては、ずっと無料のものを使ってきました。

優れた無料テーマも多いのですが、モバイル経由での閲覧が増加する中で、閲覧速度やレスポンシブデザインへの適切な対応などが課題になってきていました。

そこで、さらなる訪問者の利便性向上やサイト掲載順位の改善などを図るために、今回初めて有料テーマの「THE・THOR」(以下、トール)を購入しました。

有料テーマの購入や「トール」に関心のお持ちの方のお役に立てば幸いです。

これまでのテーマ推移

当サイトはスタート時点から、オープンソースのブログ用ソフトウェア「Word Press」をつかって構築しています。

オープンソースですのでユーザーが色々な変更を加えられます。
また、国内外で公開されている様々な「テーマ」を選ぶことで、見た目のスタイルを自由に変えられます。
（もちろん、過去の投稿記事なども多少デザインの変更が必要ですが、概ねそのまま活用できます。）

実際、僕がこれまでに使ってきたのが、無料テーマの「Xeory Extension」と「マテリアル２」です。

これらはそれぞれ素晴らしい無料テーマでしたが、実際使ったうえでの長所と短所から整理していきます。

無料テーマ第１弾「Xeory Extension」

当ブログの最初のテーマは、バズ部さんによる「Xeory Extension」を利用させてもらっていました。
（利用期間は、2016年11月から2018年２月までの約１年３カ月になります。）

当サイトは（図書館で借りた）Word Pressの手引書を片手に、初めてサイト構築に取り組みました。
なにしろ初心者なので、細かなカスタマイズでうまくいかないときにメールで問い合わせしたところ、バズ部さんから色々と教えていただき助かりました。 ?

おかげで「Xeory Extension」で運用していた約１年余りの間、大過なく運営することができました。

また「Xeory Extension」は見た目のインパクトが強く、実際、記事が多くなかった当初は、アイキャッチ画像のインパクトだけで画面を埋める必要性もあったのでとてもありがたいテーマでした。

そんな「Xeory Extension」でしたが、元々企業向けの利用をメインとしているためか、いくつか課題が出てきました。

無料テーマ第２弾「マテリアル２」

こちらの「マテリアル2」に関しては、作者である NobuoさんのHP「マテリアル２ってどんなテーマ？」もご覧ください。
（利用期間は、2018年3月から2019年4月までの約１年３カ月になります。）

僕が特に「マテリアル2」をいいなぁと思ったのは、次のような点です。

また、カスタマイズ用の子テーマも一緒にダウンロードできることやカスタマイズ項目も豊富に用意されていることも◎でした。

そんな「マテリアル2」でしたが、やはり利用しているといくつか課題が出てきました。

テーマ変更の決意

さきほどのマテリアル２の課題にも書きましたが、今回の見直し理由の筆頭は、モバイル経由のアクセス増加です。
実際、僕のサイト訪問者の場合、モバイルが約6割、デスクトップが約3割、タブレットが約1割となっています。

もちろん無料のテーマでも、レスポンシブWebデザインに対応しているものは多いのですが、デザインの自由度が今ひとつでした。
また、特にモバイル向けにはサイト自体の読込速度を上げることが、ご覧いただくユーザーの皆さんにも重要になっていきます。

そこで、有料テーマも視野に入れて色々とテーマを検討した結果、導入に至ったのがFITさんが提供する「トール」です。

有料テーマ「トール」を採用

まず、「トール」のＨＰからこのテーマの特徴を引用します。

ザ・トールを選ぶべき7つの理由

◆ 圧倒的にSEOに強く上位表示されやすい「国内最高クラスのSEO最適化テーマ」
◆ 息を呑むほどに美しく・プロ仕様のデザイナーズサイトが簡単に作れる。
◆ サイトで集客し収益を上げるための「集客・収益化支援システム」を搭載。
◆ 革新的な高速表示技術を多数装備した「国内屈指の高速テーマ」
◆ 国内随一と言っても過言ではない機能数と簡単に使いこなせる操作性。
◆ メールサポート・操作マニュアル/会員フォーラム・無料バージョンアップ有
◆ 要望や最新技術を取り入れ、機能追加改善を繰り返す「進化し続けるテーマ」

「トール」のＨＰより

実際、紹介されている９つのデモサイトを見ると、プラグインなしで様々なサイトデザインにカスタマイズできそう。
プラグインが少なくて済めば、利用者の方の満足度を維持しながら、サイトの表示速度を速めることができます。

モバイル環境を前提としたスピードアップを図るうえで、「これこそベストバイだ！」と購入を決心します。

「トール」の購入まで

購入特典の比較

この「トール」というテーマの購入には、「テーマ＆サポートプラン」と「らくらくサーバーセットプラン」があります。

僕のように既にサーバーを借りてサイトを運営している人やサーバー選択から自分で行いたい人は「テーマ＆サポートプラン」
全く一から始める場合で、なるべくお任せしたいという人は「らくらくサーバーセットプラン」

となるようです。

さらに「トール」については、アフィリエイターの方々が独自の特典をつけて販売しているようです。
（”トール＿購入特典”でググってみてください。）

僕が購入を検討した際の特典をざっと整理すると、次のような感じでした。

• インストールからサイト構築までのサポート
• 独自デザインの子テーマやアフィリエイト記事セット
• テーマに独自の文字装飾・ボックスなどを追加するサービス
• 利用レビューの買取による実質的な値引き　　など

情報商材 安売王さんからの購入で決定

さて、僕の場合ですが、結局「情報商材 安売王」さんの特典を選ぶことにしました。

これは「テーマ＆サポートプランを当サイト経由でご購入いただいた方全員にレビュー報酬として6,810円をお支払い」というものです。
ただし、手数料 500円が別途かかるため、実際の受取額は表示金額から 500円の手数料を差引いた 6,310円となります。

それでも、テーマ＆サポートプランが 15,984円ですから、報酬額との相殺で実質 9,674円で購入できることになります。
実際、僕の場合でいくと「購入日・レビュー投稿日の翌日」には報酬の振込がなされていました。

※　上記の内容については、僕個人の利用実績です。実際の利用に当たっては金額や条件を十分に確認してください。

いよいよダウンロード

ダウンロードは、どの購入特典を選んでも「インフォトップ」から行うことになります。
購入の際にご自身が選んだ購入特典が反映されているか、よく確認してください。

初めて「インフォトップ」を利用する場合には、ユーザー登録も必要です。

色々ありましたが、ようやくダウンロード画面にたどり着きました。

ダウンロードの有効期間は購入後、14日間のようです。
万が一のファイル破損などに備えて、ダウンロードしたファイルは別途バックアップしておきましょう。

次ページにて「テーマのインストール」

「トール」のインストール

ここからダウンロードファイルを使った「トール」のインストールとなります。
Word Pressのテーマの基本的インストールは理解していただいている前提でご紹介します。

Zipファイルはそのまま使えない！

「トール」をダウンロードすると、”TheThor.zip”というファイルが入手できます。

WordPressテーマを導入したことがある人にはわかるかと思いますが、テーマの導入にはzipファイルをそのままインストールして使います。
今回も早速インストールしていきます。

なんと「インストールできませんでした」とのエラーメッセージが！

「うわ、有料テーマ買ったのにインストールできない」と焦ります。
焦る気持ちを抑えながら、落ち着いてzipファイルを改めて確認。

するとzipファイルの中に親テーマと子テーマのzipファイルが格納されているではありませんか！

ちゃんと確認しないまま、てっきり「ダウンロードしたzipファイルがテーマ本体」と思い込んでしまってました。
何事も確認が必要ですね。反省。

さて、ダウンロードしたファイルを解凍して、【必読・重要】のテキストファイルに目を通します。

これでテーマのインストール準備は終了です。

テーマ導入に入る前に

購入後、「更新用ユーザーIDと会員フォーラムのアカウントの発行」を行っておきます。
無料バージョンアップサービスを受けるには、更新用IDの登録が必要です。

指定された「ID・アカウント発行フォーム」にて、必要な情報を入力して発行申請手続きを進めます。

発行申請すると１～２日で更新用ユーザーIDと会員フォーラムの投稿用のID・パスワードが送付されてきます。
届かない場合は、迷惑メールを確認してみましょう。

なお、「トール」は、１度の購入で複数サイトに使えますが、この場合も更新用ユーザーIDの発行は「1つだけ」とのこと。
個人利用であれば、同じIDを複数サイトで使いまわして問題ないそうです。

「トール」の導入手順

「トール」にテーマを切り替えるために、まず現在のテーマを新しいテーマに移行する段取りを固めないといけません。

前回「マテリアル2」導入時は、実際のサイト上でテーマ変更する「Theme Test Drive」というプラグインで切り替えを進めていました。
（使い方は、ぱぱたすさんの記事がわかりやすく参考になります。）

このプラグインはテーマ変更にあたってのイメージをつかむのには簡単便利です。
しかし前回は色々試しているうちに、運営中のサイトデザインが崩れてしまい、急遽本番環境を書き換える羽目になった苦い思い出があります。

このため、今回はきちんとパソコン上で新デザインを固めて、サーバー上に移行する方法をとることにしました。

具体的には次のとおり進めていきます。

1. パソコンのローカルディスク上に現在のサイト環境をコピー
2. 「トール」を導入・カスタマイズ
3. 完成後に正式サイトと置き換え

パソコン上に現在のサイト環境をコピー

これには「Local by Flywheel」というソフトウェアを使います。

理由としては、直感的に使いやすいことと後述するバックアップ環境が簡単に準備出来ることです。
「Local by Flywheel」を使った環境構築は、ばんちゃこさんのブログ「キラネコ道」の”wordpressテーマを既存サイトで変更する方法！”がわかりやすかったので参照ください。　→2022.12.11 サイトがリンクできなくなっているようです。

その他、作業をする中で僕が気がついた点は以下のとおりです。

サーバーのPHPバージョンを7以上に

「トール」の推奨です。

PHPは自分でバージョンアップの手続きをしないと切り替わりません。（今回まで知りませんでした。）
ちなみに僕のPHPバージョンは”5.6.40″でした…

PHPのバージョンアップで実行速度やセキュリティの向上が期待されますので、最新版の”7.3.1″に変更します。
変更方法は簡単。最新版を選んで変更を押すだけで即完了でした。

実はこれだけでもサイトの体感速度が上がったことが実感できます。

現在サイトのバックアップ

現在のサイトのバックアップを取っておきます。
これは直接作業に影響するものでありませんが、サイトに変更を加えるときのルーティンです。
また、現在のサイトのデータをすべてダウンロードしていくため、古いバックアップファイルが残っていると時間がかかります。
このため、古いバックアップファイルはあらかじめ削除しておくと、DLの時間短縮にもつながります。

こまめにクローンを作成し、手戻りを回避

これは僕自身の失敗をふまえてのものです。
ローカル上で「トール」をカスタマイズしていたところ、突然リアルタイムでのカスタマイズが機能停止になり、右側の画面が真っ白に。
結局一からサイトを構築することになりました。

こんなときのためにバックアップ用のデータベースを準備しておく方が良いです。
「Local by Flywheel」ではローカルサイト環境を複数保存できます。

その方法も簡単で、データベース名を右クリックして「clone」コマンドを選んで任意の名前でクローンが完成。
「”データベース名”_backup」などの名称をつけて保存しておきましょう。

プラグインをすべて一旦停止

現在のサイトには、多くのプラグインをインストールしていました。
「トール」は多機能なので、多くのことがプラグイン不要で実現できます。
現在使用中のプラグインは一旦停止して、どうしても「トール」だけでは実現できないものだけ有効にする方が良いと思います。

このときに特に注意してほしいのが、キャッシュ系プラグインです。
停止する前に「キャッシュを削除」してからプラグインを停止した方が無難な気がします。

トールを導入・カスタマイズ

親テーマ→子テーマ順にインストール

テーマ変更の基本です。
今回の「トール」では、ダウンロードしたファイルに子テーマファイル”the-thor-child.zip”もついてきます。
さすがに有料テーマは親切です。

親テーマ”the-thor.zip”→子テーマ”the-thor-child.zip”の順にインストールしていきます。

また、有効化するのは、親テーマではなく子テーマの方にしましょう。

改めてカスタマイズ

「トール」は設定項目が多彩です。
その割には、導入マニュアルがあまり丁寧ではありません。

このため、最初は自分のイメージに近い「デモサイト」のデザインをダウンロードして、着せ替え機能を活用していく方が早いと思います。

なお、着せ替え機能には「Customizer Export/Import」というプラグインが必須です。
また、着せ替え機能ではそれまでのデザイン変更が上書きされるため、デザインを触り始める前に導入した方が効率的です。

カスタマイズの方法についてはlogFarmingさんの記事が大変参考になりました。参照にしてください。

2022.9.4 追記

BlogFarmingさんの記事が削除されてしまったようです。導入記事は他にもありますので必要に応じて検索してみてください。

 

次ページにて「大問題発生」

カスタマイズ完成後に置き換えも…

ここまでで、パソコン上に新しいサイトが構築されました。

僕も「これでいよいよアップロードだ」と取り組んだところで大問題が発生。

いくらやっても”致命的なエラー”が発生してアップロードができません。

この時の模様がTwitterに残っています。

2019/4/30　ほぼ移行データが出来上がって、浮かれているツイート

続きを見る

いよいよ明日は令和スタート。
僕のサイトにも何か起こるかも。

うまくいかない時は何も変わらないかもですが。?

さて、どうなることやら。https://t.co/NWwKkywjJQ

— マサ＠１級ファイナンシャルプランナー (@Bqol_Masa) April 30, 2019

2019/5/1　すべてのデータをまとめて、アップロードする直前

続きを見る

令和時代のはじまりですね。

それに合わせたわけではありませんが、いよいよサイト改造に着手します。
大がかりな変更なのでドキドキしています。?

考えられるバックアップはすべて取りました。
しばらくアクセスできなくなりますが、ご容赦ください。

— マサ＠１級ファイナンシャルプランナー (@Bqol_Masa) May 1, 2019

2019/5/1　アップロードがうまくいかず凹みつつも、原因をネットの混みぐあいと信じている状況

続きを見る

今日はサイトの更新に取り組む予定でしたが、午後からサーバーが重くなって中断?

明日 早起きして、もう一度チャレンジかなぁ

— マサ＠１級ファイナンシャルプランナー (@Bqol_Masa) May 1, 2019

2019/5/2　SQLファイルの更新で”致命的なエラー”が発生してかなり焦っている状況

続きを見る

今朝は早起きして、サイトの更新。

ようやくアップロードが完了するも、設定ファイルの更新に失敗?

サイト自体はなんとか正常に表示されているようなので、もう一度設定ファイルの見直し中…

— マサ＠１級ファイナンシャルプランナー (@Bqol_Masa) May 2, 2019

しかしなかなか原因がわからないまま、色々と調べます。
すると、なんと僕が使っているGMOインターネットのサーバーでは、アップロードできるファイルの上限が「２MB」までであることが判明！！

２MBですよ、いまどき。
なんとかできないものかとサポートセンターにメールします。

その回答が次のとおり。

PHPにて可能なアップロードサイズにつきましては、初期状態でPHPの設定ファイルにて”2MB”に設定させていただいております。

PHPの設定は、お客様ホームページ領域内に「php.ini」を設置いただくことにより変更可能となり、当該ディレクトリ内の実行ファイルについてはお客様設置のphp.ini設定を参照し動作するものとなります。

詳細な設定方法につきましては、ご案内が出来かねますため、大変お手数でございますが各種参考書籍などよりご確認ください
ますようお願い申しあげます。

なお、セキュリティ上変更できない設定項目もございますこと何とぞご了承くださいますようお願い申しあげます。

期待しただけバカでした。
「php.ini」の設置も考えましたが、ローカル環境にほぼ完成したサイトがあるので、次の手順で取り組むことに切り替えます。

1. 「Local by Flywheel」から「Customizer Export/Import」を使って、ローカル環境→本番環境にデザインを移しかえ
2. 追加した固定ページやメディアを本番環境にコピペで移しかえ
3. さらに「SearchReplaceDB」でローカル環境のゴミをチェックしてデータベースの掃除

2019/5/4　このような経緯を経て、ようやく新たなサイトが見られるようになった報告

続きを見る

悪戦苦闘してきたサイト更新ですが、なんとかチカラワザで更新終了?

とりあえず新しくなりましたが、画像のリンク切れなど、気がついたら教えていただけると助かります?‍♂https://t.co/NWwKkywjJQ

— マサ＠１級ファイナンシャルプランナー (@Bqol_Masa) May 4, 2019

いや～　本当に疲れました。
2019年の平成から令和への移行の感慨に浸る暇もなく、連休中はほぼこの作業に忙殺されてしまいました。

しかも無理やり移してしまったこともあって、リンク切れが多数発生しているようです、
もし、ご覧いただいてお気づきの点がありましたら教えてもらえると助かります。