Wordpressの古いテーマを新しいテーマに外観はなるべく変えずに変更した話
最近仕事で、とても古いWordpressのテーマを使っているサイトを、最新のテーマに変更する仕事をしました。その備忘録として書いておきます。
まず前提条件。
・旧テーマはTCDを使ったものだが、全くバージョンアップされていない状態。
・件のウェブサイトは外注で作った物の、詳しい資料が全くといって良いほど残っていない。当時の担当者や経緯を知っている人もいない。
・マニュアル閲覧の為のIDとパスは残っていたが、バージョンアップするために必要なIDとパスは紛失。そもそも、引き渡されたかどうかすら不明。
・外注先に問い合わせるにも時間が経ちすぎているし、徒労に終わる可能性が大。
・古いPHPバージョンとの依存関係にあり、バージョンアップ出来る限界はPHP5.6まで（最新は8.1）
・私は情報系の教育機関は出ておらず、殆どが今の会社に入社してから独学（大体トータルで1年とちょっとくらい）。しかも今回の件に関連して触れるのはHTMLとCSS、後はJavascript位で、PHPは全く触っていない。
こんな感じです。
PHPの依存関係については、古いバージョンでは使われてた記述が最新のPHPでは使えなくなっている為、その部分でエラーが出てしまっているという事です。
当初（私が入社して間もなくの頃）は精々一部が表示できないくらいだったのですが、現在では全く表示不能になります。
恐らく正攻法としては、PHPの記述を修正するというリファクタリングを行うべきなのでしょうが、相当にPHPに慣れているならともかくこれから学ぶのでは時間がかかりすぎます。
しかし、既にWordpressの動作下限のバージョンがPHP5.6と限界であり、このまま放置すればいずれWordpress本体のバージョンアップもままならなくなります。
また、プラグイン関係も上手く動かないものが多く、このまま放置していればにっちもさっちも行かなくなることが目に見えています。
という訳で色々と調べ考えた末に、以下のような方法を取ることにしました。
・使うテーマを変更する。使用するテーマはlightning。理由としては、多数使われているテーマの為情報が豊富にある、廃れにくい（バージョンアップされ続ける）、無料であるといった所です。
・以前使っていたテーマによる外観は可能な限り維持する。
・その為にlightninを親テーマとして子テーマ（lightning-child)を作成し、そこに必要な記述を行う。こうすることで、lightningを常に最新に保つとともに、以前の外観を維持することを実現する。
・但しその場合でも、PHPによる追加記述を行うと、いずれPHPのバージョンアップ等により再び同様の事が引き起こされる可能性がある。その為、子テーマでPHPによる追加の記述は一切行わず、CSSの追加記述のみで済ませる。
・今回の改修は長期間かつ大幅な修正になることが予想された為、テスト環境を余っているドメインに構築しそちらで作業を行い、完了してから本番環境に移す。
これが最終的にたどり着いた方針です。
そして、結果から言えば大規模なサイトという訳でも無かったので、テスト環境の構築から数えて大体2週間くらいで何とかなりました。
むしろ、上記方法を考え付くまでの情報収集や方針の練り上げの方が大変でした。
因みに作業していく上で、簡単に終わった部分と大変だった部分が有りますので、その点について書きます。
１．簡単に終わった部分
これは、固定ページとして作成した部分に関する部分です。
何せそこに記述されているclassやidに関する部分を全て子テーマの方に移せばよいだけなので、旧テーマのCSSの中身をコピペするだけの簡単なお仕事です。
元々のCSSはファイルが分かれてましたが、子テーマではstyle.cssに統一。
流石にcss内でコメントで区切る位はしましたが。まあそれでも700KB程度しかならなかったので、そこまで問題にはならないでしょう。
２．大変だったった部分
これはテーマに関する部分の記述です。メニュー部分やサイトロゴなどのヘッダー部分、フッター部分やウィジェットエリア等ですね。
lightningというテーマの外観を決定しているclassやidと、旧テーマのclassやidが違うので、単にcssの中身をコピペしても当然上手く行きません。
その為に、まずは新たな子テーマを適用した上で使用されているclassやidを調べ、記述の内容を特定し、元のテーマのスタイルに変更する作業が必要な訳です。
この為に必須になるツールがあります。
まずは何と言ってもchromeもしくはchrome系のブラウザ。これの検証機能が無いと、今回のような作業は到底不可能です。
この検証機能は、現在表示されているページの記述(HTML)を表示及び参照し、<DIV>～</DIV>や<P>～</P>といった要素を選択すると当該部分がページのどの部分に当たるか視覚的に表示（色分けや点線表示などで）、おまけにその部分にどのようなスタイルが当てられているかというCSSの記述を全て表示してくれるという神機能です。
しかも、そのままHTMLの記述やCSSの記述を仮想的に変更したり、あるは適用しているスタイルを外したりすることで、どのような変化が起こるかすぐに確認できるという素晴らしさ。
正直言ってこの機能がなかったら、そもそもこんな作業を行うことを考える事すらしなかったでしょう。
後はこの機能を使って、地道にclassやidを特定し、修正及び検証を行っていきました。
次にテキストエディタ。上記の検証機能はあくまで仮想的に試すだけなので、実際に元ファイルに変更が加えられるわけではありません（当たり前ですが）。
その為に変更後のスタイルを記述していく必要がある訳ですが、これもまた適切なテキストエディタを使わないと極めて困難です。
お勧めはVisualStudioCode、もしくはSublime Textです。
ぶっちゃけ、今ならVisualStudioCodeを使っていれば間違いないと思いますし、敢えて他のテキストエディタを探す必要が無いほど機能も充実しています。おまけに無料。
ただ、私は以前からSublime Textを使用しており、今回の作業も主にこちらを使っていたので、一応そちらも挙げました。
しかし、やはりプログラムを書くという観点から見ると、isualStudioCodeの方が合理的な作りだとは思います。
なお、他にも色々とテキストエディタは有りますが、最低でもHTMLとCSSを書く上での補助機能がある、あるいは追加できることが必須です。
一度経験してみれば分かりますが、この補助機能があるのとないのでは本当に天と地ほどの差があります。
カッコやダブルクオーテーションの漏れ、全角スペースの警告、各種要素の色分けなどがあるのと無いのでは、多分効率が2倍とか3倍とかでは収まらないほどの差も付きます。
最後に画像編集系ソフト。私はphotoshop CS6を持っているのでそれを使いましたが、まあフリーソフトのGIMPでも事足りるでしょう。
これはこれまで作業して痛感した事なのですが、画像の大きさが揃ってない物をスタイルで何とかつじつまを合わせようとすると、結局どうにもならなくなるという事を痛感したからです。
現在におけるデザインの主流はグリッドデザインであり、それに基づいてレスポンシブ対応していることが殆どです。
その為に、僅かにでも大きさが合わない画像を並べると非常に目立ちます。
画像を編集するのって結構面倒で、ついつい横着してCSSで何とかならないかとやりたくなってたんですが、正直それで最終的に上手く行ったことが有りません。
その為に、少しでも表示の崩れがあったら必ず画像のサイズを確認し、揃えるようにしています。
ざっとこんな感じで作業を行いました。
本番環境に移行してから気付かなかった表示の崩れなどが有ってそこからまた調整しましたが、概ね無事に作業完了できてほっとしています。
これでようやく古いPHPバージョンへの依存に悩まされる日々も終わったので、色々とやりやすくなりました。
今後は随時更新していける仕組みになったので、その状態を維持し、依存関係はなるべく作らないような仕組みで構築していきたいと思います。
この記事が気に入ったらサポートをしてみませんか？