ブログテーマ移行時の2つの失敗「Simplicity2」⇒「Cocoon」

雑記

心機一転のなまずんです。
8月12日にブログテーマを「Simplicity2」から「Cocoon」に変更しました。

WordPressテーマ「Simplicity2」を「Cocoon」に変更しました【比較・レビュー】
七変化のなまずんです。 ブログテーマをわいひらさん作の「Cocoon」に変更しました。 ちなみに,以前使っていた「Simplicity2」もわいひらさん作。 2018年7...

Cocoonは2018年7月に正式リリースされた無料で使える良質・高機能なテーマです。
Simplicityと完全な互換性はないものの後継版で,約2時間ほどでウェブサイト自体は移行できました。
上記記事に書いたとおり,良い点が満載です。

ただ,テーマに合わせた変更や失敗のために,移行作業とは別に合計12時間近くを費やしてしまいました。

スポンサーリンク

「アイキャッチ画像の縦横比が変わった」事件

Simplicityは正方形,Cocoonは16:9

最大の問題はアイキャッチ画像サイズが変わったことでした。
Simplicityの基本は正方形です(Simplicityのサンプルサイト)。

一方,Cocoonは16:9が標準です(Cocoonのページより)。

16:9になってデザインが洗練されたものの,アイキャッチ画像をそのまま流用すると上下が見切れてしまいます。

約10時間掛けて,全てのアイキャッチ画像を入れ替え

もともと私のサイトのアイキャッチ画像は文字列ですので,見切れると違和感……(笑)。

また,昔に作ったアイキャッチ画像はカテゴリ名をそのまま入れる方式で作っていました。
最近はタイトルと透過した写真・図を入れるようにしているので,これを機に過去のアイキャッチ画像の整理を行うことに。

アイキャッチ画像は記事の顔ですから大事にしたいという思いもありました。

数時間で完了するとの甘い予想は見事に外れ,結局10時間ほど要しました。写真を入れ替えるだけでなく,文字を入れる必要があるなど作業は予想以上に大変でした。

なお,画像編集はAdobe Photoshop Elementsで作成しています。
Windows付属のペイントでも作成可能ですが,写真の上に文字を重ねる編集はレイヤー構造を持つソフトのほうが適しています
画像サイズは320 × 180がデフォルトであるものの,PCで見るときに小さく感じそうなので私は640 × 360にしています。

「パーマリンク設定」事故

パーマリンクとは

WordPress界で恐れられている現象の一つが「パーマリンク設定の変更」。

パーマリンクとは個別の投稿やカテゴリーなど,一つひとつのページへのリンクURLです。
パーマリンク設定とはそのURL構造の設定のこと。

サイト構築時にURLの構造を決定してからは変えないことが基本とされています(設定を変えてしまうとこれまでに張ったリンクが切れてしまうため)。当然,変えてはいけないことは私も知っていました。

しかし,事故は起こってしまったのです。

事故の経緯

全76記事を移行してアイキャッチ画像の再作成を進めること9時間。作業もいよいよ最終盤に差し掛かったところで,最初期に作った記事のうち3つになぜか404エラーが発生してしまいました。

理由は不明ながら,リダイレクトループが発生していたようです。修正方法をGoogle検索すると,解決策の一つに「パーマリンクを一度変更して,もとに戻す」という情報が得られました(これで直る場合も理由は不明)。

パーマリンク設定を変えてはいけないことを知っていたものの,「一度変更して,もとに戻す」だけなら問題ないだろうと安易に考えて実行

その後,しばらくして異変に気づきます。

なまずん
なまずん

なぜか全ページの内部リンクが切れてる……

事故の原因

事故の原因は主に2つです。

パーマリンク設定の仕様が変わったらしい

私のウェブサイトのURLはご覧の通り,「年」「月」「カテゴリ」「記事番号」という構造になっています(それがSEO的に良いかどうかは置いといて)。

これはSimplicityのときから同じです。
それなのに,なぜ全てのリンクが変わってしまったのか……と衝撃を受けながらチェックしていると,1箇所だけ変更されている部分が。

それはSimplicityでは記事番号が「post-(数字)」であるのに対し,Cocoonでは「(数字)」になっているのです。

原因はよくわかりませんが,Simplicityの見本ページでも「post-」が入っているので,これは仕様なのかもしれませんね。完全に想定外の出来事でした。

初期は個別にURLを設定していた

この点は私の完全なるミスです(笑)。
最初は「URLもこだわらなきゃ!」と謎の意気込みを持っていたので,個別記事に凝ったURLを付けていたのです。

面倒になって途中からは全てパーマリンク設定そのままで運用していたので,すっかり忘れていました。そう,自爆です。

取り返しのつかないミスになるので,パーマリンク設定には気をつけましょう。思わぬ自爆につながらないよう,「変更して戻すつもりでも」必ずバックアップを取るようにしてください。

約2時間の作業

パーマリンク設定をいじったことで約2時間,余計な作業時間を取られてしまいました。
結果的にはよりシステマティックなURL構造を持ったサイトが出来上がったので良かったところもあります。しかし,作業としては疲れが残るものでした……。

作業工程としては内部リンク対策→外部リンク対策の順に行いました。

  1. 「post-」を取るという一括置換を行う
    ⇒プラグイン「Search Regex」を活用
  2. 目視で個別設定URLの内部リンクを確認
    ⇒発見次第,「Search Regex」で一括置換
  3. 外部リンク対策にリダイレクトを張る
    ⇒プラグイン「Redirection」を活用

「post-」を取る作業はそれほど時間はかかりません。文字列の一括置換を行うプラグイン「Search Regex」を活用しました。活用方法は詳しいサイトに譲ります。
以前も使ったことがありますが,非常に便利なプラグインです。

Search Regexプラグイン(記事やコメント内容を一括置換) - WordPressプラグインの一覧
Search Regexプラグインは過去に投稿した記事の内容を一括置換することができるプラグインです。記事の本文やコメントの内容など、対象を指定して指定した文字列に一致するものを一括して別の文字列に置換することができます。ここではSearch Regexプラグインのインストール方法と使い方について解説します。

次に個別設定したURLの再設定。これは「目視で確認」→「一括置換」という流れで進めました。
一括置換を行うことで次第に修正すべきリンクは減り,ここまでで約1.5時間で76記事の修正が完了しました。

内部リンクであれば置換による修正が可能ですが,外部リンクの場合はリダイレクトを設定しなければなりません。
リダイレクトを簡単に作成できるプラグイン「Redirection」で,外部リンクが張られていそうな記事にはリダイレクトを張りました(オフ会記事や外部流入の多いページでは実装済みです)。

全ての記事にリダイレクトを張るのは難しいですので,今後はリンクエラーの発生連絡が来た場合に対応しようと思います。もし,リンク切れがおきている場合にはご一報いただけますと幸いです。
私にとっては手痛い勉強代でした。

お問い合わせ

とにかくバックアップは重要

今回の件で痛感したのはバックアップの重要性です。
これらの「事件」を通じてサイトのブラッシュアップに結果的にはつながりました。
取り返しがついたから良いものの,記事数が増えるに従って問題が生じたときのインパクトは大きくなります。

記録として残していく上でも,きっちりバックアップをとる体制を敷きたいと思います。

コメント

▼ ▽ ▼

当ブログでは有用な情報提供に努めていますが,情報の確実性を保証するものではありません。また,情報の誤り等がありましたらコメント等でお知らせいただけますと幸いです。