テーマを変更して失敗した事と気付いた事をいくつか

数日前にテーマをWpTHKからSimplicityに変更した事で不具合と言うほどではありませんが気になる部分がそれなりに発生したので、全てのエントリーに対して見直しをかけていたら思った以上に時間がかかってしまいました。

スポンサーリンク

テーマを変更した事で発生したトラブル

トラブルと言うと少し大げさではありますが、テーマを変更した影響で修正する事になった点をいくつか挙げてみたいと思います。元を辿ればデフォルトのままにしていれば良かったものを私が余計な事をしていたり、間違った使い方をしてたせいなんですけどね…

画像の右側に余白が出来てしまった

これはテーマを変更する前の話になりますが、WpTHKのPC表示でのメインカラム幅を基準にサムネイル大サイズを530pxに設定していたのがマズかったようです。少しでも画像を軽くしてブラウジング速度に影響が出ないようにと思っての事でしたが、却ってそれが裏目に出てしまいました…Simplicityではメインのカラム幅が680pxなので、結果的に画像の右側が150px空いてしまう事に。

※2016/12/12 追記

メインのカラム幅が530pxだったのは私がモニターを変更した際に1152 x 864という何とも中途半端な解像度にしていたせいでした…1280 x 960だと710pxだったので、いずれにしても右側はガラ空きだったわけです。

WpTHKでも低解像度のPCかタブレットから見た場合、サイドバーが下に回り込んでメインのカラム幅が広がるので、常にその状態だったのではないかと思いますが、何れにしてもPCかスマホかという両極端な状態しか想定していなかった為に気付く事が出来ませんでした。幸いアクセス解析を見る限りではその解像度で見てる方はほとんどいなかったようですが、完全レスポンシブなサイトを目指している以上は避けて通れない問題だと思います。

そこで修正する事になるわけですが、WordPressではエントリーにメディアを挿入する際に自動的に画像のサイズがタグに設定されてしまうので、もう一度手作業で画像を編集し直すしか方法がありません。

  • メディア設定から変更したいサムネイルのサイズを設定
  • サムネイルを全て再作成(プラグイン使用)
  • 投稿を編集で開く
  • 画像をクリックして編集
  • サムネイルのサイズを確認して更新

画像のサイズが全て縦横固定だったら力技でまとめて更新する方法もありますが、縦のサイズがバラバラなので横だけ一括置換しても比率がおかしくなるんですよね…仕方が無いのでこの方法で全エントリー分を手動で修正しました。

まだ30件ほどしかエントリーが無いのでそこまで大変でも無かったですが、これが100件や200件あったらと思うとゾっとしますね。と言うかさすがにそこまでいってたら私も放置したと思います、マジな話。

とりあえず今は暫定的な対応としてサムネイル大の横幅を680pxにして、メインのカラム幅がそれ以上になる時は全て左寄せかセンタリングで統一する方向で考えていますが、いっそひと思いに1200pxくらいに大きくしてしまえばそういった心配も無くなるのかな…でも表示上は小さくなっても実際のファイルサイズが大きいと読み込み速度は当然遅くなりますから、それでは本当にモバイルに優しいサイトと言えないのが悩ましいところです。

テーマ独自のスタイルを利用していた

特定の段落を枠で括りたい場合に見た目がカッコいいからという理由だけで、WpTHKを使っていた時に何でも引用スタイルで括っていたのが失敗でした。これはもうそもそもが引用以外の目的で使うものでは無いので、手間を惜しまずにcssを使ってスタイルを作るべきだったと反省しています。

とか言いつつ、今はちゃっかりSimplicity独自のスタイル(infoボックスやdangerボックスとかそういうのです)を利用している部分があるので、もしまた違うテーマに変更した場合を考慮して、今の内に自分で色々と作っておいた方がいいかなとも思い始めました。

今回はスタイルだけなのでそれほど深刻な影響はありませんでしたが、これがテーマ独自で持っているショートコードだったりすると、変更前のテーマでは何かが表示されていた場所にコードがそのまま表示される事になるので注意が必要です。ショートコードの機能によってはテーマの変更を諦めた方が良い場合もあるかもしれません。

今回の修正対応で役に立ったプラグイン

修正方法が地道に1つずつ見ていくしか無いものも中にはありましたが、プラグインを利用する事でまとめて対応が可能なものはしっかり使わせていただきました。

Force Regenerate Thumbnails

サムネイルを一括で再作成してくれます。こういう事でも無ければまず出番の無いプラグインと言えますが、おかげで今回は非常に助かりました。

Admin Post Navigation

全てのエントリーを順番に開いて直す必要があったので、一覧に戻らずに前後のエントリーに移動出来るのはありがたいです。

Search Regex

投稿・固定ページの特定文字列を一括置換出来るプラグインです。全てのエントリーで使用しているクラスセレクタをまとめて変更するような場合に便利です。ただ、失敗すると取り返しがつかなくなる可能性もあるので、事前にバックアップを取って慎重に取り扱う必要はありそうです。

テーマの変更で影響が出ないように気をつける事

それなりに大変な目には遭いましたが、改めてWpTHKとSimplicityそれぞれのテーマの良い所も再確認出来ましたし、これはこれで良い勉強になったと思っています。とりあえず、今回の経験を基に今後テーマを変更した際に影響が出ないよう注意すべきポイントを何点か考えてみました。

  • テーマ独自のショートコードやスタイルには極力頼らない方向で
    スタイルはcssで対応可能なら使うのもあり
    ショートコードは機能によってテーマ変更を見送るべきか
  • 画像のサイズと表示位置
    汎用性のあるサイズを見極める必要あり
    解像度より小さい場合、センタリングか指定無しかを統一
  • テーマの機能とプラグインの競合に注意
    プラグイン停止かテーマ側の設定OFFで対応出来るなら問題なし
  • 自分で作成したクラスセレクタ以外は見直しが必要
    テーマ毎に違うので避けようが無いが基本的にcssだけで対応は可能
  • 解析タグ等の埋め込みに関しては要事前確認
    カスタマイザーから設定出来無い場合は自分で記述する必要あり
  • 有効化する前にまずはライブプレビューがお約束
    style.cssは先に修正してアップロードしておく

WordPressでは文章を書くだけでタグやスタイルは一切使わないという方はこの限りではありませんが、WordPressのテーマは考え無しに変更するものでは無いと感じました。変更すればどこかしら手を加えなければいけない部分が少なからず出てくるでしょう。しかし、それを承知の上でそれでもあえて変更したいという場合もあるかと思います。そんな時に備えて普段からテーマを変更した際に影響が出にくいような構造を意識しておくと、いざという時に大ハマリしなくて済むのでは無いでしょうか。

スポンサーリンク
トップへ戻る