2018/8/8、ついに長年使い続けて来たわいひら氏の無料テンプレート「Simplicity」からその後継テンプレートである「Cocoon」へテーマの変更を行いました。しかし変更に伴い、エラーがちらほら発生しているのでそのエラーと対策を記録しておきます。
ありがとうSimplicity
一体何年お世話になったことやら・・・。
「Simplicity」のテンプレートは、ど素人でも感覚的に使えてしまう素晴らしいテンプレートでした。もちろん今でも公開されており、開発者であるわいひら氏の「寝ログ」で使われていますし、最新バージョンは2.7.0で2018年8月6日に公開されており、まだまだ現役です。
しかしこんな凄い無料テンプレートがあるにも関わらず、わいひら氏は更に別のテンプレートを開発されました。それが「Cocooon」です。こちらは、「Simplicity」よりも更に機能を満載にした上、AMPページと通常ページの違いがない表示だったり、アフィリエイトリンクまでもが非常に判りやすいデザインになるとんでもない代物です。はっきりいって「お化けテンプレート」でしょう。
このテーマのファンは数多く、同梱されているスキンもそりゃもう色々。私もおとついまでは「第0判」さんデザインの可愛いスキンを使っており、とても愛着があるテンプレートです。
でも新しいものに興味は尽きませんし、試してみたくなるのが人情です。で、ずっとβ版だった「Cocoon」がいつの間にか正式バージョンとなって公開されていたため、飛びついたのです。
テーマ変更前にすべきこと
「Cocoon」に変える前に、不具合がないかを知りたいのは当然です。というか、事前にテストせずにテーマの変更するのは危険です。想像もしないエラーが発生する可能性があります。
そこでログインしている人だけが別テーマデザインを確認できるというプラグイン「WP Theme Test」を使いました。
プラグイン「WP Theme Test」
「WP Theme Test」は、ログインしているユーザー、あるいは、指定したIPアドレスの人だけは、別のテンプレートの動作確認が出来るというプラグインです。
使い方・設定
使い方はとても簡単で、プラグインを「新規追加」で検索し、インストール。そして有効化。ここまで他のプラグインと変わりません。
有効化すると「外観」メニューの中に「WP Theme Test」が表示されるので選びましょう。
するとこんな画面になります。
- ここのメニューからテストしたテーマを選びます。
- プラグインを作動させるなら、「On」にしてください。
- パラメーター機能を「有効」にすると表示されているURLへアクセスするだけでもテーマを見れます。
- ログインユーザー以外にIPを入力すれば、テーマテスト画面を見れます。
このプラグインを使ったところ、管理者としてログインしていた私は「Cocoon」になった時のページを見ているにも関わらず、他の人は「Simplicity」テーマのままでいつも通りにアクセスしていました。（スマホで確認しました）
IPアドレス指定も友人のものを教えてもらい、彼女のIPを入力したところ、無事「cocoon」テーマを見られていました。そしてその彼女から「絶対こっちがいいよ。見やすいし、早い」と言われ、テーマ変更の後押しされました。
が、簡単にトラブルがあればテーマ変更できないものです。そしてトラブルが1つ発生しました。
Cocoonテストで発覚した問題
テスト用プラグイン「Wp Theme Test」で見た目の変更をしていた時発覚した問題は、「グローバルメニュー」に表示させている「カテゴリ」に説明文が挿入されてしまい、レイアウトがぐちゃぐちゃになっていることでした。
グローバルメニューに説明文が挿入される
こんな感じで、カテゴリの説明文が入っており、レイアウトが崩れてしまってました。
「Cocoon」のフォーラムでは同様の問題が既に出ており、解決策があり、その通りしてみることに。
解決方法
「外観」から「メニュー」を選び、使用中のメニューを選びます。そして上部にある表示オプションを出して、「説明」にチェックを入れました。
するとメニューを見ると「説明」が表示されるようになったので、文章を削除しました。
改めて「グローバルメニュー」を見ると、説明文は消えて、レイアウト崩れもなくなりました。
グローバルメニューのレイアウト崩れは、テーマを変更できない主な原因になります。しかしこうして解決できたので、私はこの時点で「Cocoon」へのテーマ変更を確定しました。
Cocoonに変更したら最低限やるべきこと
「Simplicity」から「Cocoon」にテーマ変更する際に真っ先にしなくてはいけないことがいくつかあるので、簡単に列挙しておきます。
- GoogleアナリティクスのIDを入力
- GoogleサーチコンソールのIDを入力
- Simplicityの設定を引き継ぐ
- SSL化していたら、内部URLをSSL化（簡易版）にチェックを入れる
- ヘッダー画像やロゴ画像を変更（初期はCocoon画像です）
- Googleアドセンスをしているなら、アドセンス入力をする
- 目次用プラグインを使っていたら停止する（ダブります）
- SNSの設定（ツイッターやFacebook、はてぶ等）
1から5までは確実に速やかに。6から8は間違わないようにしっかり設定していきたいですね。
Cocoonにテーマ変更後に出て来た問題
「グローバルメニュー」のレイアウト崩れをやっつけたら、特に大きな問題はないように思われました。が、そうではありませんでした。Googleアナリティクスを見ていたら、「404」エラーが記録され始めたのです。
「404 not found」エラーが発生
今までにも404が発生しているとは思うのですが、突然増えたら流石に慌てます。これがエラーが出ていた時のアナリティクス。
テーマを変更した8/8だけで49回も404をカウントしていました。どこで発生しているのかを調べなくてはいけません。私は404ページを教えてくれるプラグインを探し、「404 to start」というプラグインを紹介しているブログさんを発見しました。
まさに私が探していたものです。ブログ主様ありがとうございました！というわけで早速当該のプラグインをいつも通りにインストールしました。
プラグイン「404 to Start」
「404 to Start」は、どのアドレスにアクセスしようとして「404」になってしまったのか、間違えたURLを教えてくれるプラグインです。試しに有効化した後、わざとURLを間違えて入力したら、その間違えて入力したアドレスがメールで届きました。素晴らしい。
設定、使い方
サイドメニューの設定タブを選ぶと「404 to Start」のタブがるので選びます。
こちらが設定画面です。
まず、間違ったURLにアクセスした時どうするのかを決めます。リダイレクトするのか、e-mailで通知してもらうか決めましょう。私はどこで404が発生しているのかを知りたかったので、リダイレクトを「off」にして、メール通知にしました。
404になっていたページ
「404 to Start」を有効化すると、404エラーのメールが続々と届き始め、その膨大さに愕然としました。というのも、記録された404よりも明らかに多いメール数だったからです。
メールで届くエラー内容には、間違っているURL以外に、どんな端末、IPから届いているのかが判るようになっています。そしてその記述されていた情報を見ると無闇矢鱈とアクセスしてくるbotの記録までありました。というわけで、これを機会にエラーのURLの対策に加え、有害なbotを排除することにしました。
404エラーの犯人
昨日から今日にかけて届いた「エラーメール」の情報を元に対策をとっていきました。
迷惑bot「MJ12bot」を拒否
8割以上を占めていたのは、MJ12botでした。分単位でタグやらプラグインなどあらゆるものに手当たり次第にアクセスしてきていました。なんなのこいつ！
ちなみに届くメールはこんな感じで、MJ12botが来ていると判ります。
他のbotは、Googleさん、Appleさんなどでした。でも数はさほどありません。MJ12botに比べたら全く問題ないレベル。というか、本当にMJ12botがひど過ぎです。あまりに酷いのでMJ12botを調べてみたら、その素性も最悪だと知りました。
「MJ12bot」は、イギリスのMajestic12社による分散型Webクローラーだそう。
MJ12botでは、Webサイトのキャッシュ取得は行わず、ウェブサイト間のリンク関係をマップして検索エンジンを構築しており、404ページや301ページなどの存在しないページにもアクセスしていきます。このクローラーによって集積されたデータは、専用ツールを用いる事で自サイトのバックリンクに関するデータを取得出来るらしいですが、日本では馴染みが無さすぎです。ぶっちゃけ要らないです。
存在しないページにまでアクセスしてくるなんて非常に迷惑ですね。「MJ12bot」単独で調べてみると、サーバーへの負荷が掛かかって迷惑しているとお怒りのブロガーさんも多く居ました。
というわけで、こちらのブログ主さんの紹介されていた方法（htaccessに拒否コードを記述する）を実行しました。ちなみに記述したのは上記のブログ内にあったものをコピペさせてもらいました。ちなみにこのコードには「MJ12bot」ともう1つ嫌われ者のクローラー「FeedWordPress」も拒否する内容になっていました。
「FeedWordPress」は他のサイトのrssを購読するとその内容を自動的に取得して、別サイトに投稿できる・・・と言えば便利で聞こえもいいですが、要は「泥棒」です。こんなのがうちに来ているかどうかは不明ですが、記事を勝手に盗まれるのは流石に嫌なので一緒に拒否することにしました。
# BEGIN ===BlackList===
RewriteCond %{HTTP_USER_AGENT} MJ12bot [NC,OR]
RewriteCond %{HTTP_USER_AGENT} FeedWordPress [NC]
RewriteRule ^.* - [F]
# End ===BlackList===
ワードプレスが入っている階層にある「htaccess」ファイルをひらき、一番最後に追記しました。すると「MJ12bot」記載のエラーメールがぴたりと止まりました。
＊htaccessに記述をしたり、何らかの変更をする時には必ずバックアップを取った上で行いましょう。ちょっとのミスでサーバーエラーを引き起こします。
詳しくは教えて下さったブログさんで確認して下さい。
アップルタッチアイコン
エラーメールを更に調べるとスマホなどのアイコンとして設定している、されていることのある「アップルタッチアイコン」を探しに来ていることが判りました。アドレスを見ると「apple-touch-icon.png」や「apple-touch-icon-120×120.png」にアクセスしようとしています。
こちら届いたエラーメールです。私のiPhoneからタッチアイコンをクリックしてアクセスしたのでリファラーはありません。
アップルタッチアイコンの120×120のサイズにアクセスしようとしたら404になったようです。そこで私は152×152で「apple-touch-icon.png」という名前でアイコンを作って、直にワードプラスにアップロードしました。すると404エラーを返されなくなりました。これで解決です。
存在しないURL
実在するbotが、手当たり次第にアクセスしてきたり、アップルタッチアイコンを求めてapplebotがくるのは対処できました。しかし解決できない404がありました。それは不特定のbotが過去に使っていたプラグインやテーマへアクセスしてくることです。
既にないページを復活させることはできません。それにたまにやってくる良い子か悪い子か判らないbotを拒否するわけにもいきません。というわけで、この問題は様子見することにしました。
ただ気になるのは随分昔に使っていたテーマでサーバーからも削除したものに何故アクセスしてくるんでしょうね？不思議です。
プラグインを停止
分単位で手当り次第にサイト内を回る「MJ12bot」やアップルタッチアイコンを入れたおかげで、エラーメールは減りました。とは言え、botはその特性上、ひっきりなしにサイトに来るので404エラーがどうしても起こります。
なので、またGoogleアナリティクスに「404」が沢山記録されたら、再びこのプラグインを使おうと思います。
Googleアナリティクスからbot除外
恥ずかしながら、私はGoogleアナリティクスを使いこなせていません。たまーに覗くくらいなのです。でも今回初めて404エラー発生に気付けたりして、その有用性に気がつきましたので、アクセス数などをちゃんと管理できるように設定を見直すことにしました。
すると「bot」などのアクセスを除外することができると判ったので、設定しました。とても簡単です。まずGoogleアナリティクスのページに行き、設定ボタンを押します。
ビューは一番右側にあります。「ビューの設定」を押して、少し下にスクロールすると「botのフィルタリング」があるので、チェックを入れ、保存します。これで完了です。
しかし、このフィルターを有効にしてから「PV数」ががくっと落ちてしまいました。しかしその数字は、プラグインJetPackで計測されている数字に非常に近い物で、よりリアルなアクセス数になったのだと思います。
AMPエラー
もうエラーは無いだろうと思っていたのですが、Googleサーチコンソールから怖いタイトルメールが通知されました。そのタイトルは「https://www.select-japan.com/ で「AMP」の問題が新たに検出されました」というものです。
でも「AMP」の設定など弄っていません。なので早速サーチコンソールに確認しにいくと「HTML タグの禁止された用法、無効な用法（重大な問題）」が10件ありました。
一体何が問題なのかを調べるためにAMPテストをしました。すると「AMPページではありません」という表示。
しかし当該のページはAMPページを作るように設定されており、「作らない」にチェックも入っていません。となると考えられる事は二つ。「Cocoon」の設定でAMPに関する設定箇所がどこかにあるか、私にはどうにもできないレベルの問題かです。
でも最初に思いついた通り、AMPの設定箇所がありました！「Cocoon設定」の中に「AMP」の項目があり、チェックをいれて有効にすれば良かったのです。サーチコンソールで知った「AMPエラー」を起こしていたページをテストしたら全てグリーンのOKという結果に。
なんとあっけない。
未解決の問題
もうこれで大丈夫！と思ったら、変則的に発生する不具合がありました。それは内部リンクを張ったときの表示の違いです。
ブログカードの表示がおかしい（解決）
通常ならURLを入力すると「記事のタイトル」「説明文」が表示されます。
しかしどういうルールなのかはわかりませんが、URLを張っても説明文が表示されないことがあります。こんな感じ。
ひょっとして「ディスクリプション」が入っていないのかな？と思ったので当該のページを見ましたが、ちゃんと入力されていました。他のページも同じように説明文ではなくURLが表示されるものもあります。
この問題の解決は私には難しそうです。なので「Cocoon」の次のバージョンが配布され、アップデートしてもまだ直らない場合は、フォーラムで質問しようと思います。
2018/8/20 追記
いつの間にかURLだけで表示されるエラーが治っていました。わいひらさんすごい〜！というわけで今の所、何の不具合もない状態になりました！
ツイッターシェア数の表示（2018/8/26 追記）
Cocoonではツイッターのシェア数が表示されないのがデフォルトです。でもそれが寂しいので表示させる方法を教えてもらいました。これはPHPファイルの改造を行うのでくわしくは当該記事をどうぞ。
最後にひとこと
それにしても新しいテーマ「Cocoon」は凄いです。これを無料で配布してしまうわいひら氏は何ですか、神様ですか。というわけで、これからお世話になります！
